android ------ AndroidX的 Tablayout（com.google.android.material.tabs.TabLayout） 的使用

前面呢，有寫過TabLayout的博客，最近開發用到了AndroidX來解決前面的問題，不要工具類設置下劃線的問題了，來總結一下

Android--------TabLayout實現新聞客戶端頂部導航欄

Android中Tablayout設置下劃線寬度 和 dp和px之間進行相互轉換

 

AndroidX效果圖

                      

 

首先添加依賴：

之前的是 

implementation 'com.android.support:design:28.0.0'

換成

implementation "com.google.android.material:material:1.0.0"

如今的TabLayout有2種添加Item的方式

第一種和之前的差很少

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMaxWidth="0dp"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextColor="@color/colorPrimary"
        app:tabIndicatorFullWidth="false"
        app:tabBackground="@color/transparent"
        app:tabRippleColor="@color/transparent"
        >

    </com.google.android.material.tabs.TabLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#E4E4E4"
        ></View>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

    </androidx.viewpager.widget.ViewPager>

Java代碼

public class MainActivityB extends AppCompatActivity {

    static final int NUM_ITEMS = 4;
    private List<Fragment> fragmentList = new ArrayList<Fragment>();
    private String[] strings = new String[]{"A","B","C","D"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mainb);
        fragmentList.add(new FragmentA());
        fragmentList.add(new FragmentB());
        fragmentList.add(new FragmentC());
        fragmentList.add(new FragmentD());
        initView();
    }

    private void initView(){
        TabLayout tab_layout = findViewById(R.id.tab_layout);
        ViewPager viewPager = findViewById(R.id.viewPager);
        MyAdapter fragmentAdater = new  MyAdapter(getSupportFragmentManager());
        viewPager.setAdapter(fragmentAdater);
        tab_layout.setupWithViewPager(viewPager);
    }

    public class MyAdapter extends FragmentPagerAdapter {
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public int getCount() {
            return NUM_ITEMS;
        }

        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

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

若是你不須要點擊後的陰影動畫效果,能夠使用下面2個屬性取消

app:tabBackground="@android:color/transparent"
app:tabRippleColor="@android:color/transparent"

看佈局裏面有一個這樣的屬性

tabIndicatorFullWidth （boolean） 

默認爲true ，是否使選擇指示器的寬度適合選項卡項目的整個寬度（意思就是將選擇指示器寬度將設置爲最小寬度值，就是字體的寬度）

這樣就解決了以前的問題了，

 

屬性詳細介紹請看文檔：https://developer.android.google.cn/reference/com/google/android/material/tabs/TabItem

 

第二種寫法

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMaxWidth="0dp"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextColor="@color/colorPrimary"
        app:tabIndicatorFullWidth="false"
        >

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tabItem1"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="A"
             />

         <com.google.android.material.tabs.TabItem
             android:id="@+id/tabItem2"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="B"
             />

         <com.google.android.material.tabs.TabItem
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="C"
             />

         <com.google.android.material.tabs.TabItem
             android:text="D"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />

    </com.google.android.material.tabs.TabLayout>

這種是TabLayout 增長了一個TabItem控件，直接把Item寫在裏面了

 

這種也是很方便的，須要添加一個TabLayout的選中回調

tab_layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //選中某個tab
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //當tab從選擇到未選擇
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //已經選中tab後的重複點擊tab
            }
        });

 

其餘屬性

app:tabIndicatorColor ：指示線的顏色

app:tabIndicatorHeight ： 指示線的高度

app:tabIndicatorFullWidth="false" 指示線是否鋪滿寬度

app:tabSelectedTextColor ： tab選中時的字體顏色

app:tabTextColor="@color/colorPrimary" ：未選中字體顏色

app:tabBackground="color" ： 整個tablayout顏色

app:tabMode="scrollable" ： 默認是fixed，固定的；scrollable：可滾動的

 

我用兩種方式實現了上面效果圖，有須要代碼的請star    謝謝

 

代碼地址

 

參考的官方詳細文檔地址： https://developer.android.google.cn/reference/com/google/android/material/tabs/TabLayout