八、TabLayout

一、概述

TabLayout繼承關(guān)系.png

它也是design中新出的一個控件，用來實現(xiàn)選項卡切換的效果，以前我們常用RadioGroup+RadioButton或者TabHost等來實現(xiàn)，現(xiàn)在可以用TabLayout輕松的搞定；

二 、基本使用

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidwanga.serenitynanian.serenityproject.TabLayoutActivity">

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

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

在Activity中的代碼設(shè)置如下：

 mTabLayout = (TabLayout) findViewById(R.id.ac_tablayout);
        //最基本的使用
        mTabLayout.addTab(mTabLayout.newTab().setText("tab1"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab2"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab3"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab4"));
基本的效果圖.png

進(jìn)本的使用方式還有另外一種，如下布局，直接在xml中填充布局選項：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidwanga.serenitynanian.serenityproject.TabLayoutActivity">

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

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="Tab1"
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="Tab2"
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="Tab3"
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="Tab4"
            android:layout_height="wrap_content" />

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

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

一般情況下，布局的tab項是動態(tài)配置的，就不能這樣使用，必須在代碼中動態(tài)配置；

三、TabLayout常用的屬性

  • 1.app:tabIndicatorColor 設(shè)置指示器的顏色；
  • 2.app:tabIndicatorHeight 設(shè)置指示器的高度；
  • 3.app:tabTextColor 設(shè)置Tab文本默認(rèn)的顏色，如果不設(shè)置，默認(rèn)黑色；
  • 4.app:tabSelectedTextColor 設(shè)置tab被選中的文本的顏色，如果不設(shè)置，默認(rèn)是黑色；
  • 5.app:tabTextAppearance 設(shè)置tab文本樣式，一般需要為tab添加圖標(biāo)時使用，引用一個style布局，可以代替上面的3和4的設(shè)置，如果3、4、5同時設(shè)置，5將不起作用；
  • 6.app:tabBackground 設(shè)置tab的背景色；
  • 7.app:tabGravity 設(shè)置tab項的對齊方式
  • 1.center 居中顯示；
  • 2.fill 填滿顯示；
  • 8.app:tabMode 有兩個值；
  • 1.fixed 用于標(biāo)題欄少于一屏幕的情況，每個tab將平分屏幕的寬度；
  • 2.scrollable 用于標(biāo)題欄一屏幕顯示不下的情況，可以左右滾動；如果占不滿一屏幕，只會占用一部分，效果不太好，具體的根據(jù)需求來設(shè)置；
  • 9.app:tabContentStart 設(shè)置tab開始布局的位置距離左邊的距離，此時tabMode必須為scrollable才有效果，否則無效果；
  • 10.app:tabMinWidth 設(shè)置tab項的最小寬度；
  • 11.app:tabMaxWidth 設(shè)置tab項的最大寬度；如果tabMaxWidth小于tabMinWidth，會以tabMaxWidth為準(zhǔn)；
  • 12.app:tabPadding 設(shè)置tab的內(nèi)邊距：
    1. app:tabPaddingStart
  • 2.app:tabPaddingBottom
  • 3.app:tabPaddingTop
  • 4.app:tabPaddingEnd
    備注：以上屬性都能通過代碼設(shè)置

四 、TabLayout中的代碼配置tab項

TabLayout.newTab() 創(chuàng)建標(biāo)簽
TabLayout.addTab() 添加標(biāo)簽 ：因為TabLayout繼承自HorizontalScrollView，所以可以直接添加View,內(nèi)部使用addView（）；

TabLayout.removeTab() 刪除標(biāo)簽
TabLayout.removeTabAt() 通過索引刪除標(biāo)簽
TabLayout.removeAllTabs() 刪除全部標(biāo)簽

五 、添加監(jiān)聽

TabLayout.addOnTabSelectedListener(TabLayout.OnTabSelectedListener listener) 添加監(jiān)聽器；
TabLayout.removeOnTabSelectedListener(abLayout.OnTabSelectedListener listener) 取消監(jiān)聽器；
TabLayout.clearOnTabSelectedListeners() 清除所有的監(jiān)聽；

六 、獲取TabLayout的屬性

TabLayout.getSelectedTabPosition() 獲取當(dāng)前選中的Tab的位置；
TabLayout.getTabAt(int index) 根據(jù)索引獲取當(dāng)前索引的Tab；
TabLayout.getTabCount() 獲取tab的總數(shù)；
TabLayout.getTabMode() 獲取tab的mode；有對應(yīng)的set方法；
TabLayout.getTabTextColors() 獲取對應(yīng)tab的TextColor屬性；有對應(yīng)的set方法；
TabLayout.setupWithViewPager(ViewPager viewPager) 設(shè)置與之關(guān)聯(lián)的ViewPager，隨著ViewPager的滑動而滑動；
TabLayout和ViewPager常見的使用方式有兩種：
1.ViewPager包裹TabLayout進(jìn)行嵌套，不需要設(shè)置setupWithViewPager，如果嵌套了還設(shè)置了此方法，就會報錯;
2.如果沒有設(shè)置，則需要在ViewPager設(shè)置Adapter之后設(shè)置setupWithViewPager；
3.注意：只能ViewPager嵌套TabLayout,反了就會報錯，因為TabLayout中只能嵌套TabItem；

七 、TabLatyou中的內(nèi)部類：Tab

Tab表示TabLayout中的一個標(biāo)簽;具體的屬性如下：

    1. boolean isSelected() tab是否被選中；
  • 2.void setSelected() 設(shè)置tab為被選中狀態(tài)；
  • 3.Tab setText() 設(shè)置tab的文本內(nèi)容；
  • 4.String getText() 得到tab的文本內(nèi)容；
  • 5.Tab setIcon() 為tab設(shè)置圖標(biāo)；
  • 6.Drawable getIcon() 獲取tab的圖標(biāo)；
  • 7.Tab setCustomView(int resId or View view) 設(shè)置自定義的View，參數(shù)為資源id或View對象；
  • 8.int getPosition() 獲取當(dāng)前的位置；

八 、TabLayout自定義Tab布局--使用setCustomView

  • 1.首先自定義一個布局，item_tab.xml
<?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:orientation="vertical">

    <ImageView
        android:layout_width="40dp"
        android:src="@mipmap/ic_launcher_round"
        android:layout_gravity="center"
        android:id="@+id/item_imageview"
        android:layout_height="40dp" />
    <TextView
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:id="@+id/item_textview"
        android:layout_gravity="center"
        android:text="desc"
        android:gravity="center"
        android:layout_height="wrap_content" />
</LinearLayout>
  • 2.其次，在FragmentPageAdapter中重寫getPageTitle方法，返回null，其實不重寫也行；然后自定義一個獲取View的方法，如下：
  /**
         * 使用我們自定義的布局時，這里返回null
         * @param position
         * @return
         */
        @Override
        public CharSequence getPageTitle(int position) {
            return null ;
        }

        /**
         * 定義一個方法 返回tab中要顯示的內(nèi)容；
         * 注意：在我們使用自定義的tab時，將getPagerTitle返回null，不設(shè)置也一樣的
         * @param position
         * @return
         */
        public View getCustomTabView(int position) {
            View view = LayoutInflater.from(mContext).inflate(R.layout.item_tablayout, null);
            ImageView image = (ImageView) view.findViewById(R.id.item_imageview);
            TextView textView = (TextView) view.findViewById(R.id.item_textview);
            textView.setText(titles.get(position));
            image.setImageResource(images[0]);
            return view ;

        }
  • 3.在Activity中給每一個tab項設(shè)置自定義的View即可；在setupWithViewPager方法之后調(diào)用上述方法給每一個Tab設(shè)置自定義View；
 List<String> titles = new ArrayList<>();
        for (int i = 'A';i<'z';i++) {
            titles.add("" + (char) i);
        }
        List<Fragment> fragments = new ArrayList<>();
        for (String title : titles) {
            DemoFragment fragment = new DemoFragment().newInstance(title);
            fragments.add(fragment);
        }

        DemoFragmentAdapter adapter = new DemoFragmentAdapter(this,getSupportFragmentManager(),titles,fragments);

        mViewPager.setAdapter(adapter);
        mTabLayout.setupWithViewPager(mViewPager);

        /**
         * 給每一個Tab設(shè)置自定義布局
         */
        for (int i = 0;i<mTabLayout.getTabCount();i++) {
            TabLayout.Tab tab_item = mTabLayout.getTabAt(i);
            tab_item.setCustomView(adapter.getCustomTabView(i));
        }

github倉庫

相關(guān)內(nèi)容：

一、CoordinatorLayout的梳理與使用

二、Toolbar的梳理與使用

三、TextInputLayout的梳理與使用

四、FloatingActionButton的梳理與使用

五、Snackbar的梳理與使用

六、CardView的梳理與使用

七、BottomSheetDialog的梳理與使用

八、TabLayout的梳理與使用

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容