Material Design系列之TabLayout詳解

Material Design系列之TabLayout詳解

Material Design官方文檔Tabs的介紹

TabLayout位于design包下懦胞,使用時導入design包坊萝。

compile 'com.android.support:design:26.0.0-alpha1'

一般這個控件是結合viewpager和fragment使用奕坟。TabLayout官方API文檔

[圖片上傳失敗...(image-8c4335-1529490626094)]

使用方式一

代碼動態(tài)添加tab項

布局如下:

<android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>
public class TabLayoutActivity extends AppCompatActivity {
    private TabLayout tablayout;
    private ViewPager viewPager;
    private String[] tabTitles = {"頭條","資訊","體育","娛樂","經(jīng)濟","科技","軍事","熱點","社會","國際","國內(nèi)"};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);

        initViews();
    }

    private void initViews() {
        tablayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);
        tablayout.setupWithViewPager(viewPager);//必須在 viewPager.setAdapter()之后使用
        tablayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//        tablayout.addTab(tablayout.newTab().setText("新增標簽"));//代碼添加標簽
    }

    class MyPagerAdapter extends FragmentPagerAdapter{

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return TabLayoutFragment.newInstance(tabTitles[position]);
        }

        @Override
        public int getCount() {
            return tabTitles.length;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return tabTitles[position];
        }
    }
}
使用方式二

直接在布局中使用TabItem定死tab項

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="標簽1"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="標簽2"
            android:icon="@mipmap/ic_launcher"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout="@layout/tab_custom_layout"/>
    </android.support.design.widget.TabLayout>
重要屬性詳解
  • app:tabSelectedTextColor:選中字體的顏色
  • app:tabTextColor:未選中字體的顏色
  • app:tabIndicatorColor:指示器下標的顏色
  • app:tabIndicatorHeight:指示器下標的高度
  • app:tabGravity:tab中布局位置戴已,有兩種模式center和fill
  • app:tabTextAppearance:字體大小
  • app:tabBackground:設置背景
  • app:tabMode:設置tablayout的排列模式固额,有兩種scrollable和fixed头谜;默認是fixed狐蜕。fixed是固定的宠纯,適用于標簽較少,scrollable是可滾動的层释,適用于標簽較多的情況下
自定義標簽布局

示例:

for (int i = 0; i < tabTitles.length; i++){
            TabLayout.Tab itemTab = tablayout.getTabAt(i);
            if (itemTab!=null){
                itemTab.setCustomView(R.layout.tab_custom_layout);
                TextView itemTv = (TextView) itemTab.getCustomView().findViewById(R.id.tv_custom);
                itemTv.setText("自定義標簽"+i);
            }
        }
注意

tablayout.setupWithViewPager(viewPager);//必須在 viewPager.setAdapter()之后使用

當結合viewpager使用時婆瓜,viewpager會有一個預加載機制,可以通過viewpager的setOffscreenPageLimit方法設置數(shù)目贡羔。若不想頁面在不可見的情況下加載數(shù)據(jù)廉白,需
自己在fragment中自行處理數(shù)據(jù)加載問題。

還有一個就是fragment重新創(chuàng)建問題乖寒,可以在viewpager的適配器中的重寫destroyItem方法猴蹂,去掉super方法調(diào)用,進行自己的操作

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //super.destroyItem(container, position, object);
        }

Github示例代碼

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末楣嘁,一起剝皮案震驚了整個濱河市币叹,隨后出現(xiàn)的幾起案子顷啼,更是在濱河造成了極大的恐慌俭缓,老刑警劉巖锯厢,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異叭爱,居然都是意外死亡撮躁,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門买雾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來把曼,“玉大人,你說我怎么就攤上這事漓穿∽S兀” “怎么了?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵器净,是天一觀的道長。 經(jīng)常有香客問我当凡,道長山害,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任沿量,我火速辦了婚禮浪慌,結果婚禮上,老公的妹妹穿的比我還像新娘朴则。我一直安慰自己权纤,他們只是感情好,可當我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著汹想,像睡著了一般外邓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上古掏,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天损话,我揣著相機與錄音,去河邊找鬼槽唾。 笑死丧枪,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的庞萍。 我是一名探鬼主播拧烦,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼钝计!你這毒婦竟也來了恋博?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤葵蒂,失蹤者是張志新(化名)和其女友劉穎交播,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體践付,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡秦士,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了永高。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片隧土。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖命爬,靈堂內(nèi)的尸體忽然破棺而出曹傀,到底是詐尸還是另有隱情,我是刑警寧澤饲宛,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布皆愉,位于F島的核電站,受9級特大地震影響艇抠,放射性物質(zhì)發(fā)生泄漏幕庐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一家淤、第九天 我趴在偏房一處隱蔽的房頂上張望异剥。 院中可真熱鬧,春花似錦絮重、人聲如沸冤寿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽督怜。三九已至殴瘦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間亮蛔,已是汗流浹背痴施。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留究流,地道東北人辣吃。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像芬探,于是被迫代替她去往敵國和親神得。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,955評論 2 355

推薦閱讀更多精彩內(nèi)容