属性动画实现viewpager改变页面的时候，带有指示条的动画效果

开始前先抱歉一下，之前两篇由于图片是直接粘贴不是上专插入，到发表时就消失了，所以前面两篇并没有效果的图显示。

在我们写项目时会经常用到viewpager与fragment组合来实现很多的页面，特别是App的导航，基本都是用它们来实现，而很多的在导航文字的下面都会有一条指示条，指示条随着页面的改变，会有个动画的过度，这样做更多的只是界面更友好，用户体验更佳而已。而与这些相关的的开源框架也很多，其中ViewPagerIndicator，JazzyViewPager都是比较常用的开源框架，功能也比较强大，但有时只有一个小地方用得上就要整个项目引进来还不一定很符合自己所要的效果，所以自己也可以写简单的实现，还是那句话，只要知道的实现原理或方法，用哪种方法都是看自己。

先看看效果：

由于不是动画，看图片看不出运行效果，无碍，到时自己试着写个就有效果了。下面就说说它的实现方法和部分关键代码。

布局的代码我就不帖了，一般刚学不久的人都能写得出来，只是下面的指示条，可以用View加上背景色来实现（其实用其它所有的View都可以实现的，这里用View只是为了之后不用强转）。布局完了后就写Activity代码了，

windowsWidth = getActivity().getWindowManager().getDefaultDisplay().getWidth();//得到屏幕的宽度
jliuViewPager = (JliuViewPager) view.findViewById(R.id.community_viewpager);//找到放置4个Fragment的容器

view1 = view.findViewById(R.id.fm_community_view1);
view1.getLayoutParams().width = windowsWidth/4;//先将下面的指示条宽度设为屏幕宽度的1/4
list = new ArrayList<Fragment>();
community_Board = new FM_Community_Board();
community_Friend = new FM_Community_Friend();
community_Recommend = new FM_Community_Recommend();
community_See = new FM_Community_See();
list.add(community_Board);
list.add(community_Recommend);
list.add(community_Friend);
list.add(community_See);

//初始化四个Fragment并加到一个list集合里
jliuViewPager.setPageAdapter(list, getFragmentManager());
jliuViewPager.setOnPageChangeListener(new TextView[]{textView1,textView2,textView3,textView4}, R.color.pink_DA1279, R.color.gray_818181,view1,windowsWidth/4);
textView1.setOnClickListener(this);
textView2.setOnClickListener(this);
textView3.setOnClickListener(this);
textView4.setOnClickListener(this);
return view;
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.fm_community_tv_board:
jliuViewPager.setCurrentItem(0);
break;
case R.id.fm_community_tv_recommend:
jliuViewPager.setCurrentItem(1);
break;
case R.id.fm_community_tv_friend:
jliuViewPager.setCurrentItem(2);
break;
case R.id.fm_community_tv_see:
jliuViewPager.setCurrentItem(3);
break;


default:
break;
}

}

看以上的代码，基本都有注释了，这里也不多做解释，那几个点击的监听只是为了点击文字时也能进行跳转，关键就在jliuViewPager.setOnPageChangeListener(new TextView[]{textView1,textView2,textView3,textView4}, R.color.pink_DA1279, R.color.gray_818181,view1,windowsWidth/4);这个方法里面，那看看这个方法的代码：

public void setOnPageChangeListener(final TextView[] textViews,final int selectedColor,final int unselectColor,final View view,final int howmuch) {

this.setOnPageChangeListener(new OnPageChangeListener() {
int oldpage;
float newtrans = view.getTranslationX();
ObjectAnimator objectAnimator;
@Override
public void onPageSelected(int arg0) {
kuadu = arg0 - oldpage;
newtrans = trans+howmuch*oldpage;
oldpage = arg0;
if (objectAnimator!=null) {
objectAnimator = null;
}
objectAnimator = ObjectAnimator.ofFloat(view, "translationX",newtrans,howmuch*arg0);
objectAnimator.setCurrentPlayTime(2000);
objectAnimator.start();
由于其它是与改变字体颜色相关的代码，所这里没有完全粘贴，这里做一下解释，首先 view.getTranslationX()得到view的当前的位置的最左边的坐标用来记录做设置动画的起始点，oldpage用来记录上一次所在的页面（由于点击也能改变页面，所以页面的跨度不一定为1，所以要记录上次改变页面前所在的页面），由当前页面减去上次改变前的页面就得到页面的跨度（为负时表示向左划动），由于每有一个页面的跨度的改变，指示条就要移动1/4的屏幕宽度，也就是上面方法里的howmuch个距离。知道了原理就可以写动画了，这里用的是X方向位移的动画objectAnimator = ObjectAnimator.ofFloat(view, "translationX",newtrans,howmuch*arg0);每次页面改变都在上次页面移动howmuch*arg0，过程在2000毫秒也就是2秒完成。newtrans的值到底是多少，是不是一个固定值？打印一下就知道，

从上面的打印信息知道，这个值是随着动画完成后而变的，也就印证了属性动画改变后是会改变控件本身的属性的，不像补间动画只是再画一个而不改变控件本身。所以上面的代码表示从控件当前的地方在X方向平移howmuch*arg0值的距离，正负代表移动的方法。

从代码看到，其实关键的代码也就只有objectAnimator = ObjectAnimator.ofFloat(view, "translationX",newtrans,howmuch*arg0);，只是记录一下改变前的页面算出移动距离就可以了。好了，关于这个效果的制作就写到这里，由于里面代码较少而且很多是自己封装的代码，还有不明白的地方可以一起交流，有错误的地方也请指出，一起成长。