1.問題描述
在通過 setCustomView() 方法自定義 TabLayout 中 Tab 的樣式后，點擊 Tab 中自定義的 view ,viewPager 不切換，tab 設置的效果也沒有顯示。但點擊包裹自定義 view 的 tab 時效果卻顯示正常了，左右滑動 viewPager 也能正常切換 tab 效果。
2.問題分析
先簡單介紹下給 Tab 配置自定義 View 的流程。
我們可以通過 setCustomView() 方法自定義 TabLayout 中 Tab 的樣式，我設置的自定義 view 布局 tablayout_tabitem_view 文件如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tool="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<Button
android:id="@+id/tab_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/tab_custom_view1"
android:paddingBottom="2dp"
android:paddingTop="7dp"
android:scaleType="matrix"
android:text="消 息"
android:textColor="@color/main_tab_text_color"
android:textSize="14sp"
android:background="@null"
/>
<TextView
android:id="@+id/unread_msg_number_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tool:text="100+"
android:padding="5dp"
android:gravity="center"
android:textColor="@android:color/white"
android:textSize="10sp"
android:elevation="2dp"
android:visibility="gone"
android:background="@drawable/product_shopping_car_icon"
android:layout_alignTop="@+id/tab_note"
android:layout_alignEnd="@+id/tab_note"
android:layout_marginEnd="22dp" />
</RelativeLayout>
上面的 Button 控件都設置了自定義的樣式，代碼如下：
drawable/tab_custom_view1 文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/ic_message_selected"/>
<item android:drawable="@drawable/ic_message_mormal"/>
</selector>
color/main_tab_text_color 文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="@color/colorPrimary" />
<item android:color="@color/colorNormal" />
</selector>
在代碼中設置如下：
...
MyDataAdapter myDataAdapter = new MyDataAdapter(getSupportFragmentManager(), fragments);
for (int i = 0; i < myDataAdapter.getCount(); i++) {
TabLayout.Tab tab = tabLayout.newTab();
tab.setCustomView(R.layout.tablayout_tabitem_view);
tabLayout.addTab(tab);
}
viewPager.setOffscreenPageLimit(2);
viewPager.setAdapter(myDataAdapter);
// 這兩個方法是手動設置 TabLayout 與 ViewPager 的關聯(lián)，防止 TabLayout 自己把我們自定義的 view 銷毀。
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
...
// viewpager 的適配器，與 tablayout 聯(lián)動重寫 getpagetitle 方法
class MyDataAdapter extends FragmentPagerAdapter {
private List<BaseFragment> fragments;
public MyDataAdapter(FragmentManager fm, List<BaseFragment> fragments) {
super(fm);
this.fragments = fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
// 因為要給 tab 設置自定義的 view,所以沒有重寫 getPagetitle() 方法，
}
我設想可能是自定義 view 中的 button 上的點擊響應使得 tab 的點擊響應失效，也就沒有出現(xiàn)預期的效果。我將自定義 view 布局文件中的 button 設置 android:clickable="false" 屬性，運行后 Tab 的點擊顯示效果正常了。
3.問題總結
我們可以通過 tab 的 setCustomView() 方法來給 tab 配置自定義的 view 效果。但是要注意的是，如果自定義的 view 中有 button，會和 tab 的點擊沖突，導致我們正常點擊 tab 中的 view 時，tab 的點擊監(jiān)聽失效，viewpager 無法切換，tab 的點擊效果也出不來。我們只需設置 button 的 android:clickable="false" 屬性，就能解決上面的問題了。
