UI

17_TabLayout 的 setCustomView() 方

2017-08-16  本文已影响413人  Android_小生

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" 属性,就能解决上面的问题了。

上一篇下一篇

猜你喜欢

热点阅读