顶部导航栏TabLayout+ViewPager

Tablayout布局顶部导航，ViewPager布局各导航的内容。

Demo详见：https://github.com/IQQcode/MobileCoding/tree/main/Android-Base/02-UI%20Controls/c-Component/TabLayout-ViewPager/TabLayout01

1. activity_main布局内容：

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

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#e74c3c"
        app:tabSelectedTextColor="#bdc3c7"
        app:tabTextColor="#FFF"
        android:background="#23e0bb"/>

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

</LinearLayout>

2. 新建TabFragment，其作用就是各导航条的内容

public class TabFragment extends Fragment {

    private Context mContext;
    private TextView mTextView;
    private final String title, content;

    public TabFragment(String title, String content) {
        super();
        this.title = title;
        this.content = content;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = getActivity();
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mTextView = new TextView(mContext);
        mTextView.setTextColor(Color.DKGRAY);
        mTextView.setTextSize(25);
        mTextView.setGravity(Gravity.CENTER);
        return mTextView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mTextView.setText(content);
    }

    public String getTitle() {
        return title;
    }

    public String getContent() {
        return content;
    }
}

3. 新建ViewPager的设配器，继承FragmentPagerAdapter

public class TabPagerAdapter extends FragmentPagerAdapter {

    private List<TabFragment> container;

    public TabPagerAdapter(@NonNull FragmentManager fm, List<TabFragment> mContainer) {
        super(fm);
        this.container = mContainer;
    }


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

    @Override
    public int getCount() {
        return container != null && !container.isEmpty() ? container.size() : 0;
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        // 不用在主Activity添加tab标题，这里直接设置
        return container.get(position).getTitle();
    }

    /**
     * 防止viewpager在滑动切换的时候，里面的fragment被销毁，导致数据需要重新加载
     * @param container
     * @param position
     * @param object
     */
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        super.destroyItem(container, position, object);
    }
}

4. 最后只需要在MainActivity布局渲染即可

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private List<TabFragment> mContainer;
    private TabPagerAdapter mAdapter;
    private TabLayout mTabLayout;

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

        initView();
        mContainer = new ArrayList<>();
        for (int i = 1; i <= 10; i++) {
            mContainer.add(new TabFragment("标题" + i, "内容 " + i));
        }
        mAdapter = new TabPagerAdapter(getSupportFragmentManager(), mContainer);
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager); //与ViewPage建立关系
        // mTabLayout.setTabMode(TabLayout.MODE_FIXED); // 全部显示
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    }

    private void initView() {
        mViewPager = findViewById(R.id.view_pager);
        mTabLayout = findViewById(R.id.tab_layout);
    }
}

如果不是放在Activity上，而是放在Fragment上，则应该为在HomeFragment布局渲染：

public class HomeFragment extends Fragment{
    private ViewPager pager;
    private FragmentAdapter fragmentAdapter;
    private List<TabFragment> fragmentList;
    private TabLayout tabLayout;
    private TabFragment fragment1,fragment2,fragment3,fragment4,fragment5;
    private List<String> mTitles;
    private String [] title={"关注","推荐","广州","视频","热点"};
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
        View view=inflater.inflate(R.layout.fragment_home,container,false);
        pager=view.findViewById(R.id.page);
        tabLayout=view.findViewById(R.id.tab_layout);
        return view;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState){
        super.onActivityCreated(savedInstanceState);

        fragmentList=new ArrayList<>();
        mTitles=new ArrayList<>();
        for(int i=0;i<title.length;i++){
            mTitles.add(title[i]);
            fragmentList.add(new TabFragment(title[i]));
        }

        fragmentAdapter=new FragmentAdapter(getActivity().getSupportFragmentManager(),fragmentList,mTitles);
        pager.setAdapter(fragmentAdapter);
        tabLayout.setupWithViewPager(pager); //与ViewPage建立关系
    }
}