文章

各大App礼物面板实现方案研究

各大App礼物面板实现方案研究

各大 App 礼物面板实现方案研究

礼物面板实现总结

  1. RecyclerView+GridView
  2. ViewPager+ViewPager
  3. RecyclerView+RecyclerView
  4. 自定义 LayoutManager(PagerGridLayoutManager)
  5. RecyclerView+SnapHelper

国内

企鹅电竞

1
2
3
4
5
6
ViewPager
  --ViewPager
    -- LinearLayout
      -- LinearLayout
      -- LinearLayout
  -- RadioGroup
  1. 切换用的是 ViewPager 嵌套 ViewPager
  2. 指示器用的是 RadioGroup
  3. 点击 item 会放大


不足:

  1. tab 不能左右滑动,一个礼物面板滑动最右边不能滑动到其他 tab

虎牙

  1. tab 用的 RecyclerView
  2. 礼物面板内容用的 ViewPager+GridView
  3. 指示器用 LinearLayout

不足:

  1. 每次点击 item 时,右上角 角标会跳动
  2. tab 不能左右滑动,一个礼物面板滑动最右边不能滑动到其他 tab

斗鱼

  1. tab 用的 LinearLayout
  2. 礼物面板内容用的 RecyclerView
  3. 指示器用 LinearLayout


  1. tab 不能左右滑动,一个礼物面板滑动最右边不能滑动到其他 tab

抖音直播

  1. 礼物面板内容用的 RecyclerView
  2. 指示器是自定义 View

花椒直播 (接近新版 mashi 实现)

  1. tab 用的 HorizontalScrollView
  2. 礼物面板内容用的 ViewPager+RecyclerView
  3. 指示器用 ImageView

热猫/mashi

PagerGridLayoutManager

新版 mashi

海外

yalla

  1. 礼物面板采用 RecyclerView+RecyclerView
  2. 指示器采用 LinearLayout+ImageView

StarChat

  1. tab 是 HorizontalScrollView
  2. 礼物面板采用 ViewPager+RecyclerView
  3. 指示器采用 HorizontalScrollView
本文由作者按照 CC BY 4.0 进行授权