Tablayout Viewpager2 Fragment的使用，爬坑之旅

创建

这里给大家创建一个Tablayout Viewpager2 Fragment

问题

相信大家都会使用Tablayout Viewpager2 Fragment，有没有遇到想我一样的问题，先看下效果图，需求：上啦加载更多，下啦刷新，所以需要知道当前页的类型（全部、待付款、待发货。。。）

每一页我们都使用同一个Fragment，大家思考一个问题，viewpager2每次滑动都会预加载下一页，导致我们无法准确的拿到当前页的position。

1. 创建layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".ui.activities.shop.OrderFormActivty">


    <ImageView
        android:id="@+id/order_back"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:contentDescription="@string/about"
        android:gravity="center"
        android:scaleType="centerInside"
        android:src="@drawable/ic_back_new"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/tab_layout"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:gravity="center"
        android:text="@string/mine__order"
        android:textColor="@color/gray_333"
        app:layout_constraintBottom_toTopOf="@id/tab_layout"
        android:textSize="@dimen/f_18"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@id/order_back"
        app:layout_constraintStart_toEndOf="@+id/order_back"
        app:layout_constraintTop_toTopOf="@id/order_back" />


    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/upsdk_white"
        app:layout_constraintTop_toBottomOf="@id/order_back"
        app:layout_constraintBottom_toTopOf="@id/view_pager"
        app:tabBackground="@color/upsdk_white"
        app:tabGravity="fill"
        app:tabIndicatorColor="#225ee5"
        app:tabIndicatorFullWidth="true"
        app:tabIndicatorHeight="2dp"
        app:tabSelectedTextColor="@color/gray_333"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="@color/gray_333" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintStart_toEndOf="@id/tab_layout"
        app:layout_constraintTop_toBottomOf="@id/tab_layout"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

2. 创建Activity

public class OrderFormActivty extends FragmentActivity {
    @BindView(R.id.order_back)
    ImageView orderBack;
    @BindView(R.id.view_pager)
    ViewPager2 viewPager;
    @BindView(R.id.tab_layout)
    TabLayout tabLayout;
    OrderFormViewPage orderFormViewPage;
    String[] mTitle = {"全部", "待付款", "待发货", "待收货", "已完成"};
    PosCallBack posCallBack;
    
    @SuppressLint("WrongConstant")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_order_form);
        ButterKnife.bind(this);
        orderFormViewPage = new OrderFormViewPage(OrderFormActivty.this, mTitle);
        viewPager.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
        viewPager.setAdapter(orderFormViewPage);
        viewPager.setOffscreenPageLimit(5);
        TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
            tab.setText(mTitle[position]);
        });
        mediator.attach();
        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                //关键代码，每次滑动viewpager将position通过接口传递给Fragment
                new ReQuestPos(position, new OrderFormFragmentAll());
            }
        });
    }
    @OnClick(R.id.order_back)
    public void onClick() {
        finish();
    }
}

3. 设置viewpager2的FragmentStateAdapter

public class OrderFormViewPage extends FragmentStateAdapter {
    private String[] mList;

    public OrderFormViewPage(@NonNull FragmentActivity fragmentActivity, String[] mList) {
        super(fragmentActivity);
        this.mList = mList;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        int index = position % mList.length;
        return OrderFormFragmentAll.newInstance(index);
    }

    @Override
    public int getItemCount() {
        return mList.length;
    }
}

4. 获取当前position的接口

public interface PosCallBack {
    void onPos(int pos);
}

public class ReQuestPos {
    private PosCallBack posCallBack;

    public ReQuestPos(int pos, PosCallBack posCallBack) {
        this.posCallBack = posCallBack;
        posCallBack.onPos(pos);
    }

}

6. 创建Fragment

public class OrderFormFragmentAll extends Fragment implements PosCallBack {

    @BindView(R.id.recycler_View)
    RecyclerView recyclerView;
    @BindView(R.id.swipeLayout)
    SwipeRefreshLayout swipeLayout;

    private OrderFormAdapter orderFormAdapter;
    private static final int PAGE_SIZE = 10;
    private static int positon;
    private View view;
    private View notDataView;
    private View errorView;
    private int mNextRequestPage = 1;
    private boolean mError = true;
    private boolean mNoData = true;
    protected Unbinder unbinder;


    public static OrderFormFragmentAll newInstance(int pos) {
//        LogUtils.e(postion);
		//关键代码，首次进来会加载数据，使用这个position
        positon = pos;
        Bundle bundle = new Bundle();
        OrderFormFragmentAll orderFormFragment = new OrderFormFragmentAll();
        orderFormFragment.setArguments(bundle);
        return orderFormFragment;
    }

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

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.order_form_fragment, container, false);
        unbinder = ButterKnife.bind(this, view);
       
        orderFormAdapter = new OrderFormAdapter(new ArrayList<>());
        recyclerView.setAdapter(orderFormAdapter);
        return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initData(this.positon);
    }
    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }
    @Override
    public void onPos(int pos) {
    	//关键 获取当前页的position，滑动viewpager时使用这个position
        this.positon = pos;
        LogUtils.e(positon);
    }
}

8. 创建Fragment的Adapter这个大家自行创建就可以

完成

欢迎大家一起交流