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 相互关联。
做个简单的记录~