Android完全自定义下划线的TabLayout

导航功能几乎是所有的

APP

TabLayout+ViewPager

UI

TabLayout

TabLayout

WeTabLayout

HorizontalScrollView

Tab

Tab

LinearLayout

Tab

Drawable

Shape

TabLayout

文末有代码连接，可自行下载使用~

为什么使用

WeTabLayout

TabLayout

ViewPager

WeTabLayout

Tab

ViewPager

Indicator

Indicator

Tab

TabView

TabView

TabView

TabView

WeTabLayout

wtl_tab_padding_left

wtl_tab_padding_right

TabView

mTabLayout

有问题可以先加入

QQ

684891631

2020-04-02：

更新了

TabView

XML

  
   //自定义属性示例。

具体字段解释：

 
        
        //下划线的颜色。
        //下划线的高度。
        //下划线的宽度。
        //下划线距离底部的Margin。
        //下划线的圆角。
        //下划线是否的宽度是否跟文本的宽度一样。 true是。
        //Tab被选中时的文字大小。
        //Tab默认时的文字大小。
        //Tab被选中时的文本的颜色。
        //Tab默认时的文字大小。
        //Tab被选中时是否加粗 true 是。
        //Tab是否填充满父View，true 是。
        //Tab的左padding。 
        //Tab的右padding。

属性使用注意：

wtl_indicator_width_equal_title

wtl_indicator_width

//Step 1 :查找对象
WeTabLayout tabLayout = findViewById(R.id.dil_tablayout);
ViewPager viewPager = findViewById(R.id.viewpager);
String[] titles = {"移动", "四个字的", "小灵通", "这个很长电影啊", "NBA", "电影", "小知识", "篮球"};
//重要的一步。
tabLayout.attachToViewPager(viewPager, titles);

注意： 调用

tabLayout.setCurrentTab()

Tab

ViewPager

Adapter

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final WeTabLayout tabLayout = findViewById(R.id.dil_tablayout);
        ViewPager viewPager = findViewById(R.id.viewpager);
        final String[] titles = {"移动", "四个字的", "小灵通", "这个很长电影啊", "NBA", "电影", "小知识", "篮球"};
        findViewById(R.id.selected_one).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tabLayout.setCurrentTab(3);
            }
        });
        tabLayout.setTabLayoutIds(R.layout.item_sliding_tab_layout);
        tabLayout.setIndicatorBottomMargin(10);
        tabLayout.setIndicatorEqualTabText(true);
        tabLayout.setTabFillContainer(false);
        tabLayout.setCurrentTab(2);
        tabLayout.addHandleTabCallBack(new IHandleTab() {
            @Override
            public void addTab(View tab, int index) {
                //该方法再创建TabView的时候调用。
            }
        });
        tabLayout.setTabSelectedListener(new WeTabSelectedListener() {
            @Override
            public void onTabSelected(View currentTab, int position) {
                //TabView被选中的时候调用。
            }
            @Override
            public void onPreTabSelected(View preTab, int prePosition) {
                 //上一个选中的TabView。
            }
        });
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return CeshiFragment.newInstance();
            }
            @Override
            public int getCount() {
                return titles.length;
            }
        });
        tabLayout.attachToViewPager(viewPager, titles);
    }
}

项目地址，感觉有用的点个star~ GitHub