Android ViewPager+TabLayout の下線

1. まず依存関係を追加します。

    implementation 'com.google.android.material:material:1.2.1'

2. 実装コード:

1.xml ファイル:

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:tabGravity="fill"
        app:tabIndicatorColor="#397AFC"
        app:tabIndicatorHeight="1dp"
        app:tabIndicatorFullWidth="false"
        app:tabSelectedTextColor="#397AFC"
        app:tabTextColor="#E80D0D"
        app:tabMaxWidth="0dp"
        app:tabMode="scrollable"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#888888"/>

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

1. app:tabIndicatorColor は線の色を示します

2. app:tabIndicatorHeight は行の高さを示します

3. app:tabTextColor 未選択のフォントの色

4. app:tabSelectedTextColor 選択したフォントの色

5. app:tabMode="scrollable"、スクロールモード、タブラベルが多い場合はスライドして表示できます

6. app:tabMode="fixed"、固定モード。タブラベルが多い場合はスライドできません。

7. app:tabIndicatorFullWidth="true"、true: 幅が TabLayout の幅を満たす、false: 幅は TextView の幅と一致します

2、主な活動：

    private TabLayout tabLayout;
    private ViewPager viewPager;
   

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {
        tabLayout = findViewById(R.id.tabLayout);
        viewPager = findViewById(R.id.viewPager);

        private List<Fragment> frameLayoutList = new ArrayList<Fragment>();
        frameLayoutList.add(new AllFragment());
        frameLayoutList.add(new FruitFragment());
        frameLayoutList.add(new MeatFragment());

        List<String> tabLayoutList = new ArrayList<>();
        tabLayoutList.add("全部");
        tabLayoutList.add("水果区");
        tabLayoutList.add("肉类分区");

        MyAdapter adapter = new MyAdapter(getSupportFragmentManager(), frameLayoutList, tabLayoutList);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
    }

3. FragmentPagerAdapter を継承する内部クラス MyAdapter を実装します。

public class MyAdapter extends FragmentPagerAdapter {

        private List<Fragment> fragmentList;
        private List<String> tabList;

        public MyAdapter(FragmentManager fm, List<Fragment> frameLayoutList, List<String> tabLayoutList) {
            super(fm);
            this.fragmentList = frameLayoutList;
            this.tabList = tabLayoutList;
        }

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

        @Override
        public int getCount() {
            return fragmentList.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return tabList.get(position);
        }
    }