viewpage+tablayout

使用TabLayout，首先导包：

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

注意要和targetSdkVersion版本号一致。
先实现简单的，tablayout的item上只有文字。

main.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">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_page"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab_layout"
        >
    </com.google.android.material.tabs.TabLayout>
</LinearLayout>

MainActivity.java:

public class MainActivity extends AppCompatActivity {
    TabLayout tabLayout;
    ViewPager viewPager;

    List<Fragment> fragments = new ArrayList<>();
    List<String> titles = new ArrayList<>();


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_page);

        fragments.add(new Fragment1());
        fragments.add(new Fragment1());
        fragments.add(new Fragment1());
        fragments.add(new Fragment1());

        titles.add("fragment1");
        titles.add("fragment2");
        titles.add("fragment3");
        titles.add("fragment4");



        MainFragmentAdapter fragmentAdapter = new MainFragmentAdapter(getSupportFragmentManager(),
                fragments,titles);//初始化FragmentPagerAdapter
        viewPager.setAdapter(fragmentAdapter);//设置viewPager的adapter
        tabLayout.setupWithViewPager(viewPager);//将tabLayout和viewPager关联

    }
}

将fragments和titles传递给MainFragmentAdapter。
MainFragmentAdapter.java:

public class MainFragmentAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragmentList = null;
    List<String> titles = new ArrayList<>();

    public MainFragmentAdapter(FragmentManager mFragmentManager,
                                     List<Fragment> fragmentList, List<String> titles) {
        super(mFragmentManager);
        this.mFragmentList = fragmentList;
        this.titles = titles;
    }


    @Override
    public int getCount() {
        return mFragmentList.size();//item的数量
    }

    @Override
    public Fragment getItem(int position) {

        return mFragmentList.get(position);//每个item的Fragment
    }

    @Override
    public CharSequence getPageTitle(int position) {
            return titles.get(position);//每个item的title
    }
}

Fragment1.java：

public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment, null);
        TextView textView = view.findViewById(R.id.text1);
        textView.setText("aaa");
        return view;
    }
}

这样，一个简单的viewpage+tabLayout就实现了。
但是实际应用中，往往item里面是图片加文字，接下来实现图片加文字版：
核心方法是用TabLayout.Tab.setCustomView(view)来自定义view实现。

先定义一个view的xml：tab_item_view.xml：

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

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/text_view"
        android:textSize="11dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

定义四个图片选择器：

private int[] drawables = {R.drawable.selector_home, R.drawable.selector_home, R.drawable.selector_home, R.drawable.selector_home};

这个selector_home.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/home_blue"/>
    <item android:state_selected="false" android:drawable="@drawable/home_gray"/>
</selector>

要用的都准备好了，现在用TabLayout.Tab.setCustomView(view)来设置：

for (int i = 0; i < tabLayout.getTabCount(); i++) {
            tabLayout.getTabAt(i).setCustomView(getTabView(i));
}
// Tab自定义view
public View getTabView(int position) {
        View v = LayoutInflater.from(getApplicationContext()).inflate(R.layout.tab_item_view, null);
        TextView textView = (TextView) v.findViewById(R.id.text_view);
        textView.setText(titles.get(position));
        ImageView imageView = (ImageView) v.findViewById(R.id.image_view);
        imageView.setImageResource(drawables[position]);
        if (position == 0) {
      textView.setTextColor(v.getResources().getColor(android.R.color.holo_blue_light));
        }
        return v;
}

图片会通过图片选择器，来改变选中和非选中的图片样式。接下来还要实现一下，文字选中状态的样式：

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                TextView textView = tab.getCustomView().findViewById(R.id.text_view);
                textView.setTextColor(getResources().getColor(android.R.color.holo_blue_light));
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                TextView textView = tab.getCustomView().findViewById(R.id.text_view);
                textView.setTextColor(getResources().getColor(android.R.color.darker_gray));
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
});

注意，首次进入的时候，第一项文字颜色在getTabView方法里设置。

if (position == 0) {
      textView.setTextColor(v.getResources().getColor(android.R.color.holo_blue_light));
}

MainFragmentAdapter代码不变，MainActivity的完整代码如下：

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import com.google.android.material.tabs.TabLayout;
import com.li.gohome.R;
import com.li.gohome.adapter.MainFragmentAdapter;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    TabLayout tabLayout;
    ViewPager viewPager;

    List<Fragment> fragments = new ArrayList<>();
    List<String> titles = new ArrayList<>();

    private int[] drawables = {R.drawable.selector_home, R.drawable.selector_home, R.drawable.selector_home, R.drawable.selector_home};

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_page);

        fragments.add(new Fragment1());
        fragments.add(new Fragment1());
        fragments.add(new Fragment1());
        fragments.add(new Fragment1());

        titles.add("fragment1");
        titles.add("fragment2");
        titles.add("fragment3");
        titles.add("fragment4");



        MainFragmentAdapter fragmentAdapter = new MainFragmentAdapter(getSupportFragmentManager(),
                fragments,titles);
        viewPager.setAdapter(fragmentAdapter);
        tabLayout.setupWithViewPager(viewPager);

        //tabLayout.addTab(tabLayout.newTab().setText(R.string.home1).setIcon(R.drawable.selector_home));
        //tabLayout.addTab(tabLayout.newTab().setText(R.string.home2).setIcon(R.drawable.selector_home));

        /*tabLayout.getTabAt(0).setCustomView(getTabView(getResources().getString(R.string.home1),R.drawable.selector_home));
        tabLayout.getTabAt(1).setCustomView(getTabView(getResources().getString(R.string.home2),R.drawable.selector_home));*/

        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            tabLayout.getTabAt(i).setCustomView(getTabView(i));
        }
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                TextView textView = tab.getCustomView().findViewById(R.id.text_view);
                textView.setTextColor(getResources().getColor(android.R.color.holo_blue_light));
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                TextView textView = tab.getCustomView().findViewById(R.id.text_view);
                textView.setTextColor(getResources().getColor(android.R.color.darker_gray));
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });


    }

    // Tab自定义view
    public View getTabView(int position) {
        View v = LayoutInflater.from(getApplicationContext()).inflate(R.layout.tab_item_view, null);
        TextView textView = (TextView) v.findViewById(R.id.text_view);
        textView.setText(titles.get(position));
        ImageView imageView = (ImageView) v.findViewById(R.id.image_view);
        imageView.setImageResource(drawables[position]);
        if (position == 0) {
            textView.setTextColor(v.getResources().getColor(android.R.color.holo_blue_light));
        }
        return v;
    }
}

具体代码：
https://github.com/doudousang/tablayout.git
参考代码：
TabLayout+ViewPager+Fragment实现切页展示
tablayout实现添加图片与文字

另外，这个项目中的home_blue和home_gray图标，是用as（3.5）创建出来的，具体步骤如下：
在res的drawable文件夹上，右键，new->Image Asset。
出来的界面，
第一行：icon type.
Launcher Icons : app的桌面图标, 也就是启动图标(launcher是英语"启动器"的意思, icon则是英语"图标"的意思)。
Action Bar and Tab Icons : 用于Action Bar 和 Tab的图标。
Notification Icons : 用于通知的图标(notification是英语"通知"的意思)。
这里选择Action Bar and Tab Icons。
第二行，定义name。
第三行，选择Clip Art : 英语"剪贴画"的意思。
然后点第四行的方框，会弹出很多图标供选择。
第五行和第六行调样式。
第七行，选择theme。
drak和light。以及自定义custom。
选择custom可以自定义颜色。设置好了next即可。

参考资料：
Android 自带工具生成图标