移动开发平台 mPaaS 切换栏组件

By | 2021年4月23日

AUSegment 用来替换 APSwitchTab 控件,对相关代码做了重构,并保留原有接口,可以平滑滚动。

10.0.20 版本之后,该组件支持可滚动 Tab 切换。每个 Tab 左右间距为 14dp:

  • 当所有 Tab 超过初始设置宽度时,支持滚动切换。
  • 当所有 Tab 小于初始宽度时,提供是否等分接口的选项,默认选择为等分。

效果图

依赖

参见 管理组件依赖

接口说明

  
  1. /**
  2. * 重置 tab 视图
  3. */
  4. public void resetTabView(String[] tabNameArray)
  5. /**
  6. * 调整底部选中线条的位置,一般在 viewPager 的 onPageScrolled 回调中,调用该方法。
  7. *
  8. * @param position 起始位置
  9. * @param positionOffset 起始位置的偏移量(百分比)
  10. */
  11. public void adjustLinePosition(int position, float positionOffset)
  12. /**
  13. * 选中 tab 但不调整底部线条位置, 适用于 viewpager 的 tab 切换,
  14. * 底部选中线条通过在 viewpager 的 onPageScrolled 回调中调用 adjustLinePosition 来实现
  15. *
  16. * @param position 位置
  17. */
  18. public void selectTab(int position)
  19. /**
  20. * 选中 tab 并调整底部线条的位置,<br>
  21. * 用于非 viewpager 的 tab 切换场景,每个 tab 间隔之前的过场动画时间为 250ms
  22. *
  23. * @param position 目标选中的 tab
  24. */
  25. public void selectTabAndAdjustLine(int position)
  26. /**
  27. * 选中 tab 并调整底部线条的位置,<br>
  28. * 用于非 viewpager 的 tab 切换场景,每个 tab 间隔之前的过场动画时间由自己指定<br>
  29. * 若上一个动画还未放完,启动下一个动画时,上一个动画立即结束,定位到上一个动画的最终位置后启动下一个动画。
  30. *
  31. * @param position 目标位置
  32. * @param during 每个 tab 间隔之前的过场动画时间
  33. */
  34. public void selectTabAndAdjustLine(int position, int during)
  35. /**
  36. * 设置 tab 切换监听器
  37. *
  38. * @param tabSwitchListener
  39. */
  40. public void setTabSwitchListener(TabSwitchListener tabSwitchListener)
  41. /**
  42. * 加指定的位置加上红点
  43. * @param view 红点 view
  44. * @param position
  45. */
  46. public void addTextRightView(View view, int position)
  47. /**
  48. * 加指定的位置加上红点
  49. * @param view 红点
  50. * @param params 红点的相对位置
  51. * @param position
  52. */
  53. public void addTextRightView(View view, RelativeLayout.LayoutParams params, int position)

Tab 滚动切换的接口说明

若要用滚动功能,需使用自定义属性参数 scroll 并将该参数设置为 true,如在布局文件中添加 app:scroll="true"。可滚动 Tab 只支持以下四个接口,其他接口在可滚动 Tab 中无效。

  
  1. /**
  2. * 设置 Tab 切换监听器
  3. * @param tabSwitchListener
  4. */
  5. public void setTabSwitchListener(TabSwitchListener tabSwitchListener)
  6. /**
  7. * 设置数据源
  8. * @param list
  9. */
  10. public void init(List<ItemCategory> list)
  11. /**
  12. * 设置选中的 Tab
  13. * @param position
  14. */
  15. public void setCurrentSelTab(int position)
  16. /**
  17. * 每个 Tab 固定左右间距为 14dp,当所有 Tab 不足初始宽度时提供是否等分接口
  18. * 默认等分,设置 false 禁止等分
  19. * @param divideAutoSize
  20. */
  21. public void setDivideAutoSize(boolean divideAutoSize)

自定义属性

10.0.20 及以后版本添加了 scroll 属性。

属性名 用途 类型
tabCount Tab 数量 integer
tab1Text Tab1 文案 string,reference
tab2Text Tab1 文案 string,reference
tab3Text Tab3 文案 string,reference
tab4Text Tab4 文案 string,reference
tabTextArray Tab 文本数组 string,reference
uniformlySpaced 是否自适应 boolean
tabTextColor 文字颜色 reference,color
tabTextSize 文字大小 dimension
buttomLineColor 底部线条颜色 color,reference
scroll 是否支持滚动 boolean

代码示例

XML:

  
  1. <com.alipay.mobile.antui.segement.AUSegment
  2. android:id="@+id/switchtab_three"
  3. android:layout_width="fill_parent"
  4. android:layout_height="50dp"
  5. android:layout_marginTop="10dp"
  6. app:tab1Text="左边文字"
  7. app:tab2Text="中间文字"
  8. app:tab3Text="右边文字"
  9. app:tabCount="3"/>

请关注公众号获取更多资料

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注