android ViewPager 上下切换

Android ViewPager 上下切换

在 Android 中，ViewPager 是一个常用的控件，可以实现页面之间的左右滑动切换，非常适合用于实现引导页、图片浏览、轮播图等功能。那么，在某些场景下，我们可能需要实现上下切换的效果，本文将介绍如何使用 ViewPager 实现上下切换的效果，并提供相应的代码示例。

ViewPager 简介

ViewPager 是 Android 支持库中的一个控件，用于实现页面之间的滑动切换。它可以承载多个子视图，并通过滑动手势进行页面的切换。ViewPager 使用 Adapter 来提供页面视图，每个页面都由一个 Fragment 表示。

实现上下切换的步骤

步骤一：添加支持库依赖

首先，在你的项目中添加 ViewPager 的支持库依赖。在 app 模块的 build.gradle 文件中的 dependencies 块中添加以下代码：

implementation 'androidx.viewpager2:viewpager2:1.0.0'

步骤二：布局文件中添加 ViewPager

在你的布局文件中添加 ViewPager 控件，并设置其 id 以便后续操作。

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

步骤三：创建 Fragment

创建两个 Fragment，分别表示上下两个页面。在你的项目中创建两个 Fragment 类，并实现相应的布局文件。

public class TopFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_top, container, false);
    }
}

public class BottomFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_bottom, container, false);
    }
}

步骤四：创建 FragmentStateAdapter

创建一个 FragmentStateAdapter 类，用于为 ViewPager 提供页面视图。

public class MyPagerAdapter extends FragmentStateAdapter {
    private static final int NUM_PAGES = 2;

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

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        if (position == 0) {
            return new TopFragment();
        } else {
            return new BottomFragment();
        }
    }

    @Override
    public int getItemCount() {
        return NUM_PAGES;
    }
}

步骤五：初始化 ViewPager

在 Activity 或 Fragment 中找到 ViewPager 控件，并为其创建适配器。

ViewPager2 viewPager = findViewById(R.id.viewPager);
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(),
        getLifecycle()));

步骤六：实现上下切换

为了实现上下切换的效果，我们需要修改 ViewPager 的滑动方向。在 Activity 或 Fragment 的 onCreate 方法中添加以下代码：

viewPager.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

完整示例代码

下面是一个完整的示例代码，演示了如何使用 ViewPager 实现上下切换的效果。

public class MainActivity extends AppCompatActivity {
    private static final int NUM_PAGES = 2;

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

        ViewPager2 viewPager = findViewById(R.id.viewPager);
        viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(),
                getLifecycle()));
        viewPager.setOrientation(ViewPager2.ORIENTATION_VERTICAL);
    }

    public static class TopFragment extends Fragment {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_top, container, false);
        }
    }

    public static class BottomFragment extends Fragment {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_bottom, container, false);
        }
    }

    public static class MyPagerAdapter extends FragmentStateAdapter {
        public MyPagerAdapter(@NonNull FragmentManager fragmentManager,
                              @NonNull Lifecycle lifecycle) {
            super(fragmentManager, lifecycle);
        }

        @NonNull
        @Override
        public Fragment createFragment(int position) {
            if (position == 0) {
                return new TopFragment();
            } else {
                return new BottomFragment();
            }
        }

        @Override
        public int getItemCount() {
            return NUM_PAGES;
        }
    }
}