史上最詳盡tablayout使用

史上最詳盡tablayout使用

一、什麼是tablayout？

源碼中定義：

TabLayout provides a horizontal layout to display tabs.
           

翻譯：tablayout展示tabs（标簽）的水準布局。（繼承horizontalScrollView）

二、tablayout基本使用方式

1、直接顯示tablayout方式一

布局中：

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

代碼中：

tabLayout= (TabLayout) findViewById(R.id.tabLayout);
tablayout.addTab(tablayout.newTab().setText("新聞"));
tablayout.addTab(tablayout.newTab().setText("曆史"));
tablayout.addTab(tablayout.newTab().setText("美圖"));
           

效果：

2、直接顯示tablayout使用方式二

布局中：

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

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="新聞" />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="曆史" />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="美圖" />
    </android.support.design.widget.TabLayout>
           

代碼中不用任何代碼，效果跟方式一一樣

三、tablayout的基本屬性

1、在布局中設定屬性

<android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:tabBackground="@color/gallery_red"//改變整個tablayout的背景顔色
        app:tabContentStart="100dp"//tablayout開始位置的偏移量，相當于margin
        app:tabGravity="center"//内容顯示模式，center和fill
        app:tabIndicatorColor="@color/black"//設定訓示器的顔色
        app:tabIndicatorHeight="4dp"//設定訓示器的高度
        app:tabMaxWidth="14dp"//設定最大的tab寬度
        app:tabMinWidth="10dp"//設定最小的寬度
        app:tabMode="fixed"//設定tab的模式，預設是fixed，标簽被擠壓不能滑動，scrollable可以滑動
        app:tabPadding="4dp"//設定tab内部子控件的padding
        app:tabSelectedTextColor="@color/black"//設定選中文字的顔色
        app:tabTextAppearance="@style/tablayuot_style"//設定文字的外貌
        app:tabTextColor="@color/gray" //設定未選中文字的顔色/>
           

注意：設定文字外貌有坑，隻要設定了style必須有文字大小和顔色

2、在代碼中設定屬性

//在代碼中添加tab
    tablayout.addTab(tablayout.newTab().setText("美圖"));

    //給tab設定圖檔
    tablayout.getTabAt().setIcon(R.drawable.ic_dashboard_black_24dp);

    //給tab設定監聽
    tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
         @Override
         public void onTabSelected(TabLayout.Tab tab) {
             //選中了tab的邏輯

         @Override
         public void onTabUnselected(TabLayout.Tab tab) {
             //未選中tab的邏輯
         }

         @Override
         public void onTabReselected(TabLayout.Tab tab) {
             //再次選中tab的邏輯
         }

     //設定tab預設選中子控件
     tablayout.getTabAt(position).select();

     //最關鍵最常用的，與viewpager關聯使用
     tablayout.setupWithViewPager(viewpager);
           

四、源碼分析

自己看吧。

五、後記

内容精簡、全面。