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 的关联，防止 TabLayout 自己把我们自定义的 view 销毁。
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
...
// viewpager 的适配器，与 tablayout 联动重写 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 的点击响应失效，也就没有出现预期的效果。我将自定义 view 布局文件中的 button 设置 android:clickable="false" 属性，运行后 Tab 的点击显示效果正常了。
3.问题总结
我们可以通过 tab 的 setCustomView() 方法来给 tab 配置自定义的 view 效果。但是要注意的是，如果自定义的 view 中有 button，会和 tab 的点击冲突，导致我们正常点击 tab 中的 view 时，tab 的点击监听失效，viewpager 无法切换，tab 的点击效果也出不来。我们只需设置 button 的 android:clickable="false" 属性，就能解决上面的问题了。
