Material Design 之 TabLayout 使用

寫在前面

這是Material Design系列文章的第四篇，講一下項目中用得非常多的一個組件－Tabs，在一個app中，Tabs 使不同視圖和功能之間的切換變得簡單。使用 tabs 將大量關(guān)聯(lián)的數(shù)據(jù)或者選項劃分成更易理解的分組，可以在不需要切換出當先上下文的情況下，有效的進行內(nèi)容導(dǎo)航和內(nèi)容組織，
便于用戶操作。提升用戶體驗。下面一起來看一下Tabs的使用。

Tabs 的使用方式

用法：tab 用來顯示有關(guān)聯(lián)的分組內(nèi)容。tab標簽用來簡要的描述該Tab下的內(nèi)容。

(1) 默認的app bar ＋固定的tab bar

tabs1.png

（2）可擴展的app bar＋ tab bar

tabs2.png

（3）隨著滾動內(nèi)容被鎖定在頂部的ab bar

tabs3.png

（4）默認的app bar ＋可滾動的app bar

tabs4.png

（5）和指示器一樣字體顏色的tabs

tabs5.png

（6）默認app bar +固定的帶圖標的 app bar

tabs6.png

（7） icon 顏色和指示器顏色一樣的tabs

tabs7.png

以上就是Material Design 官方給出的Tabs 的一些使用模式。基本上能涵蓋我們項目中的使用。

Tab特性：

Tabs 應(yīng)該在一行內(nèi)，如果有必要，標簽可以顯示兩行然后截斷
Tabs 不應(yīng)該被嵌套，也就是說一個Tab的內(nèi)容里不應(yīng)該包含另一組Tabs
Tabs 控制的顯示內(nèi)容的定位要一致。
Tab 中當前可見內(nèi)容要高亮顯示。
Tabs 應(yīng)該歸類并且每組 tabs 中內(nèi)容順序相連。
一組 tabs 至少包含 2 個 tab 并且不多于 6 個 tab。

其他的一些使用細節(jié)和規(guī)范請查看 Material Design 的官方文檔。

Tabs 的具體實現(xiàn)－TabLayout

上面講了Tabs的一些特性、規(guī)范和使用模式，下面我們看一下具體在代碼中的實現(xiàn)。要實現(xiàn)一組Tabs，Google 給我提供了一個控件－TabLayout。來看一下TabLayout的介紹和使用。

TabLayout 提供一個水平方向的布局來顯示Tabs，繼承的是HorizontalScrollView 這個類。

TabLayout 基礎(chǔ)

1，創(chuàng)建Tabs （代碼中）

Tabs的顯示是通過TabLayout.Tab 來完成的,我們可以通過newTab() 來創(chuàng)建，在這兒你也可以改變Tab的標簽（label）和icon 通過 setText(int) 和setIcon(int)。最后需要通addTab(Tab ) 方法把Tab添加到TabLayout 顯示。代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:titleTextColor="@color/white"
        app:title="TabLayout示例"
        app:navigationIcon="@drawable/ic_book_list"
        >

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

    </android.support.design.widget.TabLayout>
   
</LinearLayout>

Activity 中添加Tab：

        mTabLayout = (TabLayout) findViewById(R.id.tab_layout2);

        mTabLayout.addTab(mTabLayout.newTab().setText("個性推薦"));
        mTabLayout.addTab(mTabLayout.newTab().setText("歌單"));
        mTabLayout.addTab(mTabLayout.newTab().setText("主播電臺"));
        mTabLayout.addTab(mTabLayout.newTab().setText("排行榜"));

效果圖如下：

simple_tabLayout.png

2，創(chuàng)建Tabs （xml 布局文件中）

直接在xml 添加Tab：
上面是在代碼中通過addTab 添加Tab，也可以直接在 xml 中添加，使用TabItem，代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:titleTextColor="@color/white"
        app:title="TabLayout示例"
        app:navigationIcon="@drawable/ic_book_list"
        >

    </android.support.v7.widget.Toolbar>
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout2"
        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="個性推薦"
             />
        <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>
   
</LinearLayout>```

效果第一種方式是一樣的，就不再多講。

##### 3,帶Icon的Tabs
創(chuàng)建Tab的時候是可以設(shè)置圖標的，可以在布局文件中用TabItem的icon屬性,代碼如下：
```java
 <android.support.design.widget.TabItem
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="個性推薦"
             android:icon="@drawable/ic_favorite_border_black_24dp"
             />

也可依在代碼中設(shè)置：

mTabLayout.addTab(mTabLayout.newTab().setText("個性推薦").setIcon(R.drawable.ic_favorite_border_black_24dp));

效果如下：

tab_with_icon.png

** 當然了，還可是只有Icon 的Tab，把設(shè)置的標簽去掉不讓顯示就好了，這里就不多講了。**

4,Tab 選中監(jiān)聽

Tab切換的時候，我們需要切換頁面的內(nèi)容，這時候就需要為它設(shè)置一個監(jiān)聽器TabLayout.OnTabSelectedListener，如下：

 mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.i(TAG,"onTabSelected:"+tab.getText());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

然后就可以在onTabSelected 做對應(yīng)的邏輯處理了，切換到哪個Tab就顯示對應(yīng)Tab 的內(nèi)容。

TabLayout 進階

上面講到了TabLayout 最簡單的使用，實際項目中，我們的需求更復(fù)雜一些，比如：需要改變Tabs 的指示器的高和顏色，需要改變Tab的寬高，Tab的顏色，固定的Tabs，可滾動的Tabs ,Tabs+viewPager+Fragment 的使用等等。因此我們需要了解TabLayout的一些重要屬性。

app:tabBackground 設(shè)置Tabs的背景
app:tabGravity 為Tabs設(shè)置Gravity,有兩個常量值，GRAVITY_CENTER,GRAVITY_FILL,用法：

app:tabGravity="center"

或者

app:tabGravity="fill"

值為center，Tabs就居中顯示，fill 就充滿TabLayout 。

app:tabIndicatorColor 設(shè)置指示器的顏色（默認情況下指示器的顏色為colorAccent）
app:tabIndicatorHeight 設(shè)置指示器的高度，Material Design 規(guī)范建議是2dp
app:tabMaxWidth 設(shè)置 Tab 的最大寬度
app:tabMinWidth 設(shè)置 Tab 的最小寬度
app:tabMode 設(shè)置Tabs的顯示模式，有兩個常量值，MODE_FIXED,MODE_SCROLLABLE。用法：

app:tabMode="fixed"

或者

app:tabMode="scrollable"

fixed 表示固定的Tab，scrollable 可滾動的Tab， Tab個數(shù)少的時候用 fixed,當Tab個數(shù)較多（大于四個或者5個）時用scrollable。

app:tabPadding 這幾個很簡單設(shè)置Tab padding
app:tabPaddingTop
app:tabPaddingBottom
app:tabPaddingStart
app:tabPaddingEnd
app:tabSelectedTextColor 設(shè)置Tab選中后，文字顯示的顏色
app:tabTextColor 設(shè)置Tab未選中，文字顯示的顏色

以上就是TabLayout 的常用屬性，了解了這些屬性后我們就能做出更多的效果了。

可滾動的Tabs:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:titleTextColor="@color/white"
        app:title="TabLayout示例"
        app:navigationIcon="@drawable/ic_book_list"
        >

    </android.support.v7.widget.Toolbar>
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabIndicatorColor="@android:color/holo_red_light"
        app:tabIndicatorHeight="2dp"
        app:tabSelectedTextColor="@android:color/holo_red_light"

        >
         <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="個性推薦"
        android:icon="@drawable/ic_favorite_border_black_24dp"
        />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="歌單"
            android:icon="@drawable/ic_insert_photo_black_24dp"
            />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="主播電臺"
            android:icon="@drawable/ic_play_circle_outline_black_24dp"
            />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="排行榜"
            android:icon="@drawable/ic_clear_all_black_24dp"
            />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="動態(tài)"
            android:icon="@drawable/ic_favorite_border_black_24dp"
            />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="聽歌識曲"
            android:icon="@drawable/ic_insert_photo_black_24dp"
            />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="好友"
            android:icon="@drawable/ic_play_circle_outline_black_24dp"
            />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="附近"
            android:icon="@drawable/ic_clear_all_black_24dp"
            />
    </android.support.design.widget.TabLayout>

</LinearLayout>

當然了也可在代碼中動態(tài)添加Tab，前面已經(jīng)說過了，不再重復(fù)，效果：

scrollable_tabs.gif

Tabs 居中顯示

 <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="center"
        app:tabIndicatorColor="@android:color/holo_red_light"
        app:tabIndicatorHeight="2dp"
        app:tabSelectedTextColor="@android:color/holo_red_light"

        >
         <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>

效果圖如下：

center_tabs.png

TabLayout + ViewPager + Fragment

這種組合可能是我們項目里面用的最多的，接下來看一下怎么使用

1，布局文件，TabLayout 下面有一個ViewPager

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
 <android.support.v7.widget.Toolbar
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="@color/colorPrimary"
     app:titleTextColor="@color/white"
     app:title="TabLayout示例"
     app:navigationIcon="@drawable/ic_book_list"
     >

 </android.support.v7.widget.Toolbar>

 <android.support.design.widget.TabLayout
     android:id="@+id/tabLayout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@color/colorPrimary"
     app:tabTextColor="@color/white"
     app:tabSelectedTextColor="@color/white"
     app:tabIndicatorColor="@android:color/holo_green_light"
     app:tabIndicatorHeight="2dp"
     app:tabGravity="fill"
     app:tabMode="fixed"
     >

 </android.support.design.widget.TabLayout>

 <android.support.v4.view.ViewPager
     android:id="@+id/view_pager"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

 </android.support.v4.view.ViewPager>
</LinearLayout>

2,Activity 代碼,View 的Adapter 和Tab對應(yīng)的Fragment 代碼相對簡單，沒有貼出來，需要的請看Demo，代碼如下：

/**
 * Created by zhouwei on 16/12/23.
 */

public class TabActivity extends AppCompatActivity {
    public static final String TAG = "TabActivity";
    public static final String []sTitle = new String[]{"ITEM FIRST","ITEM SECOND","ITEM THIRD"};
    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_layout_ac);
        initView();
    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[0]));
        mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[1]));
        mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[2]));
      //  mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[3]));
      //  mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[4]));
      //  mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[5]));

        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.i(TAG,"onTabSelected:"+tab.getText());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        mTabLayout.setupWithViewPager(mViewPager);
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(FirstFragment.newInstance());
        fragments.add(SecondFragment.newInstance());
        fragments.add(ThirdFragment.newInstance());

        MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(),fragments, Arrays.asList(sTitle));
        mViewPager.setAdapter(adapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
               Log.i(TAG,"select page:"+position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }
}

3,其中重要的一步是TabLayout 和ViewPager 關(guān)聯(lián)起來，TabLayout有一個setupWithViewPager方法，

 mTabLayout.setupWithViewPager(mViewPager);

4,效果圖：

TabLayout_ViewPager_Fragment.gif

另一種方式關(guān)聯(lián)ViewPager

上面是通過setupWithViewPager 來關(guān)聯(lián)TabLayout和ViewPager的，還有另外一種方式，將TabLayout，作為ViewPager的子View。

<android.support.v4.view.ViewPager
     android:id="@+id/view_pager"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
  <android.support.design.widget.TabLayout
      android:id="@+id/tabLayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      app:tabTextColor="@color/white"
      app:tabSelectedTextColor="@color/white"
      app:tabIndicatorColor="@android:color/holo_green_light"
      app:tabIndicatorHeight="2dp"
      app:tabGravity="fill"
      app:tabMode="fixed"
      >

  </android.support.design.widget.TabLayout>
 </android.support.v4.view.ViewPager>

然后在代碼中我們就不需要去手動關(guān)聯(lián)了，不需要寫下面這行代碼了

 mTabLayout.setupWithViewPager(mViewPager);

效果和上面完全是一樣的。其實也很簡單，這種方式無非就是TabLayout 獲取了Parent ,然后判斷是不是ViewPager，如果是ViewPager，它就幫我們調(diào)用了setupWithViewPager （）方法。源碼中我們可以看到，在onAttachedToWindow 方法被回調(diào)的時候，獲取Parent 判斷的，代碼如下：

 @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        if (mViewPager == null) {
            // If we don't have a ViewPager already, check if our parent is a ViewPager to
            // setup with it automatically
            final ViewParent vp = getParent();
            if (vp instanceof ViewPager) {
                // If we have a ViewPager parent and we've been added as part of its decor, let's
                // assume that we should automatically setup to display any titles
                setupWithViewPager((ViewPager) vp, true, true);
            }
        }
    }

最后

以上就是TabLayout 使用的全部內(nèi)容，由于Tabs的交互很有好，所以在app 里運用得比較多，掌握了TabLayout ，我們開發(fā)起來就得心應(yīng)手了，另外，TabLayout 和AppbarLayout 結(jié)合能做出許多很酷的效果，還不會用AppbarLayout 的可以去看一下我前面的博客。如果有什么問題，歡迎討論。

最后Demo 請戳MaterialDesignSamples

參考：
Material Design Component -Tabs

最后編輯于：2017.12.05 04:08:26

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 229,732評論 6贊 539
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 99,214評論 3贊 426
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 177,781評論 0贊 382
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,588評論 1贊 316
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,315評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 55,699評論 1贊 327
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,698評論 3贊 446
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 42,882評論 0贊 289
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 49,441評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 41,189評論 3贊 356
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,388評論 1贊 372
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,933評論 5贊 363
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 44,613評論 3贊 348
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,023評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,310評論 1贊 293
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,112評論 3贊 398
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,334評論 2贊 377

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Material Design 之 TabLayout 使用

Material Design 之 TabLayout 使用

寫在前面

Tabs 的使用方式

Tabs 的具體實現(xiàn)－TabLayout

TabLayout 基礎(chǔ)

1，創(chuàng)建Tabs （代碼中）

2，創(chuàng)建Tabs （xml 布局文件中）

4,Tab 選中監(jiān)聽

TabLayout 進階

可滾動的Tabs:

Tabs 居中顯示

TabLayout + ViewPager + Fragment

另一種方式關(guān)聯(lián)ViewPager

最后

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Material Design 之 TabLayout 使用

寫在前面

Tabs 的使用方式

Tabs 的具體實現(xiàn)－TabLayout

TabLayout 基礎(chǔ)

1，創(chuàng)建Tabs （代碼中）

2，創(chuàng)建Tabs （xml 布局文件中）

4,Tab 選中監(jiān)聽

TabLayout 進階

可滾動的Tabs:

Tabs 居中顯示

TabLayout + ViewPager + Fragment

另一種方式關(guān)聯(lián)ViewPager

最后

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频