MaterialDesign系列文章(七)TabLayout的使用

不怕跌倒,所以飛翔

TabLayout的使用

用于展示Tab的控件

1基本的使用方式

  • 通過xml設(shè)置

        <android.support.design.widget.TabLayout
            android:id="@+id/tl"
            android:layout_width="match_parent"
            android:layout_height="45dp">
    
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab1"/>
    
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab2"/>
    
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab3"/>
    
        </android.support.design.widget.TabLayout>
    
  • 通過代碼設(shè)置條目

    tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
    
  • 一些基本參數(shù)設(shè)置

    • app:tabSelectedTextColor 設(shè)置選中字體的顏色
    • app:tabTextColor 未選中字體的顏色
    • app:tabIndicatorColor 設(shè)置指示器下標(biāo)的顏色
    • app:tabBackground 整個(gè)TabLayout的顏色
    • app:tabIndicatorHeight 設(shè)置指示器下標(biāo)的高度(這里如果設(shè)置成0的時(shí)候就是沒有底部的下劃線了)
    • app:tabMode Tab的模式(后面會詳細(xì)說明)
    • app:tabPadding 設(shè)置Tab內(nèi)部的子控件的Padding
    • app:tabGravity 內(nèi)容的顯示模式

2改變TabLayout的內(nèi)部字體大小

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"http://設(shè)置文字的外貌

3添加圖標(biāo)

tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));

4Tab模式

  • fixed 固定的,標(biāo)簽多的時(shí)候會被擠壓,并且不能滑動
  • scrollable 非固定的,標(biāo)簽多的時(shí)候能滑動

5TabLayout的監(jiān)聽(addOnTabSelectedListener)

  • onTabSelected(TabLayout.Tab tab) 選中了Tab的邏輯
  • onTabUnselected(TabLayout.Tab tab) 未選中Tab的邏輯
  • onTabReselected(TabLayout.Tab tab) 再次選中Tab的邏輯

6和ViewPager聯(lián)動

tabLayout.setupWithViewPager(Viewpager); (這里注意一點(diǎn),當(dāng)和ViewPager聯(lián)動的時(shí)候要重寫getPageTitle這個(gè)方法設(shè)置Tab的標(biāo)題)

7默認(rèn)選中某項(xiàng)

tabLayout.getTabAt(position).select();


這一系列文章的地址,希望對大家有幫助

項(xiàng)目地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容