TabLayout + ViewPager realizes the detailed explanation of the function of sliding left and right to switch pages imitating WeChat (including TabLayout beautification)

Simple implementation

Add dependency

Add in the dependency in the build.gradle(Module:app) file

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

Define the layout file

Very simple, a TabLayout and a ViewPager,
note: Do not choose the TabLayout that comes with TabLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.google.android.material.tabs.TabLayout>

</LinearLayout>

Create Fragment

I just created two directly, just connect to the XML layout file

public class FragmentOne extends Fragment {
    
    

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    
    
        View view = inflater.inflate(R.layout.frag_1, container, false);

        return view;
    }
}

Instantiate FragmentPagerAdapter

Here I instantiated FragmentPagerAdapter directly, you can also write a class that inherits FragmentPagerAdapter to write your own Adapter

		List<Fragment> fragments = new ArrayList<>();
        fragments.add(new FragmentOne());
        fragments.add(new FragmentTwo());
		FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
    
    
            @NonNull
            @Override
            public Fragment getItem(int position) {
    
    
                return fragments.get(position);
            }

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

Implement ViewPager

Here we have instantiated the FragmentPagerAdapter, so it is almost set to ViewPager.
At this point, we have realized the function of sliding the page left and right

viewPager.setAdapter(adapter);

Associate TabLayout and set labels

It is also very simple, one line of code can associate ViewPager with TabLayout

tabLayout.setupWithViewPager(viewPager);

After ViewPager and TabLayout are associated, there is no sticky note, so here we need to set labels for
it. If you have a lot of labels, you can consider adding them in a for loop and an array, but you must pay attention to TabAt not to cross the boundary, otherwise it will Report an error

tabLayout.getTabAt(0).setText("第一页");
tabLayout.getTabAt(1).setText("第二页");

So far, a simple (ugly) one that can slide left and right and has a label is achieved!

TabLayout beautification

As an exquisite programmer, how can you bear to make things look bad? Disk it!

Rolling note

app:tabMode=“fixed” is not scrollable by default (if you don’t need to scroll, just omit it without writing)
app:tabMode=“scrollable” can be set in the scrollable
XML layout file

app:tabMode="scrollable"

Settings in the Java background

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

Add small icon

This is the same as setting the label, except that .setText() is replaced by setIcon()

tabLayout.getTabAt(0).setIcon(R.mipmap.baoma);
tabLayout.getTabAt(1).setIcon(R.mipmap.benchi);

Relative position of small icon and label

tabInlineLabe: Whether the small icon and the sticky note are on the same line. The
default condition (set to false) is

set to true

XML layout settings

app:tabInlineLabel="true"

Java background settings

tabLayout.setInlineLabel(true);

TabLayout font beautification

tabTextColor: the default color of the
font tabSelectedTextColor: the XML layout setting of the color when the font is selected

app:tabTextColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorPrimary"

Java background settings

//第一个是默认颜色，第二个是选中时的颜色
tabLayout.setTabTextColors(Color.RED,Color.YELLOW);

TabLayout's underline beautification

tabIndicatorHeight: the width of the underline
tabIndicatorFullWidth: whether the underline is full of the width of the tab (if set to false here, the length of the underline will be the same as the length of the note)
tabIndicatorColor: the color of the underline
tabIndicatorGravity: the position of the underline
XML layout setting

	app:tabIndicatorHeight="10dp"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorColor="@color/colorPrimaryDark"
    app:tabIndicatorGravity="top"

Java background settings

		tabLayout.setSelectedTabIndicatorHeight(10);
        tabLayout.setTabIndicatorFullWidth(false);
        tabLayout.setSelectedTabIndicatorColor(Color.GREEN);
        tabLayout.setSelectedTabIndicatorGravity(TabLayout.GRAVITY_CENTER);