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

Android--------TabLayout實現(xiàn)新聞客戶端頂部導(dǎo)航欄

Android中Tablayout設(shè)置下劃線寬度 和 dp和px之間進(jìn)行相互轉(zhuǎn)換

AndroidX效果圖

image

首先添加依賴：

以前的是

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

換成

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

現(xiàn)在的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）

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

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

屬性詳細(xì)介紹請看文檔：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的選中回調(diào)

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

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

            @Override public void onTabReselected(TabLayout.Tab tab) { //已經(jīng)選中tab后的重復(fù)點擊tab
 }
        });

其他屬性

app:tabIndicatorColor ：指示線的顏色

app:tabIndicatorHeight ： 指示線的高度

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

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

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

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

app:tabMode="scrollable" ： 默認(rèn)是fixed，固定的；scrollable：可滾動的

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

參考：https://www.cnblogs.com/zhangqie/p/11759690.html