使用ViewPager实现导航页以及滑动标签页的效果

不说闲话，先上 效果图：

不用管，中间的录制菜单栏，那个是夜神模拟器自带的屏幕录制功能。

首先是布局文件：

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="40.0dip"
        android:background="#C0C0C0">

        <TextView
            android:id="@+id/text1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="第一标签"
            android:textColor="#000000"
            android:textSize="20.0dip" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="第二标签"
            android:textColor="#000000"
            android:textSize="20.0dip" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="第三标签"
            android:textColor="#000000"
            android:textSize="20.0dip" />
    </LinearLayout>

    <!-- android:scaleType="matrix" -->

    <ImageView
        android:id="@+id/cursor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/select"
        android:contentDescription="@null" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewFlipper1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></android.support.v4.view.ViewPager>

</LinearLayout>

view1.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="#008"
    android:layout_height="match_parent">
</LinearLayout>

view2.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="#080"
    android:layout_height="match_parent">
</LinearLayout>

view3.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#800"
android:layout_height="match_parent">
</LinearLayout>

三个view之间的区别在于背景颜色不同。

标签页下面会移动的横杠是一个红色的图片：

因为这个图片的长度和一个标签页的长度往往都不一样，所以需要手动设置这个imageView的长度，具体说明看代码：

package com.martsforever.owa.viewpager_example;


import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ViewPager viewPager;// ViewPager定义在xml中
    private ImageView underlineView;// 横向下划线
    private int currentIndex; // 当前标签位置
    List<View> viewPagerItems;//每一页显示的View
    int screenWidth;//屏幕宽度

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
    }

    public void initViews() {
//        初始化每一页的内容
        LayoutInflater inflater = LayoutInflater.from(this);
        View view1 = inflater.inflate(R.layout.view1, null);
        View view2 = inflater.inflate(R.layout.view2, null);
        View view3 = inflater.inflate(R.layout.view3, null);

        List<View> viewPagerItems = new ArrayList<>();
        viewPagerItems.add(view1);
        viewPagerItems.add(view2);
        viewPagerItems.add(view3);

        viewPager = (ViewPager) findViewById(R.id.viewFlipper1);
//        自定义PagerAdapter并设置OnPageChangeListener监听
        MyPagerAdapter adapter = new MyPagerAdapter(viewPagerItems);
        viewPager.setAdapter(adapter);
        viewPager.setOnPageChangeListener(adapter);

//        设置标签页监听
        findViewById(R.id.text1).setOnClickListener(this);
        findViewById(R.id.text2).setOnClickListener(this);
        findViewById(R.id.text3).setOnClickListener(this);

//        获取屏幕宽度
        Display display = getWindowManager().getDefaultDisplay();
        DisplayMetrics dm = new DisplayMetrics();
        display.getMetrics(dm);
        screenWidth = dm.widthPixels;
//        设置下划线的宽度
        underlineView = (ImageView) findViewById(R.id.cursor);
        ViewGroup.LayoutParams params = underlineView.getLayoutParams();
        params.width = screenWidth / viewPagerItems.size();
        underlineView.setLayoutParams(params);
    }

    class MyPagerAdapter extends PagerAdapter implements ViewPager.OnPageChangeListener {

        private List<View> views;

        public MyPagerAdapter(List<View> views) {
            this.views = views;
        }

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

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

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

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

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {

//            获取每一个标签页所占宽度
            int section = screenWidth / views.size();
//            currentIndex为上一次滑动所处标签页位置(0,1,2)
            Animation animation = new TranslateAnimation(
                    section * currentIndex, section * position, 0, 0);
//            重新设置当前页
            currentIndex = position;

            animation.setDuration(250);
//            动画结束后停留在当前所处位置
            animation.setFillAfter(true);
            underlineView.startAnimation(animation);
            Toast.makeText(MainActivity.this,
                    "您选择了第：" + (currentIndex+1) + "页", Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    @Override
    public void onClick(View v) {
        int index = 0;
        switch (v.getId()) {
            case R.id.text1:
                index = 0;
                break;
            case R.id.text2:
                index = 1;
                break;
            case R.id.text3:
                index = 2;
                break;
        }
        viewPager.setCurrentItem(index);
    }
}