ViewPager的下滑线详解

（1）使用--//通过pagerTabStrip可以设置标题的属性private PagerTabStrip pagerTabStrip;private PagerTitleStrip pagerTitleStrip;

如下代码

package huahua.viewpager;import java.util.ArrayList;import java.util.List;import android.os.Bundle;import android.app.Activity;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentStatePagerAdapter;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.PagerTitleStrip;import android.support.v4.view.ViewPager;import android.util.Log;import android.view.ViewGroup;public class MainActivity extends FragmentActivity {private ViewPager m_vp;private fragment1 mfragment1;private fragment2 mfragment2;private fragment3 mfragment3;//页面列表private ArrayList<Fragment> fragmentList;//标题列表ArrayList<String>   titleList    = new ArrayList<String>();//通过pagerTabStrip可以设置标题的属性private PagerTabStrip pagerTabStrip;private PagerTitleStrip pagerTitleStrip;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);m_vp = (ViewPager)findViewById(R.id.viewpager);pagerTabStrip=(PagerTabStrip) findViewById(R.id.pagertab);//设置下划线的颜色pagerTabStrip.setTabIndicatorColor(getResources().getColor(android.R.color.holo_green_dark)); //设置背景的颜色pagerTabStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark));//pagerTitleStrip=(PagerTitleStrip) findViewById(R.id.pagertab);////设置背景的颜色//pagerTitleStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark));mfragment1 = new fragment1();mfragment2 = new fragment2();mfragment3 = new fragment3();fragmentList = new ArrayList<Fragment>();fragmentList.add(mfragment1);fragmentList.add(mfragment2);fragmentList.add(mfragment3);    titleList.add("第一页 ");    titleList.add("第二页");    titleList.add("第三页 ");m_vp.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager()));//m_vp.setOffscreenPageLimit(2);}public class MyViewPagerAdapter extends FragmentPagerAdapter{public MyViewPagerAdapter(FragmentManager fm) {super(fm);// TODO Auto-generated constructor stub}@Overridepublic Fragment getItem(int arg0) {return fragmentList.get(arg0);}@Overridepublic int getCount() {return fragmentList.size();}@Overridepublic CharSequence getPageTitle(int position) {// TODO Auto-generated method stubreturn titleList.get(position);}}}

在xml中如下

<android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent">                      <!-- 这里可以把PagerTabStrip替换成PagerTitleStrip看看效果有何不同 -->        <android.support.v4.view.PagerTabStrip            android:id="@+id/pagertab"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              />               </android.support.v4.view.ViewPager>

（2）自定义ViewPager的下滑线（推荐）

部分xml代码如下

<ImageView        android:id="@+id/iv_bottom_line"        android:layout_width="80dip"        android:layout_height="2dip"        android:scaleType="matrix"        android:src="@drawable/divider_1" />    <android.support.v4.view.ViewPager        android:id="@+id/vPager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:layout_weight="1.0"        android:background="#000000"        android:flipInterval="30"        android:persistentDrawingCache="animation" >    </android.support.v4.view.ViewPager>

然后是java代码

package com.aven.qqdemo;import java.util.ArrayList;import java.util.List;import android.content.res.Resources;import android.os.Bundle;import android.os.Parcelable;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentTransaction;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.Window;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;import com.demo.R;/** *  *  * @author avenwu [e-mail] *  */public class MainActivity extends FragmentActivity {private static final String TAG = "MainActivity";private ViewPager mPager;private ArrayList<Fragment> fragmentsList;private ImageView ivBottomLine;private TextView tvTabActivity, tvTabGroups, tvTabFriends, tvTabChat;private int currIndex = 0;private int bottomLineWidth;private int offset = 0;private int position_one;private int position_two;private int position_three;private Resources resources;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.main);resources = getResources();InitWidth();InitTextView();InitViewPager();}private void InitTextView() {tvTabActivity = (TextView) findViewById(R.id.tv_tab_activity);tvTabGroups = (TextView) findViewById(R.id.tv_tab_groups);tvTabFriends = (TextView) findViewById(R.id.tv_tab_friends);tvTabChat = (TextView) findViewById(R.id.tv_tab_chat);tvTabActivity.setOnClickListener(new MyOnClickListener(0));tvTabGroups.setOnClickListener(new MyOnClickListener(1));tvTabFriends.setOnClickListener(new MyOnClickListener(2));tvTabChat.setOnClickListener(new MyOnClickListener(3));}private void InitViewPager() {mPager = (ViewPager) findViewById(R.id.vPager);fragmentsList = new ArrayList<Fragment>();Fragment activityfragment = TestFragment.newInstance("Hello Activity.");Fragment groupFragment = TestFragment.newInstance("Hello Group.");Fragment friendsFragment = TestFragment.newInstance("Hello Friends.");Fragment chatFragment = TestFragment.newInstance("Hello Chat.");fragmentsList.add(activityfragment);fragmentsList.add(groupFragment);fragmentsList.add(friendsFragment);fragmentsList.add(chatFragment);mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList));mPager.setCurrentItem(0);mPager.setOnPageChangeListener(new MyOnPageChangeListener());}private void InitWidth() {ivBottomLine = (ImageView) findViewById(R.id.iv_bottom_line);bottomLineWidth = ivBottomLine.getLayoutParams().width;Log.d(TAG, "cursor imageview width=" + bottomLineWidth);DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);int screenW = dm.widthPixels;offset = (int) ((screenW / 4.0 - bottomLineWidth) / 2);//偏移量Log.i("MainActivity", "offset=" + offset);position_one = (int) (screenW / 4.0);position_two = position_one * 2;position_three = position_one * 3;}public class MyOnClickListener implements View.OnClickListener {private int index = 0;public MyOnClickListener(int i) {index = i;}@Overridepublic void onClick(View v) {mPager.setCurrentItem(index);}};public class MyOnPageChangeListener implements OnPageChangeListener {@Overridepublic void onPageSelected(int arg0) {Animation animation = null;switch (arg0) {case 0:if (currIndex == 1) {animation = new TranslateAnimation(position_one, 0, 0, 0);tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite));} else if (currIndex == 2) {animation = new TranslateAnimation(position_two, 0, 0, 0);tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite));} else if (currIndex == 3) {animation = new TranslateAnimation(position_three, 0, 0, 0);tvTabChat.setTextColor(resources.getColor(R.color.lightwhite));}tvTabActivity.setTextColor(resources.getColor(R.color.white));break;case 1:if (currIndex == 0) {animation = new TranslateAnimation(0, position_one, 0, 0);tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite));} else if (currIndex == 2) {animation = new TranslateAnimation(position_two,position_one, 0, 0);tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite));} else if (currIndex == 3) {animation = new TranslateAnimation(position_three,position_one, 0, 0);tvTabChat.setTextColor(resources.getColor(R.color.lightwhite));}tvTabGroups.setTextColor(resources.getColor(R.color.white));break;case 2:if (currIndex == 0) {animation = new TranslateAnimation(0, position_two, 0, 0);tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite));} else if (currIndex == 1) {animation = new TranslateAnimation(position_one,position_two, 0, 0);tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite));} else if (currIndex == 3) {animation = new TranslateAnimation(position_three,position_two, 0, 0);tvTabChat.setTextColor(resources.getColor(R.color.lightwhite));}tvTabFriends.setTextColor(resources.getColor(R.color.white));break;case 3:if (currIndex == 0) {animation = new TranslateAnimation(0, position_three, 0, 0);tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite));} else if (currIndex == 1) {animation = new TranslateAnimation(position_one,position_three, 0, 0);tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite));} else if (currIndex == 2) {animation = new TranslateAnimation(position_two,position_three, 0, 0);tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite));}tvTabChat.setTextColor(resources.getColor(R.color.white));break;}currIndex = arg0;animation.setFillAfter(true);animation.setDuration(300);ivBottomLine.startAnimation(animation);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}}}

这里我要多说说

InitWidth()这个方法

可以知道bmpW是下划线的width、offset=

offset = (int) ((screenW / 4.0 - bottomLineWidth) / 2);//偏移量

当3个tab项则如图。除以3,4个tab项则除以4。一个bmpW左右各有个offset。

int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量

//等同于position_one = (int) (screenW / 4.0);

所以如果有5个选项卡，将4.0改成5.0其余不变

(3)如果希望下划线在第二项：

android:scaleType="matrix"

然后

Matrix matrix = new Matrix();matrix.postTranslate(offset, 0);//若在第二项则是oneivBottomLine.setImageMatrix(matrix);