如何在同一页面上的 Fragment 内创建具有 3 个 Fragment 的 ViewPager？

Posted 2023-04-18

【中文标题】如何在同一页面上的 Fragment 内创建具有 3 个 Fragment 的 ViewPager？

【英文标题】：How to create a ViewPager with 3 Fragments inside a Fragment on the same page?

【发布时间】：2021-03-25 02:06:16

【问题描述】：

我想创建一个应用程序来使用 ViewPager 在片段中显示 3 个不同的片段。片段如下图所示：

Click here to see the picture

稍后，当用户单击其中一个片段时，将打开另一个片段以仅显示该特定片段。 这可能吗？任何建议将不胜感激！谢谢！

【问题讨论】：

ViewPager 与此有​​什么关系？您可以滚动所有三个以在任一侧再显示 3 个吗？

不是真的，我想我必须使用它才能在同一个页面上显示 3 个片段。你能告诉我另一种方法（也许更容易）来实现这一目标吗？谢谢。我只需要在一页中显示这 3 个片段并处理它们的点击事件。

您可以有嵌套片段，或如by the docs 所述的“子片段”。

如何自定义布局以显示图片中的片段？

如果您有经验，您可以在大约 2 分钟内使用 ConstraintLayout 实现这一目标。您的“根”视图是一个占据整个屏幕 (match_parent) 的 CL (ConstraintLayout)。在里面，你将有 3 个孩子。 Fragment 1 从上到下连接到父级，从上到下到父级开始，从上到下到 Fragment 2 的开始。 Frag 2 从上到下到父级，从上到下到父级，从开始到 Frag 1 的末尾。 Fragment 3 从下到下父级，父级的开始/结束，以及片段 1 的从上到下（例如）。这些都是 FrameLayouts 或新的 FragmentContainers（版本/api 依赖）。

【参考方案1】：

真的需要3分钟。

你必须给每个容器/视图/小部件一个0dp，意思是“match_constrains”，换句话说：你的大小将由你拥有的约束决定（在它们被the algorithm运行之后）。

在下面的布局中有三个小部件（我使用了“新”FragmentContainerView，但它们也可以是 FrameLayout 实例。

三个都注意：

宽度/高度设置为0dp（又名：match_constrains）

片段一：

父级顶部到顶部（屏幕顶部） 从父级开始到开始（屏幕左侧/开始） 片段二的结束（右）到开始（左）。 片段三的底部到顶部。

片段二：

父级顶部到顶部（屏幕顶部） 父级的开始（左）到结束（右） End(right) 到 End of Parent（屏幕的右/端） 片段三的底部到顶部。

片段三：

从上到下的片段一（这里我选择了片段一，但可以使用“二”，甚至可以使用设置为 50% 的指南，这很好） Start 和 End 都指向各自的父级（因为我们希望 FR3 使用所有可用宽度） 从底部到父级底部（片段 3 一直向下）。

结果如下：

这是布局。

Now go and spend some time learning Constraint 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"
    android:id="@+id/root"
    android:layout_
    android:layout_>

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_one"
        android:layout_
        android:layout_
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/fragment_two"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/fragment_three" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@id/fragment_two"
        android:layout_
        android:layout_
        android:background="@android:color/holo_blue_dark"
        app:layout_constraintStart_toEndOf="@id/fragment_one"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/fragment_three" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_three"
        android:layout_
        android:layout_
        android:background="@android:color/holo_purple"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fragment_one"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

非常感谢！我知道 CL 是如何工作的，但不知道高度和宽度设置为 0dp 的部分..