介紹

ViewPager 的Indicator實現兩種效果 如下圖所示：

效果一

效果二

佈局檔案：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width
 
="match_parent"
    android:layout_height="match_parent"
    tools:context="mgzxc.viewpagertab.MainActivity">
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation
 
="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ff0098ff"
            android:padding="10dp"
            android:text="我的好友"
            android:textSize
 
="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ffabcd"
            android:padding="10dp"
            android:text="我的群組"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#9988deab"
            android:padding="10dp"
            android:text="我的設定"
            android:textSize="20sp" />
    </LinearLayout>

    <View
        android:id="@+id/tab"
        android:layout_below="@id/ll"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="#ff0000" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_below="@id/tab"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</RelativeLayout>

Activity程式碼：

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager viewPager;
    private int[] imgs = {R.drawable.a, R.drawable.b, R.drawable.c};
    private ArrayList<ImageView> ivs;
    private int winWidth;
    private View tab;
    private int prePosition;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initDatas();
        viewPager = ((ViewPager) findViewById(R.id.vp));
        viewPager.setAdapter(new MyPagerAdapter());
        viewPager.addOnPageChangeListener(this);
        initTabs();
    }

    private void initTabs() {
        DisplayMetrics outMetrics=new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
        winWidth = outMetrics.widthPixels;
        tab = findViewById(R.id.tab);
        RelativeLayout.LayoutParams params=(RelativeLayout.LayoutParams) tab.getLayoutParams();
        params.width=winWidth/3;
        tab.setLayoutParams(params);
    }

    private void initDatas() {
        ivs = new ArrayList<>();
        for (int i = 0; i <imgs.length ; i++) {
            ImageView iv=new ImageView(this);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            iv.setImageResource(imgs[i]);
            ivs.add(iv);
        }
    }

    //效果一
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//        RelativeLayout.LayoutParams params=(RelativeLayout.LayoutParams) tab.getLayoutParams();
//      params.leftMargin=(int) (positionOffsetPixels*1.0f/3+position*1.0f*winWidth/3);
//      tab.setLayoutParams(params);
    }

     //效果二
    @Override
    public void onPageSelected(int position) {
        TranslateAnimation ta=new TranslateAnimation(TranslateAnimation.RELATIVE_TO_SELF, prePosition, TranslateAnimation.RELATIVE_TO_SELF, position, TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0);
        ta.setDuration(200);
        ta.setFillAfter(true);
        tab.startAnimation(ta);
        prePosition=position;
    }

    //state描述viewpager狀態變化：
    // 1 開始滑動
    // 2 手擡起
    // 0 變為靜止狀態
    @Override
    public void onPageScrollStateChanged(int state) {

    }

    public class MyPagerAdapter extends PagerAdapter{

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

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(ivs.get(position));
            return ivs.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((ImageView)object);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        viewPager.removeOnPageChangeListener(this);
    }
}

程式碼