ViewPager2+TabLayout体验之旅

昨天项目刚上线，今天产品又要改需求...........

利用一点空隙时间整理了一下ViewPager2的使用

效果图

由于当前项目中用的懒加载 LazyViewPager 是别人开源的，时间也很久了并且现在使用发现了一些bug，配合 TabLayout使用，在页面初始化后，你从第一页点到第三页或者第四页有时候会出现当前页面加载空白问题！由于前段时间项目紧急就一直没有修改，现在刚上线就赶紧修改一下。

网上一搜都是自定义LazyFragment ，通过 getUserVisibleHint() 获取是否可见来封装处理，自己实现数据的懒加载，这样完全没问题，但是咱不是懒啊，听说新出来一个 ViewPager2，就新建来一个项目尝试一下。

新建项目是 AndroidX 项目，不是AndroidX 请绕行。

建好项目后导入依赖

//ViewPager2的依赖
implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'
//配合 TabLayout使用 所用到的相关辅助类
implementation "com.google.android.material:material:1.1.0"

这是中文官方文档，反正我是看不懂！

顺便说一下我的 minSdkVersion 是22的

编译后开始上手敲代码

activity_main.xml

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/mTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/mViewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

MainActivity.java

package com.wavewave.viewpager2;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
import com.wavewave.viewpager2.fragment.BlankFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private List<Fragment> fragmentList = new ArrayList<>();
    private String[] titles = {"1", "2", "3", "4", "5"};

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

    private void initView() {
        ViewPager2 mViewPager2 = findViewById(R.id.mViewPager2);
        TabLayout mTabLayout = findViewById(R.id.mTabLayout);

        fragmentList.add(BlankFragment.newInstance("1", ""));
        fragmentList.add(BlankFragment.newInstance("2", ""));
        fragmentList.add(BlankFragment.newInstance("3", ""));
        fragmentList.add(BlankFragment.newInstance("4", ""));
        fragmentList.add(BlankFragment.newInstance("5", ""));
        mViewPager2.setAdapter(new FragmentStateAdapter(this) {
            @NonNull
            @Override
            public Fragment createFragment(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getItemCount() {
                return fragmentList.size();
            }
        });
        TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(mTabLayout, mViewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setText(titles[position]);
            }
        });
        tabLayoutMediator.attach();

    }
}

然后 fragment_blank.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.BlankFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/mTextView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

BlankFragment.java

package com.wavewave.viewpager2.fragment;


import android.os.Bundle;

import androidx.fragment.app.Fragment;

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

import com.wavewave.viewpager2.R;


public class BlankFragment extends Fragment {
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    private String mParam1;
    private String mParam2;


    public BlankFragment() {
    }

    public static BlankFragment newInstance(String param1, String param2) {
        BlankFragment fragment = new BlankFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
        Log.d("aaaaaa", "onCreate" + mParam1);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_blank, container, false);
        initView(view);
        return view;
    }

    private void initView(View view) {
        Log.d("aaaaaa", "initView" + mParam1);
        TextView mTextView = view.findViewById(R.id.mTextView);
        mTextView.setText(mParam1);
        Toast.makeText(getActivity(), "我要调接口了！" + mParam1, Toast.LENGTH_SHORT).show();
    }


    @Override
    public void onResume() {
        super.onResume();
        Log.d("aaaaaa", "onResume" + mParam1);
    }

    @Override
    public void onPause() {
        super.onPause();
        Log.d("aaaaaa", "onPause" + mParam1);
    }
}

运行起来发现初始化时候的生命周期

可以看到只加载第一个页面的数据了，然后滑动到第二页只加载第二页的数据，再滑回到第一页，第一页初始化加载数据不会重新走。

当然生命周期还是会走的

搞定！替换代码下班，下班。

发现当你的fragment多的时候，大于等于4个的时候它就会重新加载边缘的一个了。

也就是说它默认会保持3个fragment的生命周期不会重新走。目前我是够用了，等后面再研究研究！

Small_Wave_Wave

发布了20 篇原创文章 · 获赞 5 · 访问量 9489

私信关注

ViewPager2+TabLayout体验之旅

猜你喜欢