关于顶部导航栏的切换（viewpager）

在实际开发中经常会遇到顶部导航栏切换的问题。我在开发中就遇到这个问题。在网上百度了很多资料。最后自己总结之后做出来了效果。现在想把自己的成果分享给大家。虽然代码有点low，不过效果缺达到了

首先我们先写一个布局

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

    <LinearLayout
        android:id="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="@dimen/activity_dimen_50"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/text1"
            android:layout_width="@dimen/activity_dimen_0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="text1" />

        <View
            android:layout_width="@dimen/line_heihgt1"
            android:layout_height="match_parent"
            android:background="@color/lineBackground" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="@dimen/activity_dimen_0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="text2" />
    </LinearLayout>

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="@dimen/size_divier"
        android:layout_below="@id/top"
        android:background="@color/lineBackground" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="@dimen/size_divier"
        android:layout_below="@id/top"
        android:background="@color/loginBg" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/imageView" />
</RelativeLayout>

然后新建一个actvity实现我们的效果

public class TextActivity extends AppCompatActivity implements View.OnClickListener {
    protected TextView ordinaryLookCar;
    protected TextView biddLookCar;
    protected ImageView imageView;
    protected ViewPager viewPager;
    private Adapter adapter;

    // 滚动线条动画
    // 图片的宽度
    private int viewW;
    // 页卡总数
    private static final int pageSize = 2;
    // 指示器的偏移量
    private int offset = 0;
    // 当前页卡编号
    private int currIndex = 0;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.yl_activity_publish_look_car);
        ordinaryLookCar = (TextView) findViewById(R.id.ordinaryLookCar);
        biddLookCar = (TextView) findViewById(R.id.biddLookCar);
        imageView = (ImageView) findViewById(R.id.imageView);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        ordinaryLookCar.setOnClickListener(this);
        biddLookCar.setOnClickListener(this);
        InitTextView();
        setAdapter();
    }

    /**
     * 初始化游标
     */
    private void InitTextView() {
        // 获取图片宽度
        viewW = imageView.getWidth();
        // 计算偏移量--(屏幕宽度/页卡总数-图片实际宽度)/2
        offset = (ScreenUtils.getWidth() / pageSize - viewW) / 2;
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ScreenUtils.getWidth() / pageSize, ScreenUtils.Dp2Px(1));
        params.addRule(RelativeLayout.ALIGN_BOTTOM, R.id.view);
        imageView.setLayoutParams(params);
        // = 偏移量
        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        // 设置动画初始位置
        imageView.setImageMatrix(matrix);
    }

    /**
     * 线条的滑动动画
     *
     * @param index 线条所在位置
     */
    public void onTranslate(int index) {
        // 页卡1 -> 页卡2 偏移量
        int one = offset * 2 + viewW;
        Animation animation = new TranslateAnimation(one * currIndex, one * index, 0, 0);
        currIndex = index;
        // True:图片停在动画结束位置
        animation.setFillAfter(true);
        animation.setDuration(300);
        imageView.startAnimation(animation);
    }

    private void setAdapter() {
        adapter = new Adapter();
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new Listener());
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ordinaryLookCar:
                viewPager.setCurrentItem(0);
                break;
            case R.id.biddLookCar:
                viewPager.setCurrentItem(1);
                break;
        }
    }

    /**
     * 手滑动事件的处理
     */
    class Listener implements ViewPager.OnPageChangeListener {
        public void onPageScrollStateChanged(int arg0) {
        }

        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        public void onPageSelected(int arg0) {
            onTranslate(arg0);
        }
    }

}

然后在添加上我们的adapter就大功告成了

public class Adapter extends PagerAdapter {
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    @Override
    public int getCount() {
        return 2;
    }

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

    @Override
    public int getItemPosition(Object object) {
        return super.getItemPosition(object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        TextView textView = new TextView(container.getContext());
        textView.setText("我是第" + position + "个界面");
        container.addView(textView);
        return textView;
    }
}

这个我们一个建议的关于viewpager顶部切换的小功能就完成了。希望对大家有所帮助