2. 程式人生 > >Material Design：TabLayout的使用

Material Design：TabLayout的使用

阿新 • • 發佈：2019-02-10
ase 現在 omv follow 滿足 script sta ont cti

轉：https://www.jianshu.com/p/9c072bc99ebe

谷歌在Material Design中推出TabLayout以替代開源庫PagerSlidingTabStrip和ViewPagerIndicator的使用。事實上，這類indicator指示器的布局可謂是Android中最常見的布局設計了，TabLayout的出現給我們帶來一定便利，它的使用對開發者更加友好，並且和Toolbar一樣，配合material design的其他控件使用能輕易創造出酷炫的效果，下面我們快來學習它。

一、創建布局

使用TabLayout時，常與ViewPager一起關聯使用，布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"/>
</LinearLayout>
註意TabLayout中的tabMode屬性可選scrollable或fixed：
  • scrollable可以滑動，向左對齊，如今日頭條，網易新聞就是scrollable，但是在Tab選項卡較少時會無法填滿TabLayout欄。
  • fixed則無法滑動，每個選項卡平均分配空間，適合較少Tab選項卡的情況，當選項卡較多時，會出現每個選項卡內容無法顯示完整的情況，請大家大家根據情況選擇。
    也可在代碼中使用以下方法設置。
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
或
tabLayout.setTabMode(TabLayout.MODE_FIXED);
還有另一個比較類似的屬性是app:tabGravity可選fill或centre：
  • 當選項卡很少需要置於中心時，就需要用到centre，可以參考簡書手機App首頁標題欄“文章”，“專題”兩個選項卡的居中效果。
  • 當選項卡需要填滿TabLayout布局時，則用到fill。

二、創建Fragment

public class PageFragment extends android.support.v4.app.Fragment {

    public static final String ARG_PAGE = "ARG_PAGE";
    private int mPage;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment pageFragment = new PageFragment();
        pageFragment.setArguments(args);
        return pageFragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        TextView textView = (TextView) view;
        textView.setText("Fragment #" + mPage);
        return view;
    }
}

Fragment的布局為

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
</TextView>

沒什麽說的，布局是一個簡單的TextView，通過實例化Fragment傳遞參數。

三、創建ViewPager的適配器

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

    private Context context;
    private static final String[] mTitles = {"tab1", "tab2", "tab3"};

    public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public android.support.v4.app.Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

四、在MainActivity中設置TabLayout

public class ThirdActivity extends FragmentActivity {

    private SimpleFragmentPagerAdapter pagerAdapter;
    private ViewPager viewPager;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_third);
        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(),this);
        viewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}
技術分享圖片 TabLayout

五、自定義TabLayout樣式
你應該不會滿足於現在的TabLayout，實際應用中，往往會改變TabLayout的背景，字體大小和顏色，指示標的寬度和顏色等等。
在MainActivity布局下給TabLayout添加一個style如下：

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="@style/tab_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"/>

並且在styles中添加一個樣式：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="tab_style" parent="Widget.Design.TabLayout">
    <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>-->  
        <item name="tabPaddingStart">12dp</item>
        <item name="tabPaddingEnd">12dp</item>
        <item name="tabIndicatorColor">@color/colorAccent</item>
        <item name="tabIndicatorHeight">4dp</item>
        <item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
        <item name="tabBackground">@color/colorPrimary</item>
        <item name="tabSelectedTextColor">@color/colorAccent</item>
    </style>

    <style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="textAllCaps">false</item>
    </style>
</resources>

註意這裏的@color/colorAccent是粉色，@color/colorPrimary是藍色。

各個屬性所代表的含義：
1.tabMaxWidth：tab item的最大寬度，當app:tabMode="fixed"時不起作用，當app:tabMode="fixed"時才起作用。其中：
2.tabIndicatorColor：TabLayout指示器的顏色
3.tabIndicatorHeight：TabLayout指示器高度
4.tabPaddingStart：距離開始的長度
5.tabPaddingEnd：距離結束的長度
6.tabBackground：TabLayout背景
7.tabTextAppearance：TabLayout title字體屬性
8.tabSelectedTextColor：當前選擇的tab的字體顏色
9.textAllCaps：TabLayout創建的Tab默認的是true，如果設置圖標的話要設置成false。

這時再運行看下效果：

技術分享圖片 自定義style的TabLayout

六、添加icon到tab

當前的TabLayout沒有方法讓我們去添加icon，我們可以使用SpannableString結合ImageSpan來實現，在SimpleFragmentPagerAdapter中：

//自己隨便從官網找幾個icon吧
private static final int[] mImgIds = {R.drawable.ic_stars_black_18dp,
                                      R.drawable.ic_supervisor_account_black_24dp,
                                      R.drawable.ic_today_black_24dp
};
//...
@Override
public CharSequence getPageTitle(int position) {
    // Generate title based on item position
    // return tabTitles[position];
    Drawable image = context.getResources().getDrawable(mImgIds[position]);
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
    SpannableString sb = new SpannableString(" ");
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

再運行可以看到：


技術分享圖片 添加icon的TabLayout

如果要同時把icon和text添加到tab同理，把getPageTitle()方法改為：

@Override
public CharSequence getPageTitle(int position) {
    // Generate title based on item position
    Drawable image = context.getResources().getDrawable(mImgIds[position]);
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
    // Replace blank spaces with image icon
    SpannableString sb = new SpannableString("   " + mTitles[position]);
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

七、添加自定義的view到tab

1、自定義一個簡單的tab布局tab_layout.xml
<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:gravity="center" />
</LinearLayout>
2、在適配器中增加getTabView(...)方法：
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

    private Context context;
    private static final String[] mTitles = {"tab1", "tab2", "tab3"};
    private static final int[] mImgIds = {
            R.drawable.ic_today_black_24dp,
            R.drawable.ic_supervisor_account_black_24dp,
            R.drawable.ic_stars_black_18dp
    };

    public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public android.support.v4.app.Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
//        return mTitles[position];
        return null;
    }

    public View getTabView(int position) {
        View view = LayoutInflater.from(context).inflate(R.layout.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(mImgIds[position]);
        tv_tab.setText(mTitles[position]);
        return view;
    }
}
3、在MainActivity中使用
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(),this);
        viewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            //獲得到對應位置的Tab
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            //設置自定義的標題
            if (tab != null) {
                tab.setCustomView(pagerAdapter.getTabView(i));
            }
        }
    }

效果如下圖：

技術分享圖片 自定義view的TabLayout

八、處理配置改變

當屏幕旋轉或者配置改變的時候，我們需要保存當前的狀態。

@Override
   public void onSaveInstanceState(Bundle outState) {
       super.onSaveInstanceState(outState);
       outState.putInt(POSITION,tabLayout.getSelectedTabPosition());
   }

   @Override
   protected void onRestoreInstanceState(Bundle savedInstanceState) {
       super.onRestoreInstanceState(savedInstanceState);
       viewPager.setCurrentItem(savedInstanceState.getInt(POSITION));
   }

關於TabLayout的講解到此結束，當AppBar包裹Toolbar和TabLayout時，會有更好的效果。另外，設置自定義view後，自定義的style中tabSelectedTextColor就失效了，只找到了用selector使tab切換時圖片改變顏色的方法，沒找到改變文字顏色的方法，請各位有識之士不吝賜教。

本文參考文章：
android design library提供的TabLayout的用法
Android TabLayout 淺顯總結

Material Design：TabLayout的使用

相關推薦

Material Design：TabLayout的使用

ase 現在 omv follow 滿足 script sta ont cti 轉：https://www.jianshu.com/p/9c072bc99ebe 谷歌在Material Design中推出TabLayout以替代開源庫PagerSlidingT

Material Design ：原生TabLayout+viewpaper+fragment實現滑動效果

簡單實現 效果圖 步驟： 需求：TabLayout的簡單使用 確定佈局—找到控制元件–設定adapter– 1 initView() 2 initAdapter() 3 initTablayout() 4 initViewpager()

Material Design：利用RecyclerView CardView實現新聞卡片樣式

最終要實現的效果： 1，支援低版本 RecyclerView 和 CardView都是在Android 5.0中引入的，所以要想在低版本中使用，需要在build.gradle中新增： dependencies { ...

Angular: Material Design Angular教程：Material設計 Lynda課程中文字幕

Angular: Material Design 中文字幕 Angular教程：Material設計 中文字幕Angular: Material Design Angular Material是UI元件框架和Material Design的參考實現，Material Design是

android：自定義Material Design風格ProgressDialog的進度框

1、前言 在安卓開發中，我們需要自定義進度條對話方塊ProgressDialog來滿足設計的需求。本來主要講解如何來快速實現一個自定義進度條並且修改進度條顏色。 先看下最終效果 ： 2、程式碼編寫 2.1 佈局檔案 以下是自定義對話方塊的佈局，

第一行程式碼——第十二章：最佳的UI體驗——Material Design實戰

目錄： 12.1 什麼是 Material Design 12.2 Toolbar 12.3 滑動選單 12.3.1 DrawerLayout 12.3.2 NavigationView 12.4 懸浮按鈕和可互動提示 12.4.1 FloatingActionBut

Material Design動畫：漣漪效果

概述：本文介紹的是Android5.0中其中一個炫酷的效果,點選水波紋漣漪效果，如下圖所示： 1，配置漣漪效果的xml檔案 <?xml version="1.0" encoding="

【Material Design視覺設計語言】UI元件設計（五）：提示框

【Material Design視覺設計語言】章節列表 提示框（Dialog）用於提示使用者作一些決定，或者是完成某個任務時需要的一些其它額外的資訊。 一 提示框的功能 Dialog可以是用一種取消/確定的簡單應答模式，它常見的應用場景

Android Material Design學習之三TabLayout

TabLayout繼承自HorizontalScrollView，它提供了一個水平方向的佈局來顯示tabs（標籤） 還是先來看看官方API吧 每一個標籤都是一個TabLayout.Tab的例項物件，你可以通過newTab（）方法來建立tabs，你可以通過setText(i

【Material Design視覺設計語言】UI元件設計（四）：表格

【Material Design視覺設計語言】章節列表 表格是一個用來展示原始資料集，使用者可操作的視覺化的網格結構，並且通常出現於桌面企業產品中。 一 表格的佈局 1.1 表格型別 1.1.1 基本表格 基本的表格佈局如下

Android學習筆記：介面設計Material Design的基本使用方法（二）

四、卡片式佈局1、使用CardView實現卡片式佈局CardView由appcompat-v7庫提供，它也是一個FrameLayout，只是額外的提供了圓角和陰影等效果。CardView的使用方法：<android.support.v7.widget.CardView

Android進階——Material Design新控制元件之TabLayout製作可滾動的Tabs頁面（二）

引言 上一篇總結講解了下TabLayout的基本特點、屬性和簡單的應用步驟，相信大家已經對於TabLayout已經不再陌生，這篇就結合Fragment+ViewPager的架構開發一個主流App的主要框架，進一步學習下TabLayout的操作和監聽，同時分享一

Material Design之CardView的使用

public show 預覽 eve pad -m 優雅 pub name 本文介紹CardView這個控件的使用，CardView繼承至FrameLayout類，是support-v7包下的一個類，使用時必須引入cardview依賴包。可在下載的sdk目錄中找到。。。

使用 DrawerLayout 實現 Material Design風格的側滑

mpat 內容 white eas str out top ica findview 先看效果吧! 效果一: Android 2.3 效果 Android 5.0 效果 效果二: Android 2.3 效果 Android 5.

Instagram的Material Design概念設計文章分享

wan get 界面 ext 學習 pre overflow detail ack 近期開始研究最新的Android 5 Material Design，一加氫OS公布後，非常快就有一大批支持Android5原生風格的手機出來了，你的App

Android Material Design-Maintaining Compatibility(保持兼容性)-(七)

widget tail style 到你 lora desing 兼容 ren eve 轉載請註明出處：http://blog.csdn.net/bbld_/article/details/40634829 翻譯自： http://developer.androi

Material Design學習之 ProgreesBar

public ani bit -c cell 空間 fin pen port 轉載奇怪註明出處：王亟亟的大牛之路 繼續我們Material Design的內容，這一篇講的是進度條,上一篇是Switch地址例如以下：http://blog.csdn.ne

android material design主題在線配色

https 匯聚 .com 自動 androi 自動生成 com http bsp https://www.materialpalette.com/ 在這個工具中，你可以先選擇主色和重點色。選完之後工具會自動生成即時預覽圖並提供多種下載的方式。 https:

Material Design 現在不僅僅是設計指南

設計 全球 qpi 速度 好的 元素 努力 nal 很難 自 2014 年問世以來，Material Design 已經不僅僅是一套公開的設計原則，它已經成為了包含指南、工具和代碼的不斷擴展的高適應性設計體系，為全球市場中的應用所用。但是，設計永遠沒有最終完成的那天。在過去

npm安裝material-design-icons總是失敗

ref com 拷貝 style googl mat -i con npm安裝 項目中使用npm或者cnpm安裝material-design-icons總是失敗 解決辦法： 1、自己上github下載後拷貝到項目node_modules目錄下 2、還有npm