具有不同项目高度和 WRAP_CONTENT 的 ViewPager2

Question

有几篇关于让 ViewPager 处理不同高度的项目的帖子，这些项目的中心是扩展 ViewPager 本身以修改其 onMeasure 以支持这一点。

但是，鉴于 ViewPager2 被标记为最终 class，我们无法扩展它。

有谁知道是否有办法解决这个问题？

例如假设我有两个观点：

View1 = 200dp

View2 = 300dp

加载 ViewPager2 (layout_height="wrap_content") 时 -- 查看 View1，其高度将为 200dp。

但是当我滚动到 View2 时，高度仍然是 200dp； View2 的最后 100dp 被截掉了。

Answer 1

解决方法是注册一个PageChangeCallback，然后在询问child后，将ViewPager2的LayoutParams调整为re-measure本身。

pager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        val view = // ... get the view
        view.post {
            val wMeasureSpec = MeasureSpec.makeMeasureSpec(view.width, MeasureSpec.EXACTLY)
            val hMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
            view.measure(wMeasureSpec, hMeasureSpec)

            if (pager.layoutParams.height != view.measuredHeight) {
                // ParentViewGroup is, for example, LinearLayout
                // ... or whatever the parent of the ViewPager2 is
                pager.layoutParams = (pager.layoutParams as ParentViewGroup.LayoutParams)
                    .also { lp -> lp.height = view.measuredHeight }
            }
        }
    }
})

或者，如果您的视图高度可能会在某些时候发生变化，例如由于异步数据加载，然后改用全局布局侦听器：

pager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    private val listener = ViewTreeObserver.OnGlobalLayoutListener {
        val view = // ... get the view
        updatePagerHeightForChild(view)
    }

    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        val view = // ... get the view
        // ... IMPORTANT: remove the global layout listener from other views
        otherViews.forEach { it.viewTreeObserver.removeOnGlobalLayoutListener(layoutListener) }
        view.viewTreeObserver.addOnGlobalLayoutListener(layoutListener)
    }

    private fun updatePagerHeightForChild(view: View) {
        view.post {
            val wMeasureSpec = MeasureSpec.makeMeasureSpec(view.width, MeasureSpec.EXACTLY)
            val hMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
            view.measure(wMeasureSpec, hMeasureSpec)

            if (pager.layoutParams.height != view.measuredHeight) {
                // ParentViewGroup is, for example, LinearLayout
                // ... or whatever the parent of the ViewPager2 is
                pager.layoutParams = (pager.layoutParams as ParentViewGroup.LayoutParams)
                    .also { lp -> lp.height = view.measuredHeight }
            }
        }
    }
}

在此处查看讨论：

https://issuetracker.google.com/u/0/issues/143095219

Answer 2

就我而言，在 onPageSelected 中添加 adapter.notifyDataSetChanged() 有所帮助。

Answer 3

我自己偶然发现了这个案例，但是有碎片。我没有将视图调整为已接受的答案，而是决定将视图包装在 ConstraintLayout 中。这要求您指定 ViewPager2 的大小而不是使用 wrap_content.

因此，与其更改我们的 viewpager 的大小，不如将其设置为它处理的最大视图的最小大小。

对 Android 有点陌生，所以不知道这是否是一个好的解决方案，但它适合我。

换句话说：

<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_width="match_parent"
  android:layout_height="match_parent"
  >
    <!-- Adding transparency above your view due to wrap_content -->
    <androidx.constraintlayout.widget.ConstraintLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      >

      <!-- Your view here -->

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 4

对我来说这非常有效：


    viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageScrolled(
                position: Int,
                positionOffset: Float,
                positionOffsetPixels: Int
            ) {
                super.onPageScrolled(position,positionOffset,positionOffsetPixels)
                if (position>0 && positionOffset==0.0f && positionOffsetPixels==0){
                    viewPager2.layoutParams.height =
                        viewPager2.getChildAt(0).height
                }
            }
        })

Answer 5

没有发布的答案完全适用于我的情况 - 事先不知道每个页面的高度 - 所以我使用 [=12] 解决了不同的 ViewPager2 页面高度=] 方式如下：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        >

        <!-- ... -->

    </com.google.android.material.appbar.AppBarLayout>

    <!-- Wrapping view pager into constraint layout to make it use maximum height for each page. -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/viewPagerContainer"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/appBarLayout"
        >

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation_menu"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 6

@ 代码在视图之间滑动时完美运行，但在第一次查看视图时不起作用。滑动后即可正常使用。

因此，以编程方式滑动 viewpager：

binding.viewpager.setCurrentItem(1)
binding.viewpager.setCurrentItem(0) //back to initial page

Answer 7

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
  override fun onPageSelected(position: Int) {
    super.onPageSelected(position)
    val view = (viewPager[0] as RecyclerView).layoutManager?.findViewByPosition(position)

    view?.post {
      val wMeasureSpec = MeasureSpec.makeMeasureSpec(view.width, MeasureSpec.EXACTLY)
      val hMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
      view.measure(wMeasureSpec, hMeasureSpec)

      if (viewPager.layoutParams.height != view.measuredHeight) {
        viewPager.layoutParams = (viewPager.layoutParams).also { lp -> lp.height = view.measuredHeight }
      }
    }
  }
})

Answer 8

只需为 ViewPager2 中所需的 Fragment 执行此操作即可：

override fun onResume() {
     super.onResume()
     layoutTaskMenu.requestLayout()
}

Jetpack：binding.root.requestLayout()（感谢@syed-zeeshan 提供详细信息）

Answer 9

只需调用 .requestLayout() 到 ViewPager2

中使用的 Fragment class 的 onResume() 布局的根视图

Answer 10

我也遇到了这个问题。我正在为几个带有帐户信息的选项卡实现 TabLayout 和 ViewPager2。这些选项卡必须具有不同的高度，例如：View1 - 300dp、View2 - 200dp、Tab3 - 500dp。高度被锁定在第一个视图的高度内，其他视图被剪切或扩展到（示例）300dp。像这样：

因此，经过两天的搜索，我没有任何帮助（或者我不得不尝试更好），但我放弃并使用 NestedScrollView 来查看我的所有视图。当然，现在我没有效果，配置文件的 header 在 3 个视图中滚动信息，但至少它现在以某种方式工作。希望这对某人有所帮助！如果您有什么建议，欢迎回复！

P.s。我很抱歉我的英语不好。

Answer 11

我遇到了类似的问题，解决方法如下。在我的例子中，我让 ViewPager2 与 TabLayout 一起使用具有不同高度的片段。在 onResume() 方法的每个片段中，我添加了以下代码：

@Override
public void onResume() {
    super.onResume();
    setProperHeightOfView();
}

private void setProperHeightOfView() {
    View layoutView = getView().findViewById( R.id.layout );
    if (layoutView!=null) {
        ViewGroup.LayoutParams layoutParams = layoutView.getLayoutParams();
        if (layoutParams!=null) {
            layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT;
            layoutView.requestLayout();
        }
    }
}

R.id.layout 是特定片段的布局。我希望我有所帮助。最好的祝福， T.

Answer 12

只有 adapter.notifyDataSetChanged() 在 ViewPager2 中对我有用。在 Kotlin 中使用以下代码。

 viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                adapter.notifyDataSetChanged()
            }
        })

Answer 13

我正在使用来自 here

的 ViewPager2ViewHeightAnimator

Answer 14

你为什么不通过替换不使用 ViewPager2 来做到这一点。像下面的代码：

private void fragmentController(Fragment newFragment){
    FragmentTransaction ft;
    ft = mainAct.getSupportFragmentManager().beginTransaction();
    ft.replace(R.id.relMaster, newFragment);
    ft.addToBackStack(null);
    ft.commitAllowingStateLoss();
}

其中 relMaster 是 RelativeLayout。

具有不同项目高度和 WRAP_CONTENT 的 ViewPager2

ViewPager2 with differing item heights and WRAP_CONTENT

android

android-viewpager2

例如假设我有两个观点：