当前位置：首页 > news >正文

Android-自适用高度的ViewPager

news 2025/7/4 14:25:43

需求

在项目中，我们常常遇到需要动态调整 ViewPager 的高度，以适应其内容大小的需求。默认情况下，ViewPager 的高度是固定的，无法根据每个页面的内容高度进行调整。这会导致在内容高度不一致时，出现不必要的空白区域或者内容被裁剪的情况。为了解决这个问题，我们设计了一个 AutoHeightViewPager，能够根据当前显示页面的内容高度动态调整自身的高度，保证内容完整且没有多余的空白。

效果

在这里插入图片描述

实现思路

1. 动态高度调整

首先，我们需要一个自定义的 ViewPager 类 AutoHeightViewPager，这个类可以根据当前页面的内容高度来动态调整自身的高度。通过重写 onMeasure 方法，可以在滑动过程中动态计算页面的高度并调整布局。

2. 监听页面滑动事件

为了平滑过渡，我们需要监听页面的滑动过程，并计算滑动比例，将当前页面的高度与下一个页面的高度按比例过渡，实现平滑过渡效果。

3. 自定义 Adapter

自定义的 PagerAdapter 必须实现一个接口 AutoHeightPager，用于获取指定位置页面的 View，这样我们可以测量页面内容的高度。

实现代码

1. AutoHeightViewPager

package com.yxlh.androidxy.demo.ui.viewpager.vpimport android.content.Context
import android.util.AttributeSet
import android.view.View
import androidx.viewpager.widget.PagerAdapter
import androidx.viewpager.widget.ViewPagerinterface AutoHeightPager {fun getView(position: Int): View?
}class AutoHeightViewPager @JvmOverloads constructor(context: Context,attrs: AttributeSet? = null
) : ViewPager(context, attrs) {private var lastWidthMeasureSpec: Int = 0private var currentHeight: Int = 0private var lastPosition: Int = 0private var isScrolling: Boolean = falseinit {addOnPageChangeListener(object : SimpleOnPageChangeListener() {override fun onPageScrolled(position: Int,positionOffset: Float,positionOffsetPixels: Int) {if (positionOffset == 0f) {isScrolling = falserequestLayout()return}val srcPosition = if (position >= lastPosition) position else position + 1val destPosition = if (position >= lastPosition) position + 1 else positionval srcHeight = getViewHeight(srcPosition)val destHeight = getViewHeight(destPosition)currentHeight = (srcHeight + (destHeight - srcHeight) *if (position >= lastPosition) positionOffset else 1 - positionOffset).toInt()isScrolling = truerequestLayout()}override fun onPageScrollStateChanged(state: Int) {if (state == SCROLL_STATE_IDLE) {lastPosition = currentItem}}})}override fun setAdapter(adapter: PagerAdapter?) {require(adapter == null || adapter is AutoHeightPager) { "PagerAdapter must implement AutoHeightPager." }super.setAdapter(adapter)}private fun getViewHeight(position: Int): Int {val adapter = adapter as? AutoHeightPager ?: return 0return run {val view = adapter.getView(position) ?: return 0view.measure(lastWidthMeasureSpec,MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED))view.measuredHeight}}override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {lastWidthMeasureSpec = widthMeasureSpecvar heightSpec = heightMeasureSpecif (isScrolling) {heightSpec = MeasureSpec.makeMeasureSpec(currentHeight, MeasureSpec.EXACTLY)} else {getViewHeight(currentItem).takeIf { it > 0 }?.let {heightSpec = MeasureSpec.makeMeasureSpec(it, MeasureSpec.EXACTLY)}}super.onMeasure(widthMeasureSpec, heightSpec)}
}

2. AutoHeightPagerAdapter

package com.yxlh.androidxy.demo.ui.viewpagerimport android.view.View
import android.view.ViewGroup
import androidx.viewpager.widget.PagerAdapter
import com.yxlh.androidxy.demo.ui.viewpager.vp.AutoHeightPagerclass AutoHeightPagerAdapter : PagerAdapter(), AutoHeightPager {private val viewList = mutableListOf<View>()override fun instantiateItem(container: ViewGroup, position: Int): Any {val view = viewList[position]val parent = view.parent as? ViewGroupparent?.removeView(view)container.addView(view)return view}override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {container.removeView(`object` as View)}fun setViews(views: List<View>) {viewList.clear()viewList.addAll(views)notifyDataSetChanged()}override fun getView(position: Int): View? {return viewList.getOrNull(position)}override fun getCount(): Int {return viewList.size}override fun isViewFromObject(view: View, `object`: Any): Boolean {return view == `object`}
}

3. Activity 代码

package com.yxlh.androidxy.demo.ui.viewpagerimport android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import com.yxlh.androidxy.R
import com.yxlh.androidxy.demo.ui.viewpager.vp.AutoHeightViewPagerclass VpActivity : AppCompatActivity() {private var mAutoHeightVp: AutoHeightViewPager? = nullprivate var mAdapter: AutoHeightPagerAdapter? = nulloverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_vp)val viewList: MutableList<View> = ArrayList()viewList.add(LayoutInflater.from(this).inflate(R.layout.view_demo_1, null))viewList.add(LayoutInflater.from(this).inflate(R.layout.view_demo_2, null))mAutoHeightVp = findViewById(R.id.viewpager)mAutoHeightVp?.setAdapter(AutoHeightPagerAdapter().also { mAdapter = it })mAdapter?.setViews(viewList)mAutoHeightVp?.setCurrentItem(1)}
}

4. 布局 XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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"><androidx.core.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_constraintTop_toTopOf="parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.yxlh.androidxy.demo.ui.viewpager.vp.AutoHeightViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="wrap_content" /><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:adjustViewBounds="true"android:scaleType="fitXY"android:src="@drawable/vp_content" /></LinearLayout></androidx.core.widget.NestedScrollView></androidx.constraintlayout.widget.ConstraintLayout>