Android轮播控件,常用于APP的首页顶部,是应用营销宣传的重要入口。
BaseBanner
支持自定义轮播样式,轮播布局可自定义,目前提供SimpleImageBanner(图片)、SimpleTextBanner(文字)、SimpleGuideBanner(引导页)三种样式的轮播控件。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.banner.widget.banner.SimpleImageBanner
android:id="@+id/sib_the_most_comlex_usage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:bb_barColor="#88000000"
app:bb_barPaddingBottom="5dp"
app:bb_barPaddingLeft="10dp"
app:bb_barPaddingRight="10dp"
app:bb_barPaddingTop="5dp"
app:bb_delay="2"
app:bb_indicatorCornerRadius="3dp"
app:bb_indicatorGap="8dp"
app:bb_indicatorGravity="RIGHT"
app:bb_indicatorHeight="6dp"
app:bb_indicatorSelectColor="#ffffff"
app:bb_indicatorStyle="CORNER_RECTANGLE"
app:bb_indicatorUnselectColor="#88ffffff"
app:bb_indicatorWidth="6dp"
app:bb_isAutoScrollEnable="true"
app:bb_isBarShowWhenLast="true"
app:bb_isIndicatorShow="true"
app:bb_isLoopEnable="true"
app:bb_isTitleShow="true"
app:bb_period="10"
app:bb_scale="0.5625"
app:bb_textColor="#ffffff"
app:bb_textSize="13.5sp" />
- 属性表:(BaseBanner)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
bb_scale | float | 0.5 | Banner高宽比,范围0-1 |
bb_isLoopEnable | boolean | true | 是否支持循环 |
bb_delay | integer | 5 | 滚动延时(秒) |
bb_period | integer | 5 | 滚动间隔(秒) |
bb_isAutoScrollEnable | boolean | true | 是否支持自动滚动 |
bb_barColor | color | Color.TRANSPARENT | 设置底部背景条颜色 |
bb_barPaddingLeft | dimension | 10dp | 设置底部背景条padding,单位dp |
bb_barPaddingTop | dimension | 居中是6dp,否则是2dp | 设置底部背景条padding,单位dp |
bb_barPaddingRight | dimension | 10dp | 设置底部背景条padding,单位dp |
bb_barPaddingBottom | dimension | 居中是6dp,否则是2dp | 设置底部背景条padding,单位dp |
bb_textColor | color | Color.WHITE | 设置标题文字颜色 |
bb_textSize | dimension | 14sp | 设置标题文字大小,单位sp |
bb_isTitleShow | boolean | true | 设置是否显示标题 |
bb_isIndicatorShow | boolean | true | 设置是否显示指示器 |
bb_indicatorGravity | enum | CENTER(LEFT、RIGHT) | 设置指示器位置 |
- 属性表:(BaseIndicatorBanner)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
bb_indicatorStyle | enum | CORNER_RECTANGLE(DRAWABLE_RESOURCE) | 设置指示器样式 |
bb_indicatorWidth | dimension | 6dp | 设置指示器宽度,单位dp |
bb_indicatorHeight | dimension | 6dp | 设置指示器高度,单位dp |
bb_indicatorGap | dimension | 6dp | 设置指示器间距,单位dp |
bb_indicatorSelectColor | color | Color.WHITE | 设置指示器选中颜色 |
bb_indicatorUnselectColor | color | #88ffffff | 设置指示器未选中颜色 |
bb_indicatorCornerRadius | dimension | 3dp | 设置指示器圆角弧度,单位dp |
bb_indicatorSelectRes | reference | / | 设置指示器选中drawable资源 |
bb_indicatorUnselectRes | reference | / | 设置指示器未选中drawable资源 |
BannerLayout
使用RecyclerView实现的Banner轮播图控件,支持无限轮播。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.banner.recycler.BannerLayout
android:id="@+id/bl_horizontal"
android:layout_width="match_parent"
android:layout_height="200dp"
app:bl_autoPlaying="true"
app:bl_centerScale="1.3"
app:bl_itemSpace="10dp"
app:bl_moveSpeed="1.8" />
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
bl_interval | integer | 4000ms | 轮播间隔,单位ms |
bl_showIndicator | boolean | true | 是否显示轮播索引 |
bl_orientation | enum | horizontal | 轮播的方向 |
bl_autoPlaying | boolean | true | 是否是自动轮播 |
bl_indicatorSelectedSrc | reference | / | 轮播索引选中的效果 |
bl_indicatorUnselectedSrc | reference | / | 轮播索引未选中的效果 |
bl_indicatorSize | dimension | 5dp | 轮播索引的大小 |
bl_indicatorSelectedColor | color | R.color.xui_config_color_red | 轮播索引选中的颜色 |
bl_indicatorUnselectedColor | color | R.color.xui_config_color_gray_2 | 轮播索引未选中的颜色 |
bl_indicatorSpace | dimension | 4dp | 索引器之间的间隔 |
bl_indicatorMarginLeft | dimension | 16dp | 索引器的左侧边距 |
bl_indicatorMarginRight | dimension | 0dp | 索引器的右侧边距 |
bl_indicatorMarginBottom | dimension | 11dp | 索引器的底部边距 |
bl_indicatorGravity | enum | left | 索引器的对齐方式 |
bl_itemSpace | dimension | 10dp | 轮播图之间的间距 |
bl_centerScale | float | 1.2F | 图片缩放系数 |
bl_moveSpeed | float | 1.0F | 轮播速度 |