ViewPager+Fragment，NavigationTabbar，NavigationTabbar+Fragment

滑动操作是对用户体验非常友好的操作，如何实现呢，下面介绍第一种ViewPager+Fragment实现方式。

首先要准备一个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:orientation="vertical"
    android:background="#E5E5E5">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/textView01"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="40dp"
            android:gravity="center"
            android:textColor="#EEE685"
            android:background="#FF4040"
            android:text="第一页"
            />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#EEDFCC">
        </View>
        <TextView
            android:id="@+id/textView02"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="40dp"
            android:textColor="#D1D1D1"
            android:gravity="center"
            android:text="第二页"/>
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#EEDFCC">
        </View>
        <TextView
            android:id="@+id/textView03"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:textColor="#D1D1D1"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="第三页"/>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#EEDFCC">
    </View>

    <LinearLayout
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">
        <ImageView
            android:id="@+id/img01"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginBottom="5dp"
            android:scaleType="matrix"
            android:src="@mipmap/fragment01"/>
    </LinearLayout>


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

然后后台绑定，找到所有的控件，主要的操作是设置适配器，设置偏移量等等，完整代码如下：

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.viewpage);
    setview();
}

private void setview() {
    textView01 = findViewById(R.id.textView01);
    textView01.setOnClickListener(this);
    textView02 = findViewById(R.id.textView02);
    textView02.setOnClickListener(this);
    textView03 = findViewById(R.id.textView03);
    textView03.setOnClickListener(this);

    fragment01 = new Fragment01();
    fragment02 = new Fragment02();
    fragment03 = new Fragment03();
    mFragmentList.add(fragment01);
    mFragmentList.add(fragment02);
    mFragmentList.add(fragment03);

    mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);

    vp = findViewById(R.id.viewp_01);
    img01 = findViewById(R.id.img01);

    vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

        //页面在滑动过程中不停触发该方法：position：当前滑动到的位置，positionOffset：偏移量的百分比，positionOffsetPixels：偏移量的数值

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

        @Override
        public void onPageSelected(int position) {

            switch (position) {
                case 0:
                    textView01.setTextColor(android.graphics.Color.parseColor("#ffffff"));
                    textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                    textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));

                    textView01.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
                    textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                    textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                    //把当前位置传递到动画方法中，进行滑动
                    movePositionX(0);
                    break;
                case 1:
                    textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                    textView02.setTextColor(android.graphics.Color.parseColor("#ffffff"));
                    textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));

                    textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                    textView02.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
                    textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                    //把当前位置传递到动画方法中，进行滑动
                    movePositionX(1);
                    break;

                case 2:
                    textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                    textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                    textView03.setTextColor(android.graphics.Color.parseColor("#ffffff"));

                    textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                    textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                    textView03.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
                    //把当前位置传递到动画方法中，进行滑动
                    movePositionX(2);

            }

        }

        @Override
        //当页面的滑动状态改变时该方法会被触发，页面的滑动状态有3个：“0”表示什么都不做，“1”表示开始滑动，“2”表示结束滑动。

        public void onPageScrollStateChanged(int state) {

        }
    });

    initPosition();
    vp.setAdapter(mFragmentAdapter);


}

private void movePositionX(int toPosition) {
    int one = img_wight + offset * 2;// 页面一到页面二移动量
    int two = one * 2;// 页卡1 -> 页卡3 偏移量
    Log.i("Text", "oneoneone   " + one);
    //创建一个移动动画，用来实现滑动效果
    Animation animation = null;
    switch (toPosition) {
        case 0:
            if (currIndex == 1) {
                animation = new TranslateAnimation(one, 0, 0, 0);
            } else if (currIndex == 2) {
                animation = new TranslateAnimation(two, 0, 0, 0);
            }
            break;
        case 1:
            if (currIndex == 0) {
                animation = new TranslateAnimation(0, one, 0, 0);
            } else if (currIndex == 2) {
                animation = new TranslateAnimation(two, one, 0, 0);
            }
            break;
        case 2:
            if (currIndex == 0) {
                animation = new TranslateAnimation(0, two, 0, 0);
            } else if (currIndex == 1) {
                animation = new TranslateAnimation(one, two, 0, 0);
            }
            break;
    }
    currIndex = toPosition;
    animation.setFillAfter(true);// True:图片停在动画结束位置
    animation.setDuration(300);
    img01.startAnimation(animation);

}

private void initPosition() {
    //很明显是通过BitmapFactory.decodeResource（）方法获取图片资源的宽度
    img_wight = BitmapFactory.decodeResource(getResources(), R.mipmap.fragment01).getWidth();
    //看上面注释（01）
    DisplayMetrics disp = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(disp);
    w = disp.widthPixels;//获取了分辨率的宽度
    offset = ((w / 3) - img_wight) / 2;// 计算偏移量
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.textView01:
            //绑定viewopager对应的页卡
            vp.setCurrentItem(0);
            break;
        case R.id.textView02:
            vp.setCurrentItem(1);
            break;
        case R.id.textView03:
            vp.setCurrentItem(2);
            break;


    }
}

注意其中的setCurrentItem参数，这和后面的其他控件操作此功能有关。

第二种，NavigationTabbar

这是第三方库，还是比较好用的，具体操作可以上github上下载相关代码。

第三种就是 NavigationTabbar+Fragment了，这种在开发中常见，而且效果不错，

主要代码如下：

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.navigation_fragment);

    vp = findViewById(R.id.vp);


    navigationAdapter = new NavigationAdapter(getSupportFragmentManager());

    vp.setAdapter(navigationAdapter);
    vp.setOffscreenPageLimit(3);


    initView();

}

private void initView() {
  final NavigationTabBar  navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb);

    String[] colors = getResources().getStringArray(R.array.default_preview);
    ArrayList<NavigationTabBar.Model> models = new ArrayList<>();

    models.add(new NavigationTabBar.Model
            .Builder(getResources().getDrawable(R.drawable.ic_first), Color.parseColor(colors[0]))
            .title("Heart")
            .build());
    models.add(new NavigationTabBar.Model
            .Builder(getResources().getDrawable(R.drawable.ic_second), Color.parseColor(colors[1]))
          .title("Cup")
            .build());
    models.add(new NavigationTabBar.Model
            .Builder(getResources().getDrawable(R.drawable.ic_third), Color.parseColor(colors[2]))
            .title("Diploma")
            .build());

    navigationTabBar.setModels(models);
    navigationTabBar.setViewPager(vp,2);
    navigationTabBar.setIsTitled(true);


    /*
    * 点击事件写在各个fragment中
    * */

    navigationTabBar.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() {
        @Override
        public void onStartTabSelected(NavigationTabBar.Model model, int index) {

        }

        @Override
        public void onEndTabSelected(NavigationTabBar.Model model, int index) {
            vp.setCurrentItem(index, false);

        }
    });


}

由于比较简单，所以我把代码打包，只需更改manifest启动项即可 ，下载地址如下：

https://download.youkuaiyun.com/download/qq_35642849/10906886