ViewPager配合的标签背景动画效果

此贴个人的eoe连接

ViewPager配合的标签背景动画效果
http://www.eoeandroid.com/thread-578233-1-1.html

最近需要做一个ViewPager以及菜单的联合控制效果，菜单的背景有过渡效果。网上找了找没有太合适的，于是自己琢磨着写了一个简单的demo。代码不复杂，和大家分享一下实现的思想。

先看预览图：模拟器比较卡，看起来背景似乎位置不正确。实际效果是正确的。

ViewPager配合的标签背景动画效果

基本的想法就是在ViewPager的监听里判断滑动的方向，然后计算出背景图片的左侧margin值，动态改变就OK了。基本思想就这么简单，下面是代码，代码不是太严谨，大家借鉴一下思想就OK，可以根据需要和自己的理解进行相应的改动。
只有一个activity：

下面是Activity：

package com.zhengwei.viewpagerwithanimetab;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.RelativeLayout.LayoutParams;

public class MainActivity extends FragmentActivity {
private ViewPager viewPager;
private String[] mTitles = new String[] { "First Fragment !",
"Second Fragment !", "Third Fragment !" };
private List<Fragment> mTabs = new ArrayList<Fragment>();
private FragmentPagerAdapter mAdapter;
private ImageView bg;

private LayoutParams lp;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  viewPager = (ViewPager) findViewById(R.id.vpg_home);
  bg = (ImageView) findViewById(R.id.home_tab_bg);
  lp = (LayoutParams) bg.getLayoutParams();
  for (String title : mTitles) {
   TabFragment tabFragment = new TabFragment();
   Bundle bundle = new Bundle();
   bundle.putString(TabFragment.TITLE, title);
   tabFragment.setArguments(bundle);
   mTabs.add(tabFragment);
  }

mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

   @Override
   public int getCount() {
    return mTabs.size();
   }

   @Override
   public Fragment getItem(int position) {
    return mTabs.get(position);
   }
  };

viewPager.setAdapter(mAdapter);
viewPager.setOnPageChangeListener(new OnPageChangeListener() {

   @Override
   public void onPageSelected(int arg0) {
   }

   @Override
   public void onPageScrolled(int position, float positionOffset,
     int positionOffsetPixels) {
    if (positionOffset == 0) {
     return;
    }

    if (position == 0) {
     lp.leftMargin = (int) (positionOffset * bg.getWidth());
    } else {
     lp.leftMargin = (int) ((position + positionOffset) * bg
       .getWidth());
    }
    bg.setLayoutParams(lp);
   }

   @Override
   public void onPageScrollStateChanged(int arg0) {
   }
  });

}

@Override
public void onWindowFocusChanged(boolean hasFocus) {
  super.onWindowFocusChanged(hasFocus);
  if (hasFocus) {
   ((TextView) findViewById(R.id.tv_home_selection)).setWidth(bg
     .getWidth());
   ((TextView) findViewById(R.id.tv_home_focus)).setWidth(bg
     .getWidth());
   ((TextView) findViewById(R.id.tv_home_newest)).setWidth(bg
     .getWidth());
  }
}

public void myClick(View v) {
  Log.d("sys", "myClick");
  switch (v.getId()) {
  case R.id.tv_home_selection:
   viewPager.setCurrentItem(0);
   break;
  case R.id.tv_home_focus:
   viewPager.setCurrentItem(1);
   break;
  case R.id.tv_home_newest:
   viewPager.setCurrentItem(2);
   break;
  }
}

}

下面是fragment：

package com.zhengwei.viewpagerwithanimetab;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TabFragment extends Fragment
{
   private String mTitle = "Default";

   public static final String TITLE = "title";

   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
           Bundle savedInstanceState)
   {
       if (getArguments() != null)
       {
           mTitle = getArguments().getString(TITLE);
       }

       TextView tv = new TextView(getActivity());
       tv.setTextSize(20);
       tv.setBackgroundColor(Color.parseColor("#ffffffff"));
       tv.setText(mTitle);
       tv.setGravity(Gravity.CENTER);
       return tv;

   }
}

activity的布局：

下载连接：http://download.csdn.net/detail/lizhengwei1989/8868033

收取1分下载积分，有时候自己下一些资料没有积分。。。

秒客网

ViewPager配合的标签背景动画效果

相关文章