本文所说的 TabLayout 是指 design 包下的
android.support.design.widget.TabLayout
一、概述
TabLayout 主要用于顶部导航栏，是属于 android 官方的顶部导航栏控件，当然市面上也有很多 app 会自定义顶部导航栏，用于展现不同的视觉效果，自定义导航栏不在本文讨论范围之内
使用的时候，记得导入对应版本的 android.support.design.widget 包
二、TabLayout 的常用属性
app:tabMode ： 此属性有两个选项值，分别为 "scrollable" （可滑动），"fiexd" (不能滑动)
app:tabBackground ： 设置导航栏的背景色
-
app:tabSelectedTextColor ： 设置选中条目的颜色，如下所示：
image app:tabTextColor ： 设置导航栏所有条目的颜色（未选中时候的颜色）
-
app:tabIndicatorColor ： 设置导航条的颜色
image app:tabPadding ：设置导航条上下左右边距
app:tabIndicatorHeight ： 设置指示器高度
-
app:tabGravity ： 设置导航栏的位置（条目没有太多的时候设置才有用，一般是两三个的时候），有两个值，center （居中） 和 fill （充满布局）默认为 fill，效果如下：
center：
imagefill：
image
三、TabLayout 添加条目 Tabs
- 有两种方式，第一种是在布局中添加，第二种是在代码中添加，而我一般选择第二种，这样更灵活一点，布局和添加代码如下所示：
// 布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="io.github.adsuper.tablayoutdemo.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/gray"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabTextColor="@color/dark_gray"
app:tabIndicatorColor="@color/colorPrimary"
app:tabMode="scrollable"
></android.support.design.widget.TabLayout>
</android.support.constraint.ConstraintLayout>
// activity 中代码
public class MainActivity extends AppCompatActivity {
@BindView(R.id.tablayout)
TabLayout mTablayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
initTablayoutText();
}
private String[] layoutTables = {"天山", "明教", "丐帮", "慕容", "少林", "逍遥", "峨眉", "天龙", "武当", "鬼谷", "唐门", "星宿"};
private void initTablayoutText() {
for (int i = 0; i < layoutTables.length; i++) {
// 设置条目 tabItem
mTablayout.addTab(mTablayout.newTab().setText(layoutTables[i]));
}
}
}
四、TabLayout 条目选中监听
mTablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
五、TabLayout 与 Viewpager 和 Fragment 结合
- 布局：
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="io.github.adsuper.tablayoutdemo.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/gray"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorPrimary"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabTextColor="@color/dark_gray"
></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>
- 适配器 Adapter ：
package io.github.adsuper.tablayoutdemo;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* 作者：luoshen/rsf411613593@gmail.com
* 时间：2017年10月10日
* 说明：
*/
public class MyPagerAdapter extends FragmentPagerAdapter {
private Context mContext;
private List<Fragment> mList;
private String[] mTitles;
public MyPagerAdapter(FragmentManager fm, Context mContext, List<Fragment> mList, String[] mTitles) {
super(fm);
this.mList = mList;
this.mContext = mContext;
this.mTitles = mTitles;
}
@Override
public int getCount() {
return mList.size();
}
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
/**
* 设置 Fragment 数据源
* @param mList
*/
public void setmList(List<Fragment> mList) {
this.mList = mList;
}
/**
* 获取条目
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
- 将 viewpager 与 Tablelayout 关联
package io.github.adsuper.tablayoutdemo;
import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import butterknife.ButterKnife;
public class MainActivity extends AppCompatActivity {
@BindView(R.id.tablayout)
TabLayout mTablayout;
@BindView(R.id.viewPager)
ViewPager mViewPager;
private String[] layoutTables = {"天山", "明教"};
private List<Fragment> list_fragment;
private Context mContext;
private MyPagerAdapter mMyPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
mContext = this;
initTablayoutText();
initFragment();
setViewPagerAdapter();
}
private void setViewPagerAdapter() {
mMyPagerAdapter = new MyPagerAdapter(getSupportFragmentManager(), mContext, list_fragment, layoutTables);
mViewPager.setAdapter(mMyPagerAdapter);
mTablayout.setupWithViewPager(mViewPager);// //viewpager 与 tablelayout 关联
}
private void initFragment() {
list_fragment = new ArrayList<>();
list_fragment.add(new Fragment_one());
list_fragment.add(new Fragment_two());
}
private void initTablayoutText() {
for (int i = 0; i < layoutTables.length; i++) {
mTablayout.addTab(mTablayout.newTab().setText(layoutTables[i]));
}
mTablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
