如何正确的使用Tablayout-创新互联
今天就跟大家聊聊有关如何正确的使用Tablayout,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
目前创新互联公司已为上千多家的企业提供了网站建设、域名、虚拟主机、网站托管运营、企业网站设计、海门网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。一、TabLayout普通用法
在项目中使用viewpager的时候大多数都是和TabPagerIndicator结合使用,TabPagerIndicator是第三方的,使用起来比较繁琐;
2015谷歌大会官方发布了TabLayout,可以很简单很完美的实现这种效果;
因为是官方发布的,所以使用起来不用任何第三方的东西;而且非常简单明了;
同样,如果想要使用Tablayout必须在build中配置:
dependencies { compile 'com.android.support:design:23.1.1' }
先看下布局:
代码使用起来也非常简单
第一步:初始化ViewPager并设置adapter
第二步:给Tablayout设置标题
第三步:将Tablayout和ViewPager关联到一起
//第一步:初始化ViewPager并设置adapter viewPager = (ViewPager) findViewById(R.id.viewpager); viewPager.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager(), fragmentList)); //第二步:初始化Tablayout,给ViewPager设置标题(选项卡) tabLayout = (TabLayout) findViewById(R.id.tablayout); tabLayout.addTab(tabLayout.newTab().setText("UFC"));//添加tab选项卡 tabLayout.addTab(tabLayout.newTab().setText("武林风")); tabLayout.addTab(tabLayout.newTab().setText("昆仑决")); tabLayout.addTab(tabLayout.newTab().setText("荣耀")); tabLayout.addTab(tabLayout.newTab().setText("勇士的崛起")); tabLayout.addTab(tabLayout.newTab().setText("K-1")); //第三步:关联ViewPager tabLayout.setupWithViewPager(viewPager);
好了,正常情况下就到此结束了,但是我在写这个demo的时候碰到一个坑:
标题死活显示不出来,浪费了很长时间,最后在Tablayout关联Viewpager之后添加从新设置下标题即可:
//在关联ViewPager之后添加如下代码,前三步不用更改 tabLayout.getTabAt(0).setText("UFC"); tabLayout.getTabAt(1).setText("武林风"); tabLayout.getTabAt(2).setText("昆仑决"); tabLayout.getTabAt(3).setText("荣耀"); tabLayout.getTabAt(4).setText("勇士的崛起"); tabLayout.getTabAt(5).setText("K-1");
总体来说Tablayout完全可以代替TabPagerIndicator,而且使用起来比较简单,最重要的还是官方的;
二、Tablayout下划线宽度更改方法:
首先说明:Google官方没有给我们提供更改下划线的宽度的方法;
我们可以通过其他方法更改:(两步)
1.首先定义setIndicator()方法
public void setIndicator(TabLayout tabs,int leftDip,int rightDip){ Class> tabLayout = tabs.getClass(); Field tabStrip = null; try { tabStrip = tabLayout.getDeclaredField("mTabStrip"); } catch (NoSuchFieldException e) { e.printStackTrace(); } tabStrip.setAccessible(true); LinearLayout llTab = null; try { llTab = (LinearLayout) tabStrip.get(tabs); } catch (IllegalAccessException e) { e.printStackTrace(); } int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics()); int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics()); for (int i = 0; i < llTab.getChildCount(); i++) { View child = llTab.getChildAt(i); child.setPadding(0, 0, 0, 0); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1); params.leftMargin = left; params.rightMargin = right; child.setLayoutParams(params); child.invalidate(); } }
2.在关联ViewPager之前添加
tabLayout.post(new Runnable() { @Override public void run() { setIndicator(tabLayout,25,25); } });
最后记得更改滑动方式: app:tabMode="fixed"
左右距离可根据自己项目设置;(更改下划线宽度需在第一步(Tablayout普通用法)的基础上更改使用)
三、更改标签对齐方式
在xml文件中:
删除 app:tabMode="" ;
添加 app:tabGravity="center" ;
还可以通过 app:tabMaxWidth="150dp" 限制标签宽度
(更改更改标签对齐方式需在第一步(Tablayout普通用法)的基础上更改使用)
四、标题之间添加分割线;
1.在drawable文件夹下创建 shape
2,在主类设置完tablayout后添加如下代码:
LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0); linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.layout_divider_vertical)); linearLayout.setDividerPadding(15);
看完上述内容,你们对如何正确的使用Tablayout有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
分享题目:如何正确的使用Tablayout-创新互联
文章分享:http://ybzwz.com/article/ddcsdi.html