TabLayout使用

簡介

TabLayout provides a horizontal layout to display tabs.

源碼注釋中表示，TabLayout是提供了一個水平的布局來展示標簽。通常我們用來做選項卡這類效果。平常我們有用過開源庫 PagerSlidingTabStrip 和 ViewPagerIndicator 來實現效果。

簡單使用

1.導入兼容包
compile 'com.android.support:design:24.1.1'
2.layout中添加
<android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
3.java中使用
@BindView(R.id.tablayout)
TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);

    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("科技"));
    tabLayout.addTab(tabLayout.newTab().setText("財經"));
}

java代碼中，通過addTab()方法來添加選項，有4個重載方法：

addTab()

看過源碼知道，不管使用哪一個方法，最終都會調用最后一個方法，參數最多的。
（1） Tab tab：就是Tab類實例。
（2） int position：指定添加的Tab插入的位置。
（3） boolean setSelected：指定添加的Tab是否為選中狀態
關于Tab類的一些設置方法，下面會說明。

4.效果
TabLayout簡單使用

TabLayout樣式調整

屬性

在layout中添加的時候會發現有如下可設置的屬性：

TabLayout屬性
  • tabBackground：設置整個TabLayout背景
  • tabIndicatorColor：設置指示器的顏色
  • tabIndicatorHeight：設置指示器的高度
  • tabTextColor：設置未選中項中的字體顏色
  • tabSelectedTextColor：設置選中項中的字體顏色
  • tabTextAppearance：設置style改變字體屬性
  • tabMode：設置Tablayout的布局模式，有兩個值
    fixed：固定的，不能滑動，很多標簽的時候會被擠壓
    scrollable：可以滑動的
    默認是fixed
  • tabGravity：設置TabLayout的布局方式，有兩個值
    fill：充滿
    center：居中
    默認是fill，且只有當tabMode為fixed時才有效
  • tabMaxWidth：設置tab項最大的寬度
  • tabMinWidth：設置tab項最小的寬度
  • tabContentStart：設置TabLayout開始位置的偏移量
  • paddingStart，paddingEnd：設置整個TabLayout的內邊距
  • tabPadding，tabPaddingStart，tabPaddingEnd，tabPaddingTop，tabPaddingBottom：設置tab項的內邊距

示例：

<android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@color/colorPrimary"
    app:tabIndicatorColor="@android:color/white"
    app:tabIndicatorHeight="4dp"
    app:tabSelectedTextColor="#ffffffff"
    app:tabMode="scrollable"
    app:tabTextAppearance="@style/AppTheme.TabLayout.TextAppearance"/>
style中添加樣式

同樣，我們可以在style中添加一個樣式，給TabLayout設置style屬性。

style.xml
<style name="AppTheme.TabLayout" parent="Widget.Design.TabLayout">
    <item name="tabMode">scrollable</item>
    <item name="tabIndicatorColor">@android:color/white</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabTextAppearance">@style/AppTheme.TabLayout.TextAppearance</item>
    <item name="tabBackground">@color/colorPrimary</item>
    <item name="tabSelectedTextColor">@android:color/white</item>
</style>
<style name="AppTheme.TabLayout.TextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">#b2ffffff</item>
    <item name="textAllCaps">false</item>
</style>
layout
<android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/AppTheme.TabLayout"/>
效果
樣式調整效果

Tab類

Tab類是TabLayout中的靜態內部類，源碼：

Tab靜態內部類

看源碼知道Tab類的構造方法是私有的，不能直接new對象，注釋也表明了使用方法，通過newTab()方法來創建實例。

Tab類的一些設置方法，看下圖：

Tab相關設置方法
  • setContentDescription：設置tab標簽內容描述
  • seCustomView：設置一個自定義view來顯示標簽
  • setIcon：給tab設置一個icon
  • setTag：給tab設置一個標簽
  • setText：設置tab的文本內容

示例

@BindView(R.id.tablayout)
TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);

    TabLayout.Tab tab1 = tabLayout.newTab();
    tab1.setContentDescription("one");
    tab1.setIcon(R.mipmap.ic_launcher);
    tab1.setText("頭條");
    tab1.setTag(1);
    tabLayout.addTab(tab1);

    //自定義view
    View view = LayoutInflater.from(this).inflate(R.layout.custom_tab_layout, null);
    ImageView iv_tab = (ImageView) view.findViewById(R.id.iv_tab);
    TextView tv_tab = (TextView) view.findViewById(R.id.tv_tab);
    iv_tab.setImageResource(R.mipmap.ic_launcher);
    tv_tab.setText("社會");
    TabLayout.Tab tab2 = tabLayout.newTab();
    tab2.setCustomView(view);
    tab2.setContentDescription("two");
    tab2.setTag(2);
    tabLayout.addTab(tab2);

    tabLayout.addTab(tabLayout.newTab().setText("娛樂"));
    tabLayout.addTab(tabLayout.newTab().setText("體育"));
    tabLayout.addTab(tabLayout.newTab().setText("科技"));
    tabLayout.addTab(tabLayout.newTab().setText("財經"));
}

自定義view的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/iv_tab"
        android:layout_width="30dp"
        android:scaleType="fitXY"
        android:layout_height="30dp"/>
    <TextView
        android:id="@+id/tv_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#b2ffffff"
        android:layout_marginLeft="3dp"
        android:gravity="center" />
</LinearLayout>

效果

Tab設置效果

TabLayout+ViewPager

使用TabLayout時，更多的是用場景是配合ViewPager一起使用，通過TabLayout的setupWithViewPager()方法，使兩者關聯起來。

示例：

layout布局
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/AppTheme.TabLayout"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>
創建Fragment

（1）布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/title_tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="20sp"
        android:gravity="center">
    </TextView>
</LinearLayout>

（2）java類

public class TabFragment extends Fragment {

    public static final String PAGE_TITLE = "PAGE_TITLE";
    private String title;

    public static TabFragment newInstance(String title) {
        Bundle bundle = new Bundle();
        bundle.putString(PAGE_TITLE, title);
        TabFragment tabFragment = new TabFragment();
        tabFragment.setArguments(bundle);
        return tabFragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        title = getArguments().getString(PAGE_TITLE);

    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tab, container, false);
        TextView titleTv = (TextView) view.findViewById(R.id.title_tv);
        titleTv.setText(title);
        return view;
    }
}
創建ViewPager適配器
public class TabFragmentPagerAdapter extends FragmentPagerAdapter {
    private static final String[] mTitles = {"頭條", "社會", "娛樂", "體育", "科技", "財經"};

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

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}
Activity中關聯
@BindView(R.id.tablayout)
TabLayout tabLayout;
@BindView(R.id.viewpager)
ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);

    TabFragmentPagerAdapter adapter = new TabFragmentPagerAdapter(getSupportFragmentManager());
    mViewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(mViewPager);
}
效果
TabLayout+ViewPager
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 通常在ViewPager的上方，我們都會放一個標簽指示器與ViewPager進行聯動。以前，我們大多使用的是Git...
    DoAndKeep閱讀 79,660評論 36贊 110
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,573評論 25贊 708
  • 寫在前面 更多Material Design 文章請看：Material Design 之 Toolbar 開發實...
    依然范特稀西閱讀 38,341評論 16贊 110
  • 重幃深下莫愁堂，臥后清宵細細長。 神女生涯原是夢，小姑居處本無郎。 風波不信菱枝弱，月露誰教桂葉香。 直道相思了無...
    慶忌_閱讀 595評論 0贊 1
  • 昨晚竟然夢到了前男友。 這是一個很長的夢，醒來還記得大半。夢見他帶我回家吃飯，還和他的爸爸媽媽奶奶打招呼，夢見我遠...
    dd6f72aa959b閱讀 117評論 3贊 0