Banner 2.0画廊模式详解：GalleryActivity实现卡片堆叠效果

一、画廊模式痛点解析：从传统轮播到立体视觉

你是否还在为Android轮播控件的单调效果发愁？传统Banner仅能实现平面滑动，缺乏层次感和视觉冲击力。而Gallery画廊模式通过卡片堆叠、透视缩放和渐变透明度，能让广告展示效果提升300%用户停留时间。本文将详解Banner 2.0中GalleryActivity的实现原理，带你掌握卡片堆叠效果的核心技术。

读完本文你将获得：

• 画廊模式的两种实现方案（标准画廊/魅族特效）
• ViewPager2的PageTransformer深度定制
• 指示器与画廊联动的坐标计算逻辑
• 性能优化的5个关键技巧

二、GalleryActivity架构解析

2.1 类结构设计

classDiagram
    class GalleryActivity {
        - mBanner1: Banner
        - mBanner2: Banner
        - indicator: DrawableIndicator
        + onCreate(Bundle): void
    }
    GalleryActivity --> "1" Banner : 包含
    GalleryActivity --> "1" DrawableIndicator : 自定义指示器
    Banner --> "1" ImageAdapter : 数据适配
    Banner --> "1" CircleIndicator : 默认指示器

GalleryActivity采用双Banner实例设计，分别演示标准画廊效果和魅族风格特效，通过ButterKnife实现视图绑定：

@BindView(R.id.banner1) Banner mBanner1;  // 标准画廊
@BindView(R.id.banner2) Banner mBanner2;  // 魅族特效
@BindView(R.id.indicator) DrawableIndicator indicator;  // 自定义指示器

2.2 布局文件解析（activity_gallery.xml）

画廊模式的布局关键在于Banner控件的属性配置：

<com.youth.banner.Banner
    android:id="@+id/banner1"
    android:layout_width="match_parent"
    android:layout_height="140dp"
    android:layout_margin="10dp"
    banner:banner_radius="5dp"  // 卡片圆角
    banner:banner_indicator_normal_color="@android:color/white"
    banner:banner_indicator_selected_color="@color/colorPrimary" />

关键属性说明：

属性名	作用	最佳取值范围
banner_radius	卡片圆角半径	4dp-12dp
layout_margin	边距留白	8dp-16dp
layout_height	控件高度	120dp-200dp

三、标准画廊模式实现（banner1）

3.1 核心API调用

// 设置适配器（DataBean.getTestData2()返回本地图片集合）
mBanner1.setAdapter(new ImageAdapter(DataBean.getTestData2()));
// 配置圆形指示器
mBanner1.setIndicator(new CircleIndicator(this));
// 设置画廊效果核心参数
mBanner1.setBannerGalleryEffect(50, 10);

setBannerGalleryEffect方法参数解析：

• 第一个参数（50）：两侧卡片最大缩放比例（百分比）
• 第二个参数（10）：卡片之间的间距（dp）

3.2 PageTransformer实现原理

Banner 2.0内部通过BasePageTransformer实现画廊效果：

sequenceDiagram
    participant Banner
    participant ViewPager2
    participant GalleryTransformer
    Banner->>ViewPager2: setPageTransformer(GalleryTransformer)
    ViewPager2->>GalleryTransformer: transformPage(View, float)
    GalleryTransformer->>View: setScaleX(scale)
    GalleryTransformer->>View: setScaleY(scale)
    GalleryTransformer->>View: setAlpha(alpha)

核心变换公式（当position=-0.5时）：

• 缩放比例 = 1 - Math.abs(position) * 0.5
• 透明度 = 1 - Math.abs(position) * 0.3

四、魅族风格画廊特效（banner2）

4.1 魅族特效实现

// 设置网络图片适配器
mBanner2.setAdapter(new ImageNetAdapter(DataBean.getTestData()));
// 绑定自定义drawable指示器
mBanner2.setIndicator(indicator,false);
// 启用魅族画廊特效
mBanner2.setBannerGalleryMZ(20);

setBannerGalleryMZ参数为卡片堆叠的倾斜角度（度），推荐取值15-30度。

4.2 自定义指示器配置

<com.youth.banner.indicator.DrawableIndicator
    android:id="@+id/indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    banner:normal_drawable="@drawable/indicator_normal"
    banner:selected_drawable="@drawable/indicator_selected"/>

指示器资源文件结构：

• indicator_normal.xml：未选中状态（灰色圆点）
• indicator_selected.xml：选中状态（蓝色圆点）

五、高级定制与性能优化

5.1 组合PageTransformer

// 画廊效果 + 透明渐变（注意：避免同时使用多个缩放效果）
mBanner1.addPageTransformer(new AlphaPageTransformer());

内置可用的变换效果组合：

• AlphaPageTransformer + ScaleInTransformer：淡入缩放
• RotateYTransformer + DepthPageTransformer：立体旋转

5.2 性能优化要点

1. 图片预加载策略：

// 在ImageAdapter中设置
Glide.with(holder.itemView)
     .load(data.getImageUrl())
     .preload();

2. 内存管理：

• 限制同时加载的图片数量（建议3-5张）
• 使用banner:banner_offscreenPageLimit="3"属性

3. 避免过度绘制：

• 减少卡片背景层数
• 使用android:layerType="hardware"硬件加速

六、完整代码实现

6.1 GalleryActivity完整代码

public class GalleryActivity extends AppCompatActivity {

    @BindView(R.id.banner1) Banner mBanner1;
    @BindView(R.id.banner2) Banner mBanner2;
    @BindView(R.id.indicator) DrawableIndicator indicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gallery);
        ButterKnife.bind(this);

        // 标准画廊效果
        mBanner1.setAdapter(new ImageAdapter(DataBean.getTestData2()));
        mBanner1.setIndicator(new CircleIndicator(this));
        mBanner1.setBannerGalleryEffect(50, 10);
        // 添加透明渐变效果
        mBanner1.addPageTransformer(new AlphaPageTransformer());

        // 魅族风格画廊
        mBanner2.setAdapter(new ImageNetAdapter(DataBean.getTestData()));
        mBanner2.setIndicator(indicator,false);
        mBanner2.setBannerGalleryMZ(20);
        // 设置自动轮播
        mBanner2.isAutoLoop(true);
        mBanner2.setDelayTime(3000);
    }

    @Override
    protected void onStart() {
        super.onStart();
        mBanner1.start();
        mBanner2.start();
    }

    @Override
    protected void onStop() {
        super.onStop();
        mBanner1.stop();
        mBanner2.stop();
    }
}

6.2 布局文件完整代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:banner="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 标准画廊Banner -->
    <com.youth.banner.Banner
        android:id="@+id/banner1"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:layout_margin="10dp"
        banner:banner_radius="5dp"
        banner:banner_indicator_normal_color="@android:color/white"
        banner:banner_indicator_selected_color="@color/colorPrimary"
        banner:banner_offscreenPageLimit="3"/>

    <!-- 魅族风格Banner -->
    <com.youth.banner.Banner
        android:id="@+id/banner2"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:layout_margin="10dp"
        banner:banner_radius="5dp"
        banner:banner_indicator_normal_color="@android:color/white"
        banner:banner_indicator_selected_color="@color/colorPrimary"/>

    <!-- 自定义Drawable指示器 -->
    <com.youth.banner.indicator.DrawableIndicator
        android:id="@+id/indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        banner:normal_drawable="@drawable/indicator_normal"
        banner:selected_drawable="@drawable/indicator_selected"
        banner:indicator_space="6dp"/>
</LinearLayout>

七、扩展应用与实战技巧

7.1 画廊模式的5种创新应用场景

1. 商品详情页：3D商品展示
2. 小说封面轮播：模拟实体书架
3. 音乐专辑展示：黑胶唱片效果
4. 旅游景点推荐：全景预览
5. 应用引导页：沉浸式体验

7.2 常见问题解决方案

问题	解决方案	代码示例
卡片边缘被截断	设置clipChildren=false	android:clipChildren="false"
指示器位置偏移	重写Indicator的onLayout	自定义Indicator重写onLayout方法
滑动卡顿	开启硬件加速	android:layerType="hardware"

八、总结与进阶展望

GalleryActivity通过Banner 2.0的画廊模式API，仅需10行核心代码即可实现专业级卡片堆叠效果。关键在于理解ViewPager2的position变换规律和PageTransformer的矩阵运算。进阶学习者可尝试实现：

• 3D旋转画廊（使用RotateYTransformer）
• 手势缩放交互（结合ScaleGestureDetector）
• 视差滚动效果（多层视图不同速率移动）