项目刚好用到,暂时只能简单地使用,一般情况下,TabLayout都是会和ViewPager、Fragment一起使用的,下面是三者结合的简单介绍
- 布局:
TabLayout+ViewPager的xml布局如下:
<?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:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/mytablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabIndicatorColor="#1852b6"
app:tabIndicatorHeight="1dp"
app:tabSelectedTextColor="#1852b6"
app:tabTextColor="#383a3d"/>
<android.support.v4.view.ViewPager
android:id="@+id/myviewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
注意:这里需要说明几个属性:
app:tabIndicatorColor="color":指定Tab被选中时Tab下面的横线的颜色
app:tabIndicatorHeight="dp":指定Tab被选中时Tab下面的横线的高度
app:tabSelectedTextColor="color":指定Tab的字辈选中时显示的颜色
app:tabTextColor="color":Tab默认时的颜色,即不选中时文字的颜色
- Activity的代码如下:
public class TabLayoutAty extends AppCompatActivity {
//TabLayout
private TabLayout mTabLayout;
//ViewPager
private ViewPager mViewPager;
//定义集合,用于保存tab
private List<String> mTabList;
//定义集合,用于保存Fragment
private List<Fragment> mFrList;
//填充到ViewPager的Fragment
private Fragment1 fragment1;
private Fragment2 fragment2;
private Fragment3 fragment3;
//ViewPager的适配器
private TabLayoutAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout_aty);
//初始化
initViews();
initDatas();
}
/**
* 初始化组件
*/
private void initViews() {
mTabLayout = (TabLayout) findViewById(R.id.mytablayout);
mViewPager = (ViewPager) findViewById(R.id.myviewpager);
}
/**
* 初始化数据
*/
private void initDatas() {
mTabList = new ArrayList<>();
mTabList.add("选项1");
mTabList.add("选项2");
mTabList.add("选项3");
mFrList = new ArrayList<>();
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();
mFrList.add(fragment1);
mFrList.add(fragment2);
mFrList.add(fragment3);
//设置模式
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
//添加TAB
for (String str : mTabList) {
mTabLayout.addTab(mTabLayout.newTab().setText(str + ""));
}
//获取适配器实例
mAdapter = new TabLayoutAdapter(getSupportFragmentManager(), mFrList, mTabList);
//为ViewPager设置适配器
mViewPager.setAdapter(mAdapter);
//为TabLayout设置ViewPager
mTabLayout.setupWithViewPager(mViewPager);
}
}
- 适配器代码如下:
public class TabLayoutAdapter extends FragmentPagerAdapter {
private List<String> mTitleList;
private List<Fragment> mFrList;
public TabLayoutAdapter(FragmentManager fm, List<Fragment> fragmentList,
List<String> list) {
super(fm);
this.mTitleList = list;
this.mFrList = fragmentList;
}
@Override
public Fragment getItem(int position) {
return mFrList.get(position);
}
@Override
public int getCount() {
return mFrList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitleList.get(position);
}
}
适配器的用法与ViewPager+Fragment是一样,只是需要重写public CharSequence getPageTitle(int position) 方法,为Tab设置内容
- Fragment没有实现任何东西,因此不贴出了,
- 效果图片如下: