Android-快速实现ViewPager+Tablayout的联动效果

Android-快速实现ViewPager+Tablayout的联动效果

在项目开发中很多场景都会碰到tab栏切换的效果，实现的思路也有很多种，tabhost+fragment，radionbtton+viewpager等方式都可以实现，这里就说下tablayout+viewpager的实现方式；tablayout是android5.0推出来的一个MaterialDesign风格的控件，是专门用来实现tab栏效果的；功能强大，使用方便灵活；

引入依赖库:

  implementation 'com.android.support:support-v4:26.1.0'
  implementation 'com.android.support:design:26.1.0'

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="top|center"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextColor="@color/black999"
        app:tabSelectedTextColor="@color/orange"
        app:tabIndicatorColor="@color/orange"
        app:tabIndicatorHeight="4dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">

    </android.support.v4.view.ViewPager>

</LinearLayout>

tablayout提供了很多的属性可以设置：

app:tabIndicatorColor    指示器颜色
app:tabTextColor         tab栏字体颜色
app:tabSelectedTextColor tab栏字体被选颜色
app:tabIndicatorHeight   指示器高度
app:tabBackground        tab背景颜色
app:tabMaxWidth          tab栏最大宽度
app:tabTextAppearance    tab栏字体样式
app:tabMinWidth          tab栏最小宽度

这些属性可以下xml中设置，也可以使用代码进行设置；需要注意这两个属性：

app:tabMode="";有scrollable和fixed两个属性值
scrollable:可滑动;
fixed:不能滑动，平分tabLayout宽度;

app:tabGravity="";有center和fill两个属性值
fill:tabs平均填充整个宽度;
center:tab居中显示;

页面实现方式

 public static final String[] tabTitles = new String[]{"全部", "代付款", "代发货", "配送中"};
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private List<MyOrderFragment> mFragments = new ArrayList<MyOrderFragment>();

 mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        tv_title.setText("所有订单");
        for (int i = 0; i < tabTitles.length; i++) {
            mFragments.add(MyOrderFragment.createFragment(tabTitles[i],activity));
        }
        //为ViewPager设置FragmentPagerAdapter
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

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

            /**
             * 为TabLayout中每一个tab设置标题
             */
            @Override
            public CharSequence getPageTitle(int position) {
                return tabTitles[position];
            }
        });

        //TabLaout和ViewPager进行关联
        mTabLayout.setupWithViewPager(mViewPager);

其中MyOrderFragment就是我们装载的页面 ，这样就可以快速的实现tablayout和viewpager相互关联。

做个简单的记录~