Android ViewPager、ViewPager2的基本使用详解及区别

本篇Blog记录ViewPager和ViewPager2

嵌套Fragment的效果图

ViewPager的使用

关于ViewPager的使用已经很常见了，这里在复习一下吧。配合TabLayout

1. 布局文件

   在ViewPager的布局中允许存在子view，我们可以把TabLayout作为ViewPager的子View写在ViewPager内部，也可以并列。

		<androidx.viewpager.widget.ViewPager
            android:id="@+id/vp_merchant_main"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintVertical_weight="1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/banner_merchant_main"
            app:layout_constraintBottom_toBottomOf="parent">

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tab_layout_merchant_main"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:tabGravity="center"
                app:tabIndicatorColor="@color/tabLayoutIndicatorStartColor"
                app:tabSelectedTextColor="@color/textColor"
                app:tabTextAppearance="@android:style/TextAppearance.Holo"
                app:tabTextColor="@color/defaultTextColor" />
        </androidx.viewpager.widget.ViewPager>

2. Java代码

   代码中我们只需要把Fragment和Titles传入Adapter，然后再设置到ViewPager上就可以了。

   我们也可以调用Tablayout的setupWithViewPager()方法使TabLayout和ViewPager进行绑定

		// ViewPager处理
        ArrayList<Fragment> fragmentList = new ArrayList<>();
        fragmentList.add(new AllProductFragment(this));
        fragmentList.add(new EvaluationFragment(this));
        String[] fragmentTitles = {
    
    "商品", "评价"};
        ViewPagerScrollAdapter scrollAdapter = new ViewPagerScrollAdapter(getSupportFragmentManager());
        scrollAdapter.setFragmentTitles(fragmentTitles);
        scrollAdapter.setMenuFragmentList(fragmentList);
        merchantMainBinding.vpMerchantMain.setAdapter(scrollAdapter);

3. Adapter

   注意：ViewPager的Adapter需要继承FragmentStatePagerAdapter

   扫描二维码关注公众号，回复： 12198440 查看本文章

public class ViewPagerScrollAdapter extends FragmentStatePagerAdapter {
    
    
    private ArrayList<Fragment> menuFragmentList;
    private String [] fragmentTitles;

    public ViewPagerScrollAdapter(@NonNull FragmentManager fm) {
    
    
        super(fm);
    }

    public ViewPagerScrollAdapter(@NonNull FragmentManager fm, int behavior) {
    
    
        super(fm, behavior);
    }

    public void setFragmentTitles(String[] fragmentTitles) {
    
    
        this.fragmentTitles = fragmentTitles;
    }

    public void setMenuFragmentList(ArrayList<Fragment> menuFragmentList) {
    
    
        this.menuFragmentList = menuFragmentList;
    }

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

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

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

到这儿关于ViewPager的基本使用就完成了。下面是ViewPager2的使用

ViewPager2的使用

关于ViewPager2嵌套Fragment的使用很简单。

1. 布局文件

   在布局中ViewPager2的使用是不允许有自View的，我们这里仍然配合TabLayout使用。

		<com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout_group"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            app:layout_constraintBottom_toTopOf="@id/vp_group_page"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tv_home_group_list_title"
            app:tabIndicatorColor="@color/white"
            app:tabIndicatorFullWidth="false"
            app:tabSelectedTextColor="@color/bottomTextColor"
            app:tabTextAppearance="@android:style/TextAppearance.Holo"
            app:tabTextColor="@color/defaultTextViewColor" />

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/vp_group_page"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:paddingTop="6dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tab_layout_group"
            app:layout_constraintVertical_weight="1" />

2. 创建Adapter

   Adapter需要继承FragmentStateAdapter

public class LiveViewPagerAdapter extends FragmentStateAdapter {
    
    
    private ArrayList<Fragment> fragmentList;

    public LiveViewPagerAdapter(@NonNull Fragment fragment) {
    
    
        super(fragment);
    }

    public LiveViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
    
    
        super(fragmentActivity);
    }

    public LiveViewPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
    
    
        super(fragmentManager, lifecycle);
    }

    public void setFragmentList(ArrayList<Fragment> fragmentList) {
    
    
        this.fragmentList = fragmentList;
    }

    ......
}

2. 重写createFragment和getItemCount方法

   需要在Adapter中重写这两个方法

	@NonNull
    @Override
    public Fragment createFragment(int position) {
    
    
    	// 返回Fragment
        return fragmentList.get(position);
    }

    @Override
    public int getItemCount() {
    
    
    	// 获取Fragment数量
        return fragmentList.size();
    }

3. Activity / Fragment 中的使用

   这里以Fragment为例，在父Fragment中使用，在initData方法中设置Fragment List，在initView中setAdapter。

   和我们在RecyclerView中设置Adapter和数据没有区别，只是这里的数据是Fragment。

   值得注意的是：设置页面切换时TabLayout样式有两种方式。请注意看代码注释

   第一种主要是使用ViewPager2的registerOnPageChangeCallback方法来控制
   第二种则是通过new TabLayoutMediator来关联TabLayout和ViewPager2进行控制，该方式和ViewPager的setupWithViewPager基本一致，可以算得上是升级到ViewPager2 后的替代方法。

public class LiveFragment extends Fragment {
    
    
    private FragmentLiveBinding binding;
    private ArrayList<Fragment> fragmentArrayList;
    private final int LIVE_RECOMMEND = 0;
    private final int LIVE_FOLLOW = 1;

    ......

    @Override
    public void onStart() {
    
    
        super.onStart();
        initData();
        initView();
    }

    private void initData(){
    
    
        fragmentArrayList = new ArrayList<>();
        fragmentArrayList.add(LIVE_RECOMMEND, new LiveRecommendFragment());
        fragmentArrayList.add(LIVE_FOLLOW, new LiveFollowFragment());
    }
	
	// 以下是第一种方式
    private void initView(){
    
    
        LiveViewPagerAdapter liveViewPagerAdapter = new LiveViewPagerAdapter(this);
        liveViewPagerAdapter.setFragmentList(fragmentArrayList);
        binding.vpLiveContainer.setAdapter(liveViewPagerAdapter);
        binding.vpLiveContainer.setCurrentItem(lastPage, false);
    }
    
	private void initEvent() {
    
    
		binding.vpLiveContainer.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
    
    
            @Override
            public void onPageSelected(int position) {
    
    
                super.onPageSelected(position);
                if (position == LIVE_FOLLOW) {
    
    
                    binding.tvLiveFollow.setTextColor(mContext.getColor(R.color.white));
                    binding.tvLiveRecommend.setTextColor(mContext.getColor(R.color.defaultTextColor));
                } else {
    
    
                    binding.tvLiveFollow.setTextColor(mContext.getColor(R.color.defaultTextColor));
                    binding.tvLiveRecommend.setTextColor(mContext.getColor(R.color.white));
                }
                lastPage = position;
            }
        });
	}

	// 这里是第二种方式
	private void initView() {
    
    
        GroupTypeViewPagerAdapter groupTypeAdapter = new GroupTypeViewPagerAdapter(this);
        groupTypeAdapter.setFragments(fragments);
        groupListBinding.vpGroupPage.setAdapter(groupTypeAdapter);
        new TabLayoutMediator(groupListBinding.tabLayoutGroup, groupListBinding.vpGroupPage, (tab, position) -> {
    
    
            // 可以根据positions设置Tab样式
            if (position == 0) {
    
    
                tab.setText(R.string.homeGroupMine);
            } else if (position == 1) {
    
    
                tab.setText(R.string.homeGroupInvited);
            }
        }).attach();
    }

}

这样关于ViewPager2的使用就OK了。两者都清楚了，下面说明以下两者区别

ViewPager和ViewPager2的区别

1. 在布局方面：

   ViewPager允许有子View

   而ViewPager2不允许有子View存在

2. 在继承方面：

   ViewPager的Adapter继承FragmentStatePagerAdapter

   而ViewPager2的Adapter继承FragmentStateAdapter

3. 在设置Fragment方面：

   ViewPager可以直接分别设置FragmentList和FragmentTitleList

   而ViewPager2则是只能设置FragmentList（也可能是我没发现，如果有类似FragmentStatePagerAdapter和getPageTitle()方法的烦请告知，谢谢）

4. 在关联及监听方面：

   ViewPager只需要简单的设置Adapter或者通过TabLayout的setupWithViewPager(ViewPager)方法进行关联。

   而ViewPager2则是需要new TabLayoutMediator()方法或者通过ViewPager2的监听回调registerOnPageChangeCallback()来实现

本篇关于ViewPager和ViewPager2的Blog到此结束，如果有错误，请斧正。