使用TabLayout+ViewPager+Fragment实现切页展示

使用TabLayout+ViewPager+Fragment是比较常见的实现切页展示的方式，本例是在fragment中实现主要代码

步骤：

1，定义TabLayout和ViewPager的布局

2，实现tab切换

3，实现Fragment

4，实现Fragment适配器

5，将tab与viewpager关联

 

1，定义TabLayout和ViewPager的布局

<android.support.design.widget.TabLayout
        android:id="@+id/id_tab_layout"
        style="@style/MyTablayoutstyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_vp_news"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

其中MyTabLayoutstyle是单独在style文件中定义的样式

 

2，实现tab切换

public class FragmentOne extends Fragment {

    TabLayout tabLayout;
    ViewPager viewPager;

    private String[] titles = new String[]{"国际", "国内", "推荐", "关注", "数据", "直播"};

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

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

        initTab(view);

        return view;
    }


    private void initTab(View view) {
        tabLayout = view.findViewById(R.id.id_tab_layout);
        viewPager = view.findViewById(R.id.id_vp_news);

      
        //添加tab
        for (int i = 0; i < titles.length; i++) {
            tabLayout.addTab(tabLayout.newTab().setText(titles[i]));
        }
    }
}

 

3，实现Fragment

public class NewsFragment extends Fragment {

    private static final String KEY  = "title";

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_news,container,false);
        TextView id_news = view.findViewById(R.id.id_news);
        String s = getArguments().getString(KEY);
        id_news.setText(s);

        return view;
    }

    //fragment静态传值
    public static NewsFragment newInstance(String s){
        NewsFragment newsFragment = new NewsFragment();
        Bundle bundle = new Bundle();
        bundle.putString(KEY,s);
        newsFragment.setArguments(bundle);
        return newsFragment;
    }
}

其中的静态方法在创建fragment实例的同时，将标题文字传入fragment

下面是简单布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/id_news"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

4，实现Fragment适配器

public class FragmentNewsAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;
    private String[] news;

    public FragmentNewsAdapter(FragmentManager fm, List<Fragment> list,String[] news) {
        super(fm, list);
        this.fragments = list;
        this.news = news;
    }
    
    @Override
    public Fragment getItem(int i) {
        return fragments.get(i);
    }

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

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

5，将tab与viewpager关联

public class FragmentOne extends Fragment {

    TabLayout tabLayout;
    ViewPager viewPager;
    FragmentNewsAdapter newsAdapter;

    private List<Fragment> fragments = new ArrayList<>();
    private String[] titles = new String[]{"国际", "国内", "推荐", "关注", "数据", "直播"};

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

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

        initTab(view);

        return view;
    }


    private void initTab(View view) {
        tabLayout = view.findViewById(R.id.id_tab_layout);
        viewPager = view.findViewById(R.id.id_vp_news);

        //new出所需数量的fragment
        for (int i = 0; i < titles.length; i++) {
            NewsFragment fragment = NewsFragment.newInstance(titles[i]);
            fragments.add(fragment);
        }

        //添加tab
        for (int i = 0; i < titles.length; i++) {
            tabLayout.addTab(tabLayout.newTab().setText(titles[i]));
        }

        newsAdapter = new FragmentNewsAdapter(getFragmentManager(), fragments, titles);
        //给tab设置适配器，将tab与vp关联
        viewPager.setAdapter(newsAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}

有问题可随时提问