ViewPager2 + TabLayout + Fragment打造精美布局

---

前言

当你想要一个精美的视图集就像下面这样

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、ViewPager2 + TabLayout + Fragment

材料

1. TabLayout
2. ViewPager2
3. Fragment

核心代码

 public void initView(){

        OkHttpUtils.getCall("http://124.93.196.45:10002"+"/system/dict/data/type/press_category").enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                Log.d("TAG", "onFailure: "+e.getMessage());
            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {
                KindBean kindBean= new Gson().fromJson(response.body().string(),KindBean.class);

                for (int i = 0; i < kindBean.getData().size(); i++) {
                //实例化Fragment对象存入数组
                    list.add(newsF.newInstance(kindBean.getData().get(i).getDictCode()+""));
                }
                viewPager2.post(new Runnable() {
                    @Override
                    public void run() {
                    //设置ViewPager2的适配器
                        viewPager2.setAdapter(new PagerAdapter((FragmentActivity)getContext(),list));

						//使ViewPager2与Tablayout联动
                        new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
                            @Override
                            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                                tab.setText(kindBean.getData().get(position).getDictLabel());
                            }
                        }).attach();
                    }
                });
            }
        });
    }

ViewPager2的适配器

package com.example.packagingview.MainActivity;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

import java.util.List;

public class PagerAdapter extends FragmentStateAdapter {

    List<Fragment> list;

    public PagerAdapter(@NonNull FragmentActivity fragmentActivity,List<Fragment> list) {
        super(fragmentActivity);
        this.list = list;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return list.get(position);
    }

    @Override
    public int getItemCount() {
        return list.size();
    }
}

Fragment中的代码

package com.example.packagingview.MainActivity;

import android.os.Bundle;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.packagingview.R;
import com.google.gson.Gson;

import java.io.IOException;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.Response;


public class newsF extends Fragment {
    private static final String ARG_PARAM1 = "param1";
    private ImageView NewsPhoto;
    private TextView NewsTitle;
    private TextView NewsContent;
    private TextView newsTime;
    private TextView newsCount;
    private ImageView imageView2;
    private RecyclerView recycleView;
    public static newsF newInstance(String dictCode) {
        newsF fragment = new newsF();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, dictCode);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
       View view =inflater.inflate(R.layout.fragment_news, container, false);
        NewsPhoto = view.findViewById(R.id.NewsPhoto);
        NewsTitle = view.findViewById(R.id.NewsTitle);
        NewsContent = view.findViewById(R.id.NewsContent);
        newsTime = view.findViewById(R.id.newsTime);
        newsCount = view.findViewById(R.id.newsCount);
        imageView2 = view.findViewById(R.id.imageView2);
        recycleView = view.findViewById(R.id.recycleView);
        initView();
       return view;
    }

    public void initView(){
        OkHttpUtils.getCall("http://124.93.196.45:10002/press/press/list?pageNum=1&pageSize=10&pressCategory="+getArguments().getString(ARG_PARAM1)).enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                Log.d("TAG", "onFailure: "+e.getMessage());
            }
            @Override
            public void onResponse(Call call, Response response) throws IOException {
                NewsBean bean = new Gson().fromJson(response.body().string(),NewsBean.class);
                recycleView.post(new Runnable() {
                    @Override
                    public void run() {
                        LinearLayoutManager manager = new LinearLayoutManager(getContext());
                        manager.setOrientation(RecyclerView.VERTICAL);
                        RecycleViewAdapter adapter = new RecycleViewAdapter(R.layout.news_item,getContext(),bean.getRows());
                        recycleView.setLayoutManager(manager);
                        recycleView.setAdapter(adapter);
                    }
                });
            }
        });
    }
}

二、封装ViewPager2 + TabLayout + Fragment

如果在多个场景都要使用这个布局及其资源，那么我们和不妨把它做成一个控件来使用呢？
如下操作

在之前代码上稍作修改，使这个类继承自线性布局，然后再Xml布局文件中我们就可以使用我们自己自定义的控件了

package com.example.packagingview.MainActivity;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;

import com.example.packagingview.R;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
import com.google.gson.Gson;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.Response;

public class tabsPagersF extends LinearLayout {
    private com.google.android.material.tabs.TabLayout tabLayout;
    private androidx.viewpager2.widget.ViewPager2 viewPager2;
    private List<Fragment> list = new ArrayList<>();
    public tabsPagersF(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        View view = LayoutInflater.from(context).inflate(R.layout.tablayout_viewpager2_fragment,this);
        tabLayout = view.findViewById(R.id.TabLayout);
        viewPager2 = view.findViewById(R.id.ViewPager2);
        initView();
    }
    public void initView(){

        OkHttpUtils.getCall("http://124.93.196.45:10002"+"/system/dict/data/type/press_category").enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                Log.d("TAG", "onFailure: "+e.getMessage());
            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {
                KindBean kindBean= new Gson().fromJson(response.body().string(),KindBean.class);

                for (int i = 0; i < kindBean.getData().size(); i++) {
                    list.add(newsF.newInstance(kindBean.getData().get(i).getDictCode()+""));
                }
                viewPager2.post(new Runnable() {
                    @Override
                    public void run() {
                        viewPager2.setAdapter(new PagerAdapter((FragmentActivity)getContext(),list));

                        new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
                            @Override
                            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                                tab.setText(kindBean.getData().get(position).getDictLabel());
                            }
                        }).attach();
                    }
                });
            }
        });
    }
    public void initView2(String[] tabs){
        for (int i = 0; i < tabs.length; i++) {
            list.add(ItemFragment.newInstance(20));
        }
        viewPager2.setAdapter(new PagerAdapter((FragmentActivity)getContext(),list));
        new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setText(tabs[position]);
            }
        }).attach();
    }
}

使用方法
注意看准包名

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity.MainActivity">
    <com.example.packagingview.MainActivity.tabsPagersF
        android:id="@+id/MyCon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

好好学习，天天向上。