Android Design Support Library之TabLayout

註：tab2 和tab4 需要自定義。

app/build.gradle 中添加下面依賴:

compile 'com.android.support:design:25.3.1'

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="center">

<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:icon="@drawable/custom_tab_icon"
android:layout_height="wrap_content"
android:text="Tab1" />
</android.support.design.widget.TabLayout>

TabLayout 屬性tabBackground：標籤頁的背景；tabMode：fixed, 固定標籤，tab均分，適合少的tab；scrollable，可滾動標籤，適合很多tab，默認fixed；tabTextColor：標籤字體顏色；tabSelectedTextColor：標籤選中字體顏色；tabIndicatorColor：底部滑動的線條的顏色，默認是colorAccent；tabIndicatorHeight：底部滑動線條的高度。

TabItem 屬性text：標籤文字；icon：圖標；layout：自定義布局。

由上可知在 xml 可以增加 tab，當然也是可以代碼中添加：

tabLayout.addTab(tabLayout.newTab().setText("Tab3"));

TabItem 可以設置 layout 來自定義布局，後文講。

tab 點擊回調監聽：

tabLayout.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) {
}
});

<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="wrap_content"
android:orientation="vertical">

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/colorPrimary"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/cursorTextColor" />

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</LinearLayout>

class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();

public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}

@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}

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

public void addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}

@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}

private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager());

Fragment newfragment = new TodayEmotionFragment();
Bundle data = new Bundle();
data.putInt("id", 0);
newfragment.setArguments(data);
adapter.addFrag(newfragment,「Tab1」);

newfragment = new TodayEmotionFragment();
data = new Bundle();
data.putInt("id", 1);
newfragment.setArguments(data);
adapter.addFrag(newfragment, "Tab2");

newfragment = new TodayEmotionFragment();
data = new Bundle();
data.putInt("id", 1);
newfragment.setArguments(data);
adapter.addFrag(newfragment,"Tab3");

viewPager.setAdapter(adapter);

viewPager.setOffscreenPageLimit(3);
}

@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);

ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewPager);
setupViewPager(viewPager);
// 設置ViewPager的數據等
tabLayout.setupWithViewPager(viewPager);
}

上面的效果圖，tab2 和 tab4 是需要自定義的，自定義可以直接寫在 TabItem 的 xml 的 layout 屬性：

<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout="@layout/custom_tab1" />

也可以寫在代碼裡：

View view = View.inflate(this, R.layout.custom_tab1, null);
TextView tabText = (TextView) view.findViewById(R.id.tabText);
tabText.setText("Tab4");
TextView tabPoint = (TextView) view.findViewById(R.id.tabPoint);
tabPoint.setText("9");
tabLayout.addTab(tabLayout.newTab().setCustomView(view));

如上，我看了 TabLayout 的源碼，發現自定義 View 這裡的 text 和 icon的 id 是寫死了，意思我自定義的這兩個 id 要相應寫死，我的 custom_tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="72dp"
android:layout_height="72dp"
android:minWidth="56dp">

<ImageView
android:id="@+id/tabIcon"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:background="@drawable/custom_tab_icon"
android:scaleType="centerInside" />

<TextView
android:id="@+id/tabText"
style="@style/TextAppearance.Design.Tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tabIcon"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLines="2"
android:textColor="@color/custom_tab_text" />

<TextView
android:id="@+id/tabPoint"
android:layout_width="20dp"
android:gravity="center"
android:layout_marginTop="5dp"
android:layout_height="20dp"
android:background="@drawable/tab_point_bg"
android:layout_alignParentRight="true"
android:textColor="@color/tab_point_text" />

</RelativeLayout>

如果我 text 和 icon 寫死成源碼的 id，tab 反而不顯示，我隨便寫，是可以，納悶，它是如何 findViewById 到的？

最後，不要問我，icon 的大小和 text 的字體顏色和字體大小為什麼寫這麼多，我也不知道，是拷的源碼。另外，還有選中時 icon 和 text 的效果，需要自己寫的，具體請看下面的我給的 sample。

https://github.com/WuXiaolong/DesignSupportLibrarySample

2017-08-20 更新

2015-08-03 撰寫