今天就跟大家聊聊有關如何正確的使用Tablayout,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
目前創(chuàng)新互聯(lián)公司已為上千多家的企業(yè)提供了網(wǎng)站建設、域名、虛擬主機、網(wǎng)站托管運營、企業(yè)網(wǎng)站設計、海門網(wǎng)站維護等服務,公司將堅持客戶導向、應用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。一、TabLayout普通用法
在項目中使用viewpager的時候大多數(shù)都是和TabPagerIndicator結(jié)合使用,TabPagerIndicator是第三方的,使用起來比較繁瑣;
2015谷歌大會官方發(fā)布了TabLayout,可以很簡單很完美的實現(xiàn)這種效果;
因為是官方發(fā)布的,所以使用起來不用任何第三方的東西;而且非常簡單明了;
同樣,如果想要使用Tablayout必須在build中配置:
dependencies { compile 'com.android.support:design:23.1.1' }
先看下布局:
代碼使用起來也非常簡單
第一步:初始化ViewPager并設置adapter
第二步:給Tablayout設置標題
第三步:將Tablayout和ViewPager關聯(lián)到一起
//第一步:初始化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")); //第三步:關聯(lián)ViewPager tabLayout.setupWithViewPager(viewPager);
好了,正常情況下就到此結(jié)束了,但是我在寫這個demo的時候碰到一個坑:
標題死活顯示不出來,浪費了很長時間,最后在Tablayout關聯(lián)Viewpager之后添加從新設置下標題即可:
//在關聯(lián)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官方?jīng)]有給我們提供更改下劃線的寬度的方法;
我們可以通過其他方法更改:(兩步)
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.在關聯(lián)ViewPager之前添加
tabLayout.post(new Runnable() { @Override public void run() { setIndicator(tabLayout,25,25); } });
最后記得更改滑動方式: app:tabMode="fixed"
左右距離可根據(jù)自己項目設置;(更改下劃線寬度需在第一步(Tablayout普通用法)的基礎上更改使用)
三、更改標簽對齊方式
在xml文件中:
刪除 app:tabMode="" ;
添加 app:tabGravity="center" ;
還可以通過 app:tabMaxWidth="150dp" 限制標簽寬度
(更改更改標簽對齊方式需在第一步(Tablayout普通用法)的基礎上更改使用)
四、標題之間添加分割線;
1.在drawable文件夾下創(chuàng)建 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);
看完上述內(nèi)容,你們對如何正確的使用Tablayout有進一步的了解嗎?如果還想了解更多知識或者相關內(nèi)容,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。