使用Glide+ViewPager实现轮播时竖版图片被拉伸的解决方法求助

Hey there! I’ve run into this exact image stretching issue with Glide and ViewPager before, so let’s break down how to fix it and cover some alternative efficient image display options.

1. Fix Layout & Glide Configuration First #

The core problem usually stems from misconfigured ImageView properties and conflicting scaling logic between the view and Glide. Here's what to adjust:

Update Your ImageView Layout #

Add these critical properties to your ViewPager item's ImageView to preserve aspect ratio:

<ImageView
    android:id="@+id/slide_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true" <!-- Ensures view respects image aspect ratio -->
    android:scaleType="centerInside" /> <!-- Displays full image without stretching -->

• adjustViewBounds="true" tells the ImageView to auto-adjust its height based on the image's aspect ratio when width is fixed.
• Use scaleType="fitCenter" instead if you want the image to fill the full width (while maintaining ratio, with possible vertical letterboxing or cropping for tall images).

Align Glide's Scaling Strategy #

Match Glide's scaling to your ImageView's scaleType to avoid conflicts:

// For centerInside (full image, no stretch)
Glide.with(requireContext())
    .load(yourImageUrl)
    .centerInside()
    .into(binding.slideImage)

// OR for fitCenter (fill width, maintain aspect ratio)
Glide.with(requireContext())
    .load(yourImageUrl)
    .fitCenter()
    .into(binding.slideImage)

2. Fix ViewPager's Wrap_content Limitation #

Even with the above, you might still see stretching because native ViewPager doesn’t properly support wrap_content for height. It defaults to matching the parent's height, forcing the ImageView to stretch. Fix this with a custom ViewPager:

class WrapHeightViewPager(context: Context, attrs: AttributeSet?) : ViewPager(context, attrs) {
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        var calculatedHeight = 0
        // Measure each child view to find the tallest one
        for (i in 0 until childCount) {
            val child = getChildAt(i)
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED))
            val childHeight = child.measuredHeight
            if (childHeight > calculatedHeight) {
                calculatedHeight = childHeight
            }
        }
        // Update height to match the tallest child
        val newHeightSpec = MeasureSpec.makeMeasureSpec(calculatedHeight, MeasureSpec.EXACTLY)
        super.onMeasure(widthMeasureSpec, newHeightSpec)
    }
}

Replace your native ViewPager in layout with this custom implementation:

<com.yourpackage.WrapHeightViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

3. Alternative Efficient Image Display Libraries #

If you’re open to alternatives, these modern libraries handle aspect ratio preservation with less boilerplate:

• Coil: Jetpack's recommended image loader, built with Kotlin Coroutines. It’s lighter than Glide and has native support for aspect ratio handling:

  coil.load(yourImageUrl) {
      scale(Scale.FIT) // or Scale.CENTER_INSIDE
      target(binding.slideImage)
  }
  

• Picasso: A simpler, mature library that automatically respects adjustViewBounds when loading images, making it great for basic use cases.

内容的提问来源于stack exchange，提问作者user8747695