Material Design 中的 Tab 設計可以參考官方文檔 https://material.io/guidelines/components/tabs.html#tabs-usage ，其中的 Tab 部分 Support Library 提供了專門的控件 TabLayout。
TabLayout 的簡單使用
首先需要添加 design 庫
compile 'com.android.support:design:25.4.0'
布局文件的定義如下：
<?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.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Activity 中添加 Tab:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("1"));
tabLayout.addTab(tabLayout.newTab().setText("2"));
tabLayout.addTab(tabLayout.newTab().setText("3"));
}
}
效果如下圖：
Tab 不僅可以在 Java 代碼中添加，還可以在布局文件中添加：
<?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.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"/>
</android.support.design.widget.TabLayout>
</LinearLayout>
修改指示器的顏色和高度
app:tabIndicatorColor="@color/colorPrimary"
app:tabIndicatorHeight="5dp"
效果如下：
修改文本顏色和選中后顏色
app:tabTextColor="@color/colorPrimary"
app:tabSelectedTextColor="@color/colorAccent"
效果如下：
app:tabMode
app:tabMode 可以設置 fixed 和 scrollable。
fixed 是默認值，用于 Tab 較少的情況，每個 Tab 平分寬度。
scrollable 用于 Tab 較多的情況，可以滑動。如果 Tab 較少的話，會擠到屏幕左邊，如下圖：
添加刪除 Tab
可以用 newTab 來創建標簽，還可以用 addTab 來添加標簽，還可以用 removeTab()，removeTabAt()，removeAllTabs() 來刪除標簽
監聽
添加 Tab 的監聽
Tablayout.addOnTabSelectedListener()
刪除 Tab 的監聽
Tablayout.removeOnTabSelectedListener()
清除所有監聽
Tablayout.clearOnTabSelectedListeners()
TabLayout 和 ViewPager 配合使用
布局方式有兩種
第一種，ViewPager 里面嵌套 TabLayout
<?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.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v4.view.ViewPager>
</LinearLayout>
第二種，不嵌套
<?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/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
這邊要注意，不能 TabLayout 里面嵌套 ViewPager，TabLayout 下面只能是 TabItem。
Activity 中的代碼如下
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), getData()));
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
}
private List<String> getData() {
List<String> dataList = new ArrayList<>();
for (int i = 0; i < 100; i++) {
dataList.add(String.valueOf(i));
}
return dataList;
}
}
這里我們采用的是不嵌套的布局，所以需要把 TabLayout 和 ViewPager 關聯一下
tabLayout.setupWithViewPager(viewPager);
MyPagerAdapter 代碼如下
public class MyPagerAdapter extends FragmentStatePagerAdapter {
private List<String> dataList;
public MyPagerAdapter(FragmentManager fm, List<String> dataList) {
super(fm);
this.dataList = dataList;
}
@Override
public Fragment getItem(int position) {
return MyFragment.newInstance(dataList.get(position));
}
@Override
public int getCount() {
return dataList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return dataList.get(position);
}
}
我們重寫了 getPageTitle，它的作用是設置對應的 Tab 的文字。
這邊我們用了 FragmentStatePagerAdapter 而不是 FragmentPagerAdapter，它們有什么區別呢？
FragmentPagerAdapter 在切換的時候不會銷毀 Fragment 對象，只會銷毀 View 并調用 detach 方法。這種方法適用于 Fragment 數比較少的情況。
FragmentStatePagerAdapter 在切換的時候會銷毀 Fragment 對象，但是保存狀態的 Bundle 會在 onSaveInstanceState(Bundle) 被保存下來。這種方法適用于 Fragment 數比較多的情況。
MyFragment 代碼如下
public class MyFragment extends Fragment {
public static MyFragment newInstance(String data) {
Bundle args = new Bundle();
args.putString("content", data);
MyFragment fragment = new MyFragment();
fragment.setArguments(args);
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.my_fragment, container, false);
TextView content = (TextView) view.findViewById(R.id.content);
content.setText(getArguments().getString("content"));
return view;
}
}
運行效果如下：
TabLayout 中添加 Icon
1、通過 SpannableString 來添加 Icon
MyPagerAdapter 中，getPageTitle 修改為用 SpannableString 來添加文字和圖標
private Context context;
private List<String> dataList;
private List<Integer> iconResList;
public MyPagerAdapter(Context context, FragmentManager fm, List<String> dataList, List<Integer> iconResList) {
super(fm);
this.context = context;
this.dataList = dataList;
this.iconResList = iconResList;
}
......
@Override
public CharSequence getPageTitle(int position) {
SpannableString sb = new SpannableString(" " + dataList.get(position));
Drawable image = ContextCompat.getDrawable(context, iconResList.get(position));
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
Activity 中添加圖標
@Override
protected void onCreate(Bundle savedInstanceState) {
......
viewPager.setAdapter(new MyPagerAdapter(this, getSupportFragmentManager(), getData(), getIcon()));
......
}
......
private List<Integer> getIcon() {
List<Integer> iconList = new ArrayList<>();
for (int i = 0; i < 100; i++) {
iconList.add(R.drawable.ic_android_black);
}
return iconList;
}
但是運行后，發現還是只有文字，沒有圖標。這是因為 ImageSpan 在 TabLayout 默認的樣式 textAllCaps 為 true 的時候是沒有效果的。通過以下方法將它改為 false 即可。
<style name="MyTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>
<android.support.design.widget.TabLayout
......
app:tabTextAppearance="@style/MyTabTextAppearance" />
運行效果如下：
2、通過 setCustomView() 來添加 Icon
先定義 Tab 的布局文件
<?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:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
然后在 MyPagerAdapter 中添加 getView 方法
@Override
public CharSequence getPageTitle(int position) {
return null;
}
public View getView(int position) {
View view = LayoutInflater.from(context).inflate(R.layout.tab_item, null);
((ImageView) view.findViewById(R.id.image_view)).setImageResource(iconResList.get(position));
((TextView) view.findViewById(R.id.text_view)).setText(dataList.get(position));
return view;
}
最后在 Activity 中通過 setCustomView 來設置 Tab 的 CustomView
for (int i = 0; i < tabLayout.getTabCount(); i++) {
tabLayout.getTabAt(i).setCustomView(myPagerAdapter.getView(i));
}
效果如下:
3、通過 setIcon() 來添加 Icon
其實 Tab 自己有 setIcon 方法來設置 Icon。
for (int i = 0; i < tabLayout.getTabCount(); i++) {
tabLayout.getTabAt(i).setIcon(R.drawable.ic_android_black);
}
配合 MyPagerAdapter 的 getPageTitle，同時添加文字和圖標。
