Banner Carouse：打造差异化轮播体验的实践笔记

为什么要造轮子

• 阅读、短剧类 App 的封面轮播是用户第一触点，普通 ViewPager 只能平铺，主推内容难以突出。
• 视觉设计提出“中间放大、两侧露出、底栏齐平”的复杂需求，市面上开源库要么不可定制，要么实现过重。
• 团队希望沉淀成组件，提高复用效率，于是落地了 Banner Carousel SDK，并通过 JitPack 分享给内部与社区。

目标效果

• 保持 5 张卡片可见，中间主卡放大 1.8 倍，其余卡片以正常比例露出。
• 缩放枢轴可选：默认中心缩放，也支持“从上向下压缩”让底部信息栏始终贴紧底边。
• 顶部可显示完结 / 连载徽标，底栏展示评分与阅读数，滚动时自动补偿位移。
• 无限循环滑动与预加载，配合点击、翻页回调，方便联动背景或跳转详情。

技术实现

• Kotlin + ViewPager2：利用 CompositePageTransformer 组合间距与缩放动画，兼顾易用性与扩展性。
• 自定义 ScaleInTransformer：根据 ScalePivotType 计算缩放枢轴及位移，实现底部齐平的特效。
• ConstraintLayout + ImageFilterView：单卡布局采用圆角大图 + 渐变底栏，保持视觉风格统一。
• Builder 模式配置：BannerCarouselView.setup { ... } 一站式设置数据、间距、比例、缩放枢轴、回调等参数。
• JitPack 分发：打 tag 即发布，免去 Sonatype 审核流程，满足团队快速集成需求。

快速使用

在应用 settings.gradle.kts 中添加仓库：

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven("https://jitpack.io")
    }
}

模块依赖：

dependencies {
    implementation("com.github.liselfcreator:BannerCarousel:1.0.0")
}

页面调用示例：

bannerCarouselView.setup {
    setData(banners)
    showStatus(true)
    showBottom(true)
    setItemSpacingDp(17)
    setEdgeVisibleFraction(0.2f)
    setCenterScaleFactor(1.8f)
    setScalePivot(ScalePivotType.TOP)
    setImageLoader { imageView, url, placeholder ->
        Glide.with(imageView)
            .load(url)
            .placeholder(placeholder)
            .into(imageView)
    }
    setOnPageChangeListener { index, model ->
        // 同步背景、标题等
    }
    setOnItemClickListener { position, model ->
        // 处理点击
    }
}

ScalePivotType.TOP 会让缩放从顶部开始，底部信息栏保持齐平；默认使用 CENTER。

成果与展望

详细使用方式可以参考 github-> BannerCarousel

• Demo 已实现与背景图同步，滑动体验符合设计预期。
• 下一步计划补充自动翻页、指示器、更多徽标样式与缓存优化。
• 欢迎业务同学和社区贡献 Issue / PR，让 Banner Carousel SDK 更加易用。