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

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


TabLayout自定义Tab实现不同的圆角效果_第1张图片

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


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



    
    

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



    
    

右边Tab选中背景bg_tab_right_select.xml:



    

    

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


    
    

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



    
    

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


    
    

左边TabView自定义布局文件:




    

右边TabView自定义布局文件:




    


注意:
自定义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实现不同的圆角效果)