17_TabLayout 的 setCustomView() 方法点击自定义 View 无切换效果

1.问题描述

在通过 setCustomView() 方法自定义 TabLayout 中 Tab 的样式后，点击 Tab 中自定义的 view ,viewPager 不切换，tab 设置的效果也没有显示。但点击包裹自定义 view 的 tab 时效果却显示正常了，左右滑动 viewPager 也能正常切换 tab 效果。

2.问题分析

先简单介绍下给 Tab 配置自定义 View 的流程。

我们可以通过 setCustomView() 方法自定义 TabLayout 中 Tab 的样式，我设置的自定义 view 布局 tablayout_tabitem_view 文件如下：

上面的 Button 控件都设置了自定义的样式，代码如下：

drawable/tab_custom_view1 文件

color/main_tab_text_color 文件

在代码中设置如下：

...
        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 fragments;

        public MyDataAdapter(FragmentManager fm, List 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" 属性，就能解决上面的问题了。