最詳細的 TabLayout 的用法

pklq6594 7年前發布 | 55K 次閱讀安卓開發 Android開發移動開發

TabLayout是屬于容器控件, 提供水平顯示Tab的效果. 常常和ViewPager配合使用. 我將全面地講解其用法. 反正我是沒看過比我還詳細的了.

演示

添加依賴

這是Android Design 包下的類, 該包是Android5.0 引入的UI包

compile 'com.android.support:design:25.2.0'

布局

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

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

代碼

public classMainActivityextendsAppCompatActivity{

    @BindView(R.id.tab_layout)
    TabLayout mTabLayout;

    @Override
    protectedvoidonCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        mTabLayout.addTab(mTabLayout.newTab().setText("首頁"));
        mTabLayout.addTab(mTabLayout.newTab().setText("分類"));
        mTabLayout.addTab(mTabLayout.newTab().setText("設置"));
    }
}

第二種方式

完全通過布局創建

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    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.TabLayout>

TabLayout

方法有點多

屬性

修改布局的屬性

顯示模式

可滑動

app:tabMode="scrollable"

固定

app:tabMode="fixed"

指示器選項

app:tabIndicatorHeight="10dp"   //指示器高度
app:tabIndicatorColor="@color/colorPrimary" // 指示器顏色

文字選項

app:tabSelectedTextColor="#ffffff"  // 選擇的Tab的文字顏色
app:tabTextColor="#000000"  // 未選擇的Tab文字顏色
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Large" // 文字樣式

背景設置

兩者沒什么區別

android:background="@color/colorAccent" // 背景
app:tabBackground="@color/colorPrimary" //背景

標簽距離

app:tabPaddingStart="10dp"
app:tabPaddingBottom="10dp"
app:tabPadding="10dp"
app:tabPaddingEnd="10dp"
app:tabPaddingTop="10dp"

對齊方式

居中顯示

app:tabGravity="center"

填充

app:tabGravity="fill"

最詳細的 TabLayout 的用法

偏移

從左邊開始偏移距離, 必須是可滑動的模式 scrollable

app:tabContentStart="200dp"

標簽寬度限制

最大寬度

app:tabMaxWidth="50dp"

最小寬度

app:tabMinWidth="100dp"

代碼

TabLayout提供的方法

標簽

創建標簽

TabLayout.TabnewTab()

添加標簽, 只有添加后才能顯示

voidaddTab(TabLayout.Tab tab)

void addTab (TabLayout.Tab tab,
                int position)

void addTab (TabLayout.Tab tab,
                boolean setSelected)

void addTab (TabLayout.Tab tab,
                int position, 
                boolean setSelected)

刪除標簽

voidremoveTab(TabLayout.Tab tab)

通過索引刪除標簽

voidremoveTabAt(intposition)

刪除全部標簽

voidremoveAllTabs()

得到標簽

TabLayout.TabgetTabAt(intindex)

得到標簽總數

intgetTabCount()

設置樣式

指示器

voidsetSelectedTabIndicatorColor(intcolor)// 指示器顏色
void setSelectedTabIndicatorHeight (intheight) // 指示器高度

標簽文本

voidsetTabTextColors(intnormalColor, // 正常顏色
                int selectedColor) // 選擇狀態顏色

void setTabTextColors (ColorStateList textColor) // 狀態顏色

顯示模式

這個之前屬性里面介紹過了

intgetTabMode()
void setTabMode (intmode)

mode:

MODE_SCROLLABLE
MODE_FIXED

對齊方式

voidsetTabGravity(intgravity)
int getTabGravity ()

添加View

不止是添加標簽Tab還可以直接添加View

voidaddView(View child)

void addView (View child,
                int index)

void addView (View child,
                ViewGroup.LayoutParams params)

void addView (View child, // View對象
                int index, // 位置索引
                ViewGroup.LayoutParams params) // 布局參數

得到當前選擇的位置

intgetSelectedTabPosition()

監聽器

選擇監聽器

該方法已經被廢棄, 不推薦使用.

voidsetOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)

替代的方法是

voidaddOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)

該監聽器用完后需要刪除

voidremoveOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)

一次性刪除所有添加的選擇監聽器

voidclearOnTabSelectedListeners()

Tab

該類是TabLayout的內部類, 表示TabLayout中的每一個標簽. 我將介紹這個類的所有方法

判斷是否被選擇

booleanisSelected()

設置為被選擇狀態

voidselect()

描述內容

如果你沒用設置描述內容, 默認的是標簽的標題

TabLayout.TabsetContentDescription(intresId)// 用strings id的
TabLayout.Tab setContentDescription (CharSequence contentDesc)
CharSequence getContentDescription ()

自定義標簽的內容

每個標簽可以盡情的自定義視圖

TabLayout.TabsetCustomView(intresId)
TabLayout.Tab setCustomView (View view)

標簽的標簽

給Tab設置tag, 然后就可以通過tag得到Tab

TabLayout.TabsetTag(Object tag)
Object getTag ()

添加圖標

TabLayout.TabsetIcon(Drawable icon)
TabLayout.Tab setIcon (intresId)
Drawable getIcon ()

標題的文字

TabLayout.TabsetText(intresId)
TabLayout.Tab setText (CharSequence text)
CharSequence getText ()

當前標簽位置

intgetPosition()

關聯ViewPager

TabLayout和ViewPager配合使用是最常見的運用方式, 可以說量身打造. 這里我將介紹兩種方式.

兩者配合使用后TabLayout就不能通過自己創建Tab了, 需要PagerAdapter中實現 getPagerTitle() 方法返回標簽的文字. 標簽的數量有ViewPager的分頁數量決定.

布局中嵌套

布局

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

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

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

代碼

public classMainActivityextendsAppCompatActivity{

    @BindView(R.id.tab_layout)
    TabLayout mTabLayout;
    @BindView(R.id.viewpager)
    ViewPager mViewpager;
    private ArrayList<View> mList;
    private String[] mTitle;

    @Override
    protectedvoidonCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        initData();

        mViewpager.setAdapter(new PagerAdapter() {
            @Override
            publicintgetCount(){
                return mList.size();
            }

            @Override
            publicbooleanisViewFromObject(View view, Object object){
                return view == object;
            }

            @Override
            publicObjectinstantiateItem(ViewGroup container,intposition){
                View view = mList.get(position);
                container.addView(view);
                return view;
            }

            @Override
            publicvoiddestroyItem(ViewGroup container,intposition, Object object){
                container.removeView((View) object);
            }

            @Override
            publicCharSequencegetPageTitle(intposition){
                return mTitle[position];
            }
        });
    }

    privatevoidinitData(){
        View viewpagerA = getLayoutInflater().inflate(R.layout.viewpager_a, null);
        View viewpagerB = getLayoutInflater().inflate(R.layout.viewpager_b, null);
        View viewpagerC = getLayoutInflater().inflate(R.layout.viewpager_c, null);

        mList = new ArrayList<>();
        mList.add(viewpagerA);
        mList.add(viewpagerB);
        mList.add(viewpagerC);

        mTitle = new String[]{"首頁", "分類", "設置"};
    }

布局中關聯

如果布局沒有嵌套

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

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

就需要在ViewPager設置PagerAdapter之前關聯兩者

mTabLayout.setupWithViewPager(mViewpager);

雖然配合ViewPager后TabLayout創建的Tab并不能正常顯示, 因為setupWithViewPager內部方法是先刪除所有的標簽再添加.

但是還是可以通過 getTabAt() 得到標簽之后進行修改.

來自：http://liangjingkanji.coding.me/2017/03/03/TabLayout/

本文由用戶 pklq6594 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1488526061638.html

安卓開發 Android開發移動開發

最詳細的 TabLayout 的用法

演示

添加依賴

布局

代碼

第二種方式

TabLayout

屬性

代碼

Tab

判斷是否被選擇

設置為被選擇狀態

描述內容

自定義標簽的內容

標簽的標簽

添加圖標

標題的文字

當前標簽位置

關聯ViewPager

布局中嵌套

布局中關聯

相關經驗

相關資訊

相關文檔

目錄