在 Android 中正确实现 ViewPager2

Posted 2023-02-23

技术标签:

【中文标题】在 Android 中正确实现 ViewPager2【英文标题】：Proper implementation of ViewPager2 in Android 【发布时间】：2019-07-05 16:54:01 【问题描述】：

我开始了解ViewPager2 并尝试实现它，但没有找到任何合适的示例。

谁能告诉我如何使用它。

我正在寻找正确的用法，而不是示例。

【问题讨论】：

这里是解释和例子检查它：michaelevans.org/blog/2019/02/07/hands-on-with-viewpager2 谁给了recommend or find a book, tool, software library, tutorial or other off-site resource 近距离投票请仔细阅读，我不是在找例子。有官方样本：github.com/googlesamples/android-viewpager2 赞赏的问题，看起来像博客：D 这里是实现文章t.ly/3qgj 【参考方案1】：

更新 7

检查：Migrate from ViewPager to ViewPager2

检查：Create swipe views with tabs using ViewPager2

更新 6

查看my answer if you want to implement Carousel using View Pager2

更新 5

如何在 ViewPager2 中使用 TabLayout

示例代码

在下面使用dependencies

implementation 'com.google.android.material:material:1.1.0-alpha08'
implementation 'androidx.viewpager2:viewpager2:1.0.0-beta02'

示例代码

XML 布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
        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_
        android:layout_>

    <com.google.android.material.appbar.AppBarLayout
            android:layout_
            android:layout_
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                android:layout_
                android:layout_/>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewpager"
            app:layout_anchor="@id/tabs"
            app:layout_anchorGravity="bottom"
            android:layout_
            android:layout_
    />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

活动

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
import com.google.android.material.tabs.TabLayoutMediator

import com.google.android.material.tabs.TabLayout


class MainActivity : AppCompatActivity() 

    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

//        setSupportActionBar(toolbar)
        viewpager.adapter = AppViewPagerAdapter(supportFragmentManager, lifecycle)

        TabLayoutMediator(tabs, viewpager, object : TabLayoutMediator.OnConfigureTabCallback 
            override fun onConfigureTab(tab: TabLayout.Tab, position: Int) 
                // Styling each tab here
                tab.text = "Tab $position"
            
        ).attach()

输出

TabLayout with ViewPager2

来自文档

ViewPager2

新功能

从右到左 (RTL) 布局支持垂直方向支持 notifyDataSetChanged 功能齐全

API 更改

FragmentStateAdapter 替换 FragmentStatePagerAdapter RecyclerView.Adapter 替换 PagerAdapter registerOnPageChangeCallback 替换 addPageChangeListener

示例代码

为ViewPager2添加最新的dependencies

implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_
        android:layout_ />

</LinearLayout>

活动

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import java.util.ArrayList;

public class MyActivity extends AppCompatActivity 

    ViewPager2 myViewPager2;
    MyAdapter MyAdapter;
    private ArrayList<String> arrayList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);

        myViewPager2 = findViewById(R.id.view_pager);

        arrayList.add("Item 1");
        arrayList.add("Item 2");
        arrayList.add("Item 3");
        arrayList.add("Item 4");
        arrayList.add("Item 5");

        MyAdapter = new MyAdapter(this, arrayList);


        myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

        myViewPager2.setAdapter(MyAdapter);

我的适配器

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> 

    private Context context;
    private ArrayList<String> arrayList = new ArrayList<>();

    public MyAdapter(Context context, ArrayList<String> arrayList) 
        this.context = context;
        this.arrayList = arrayList;
    

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) 
        View view = LayoutInflater.from(context).inflate(R.layout.list_item, parent, false);
        return new MyViewHolder(view);
    

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) 
        holder.tvName.setText(arrayList.get(position));
    

    @Override
    public int getItemCount() 
        return arrayList.size();
    

    public class MyViewHolder extends RecyclerView.ViewHolder 
        TextView tvName;

        public MyViewHolder(@NonNull View itemView) 
            super(itemView);
            tvName = itemView.findViewById(R.id.tvName);

新功能

现在我们需要使用ViewPager2.OnPageChangeCallback()来获取ViewPager2的Swipe事件

示例代码

    myViewPager2.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);

            Log.e("Selected_Page", String.valueOf(position));
        

        @Override
        public void onPageScrollStateChanged(int state) 
            super.onPageScrollStateChanged(state);
        
    );

我们可以使用myViewPager2.setOrientation()设置方向

示例代码

对于HORIZONTAL Orientation 使用

myViewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

对于VERTICAL Orientation 使用

myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

我们可以像在RecyclerView.Adapter中一样使用notifyDataSetChanged

添加新项目的示例代码

    btnAdd.setOnClickListener(new View.OnClickListener() 
        @Override
        public void onClick(View view) 
            arrayList.add("New ITEM ADDED");
            MyAdapter.notifyDataSetChanged();
        
    );

删除新项目的示例代码

    btnRemove.setOnClickListener(new View.OnClickListener() 
        @Override
        public void onClick(View view) 
            arrayList.remove(3);
            MyAdapter.notifyItemRemoved(3);
        
    );

更新

如果您想将`Fragment` 与`ViewPager2` 一起使用，请尝试此操作

首先创建一个扩展FragmentStateAdapter
的ViewPagerFragmentAdapter类

import java.util.ArrayList;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerFragmentAdapter extends FragmentStateAdapter 

    private ArrayList<Fragment> arrayList = new ArrayList<>();

    public ViewPagerFragmentAdapter(@NonNull FragmentManager fragmentManager) 
        super(fragmentManager);
    

    @NonNull
    @Override
    public Fragment getItem(int position) 
        return arrayList.get(position);
    

    public void addFragment(Fragment fragment) 
        arrayList.add(fragment);
    

    @Override
    public int getItemCount() 
        return arrayList.size();

现在在你的活动中像这样使用

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import neel.com.bottomappbar.R;

public class MainActivity extends AppCompatActivity 

    ViewPager2 myViewPager2;
    ViewPagerFragmentAdapter myAdapter;

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

        myViewPager2 = findViewById(R.id.view_pager);

        myAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager());

        // add Fragments in your ViewPagerFragmentAdapter class
        myAdapter.addFragment(new FragmentOne());
        myAdapter.addFragment(new Fragmenttwo());
        myAdapter.addFragment(new FragmentThree());

        // set Orientation in your ViewPager2
        myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

        myViewPager2.setAdapter(myAdapter);

欲了解更多信息，请查看此

ViewPager2 ViewPager2 under the Hood Hands on With ViewPager2

更新 2

Version 1.0.0-alpha02

新功能

能够禁用用户输入（setUserInputEnabled、isUserInputEnabled）

API 更改

ViewPager2 类决赛

错误修复

FragmentStateAdapter 稳定性修复

在 viewpager2 中禁用滑动的示例代码

myViewPager2.setUserInputEnabled(false);// SAMPLE CODE to disable swiping in viewpager2


myViewPager2.setUserInputEnabled(true);//SAMPLE CODE to enable swiping in viewpager2

更新 3

Version 1.0.0-alpha03

新功能

能够以编程方式滚动 ViewPager2：fakeDragBy(offsetPx)。

API 更改

FragmentStateAdapter 现在需要一个 Lifecycle 对象。添加了两个实用程序构造函数以从主机 FragmentActivity 或主机 Fragment 获取它

示例代码

ViewPagerFragmentAdapter

import java.util.ArrayList;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerFragmentAdapter extends FragmentStateAdapter 

    private ArrayList<Fragment> arrayList = new ArrayList<>();


    public ViewPagerFragmentAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) 
        super(fragmentManager, lifecycle);
    

    @NonNull
    @Override
    public Fragment getItem(int position) 
        return arrayList.get(position);
    

    public void addFragment(Fragment fragment) 
        arrayList.add(fragment);
    

    @Override
    public int getItemCount() 
        return arrayList.size();

MainActivity 代码

import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import neel.com.bottomappbar.R;

public class MainActivity extends AppCompatActivity 

    ViewPager2 myViewPager2;
    ViewPagerFragmentAdapter myAdapter;

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

        myViewPager2=findViewById(R.id.view_pager);
        myAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager(), getLifecycle());

        // add Fragments in your ViewPagerFragmentAdapter class
        myAdapter.addFragment(new FragmentOne());
        myAdapter.addFragment(new Fragmenttwo());
        myAdapter.addFragment(new FragmentThree());

        myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

        myViewPager2.setAdapter(myAdapter);

更新 4

Version 1.0.0-alpha05 新功能

ItemDecorator 引入的行为与 RecyclerView 一致。引入MarginPageTransformer 是为了提供在页面之间（页面插图之外）创建空间的功能。引入CompositePageTransformer 以提供组合多个PageTransformers 的能力

API 更改

FragmentStateAdapter#getItem 方法重命名为 FragmentStateAdapter#createFragment - 以前的方法名称已被证明是过去的错误来源。 OFFSCREEN_PAGE_LIMIT_DEFAULT 值从 0 更改为 -1。如果使用 OFFSCREEN_PAGE_LIMIT_DEFAULTconstant，则无需更改客户端代码。

示例代码

活动代码

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.MarginPageTransformer;
import androidx.viewpager2.widget.ViewPager2;
import neel.com.bottomappbar.R;

public class MainActivity extends AppCompatActivity 

    ViewPager2 myViewPager2;
    ViewPagerFragmentAdapter myAdapter;
    private ArrayList<Fragment> arrayList = new ArrayList<>();

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

        myViewPager2 = findViewById(R.id.myViewPager2);

        // add Fragments in your ViewPagerFragmentAdapter class
        arrayList.add(new FragmentOne());
        arrayList.add(new Fragmenttwo());
        arrayList.add(new FragmentThree());

        myAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager(), getLifecycle());
        // set Orientation in your ViewPager2
        myViewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

        myViewPager2.setAdapter(myAdapter);

        myViewPager2.setPageTransformer(new MarginPageTransformer(1500));

ViewPagerFragmentAdapter

import java.util.ArrayList;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerFragmentAdapter extends FragmentStateAdapter 

    private ArrayList<Fragment> arrayList = new ArrayList<>();


    public ViewPagerFragmentAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) 
        super(fragmentManager, lifecycle);
    

    @NonNull
    @Override
    public Fragment createFragment(int position) 
        switch (position) 
            case 0:
                return new FragmentOne();
            case 1:
                return new Fragmenttwo();
            case 2:
                return new FragmentThree();

        
        return null;
    

    @Override
    public int getItemCount() 
        return 3;

【讨论】：

看来我得发博文了 :D 太棒了，我没有时间发博文，但我一定会的。 Early Introduction of ViewPager2 by @BirjuVachhani ，检查一下，它可能有用是否可以将 PagerTitleStrip 或 PagerTabStrip 与 ViewPager2 一起使用，或者是否有替代方案？ @NileshRathod，您创建了一个片段数组列表，但您没有在任何地方调用它们？【参考方案2】：

实际上现在有一个 ViewPager2 的官方示例 repo（链接如下）

https://github.com/android/views-widgets-samples/tree/master/ViewPager2

Repo 包含以下示例（引自下面的 repo 自述文件）

样本
ViewPager2 with Views - 展示如何设置 ViewPager2 与 Views 作为页面 ViewPager2 with Fragments - 展示如何设置 ViewPager2 与 Fragments 作为页面带有可变集合（视图）的 ViewPager2 - 演示将 ViewPager2 与视图一起用作页面和页面适配器中的突变带有可变集合（片段）的 ViewPager2 - 演示了 ViewPager2 与片段作为页面的用法，以及在页面适配器带有 TabLayout (Views) 的 ViewPager2 - 展示了如何设置 ViewPager2 并将 Views 作为页面，并将其链接到 TabLayout

Kotlin 中带有 Fragments 的 ViewPager2 的简单示例

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager2_container"
        android:layout_
        android:layout_
        android:layout_weight="1"/>

</LinearLayout>

MainActivity.kt

class MainActivity : AppCompatActivity() 

    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        val viewPager2 = findViewById<ViewPager2>(R.id.pager2_container)

        val fragmentList = arrayListOf(
            FirstFragment.newInstance(),
            SecondFragment.newInstance(),
            ThirdFragment.newInstance()
        )
        viewPager2.adapter = ViewPagerAdapter(this, fragmentList)

FirstFragment.kt（SecondFragment.kt 和 ThirdFragment.kt 看起来类似于 FirstFragment.kt）

class FirstFragment : Fragment() 

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? 
        return inflater.inflate(R.layout.fragment_first, container, false)
    

    companion object
        fun newInstance() = FirstFragment()

ViewPagerAdapter.kt

class ViewPagerAdapter(fa:FragmentActivity, private val fragments:ArrayList<Fragment>): FragmentStateAdapter(fa) 

    override fun getItemCount(): Int = fragments.size

    override fun createFragment(position: Int): Fragment = fragments[position]

其他一些有用的资源：

API 参考： https://developer.android.com/reference/androidx/viewpager2/widget/ViewPager2

培训：https://developer.android.com/training/animation/screen-slide-2

发行说明：https://developer.android.com/jetpack/androidx/releases/viewpager2

GDE 的中篇文章：Exploring the ViewPager2

【讨论】：

我们如何将这种类型的实现与 ViewBinding 一起使用？ @MaulikDodia 没有什么特别需要照常使用，请参阅文档：developer.android.com/topic/libraries/view-binding 我会参考文档。谢谢！【参考方案3】：

Android中ViewPager2的使用

如Developer Site 所述

API 更改

FragmentStateAdapter 替换 FragmentStatePagerAdapter

RecyclerView.Adapter 替换 PagerAdapter

registerOnPageChangeCallback 替换 addPageChangeListener

简单来说，它们使 View Pager 适配器像 Recycle View Adapter 一样工作。

注意：- 我们不需要在 View Pager 2 中使用 Fragment。它完全依赖于 RecyclerView.Adapter 膨胀布局。

这里是示例 gitHub repo Link

例子：-

MainActivity.class

public class MainActivity extends AppCompatActivity 
    
    private ViewPager2 mPager;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().setTitle("View Pager 2");
        mPager = findViewById(R.id.pager);
        mPager.setAdapter(new MyViewPagerAdapter(this));
    
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) 
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) 
        if (R.id.change == item.getItemId()) 
            mPager.setOrientation(mPager.getOrientation() != ViewPager2.ORIENTATION_VERTICAL ? ViewPager2.ORIENTATION_VERTICAL : ViewPager2.ORIENTATION_HORIZONTAL);
        
        return super.onOptionsItemSelected(item);

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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_
    android:layout_
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_
        android:layout_ />

</android.support.constraint.ConstraintLayout>

MyViewPagerAdapter.class

public class MyViewPagerAdapter extends RecyclerView.Adapter<MyHolder> 
    
    private Context context;
    
    public MyViewPagerAdapter(Context context) 
        this.context=context;
    
    
    @NonNull
    @Override
    public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) 
        return new MyHolder(LayoutInflater.from(context).inflate(R.layout.cell_item, parent, false));
    
    
    @Override
    public void onBindViewHolder(@NonNull MyHolder holder, int position) 
      holder.mText.setText("Page "+(position+1));
    
    
    @Override
    public int getItemCount() 
        return 10;

cell_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_>

    <TextView
        android:id="@+id/text"
        android:layout_
        android:layout_
        android:gravity="center"
        android:text="Page 1"
        android:textSize="20sp" />

</android.support.constraint.ConstraintLayout>

MyHolder.class

class MyHolder extends RecyclerView.ViewHolder 
    
    public TextView mText;
    
    public MyHolder(@NonNull View itemView) 
        super(itemView);
        mText = itemView.findViewById(R.id.text);

输出：

【讨论】：

我们不能将 ViewPager2 与片段一起使用吗？ @ysfcyln 是的，您可以将Fragment 与ViewPager2 一起使用，请检查my above answer 我已经为How use Fragment with ViewPager2 添加了示例代码谢谢，但存储库已被删除。 @CoolMind 删除了哪个仓库？ github.com/sushildlh/ViewPager2。另请参阅medium.com/swlh/android-viewpager2-tablayout-3099aae2f396 了解新信息。 :)【参考方案4】：

这是我用 TabLayout 和 3 Fragment full Examble 实现 ViewPager2 所做的：

布局包含ViewPager2 和TabLayout：

 <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_
        android:layout_
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include3">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_
            android:background="@color/colorPrimary"
            app:tabTextColor="@color/tab_dismiss_color"
            app:tabSelectedTextColor="@color/green"
            android:layout_ />

        <View
            android:layout_
            android:layout_
            android:layout_gravity="bottom"
            android:background="#e4e4e4" />

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/pager"
            android:layout_
            android:layout_
            android:layout_weight="1" />
    </LinearLayout>

初始化 ViewPager2 并设置选项卡名称：

 @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_report);
        ButterKnife.bind(this);
        actionBarTitleId.setText(R.string.reports);

        viewPager.setAdapter(new ViewPagerAdapter(this));

        new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> 
            switch (position) 
                case 0:
                    tab.setText(R.string.financial_duty_str);
                    break;
                case 1:
                    tab.setText(R.string.financial_unpaid_str);
                    break;
                case 2:
                    tab.setText(R.string.financial_paid_str);
                    break;

            
        ).attach();

ViewPager2 适配器：

public class ViewPagerAdapter extends FragmentStateAdapter 


    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) 
        super(fragmentActivity);
    

    @NonNull
    @Override
    public Fragment createFragment(int position) 
        switch (position) 
            case 0:
                return new FinancialFragment();
            case 1:
                return new FinancialUnPaidFragment();
            case 2:
                return new FinancialPaidFragment();
            default:
                return null;

        
    

    @Override
    public int getItemCount() 
        return 3;

使用的依赖：

implementation "androidx.viewpager2:viewpager2:1.0.0"
implementation 'com.google.android.material:material:1.1.0-alpha10'

【讨论】：

你是如何解决标签间切换的？例如，当我选择 1 时，会加载 1 和 2。不知何故从 1 跳到 2...【参考方案5】：

如何使用它解释得很清楚。让我给出一些关于 ViewPager2 的小但非常重要的提示和细节，特别是如果它在关于如何防止内存泄漏的片段中

不要使用带有片段的构造函数，尤其是在使用TabLayout时。

public FragmentStateAdapter(@NonNull Fragment fragment) 
    this(fragment.getChildFragmentManager(), fragment.getLifecycle());

因为它有here描述的内存泄漏风险

改为使用 FragmentManager 和 LifeCycle。并且不要发送fragment的lifeCycle作为参数，使用viewLifeCycleOwner的生命周期，因为viewLifeCycleOwner代表fragment的view的生命周期。

 class NavigableFragmentStateAdapter(
    fragmentManager: FragmentManager,
    lifecycle: Lifecycle
) : FragmentStateAdapter(fragmentManager, lifecycle)

并在onCreateView中设置适配器

viewPager.adapter =
            NavigableFragmentStateAdapter(childFragmentManager, viewLifecycleOwner.lifecycle)

TabLayout

分离 TabLayoutMediator，因为它在片段中时会导致内存泄漏

https://***.com/questions/61779776/leak-canary-detects-memory-leaks-for-tablayout-with-viewpager2

ViewPager2 inside a fragment leaks after replacing the fragment it's in by Navigation Component navigate

TabLayoutMediator(tabLayout, viewPager2, tabConfigurationStrategy).detach()     
viewPager2.adapter = null

在Fragment的onDestroyView方法内

如果您希望将 ViewPager 的页面用作 navHostFragment 和导航组件以导航回子片段，请将 FragmentStateAdapter 中的 FragmentTransactionCallback 注册为

private val fragmentTransactionCallback =
    object : FragmentStateAdapter.FragmentTransactionCallback() 
        override fun onFragmentMaxLifecyclePreUpdated(
            fragment: Fragment,
            maxLifecycleState: Lifecycle.State
        ) = if (maxLifecycleState == Lifecycle.State.RESUMED) 

            // This fragment is becoming the active Fragment - set it to
            // the primary navigation fragment in the OnPostEventListener
            OnPostEventListener 
                fragment.parentFragmentManager.commitNow 
                    setPrimaryNavigationFragment(fragment)
                
            
         else 
            super.onFragmentMaxLifecyclePreUpdated(fragment, maxLifecycleState)
        
    

init 
    // Add a FragmentTransactionCallback to handle changing
    // the primary navigation fragment
    registerFragmentTransactionCallback(fragmentTransactionCallback)

此外，如果您希望查看一些示例，如何将 ViewPager2 与导航组件、动态功能模块以及与 BottomNavigationView 结合使用，您可以查看教程in this github repo.

【讨论】：

【参考方案6】：

这是 Kotlin 中 @sushildlh 答案的 kotlin 版本实现。在这段代码中，我正在使用 recyclerview 实现 viewpager2 来查看图像。我也在使用视图绑定

food_details.xml

<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_
    android:layout_
    tools:context=".presentation.recipeitem.RecipeDetailsFragment">


    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_
        android:layout_
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />
...

膨胀这个 xml 的片段

@AndroidEntryPoint
class RecipeDetailsFragment : Fragment(R.layout.fragment_recipe_details) 

private val viewModel: RecipeItemViewModel by viewModels()
private val viewBinding: FragmentRecipeDetailsBinding by viewBinding()

override fun onViewCreated(view: View, savedInstanceState: Bundle?) 
    super.onViewCreated(view, savedInstanceState)
    bindRecipeData(//object of data that is to be desplayed)


private fun bindRecipeData(recipeDetailedInfo: RecipeDetailedInfo?) 
    recipeDetailedInfo?.let 
        with(viewBinding) 
            viewPager2.adapter = ViewPagerAdapter(it.images)
            viewPager2.setPageTransformer(ZoomOutPageTransformer())
            lifecycleScope.launchWhenCreated 
                delay(500)
                viewPager2.setCurrentItem(if (it.images.size >= 2) 1 else 0, true)
            
        
    
....

在片段中，我正在创建适配器的对象并直接发送包含图像 URL 的字符串列表

这里是 viewpager 适配器，它基本上是一个普通的 recyclerview 适配器

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.blogspot.soyamr.recipes2.databinding.ImageviewBinding
import com.squareup.picasso.Picasso

class ViewPagerAdapter(private val images: List<String>) :
    RecyclerView.Adapter<ViewPagerAdapter.ImageViewHolder>() 


    class ImageViewHolder(private val imageViewBinding: ImageviewBinding) :
        RecyclerView.ViewHolder(imageViewBinding.root) 
        fun bind(imageLink: String) 
            Picasso.get().load(imageLink).into(imageViewBinding.root)
        

        companion object 
            fun from(parent: ViewGroup): ImageViewHolder 
                val itemBinding =
                    ImageviewBinding.inflate(LayoutInflater.from(parent.context), parent, false)
                return ImageViewHolder(itemBinding)
            
        
    

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ImageViewHolder 
        return ImageViewHolder.from(parent)
    

    override fun onBindViewHolder(holder: ImageViewHolder, position: Int) 
        holder.bind(images[position])
    

    override fun getItemCount(): Int = images.size

在 recyclerview 中我正在膨胀这个 imageview.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_ android:layout_
    android:scaleType="centerCrop"
    android:theme="@style/roundedImageView"
    />

如果需要，您可以使用复杂的 xml 视图

【讨论】：

【参考方案7】：

这是我的解决方案（Android Studio 3.6）：

在 app/build.gradle：

dependencies 
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation('com.crashlytics.sdk.android:crashlytics:2.10.1@aar')  transitive = true; 
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'com.google.android.material:material:1.1.0-beta01'
    implementation 'org.altbeacon:android-beacon-library:2.16.3'
    implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'
    implementation 'androidx.viewpager2:viewpager2:1.0.0-beta05'

    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation "androidx.core:core-ktx:+"
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

这是我的活动：

import android.os.Bundle;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;

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

import com.myproject.android.R;
import com.myproject.android.adapter.CustomFragmentStateAdapter;
import com.myproject.android.ui.fragment.BluetoothPageFragment;
import com.myproject.android.ui.fragment.QrPageFragment;

public class QRBluetoothSwipeActivity extends AppCompatActivity 
    private ViewPager2 myViewPager2;
    private CustomFragmentStateAdapter myAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) 
        // Make sure this is before calling super.onCreate
        setTheme(R.style.AppTheme); // show splash screen
        super.onCreate(savedInstanceState);
        setContentView(R.layout.qr_bluetooth_swipe_activity);
        init();
    

    private void init() 
        List<Fragment> fragmentList = new ArrayList<Fragment>();
        QrPageFragment m1 = new QrPageFragment();
        BluetoothPageFragment m2 = new BluetoothPageFragment();
        myViewPager2 = findViewById(R.id.viewPager2);
        fragmentList.add(m2);
        fragmentList.add(m1);
        myAdapter = new CustomFragmentStateAdapter(this, fragmentList);
        myViewPager2.setAdapter(myAdapter);

这里的布局：

<?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_
    android:layout_
    tools:context=".ui.actviity.SplashDelayActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_
        android:layout_ />

</androidx.constraintlayout.widget.ConstraintLayout>

这是我的 CustomFragmentStateAdapter

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

import org.jetbrains.annotations.NotNull;

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

public class CustomFragmentStateAdapter extends FragmentStateAdapter 
    private List<Fragment> listFragment = new ArrayList<>();

    public CustomFragmentStateAdapter(FragmentActivity fa, List<Fragment> list) 
        super(fa);
        listFragment = list;
    

    @NotNull
    @Override
    public Fragment createFragment(int position) 
        return listFragment.get(position);
    

    @Override
    public int getItemCount() 
        return 2;

这里是我的片段：

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

import com.myproject.android.R;

public class BluetoothPageFragment extends Fragment 

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        return inflater.inflate(R.layout.bluetooth_page_fragment, container, false);

第二个片段：

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

import com.myproject.android.R;

public class QrPageFragment extends Fragment 

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        return inflater.inflate(R.layout.qr_page_fragment, container, false);

因此，现在我将androidx.viewpager2.widget.ViewPager2 与我的自定义片段一起使用。

它的工作！！！

不错。

附：另一个工具：

public class CustomFragmentStateAdapter extends FragmentStateAdapter 
    private ArrayList<Fragment> arrayList = new ArrayList<>();

    public CustomFragmentStateAdapter (FragmentActivity fa) 
        super(fa);
    

    public void addFragment(Fragment fragment) 
        arrayList.add(fragment);
    

    @Override
    public int getItemCount() 
        return arrayList.size();
    

    @NonNull
    @Override
    public Fragment createFragment(int position) 
        // return your fragment that corresponds to this 'position'
        return arrayList.get(position);

并像这样使用（在活动中）：

 myViewPager2 = findViewById(R.id.viewPager2);
        myAdapter = new CustomFragmentStateAdapter (this);
        myAdapter.addFragment(new QrPageFragment());
        myAdapter.addFragment(new BluetoothPageFragment());
        myViewPager2.setAdapter(myAdapter);

【讨论】：

我用过，FragmentPageAdapter里面的图片recyclerview，速度太慢了，跟猪跑马一样。这是不正确的。 FragmentStateAdapter 的 createFragment 回调应该（如方法所述）create Fragment。不要给一个已经被创造出来并躺在周围的人。通过使用您的方法，您正在搞乱FragmentManager's 操作。 @BartekLipinski。那么我如何“可以在运行时动态修改片段集合，并且 ViewPager2 将正确显示修改后的集合。”正如documentation 所说的那样？【参考方案8】：

我首先创建了一个视图寻呼机，然后使用以下说明迁移到视图寻呼机 2： https://developer.android.com/training/animation/vp2-migration

【讨论】：

【参考方案9】：

这是正确的实现方式！

typealias FragmentBuilder = () -> Fragment

class MyAdapter(
    fragmentManager: FragmentManager, 
    lifecycle: Lifecycle
) : FragmentStateAdapter(fragmentManager, lifecycle) 

    private val fragmentBuilders = mutableListOf<FragmentBuilder>()

    fun add(fragmentBuilder: FragmentBuilder) 
        fragmentBuilders.add(fragmentBuilder)
    

    /**
     * Dynamic replacement of fragments
     */
    fun set(position: Int, fragmentBuilder: FragmentBuilder) 
        fragmentBuilders[position] = fragmentBuilder
    

    override fun getItemCount() = fragmentBuilders.size

    override fun createFragment(position: Int) = fragmentBuilders[position].invoke()

甚至不感谢）

【讨论】：

你能帮我实现生命周期吗，因为我找不到任何关于处理生命周期的资源.....【参考方案10】：

使用标签的两个不同片段的简单示例。主要布局：

<?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:id="@+id/mainConstraintLayout"
    android:layout_
    android:layout_>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/mainViewPager"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mainTabLayout">

    </androidx.viewpager2.widget.ViewPager2>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/mainTabLayout"
        android:layout_
        android:layout_
        android:background="@color/brown_normal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicatorColor="@color/yellow_light"
        app:tabIndicatorHeight="3dp"
        app:tabSelectedTextColor="@color/yellow_light"
        app:tabTextColor="@color/yellow_normal"
        tools:ignore="SpeakableTextPresentCheck" />
</androidx.constraintlayout.widget.ConstraintLayout>

适配器：

public class MainToolsAdapter extends FragmentStateAdapter

    // The quantity of tab is fixed
    private static final int FRAGMENT_COUNT = 2;
    // Titles for each tab    
    private final String[] titles = new String[FRAGMENT_COUNT];

    public MainToolsAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, Context context)
    
        super(fragmentManager, lifecycle);
        // Load titles for tab from resourses
        titles[0] = context.getResources().getString(R.string.tab_1);
        titles[1] = context.getResources().getString(R.string.tab_2);
    

    @NonNull
    @Override
    public Fragment createFragment(int position)
    
        // Create fragments according to position
        if(position == 0)
        
            return new FragmentTabOne();
        
        return new FragmentTabTwo();
    

    @Override
    public int getItemCount()
    
        return FRAGMENT_COUNT;
    

    public String getItemTitle(int position)
    
        if(position == 0)
        
            return titles[0];
        
        return titles[1];

主要活动 OnCreate：

@Override
protected void onCreate(Bundle savedInstanceState)

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Create adapter for ViewPager
    mainToolsAdapter = new MainToolsAdapter(getSupportFragmentManager(), getLifecycle(), this);

    // Set adapter to the ViewPager
    viewPager = findViewById(R.id.mainViewPager);
    viewPager.setAdapter(mainToolsAdapter);

    tabLayout = findViewById(R.id.mainTabLayout);

    // Create the TabLayoutMediator to asociate ViewPager2 to TabLayout
    TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(tabLayout, viewPager, true, new TabLayoutMediator.TabConfigurationStrategy()
    
        @Override
        public void onConfigureTab(@NonNull TabLayout.Tab tab, int position)
        
            // When a tab is created this is called, then we can set tab properties, in this case the text
            tab.setText(mainToolsAdapter.getItemTitle(position));
        
    );
    // After configure we need to realice attach then Tab and ViewPager2 are asociated
    tabLayoutMediator.attach();

分级：

plugins 
    id 'com.android.application'


android 
    compileSdk 30

    defaultConfig 
        applicationId "com.xxxx.yyyy"
        minSdk 19
        targetSdk 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    

    buildTypes 
        release 
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        
    
    compileOptions 
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    


dependencies

    implementation fileTree(include: ['*.jar', '*.aar'], dir: 'libs')

    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.1'
    testImplementation 'junit:junit:4.13.2'

    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

【讨论】：

那是相当多的代码，没有解释！一些 cmets 和/或支持文本尤其有助于帮助人们理解并得出他们自己的解决方案 @andrew 为了更清晰，我在代码中添加了更多 cmets【参考方案11】：

以防万一有人想监听ViewPager2.OnPageChangeCallback 事件：

private final ViewPager2.OnPageChangeCallback onPageChangeListener = new ViewPager2.OnPageChangeCallback() 

    /**
     * This method will be invoked when the current page is scrolled, either as part
     * of a programmatically initiated smooth scroll or a user initiated touch scroll.
     * @param position             Position index of the first page currently being displayed.
     *                             Page position+1 will be visible if positionOffset is nonzero.
     * @param positionOffset       Value from [0, 1) indicating the offset from the page at position.
     * @param positionOffsetPixels Value in pixels indicating the offset from position.
     */
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) 
        super.onPageScrolled(position, positionOffset, positionOffsetPixels);
    

    /**
     * This method will be invoked when a new page becomes selected.
     * Animation is not necessarily complete.
     * @param position             Position index of the first page currently being displayed.
     *                             Page position+1 will be visible if positionOffset is nonzero.
     */
    @Override
    public void onPageSelected (int position) 
        super.onPageSelected(position);
        if (position == 2)  // SomeFragment
            Log.d(LOG_TAG, "ViewPager2.onPageSelected( " + position + " )");
            SomePagerAdapter adapter = (SomePagerAdapter) viewpager.getAdapter();
            if (adapter != null) 
                SomeFragment fragment = (SomeFragment) adapter.getItem(position);
                fragment.onLateInit();
            
        
    
;

与ViewPager2.registerOnPageChangeCallback()一起申请：

viewpager.registerOnPageChangeCallback(this.onPageChangeListener);

FragmentStateAdapter 需要保存一个ArrayList<Fragment> mItems，以便可以访问提前构建的实例。 SomeFragment 暴露方法public void onLateInit()，因为@Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) 可能无法使用（取决于Fragment）。

public Fragment getItem(int position) 
    return this.mItems.get(position);

与此类似，可以解决这个问题，Fragment 早在人们能够正确初始化它的视图之前就已经构建好了，例如。在上一个Fragment 中输入数据。对于大量 Fragment (...) 来说，它可能不是最佳选择，但对于少数人来说，它的效果很好。

【讨论】：

以上是关于在 Android 中正确实现 ViewPager2的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Android 中正确定义 2 个主要的启动器活动

我是不是在 C++ 中正确实现了欧拉方法？

如何在python的类中正确实现辅助函数

在这种情况下，如何在 Flutter 中正确实现 FutureBuilder？

在PHP中正确实现模型类

如何在php中正确实现结构化菜单

在 Android 中正确实现 ViewPager2

更新 7

更新 6

更新 5

新功能

更新

如果您想将Fragment 与ViewPager2 一起使用，请尝试此操作

更新 2

更新 3

更新 4

如果您想将`Fragment` 与`ViewPager2` 一起使用，请尝试此操作