【Android入门到项目实战-- 11.3】—— 实现可左右滑动切换页面的导航栏（ViewPager+TabLayout+Fragment）

        上篇文章实现了不能左右滑动切换的底部导航栏，如何在导航页面的里再写一个可左右滑动切换页面的标签栏？

实现效果

页面可左右滑动切换

代码实现

        创建viewpage.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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

        创建fragment类，加载每页的页面，这里是homeFragment2

public class homeFragment2 extends Fragment {

    String titleString;
    List<String> infoDataList = new ArrayList<>();


    public void setTitleString(String titleString) {
        this.titleString = titleString;
    }


    public void setinfoDataList(List<String> textList) {
        this.infoDataList = textList;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        // 加载 Fragment 的布局文件
        View view = inflater.inflate(R.layout.viewpage, container, false);

        // 在这里添加代码，例如初始化视图、绑定数据等等

        TextView textView = (TextView) view.findViewById(R.id.textView);

//        设置数据
        textView.setText("123");//这里可以根据设置的titleString设置每个页面的显示文字不同





        return view;
    }

}

        创建ViewPagers的适配器，这里是ViewPagerAdapter

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList;
    private String[] titles;

    public ViewPagerAdapter(FragmentManager fragmentManager, List<Fragment> fragmentList, String[] titles) {
        super(fragmentManager);
        this.fragmentList = fragmentList;
        this.titles = titles;
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

        页面的总布局，这里是fragment_home.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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:tabIndicatorFullWidth="false"
        app:tabSelectedTextColor="#1296db"
        app:tabIndicatorColor="#1296db"
        app:tabIndicatorHeight="3dp"
        app:tabMode="scrollable">
    </com.google.android.material.tabs.TabLayout>

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

    </androidx.viewpager.widget.ViewPager>


</LinearLayout>

        在Activity或Fragment中使用，这里是homeFragment.java

public class homeFragment extends Fragment {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    List<Fragment> fragmentList = new ArrayList<>();//每个页面的列表
    ViewPagerAdapter viewPagerAdapter;
    String[] titles = {"111","222","333"};//设置导航栏各量级名称
    homeFragment2 homeFragment2;//页面的布局对象


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_home, container, false);
        tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
        viewPager = (ViewPager) view.findViewById(R.id.view_pager);

        fragmentList.add(new homeFragment2());//添加页面，有多少页面添加多少个fragment对象
        fragmentList.add(new homeFragment2());//添加页面
        fragmentList.add(new homeFragment2());//添加页面

        return view;
    }
    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {

        viewPagerAdapter = new ViewPagerAdapter(getChildFragmentManager(), fragmentList, titles);
        viewPager.setAdapter(viewPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);

    }
}

完成。