美文网首页Android控件Android开发学习
TabLayout自定义Tab实现不同的圆角效果

TabLayout自定义Tab实现不同的圆角效果

作者: 修塔寻千里 | 来源:发表于2018-06-22 10:15 被阅读307次

    开发过程中经常会遇到Tab左右或中间的圆角不一样,如下图所示:



    根据上图发现两个Tab圆角不同,且不对称,无法通过设置tabBackground属性来实现不同的圆角,解决方案是采用自定义TabView的方法。具体实现方案如下:
    TabLayout属性设置:

    <android.support.design.widget.TabLayout
            android:id="@+id/tb_layout"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:padding="0dp"
            app:tabIndicatorHeight="0dp"
            app:tabPaddingBottom="0dp"
            app:tabPaddingEnd="0dp"
            app:tabPaddingStart="0dp"
            app:tabPaddingTop="0dp"
            app:tabSelectedTextColor="@color/white"
            app:tabTextAppearance="@style/text_14_33_df"/>
    

    tabPadding和padding全部设置为0,由自定义TabView来设置相应的padding,tabIndicatorHeight设置为0,tabSelectedTextColor设置选中Tab文字颜色,tabTextAppearance设置Tab未选中文字颜色。
    左边Tab选中背景bg_tab_left_select.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid
            android:color="@color/tv_color_blue"/>
        <corners
            android:topLeftRadius="5dp"/>
    </shape>
    

    左边Tab未选中背景bg_tab_left_unselect.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid
            android:color="@color/white"/>
        <corners
            android:topLeftRadius="5dp"/>
    </shape>
    

    右边Tab选中背景bg_tab_right_select.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid
            android:color="@color/tv_color_blue"/>
    
        <corners
            android:topRightRadius="5dp"/>
    </shape>
    

    右边Tab未选中背景bg_tab_right_unselect.xml:

    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid
            android:color="@color/white"/>
        <corners
            android:topRightRadius="5dp"/>
    </shape>
    

    左边Tab背景选择器tab_left_selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/bg_tab_left_unselect" android:state_selected="false"/>
        <item android:drawable="@drawable/bg_tab_left_select" android:state_selected="true"/>
    </selector>
    

    右边Tab背景选择器tab_right_selector.xml:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/bg_tab_right_unselect" android:state_selected="false"/>
        <item android:drawable="@drawable/bg_tab_right_select" android:state_selected="true"/>
    </selector>
    

    左边TabView自定义布局文件:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="45dp"
                  android:background="@drawable/tab_left_selector"
                  android:gravity="center"
                  android:orientation="vertical">
    
        <TextView
            android:id="@+id/tab_text_left"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:gravity="center"
            android:textSize="@dimen/text_size_14"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:textColor="@color/tv_color_33"/>
    </LinearLayout>
    

    右边TabView自定义布局文件:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="45dp"
                  android:background="@drawable/tab_right_selector"
                  android:gravity="center"
                  android:orientation="vertical">
    
        <TextView
            android:id="@+id/tab_text_right"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:gravity="center"
            android:textSize="@dimen/text_size_14"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:textColor="@color/tv_color_33"/>
    
    </LinearLayout>
    

    注意:
    自定义View的高度要保持与TabLayout高度一致,负责背景填充有问题。
    最后代码实现:

    viewPager.setOffscreenPageLimit(fragments.size());
            tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
            tabLayout.setupWithViewPager(viewPager);
    
    if (tabLayout != null) {
                TabLayout.Tab tab1 = tabLayout.getTabAt(0);
                if (tab1 != null) {
                    tab1.setCustomView(getTabView0(getActivity()));
                }
                TabLayout.Tab tab2 = tabLayout.getTabAt(1);
                if (tab2 != null) {
                    tab2.setCustomView(getTabView1(getActivity()));
                }
            }
    
    
    public View getTabView0(Context context) {
            LayoutInflater mInflater = LayoutInflater.from(context);
            View view = mInflater.inflate(R.layout.item_tab_left, null);
            TextView tv = (TextView) view.findViewById(R.id.tab_text_left);
            tv.setText(titles[0]);
            return view;
        }
    
        public View getTabView1(Context context) {
            LayoutInflater mInflater = LayoutInflater.from(context);
            View view = mInflater.inflate(R.layout.item_tab_right, null);
            TextView tv = (TextView) view.findViewById(R.id.tab_text_right);
            tv.setText(titles[1]);
            return view;
        }
    

    相关文章

      网友评论

        本文标题:TabLayout自定义Tab实现不同的圆角效果

        本文链接:https://www.haomeiwen.com/subject/caghyftx.html