android 中间大两边小,Android用ViewPager实现一个中间大两边小并且带指示器的轮播图，也称画廊效果...

最新推荐文章于 2025-10-12 16:53:17 发布

转载

最新推荐文章于 2025-10-12 16:53:17 发布 · 1k 阅读

文章标签：

#android 中间大两边小

这篇博客介绍了如何在Android中实现一个中间大两边小的轮播图，即画廊效果。通过设置ViewPager的clipChildren属性为false，配合PageTransformer实现页面的缩放效果。此外，还使用了ViewPagerIndicator作为指示器，可以自由调整指示器的位置。博客提供了关键代码示例，包括CardTransformer的实现，以及如何在Activity和Adapter中设置和监听轮播图。

在项目开发中，遇到了一个新需求，要做一个画廊效果的轮播图，要求指示器跟轮播图分离。效果图如下。以前做轮播图都是直接拿第三方的，现在突然做一个这种小众的效果，发现自己不知道怎么做，尤其是这个指示器，后来在GitHub上搜到了一个很好用指示器实现方案，特地引用进来，非常感谢LinweiJ，帮我完成了功能实现。老规矩，附上指示器的地址：ViewPagerIndicator

1.ViewPagerIndicator的强大我就不过赘述了，自己前去GitHub看使用方法，我只附上效果图

2.clipChildren，先了解这个属性，因为在只用过程中至关重要。clipChild用来定义他的子控件是否要在他应有的边界内进行绘制。默认情况下，clipChild被设置为true，不允许进行扩展绘制。所以我们要实现画廊效果就要设置该属性为false。而且，这个属性一定是要添加在viewpager所在的直接父布局的

接下来就是mViewpager.setPageTransformer(true, new CardTransformer());这句关键代码，setPageTransformer设置轮播图两边的缩放效果，才能实现画廊效果，下面附上CardTransformer的代码，可以根据自己的需求设置不同的属性值

/**

* Created by zzf on 2017/10/27.

public class CardTransformer implements ViewPager.PageTransformer {

private static final float MAX_SCALE = 1.2f;

private static final float MIN_SCALE = 1.0f;//0.85f

@Override

public void transformPage(View page, float position) {

if (position <= 1) {

// 1.2f + (1-1)*(1.2-1.0)

float scaleFactor = MIN_SCALE + (1 -

最低0.47元/天解锁文章