Android完全自定义下划线的TabLayout
短信预约 -IT技能 免费直播动态提醒
一 介绍:
作者:那个人_
导航功能几乎是所有的
APP
都具备的基础功能之一,Android系统提供了TabLayout+ViewPager
的组合来实现该功能。再使用之初,发现该组合真是无敌了,但是。。。总有一些UI
设计师觉得原生TabLayout
的下划线样式不符合用户的审美,比如说,下划线的宽度要跟文本的宽度一样,下划线的样式要换成图片等等。TabLayout
在这些需求面前显得那么无助,程序员被迫搬砖。
WeTabLayout
继承自HorizontalScrollView
,这是为了实现当有多个Tab
的时候能够左右滑动,且当滑动的时候将选中的那个Tab
移至屏幕中间。其直接父布局为LinearLayout
,再设置Tab
充满父布局,或者是水平自由排列的时候很方便。下划线由Drawable
绘制,这样的话就可以随意的更改下划线的样式,设置宽高、设置图片、设置Shape
等。其控件已经在应用中使用,目前来看相当稳定,之后打算用来替换原生的TabLayout
;
文末有代码连接,可自行下载使用~
为什么使用
?WeTabLayout
TabLayout
的基本功能。
扩展了在ViewPager
+WeTabLayout
有多个Tab
时,ViewPager
左右滑动的时候默认将当前选中的Tab移动到屏幕中间。
完全自定义的Indicator
指示器,通俗一点就是下划线。其宽度、高度、颜色、样式、图片全部支持。
开关控制Indicator
指示器的宽度是否跟Tab
显示的文本宽度一样。
TabView
支持自定义布局或者使用默认布局。其TabView
在父布局中的位置,以及各个TabView
之间的间距,完全自定义,也可选择TabView
填充满父布局。
最重要的是WeTabLayout
的源码简单,可以自行定制。
注意:
为了能够及时的发现并更正该库所存在的问题,现邀请大家加入该微信群中,三人行必有我师,Android技术是无止境的。
当使用自定义Tab布局的时候,其设置的padding值,不要跟属性wtl_tab_padding_left
和wtl_tab_padding_right
的值冲突。
默认可以不用设置TabView
的自定义布局,也就是可以不用给mTabLayout
属性赋值,如果设置自定义布局的话,自定义布局的背景色会被忽略掉。
有问题可以先加入
QQ
群684891631
再转微信群~
更新日志:
2020-04-02:
更新了
TabView
对左右padding的支持,可以随意的设置左右的padding值,下划线的位置不会错乱。
二 简单使用:
2.1 XML
布局准备:
//自定义属性示例。
具体字段解释:
//下划线的颜色。
//下划线的高度。
//下划线的宽度。
//下划线距离底部的Margin。
//下划线的圆角。
//下划线是否的宽度是否跟文本的宽度一样。 true是。
//Tab被选中时的文字大小。
//Tab默认时的文字大小。
//Tab被选中时的文本的颜色。
//Tab默认时的文字大小。
//Tab被选中时是否加粗 true 是。
//Tab是否填充满父View,true 是。
//Tab的左padding。
//Tab的右padding。
属性使用注意:
wtl_indicator_width_equal_title
跟wtl_indicator_width
同时设置的时候,以前者为主。
2.2 代码设置:
//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
之后。
2.4 属性应用Demo:
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
作者:那个人_
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341