Android ViewPager轮播图适配小图片时显示异常求助

Hey there! I totally get where you're coming from—when you switch from full-screen to small carousel images, it's frustrating when the ViewPager refuses to stick to your desired width. Let's break down the problem and fix it step by step.

Why This Happens #

The main culprits here are:

• Your ViewPager is probably set to match_parent width in your layout, so it stretches to fill the screen regardless of your small items.
• The CarouselEffectTransformer uses the ViewPager's full measured width for calculations, which works for full-screen but not for small carousels.
• Your item layout (item_cover.xml) might not have fixed/constrained dimensions, letting it expand unnecessarily.

Step 1: Constrain Your ViewPager in the Layout #

First, make sure your bottom carousel ViewPager isn't set to match_parent width. Instead, give it a fixed width or use constraints to limit it. For example, in a ConstraintLayout:

<ViewPager
    android:id="@+id/bottom_carousel"
    android:layout_width="280dp" <!-- Adjust this to your desired small width -->
    android:layout_height="110dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginBottom="16dp"/>

Step 2: Fix Your Item Layout (item_cover.xml) #

Ensure your carousel items don't expand beyond their intended size. Set fixed dimensions for the root layout and ImageView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linMain"
    android:layout_width="140dp" <!-- Match your item's desired width -->
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp">

    <com.makeramen.roundedimageview.RoundedImageView
        android:id="@+id/imageCover"
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:scaleType="centerCrop" <!-- Prevents image stretching -->
        android:adjustViewBounds="true"/>

    <!-- Your text views here -->
</LinearLayout>

Step 3: Update the Carousel Transformer #

The original transformer uses a fixed maxTranslateOffsetX (180dp), which is way too big for a small ViewPager. Let's modify it to use a ratio of the ViewPager's width instead, so it scales correctly:

public class CarouselEffectTransformer implements ViewPager.PageTransformer {
    private float maxTranslateOffsetRatio; // Use ratio instead of fixed dp
    private ViewPager viewPager;

    // Constructor takes a ratio (e.g., 0.2 = 20% of ViewPager width)
    public CarouselEffectTransformer(float maxTranslateOffsetRatio) {
        this.maxTranslateOffsetRatio = maxTranslateOffsetRatio;
    }

    @Override
    public void transformPage(View view, float position) {
        if (viewPager == null) {
            viewPager = (ViewPager) view.getParent();
        }

        int viewPagerWidth = viewPager.getMeasuredWidth();
        int maxTranslateOffsetX = (int) (viewPagerWidth * maxTranslateOffsetRatio);

        int leftInScreen = view.getLeft() - viewPager.getScrollX();
        int centerXInViewPager = leftInScreen + view.getMeasuredWidth() / 2;
        int offsetX = centerXInViewPager - viewPagerWidth / 2;
        float offsetRate = (float) offsetX * 0.38f / viewPagerWidth;
        float scaleFactor = 1 - Math.abs(offsetRate);

        if (scaleFactor > 0) {
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
            view.setTranslationX(-maxTranslateOffsetX * offsetRate);
        }
        ViewCompat.setElevation(view, scaleFactor);
    }
}

Then initialize it with a reasonable ratio for your small carousel:

// Use 0.2 for a subtle offset—adjust based on your needs
bottomCarousel.setPageTransformer(true, new CarouselEffectTransformer(0.2f));

Step 4: Tweak the PagerAdapter #

In your MyPagerAdapter, fix the inflate call to avoid overriding layout parameters. Use this instead of passing null as the parent:

View view = LayoutInflater.from(context).inflate(R.layout.item_cover, container, false);

Final Checks #

• Make sure your images are properly sized (you can use Glide's override() method to resize them if needed: .override(140, 90)).
• Test on different screen sizes to ensure the carousel stays constrained to your desired width.

That should do it! Your bottom small-image carousel should now stay at the width you set instead of filling the screen.

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