Android轮播控件,常用于APP的首页顶部,是应用营销宣传的重要入口。

BaseBanner

支持自定义轮播样式,轮播布局可自定义,目前提供SimpleImageBanner(图片)、SimpleTextBanner(文字)、SimpleGuideBanner(引导页)三种样式的轮播控件。

  • 演示效果

Banner - 图1

  • 使用案例
  1. <com.xuexiang.xui.widget.banner.widget.banner.SimpleImageBanner
  2. android:id="@+id/sib_the_most_comlex_usage"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. app:bb_barColor="#88000000"
  6. app:bb_barPaddingBottom="5dp"
  7. app:bb_barPaddingLeft="10dp"
  8. app:bb_barPaddingRight="10dp"
  9. app:bb_barPaddingTop="5dp"
  10. app:bb_delay="2"
  11. app:bb_indicatorCornerRadius="3dp"
  12. app:bb_indicatorGap="8dp"
  13. app:bb_indicatorGravity="RIGHT"
  14. app:bb_indicatorHeight="6dp"
  15. app:bb_indicatorSelectColor="#ffffff"
  16. app:bb_indicatorStyle="CORNER_RECTANGLE"
  17. app:bb_indicatorUnselectColor="#88ffffff"
  18. app:bb_indicatorWidth="6dp"
  19. app:bb_isAutoScrollEnable="true"
  20. app:bb_isBarShowWhenLast="true"
  21. app:bb_isIndicatorShow="true"
  22. app:bb_isLoopEnable="true"
  23. app:bb_isTitleShow="true"
  24. app:bb_period="10"
  25. app:bb_scale="0.5625"
  26. app:bb_textColor="#ffffff"
  27. app:bb_textSize="13.5sp" />
  • 属性表:(BaseBanner)
属性名类型默认值备注
bb_scalefloat0.5Banner高宽比,范围0-1
bb_isLoopEnablebooleantrue是否支持循环
bb_delayinteger5滚动延时(秒)
bb_periodinteger5滚动间隔(秒)
bb_isAutoScrollEnablebooleantrue是否支持自动滚动
bb_barColorcolorColor.TRANSPARENT设置底部背景条颜色
bb_barPaddingLeftdimension10dp设置底部背景条padding,单位dp
bb_barPaddingTopdimension居中是6dp,否则是2dp设置底部背景条padding,单位dp
bb_barPaddingRightdimension10dp设置底部背景条padding,单位dp
bb_barPaddingBottomdimension居中是6dp,否则是2dp设置底部背景条padding,单位dp
bb_textColorcolorColor.WHITE设置标题文字颜色
bb_textSizedimension14sp设置标题文字大小,单位sp
bb_isTitleShowbooleantrue设置是否显示标题
bb_isIndicatorShowbooleantrue设置是否显示指示器
bb_indicatorGravityenumCENTER(LEFT、RIGHT)设置指示器位置
  • 属性表:(BaseIndicatorBanner)
属性名类型默认值备注
bb_indicatorStyleenumCORNER_RECTANGLE(DRAWABLE_RESOURCE)设置指示器样式
bb_indicatorWidthdimension6dp设置指示器宽度,单位dp
bb_indicatorHeightdimension6dp设置指示器高度,单位dp
bb_indicatorGapdimension6dp设置指示器间距,单位dp
bb_indicatorSelectColorcolorColor.WHITE设置指示器选中颜色
bb_indicatorUnselectColorcolor#88ffffff设置指示器未选中颜色
bb_indicatorCornerRadiusdimension3dp设置指示器圆角弧度,单位dp
bb_indicatorSelectResreference/设置指示器选中drawable资源
bb_indicatorUnselectResreference/设置指示器未选中drawable资源

BannerLayout

使用RecyclerView实现的Banner轮播图控件,支持无限轮播。

  • 演示效果

Banner - 图2

  • 使用案例
  1. <com.xuexiang.xui.widget.banner.recycler.BannerLayout
  2. android:id="@+id/bl_horizontal"
  3. android:layout_width="match_parent"
  4. android:layout_height="200dp"
  5. app:bl_autoPlaying="true"
  6. app:bl_centerScale="1.3"
  7. app:bl_itemSpace="10dp"
  8. app:bl_moveSpeed="1.8" />
属性名类型默认值备注
bl_intervalinteger4000ms轮播间隔,单位ms
bl_showIndicatorbooleantrue是否显示轮播索引
bl_orientationenumhorizontal轮播的方向
bl_autoPlayingbooleantrue是否是自动轮播
bl_indicatorSelectedSrcreference/轮播索引选中的效果
bl_indicatorUnselectedSrcreference/轮播索引未选中的效果
bl_indicatorSizedimension5dp轮播索引的大小
bl_indicatorSelectedColorcolorR.color.xui_config_color_red轮播索引选中的颜色
bl_indicatorUnselectedColorcolorR.color.xui_config_color_gray_2轮播索引未选中的颜色
bl_indicatorSpacedimension4dp索引器之间的间隔
bl_indicatorMarginLeftdimension16dp索引器的左侧边距
bl_indicatorMarginRightdimension0dp索引器的右侧边距
bl_indicatorMarginBottomdimension11dp索引器的底部边距
bl_indicatorGravityenumleft索引器的对齐方式
bl_itemSpacedimension10dp轮播图之间的间距
bl_centerScalefloat1.2F图片缩放系数
bl_moveSpeedfloat1.0F轮播速度