Android按钮控件。囊括了目前比较常用的按钮控件(圆角按钮,描边按钮,倒计时按钮等),提供方便的按钮样式定义。
RoundButton
圆角按钮,使按钮能方便地指定圆角、边框颜色、边框粗细、背景色。因为该控件的圆角采用View 的background 实现, 所以与原生的 android:background有冲突。
- 演示效果

- 使用案例
1. <com.xuexiang.xui.widget.button.roundbutton.RoundButton
2. style="@style/RoundButton.Auto"
3. android:layout_marginTop="20dp"
4. android:text="默认圆角大小" />
6. <com.xuexiang.xui.widget.button.roundbutton.RoundButton
7. style="@style/RoundButton.Auto"
8. android:layout_marginTop="20dp"
9. android:text="自定义样式"
10. android:textColor="@color/xui_default_round_btn_white_text"
11. app:rb_backgroundColor="@color/xui_round_btn_green_bg"
12. app:rb_borderColor="@color/xui_round_btn_green_bg" />
- 属性表:(RoundButton)
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| rb_backgroundColor | reference | / | 背景颜色 |
| rb_borderColor | reference | / | 边框颜色 |
| rb_borderWidth | dimension | 1dp | 边框宽度 |
| rb_radius | dimension | 5dp | 圆角弧度 |
| rb_radiusTopLeft | dimension | 0 | 圆角弧度 |
| rb_radiusTopRight | dimension | 0 | 圆角弧度 |
| rb_radiusBottomLeft | dimension | 0 | 圆角弧度 |
| rb_radiusBottomRight | dimension | 0 | 圆角弧度 |
ShadowButton
可设置背景阴影样式的按钮。
- 演示效果

- 使用案例
1. <com.xuexiang.xui.widget.button.shadowbutton.ShadowButton
2. android:layout_width="64dp"
3. android:layout_height="64dp"
4. android:layout_margin="16dp"
5. android:background="@mipmap/ic_launcher"
6. app:sb_radius="6dp" />
- 属性表:(ShadowButton)
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| sb_color_pressed | color | #9C000000 | 触摸时的颜色 |
| sb_color_unpressed | color | Color.TRANSPARENT | 未触摸/触摸层的颜色 |
| sb_ripple_color | color | #FFEEEEEE | 波纹的颜色 |
| sb_ripple_alpha | integer | 47 | 波纹的透明度 |
| sb_alpha_pressed | integer | 48 | 触摸时的透明度 |
| sb_ripple_duration | integer | 1000 | 波纹持续的时间(毫秒) |
| sb_radius | dimension | 2dp | 按钮角的弧度 |
| sb_shape_type | enum | rectangle(round) | 按钮的形状 |
ButtonView
无需任何xml资源文件,便可非常方便地配置按钮的样式。
- 演示效果

- 使用案例
1. <com.xuexiang.xui.widget.button.ButtonView
2. style="@style/ButtonView.Blue"
3. android:layout_margin="20dp"/>
5. <com.xuexiang.xui.widget.button.ButtonView
6. style="@style/ButtonView.Green"
7. android:layout_margin="20dp"/>
9. <com.xuexiang.xui.widget.button.ButtonView
10. style="@style/ButtonView.Gray"
11. android:layout_margin="20dp"/>
- 属性表:(ButtonView)
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| textSolidColor | color | Color.TRANSPARENT | 按钮的填充颜色 |
| textSolidColor | color | Color.TRANSPARENT | 按钮的填充颜色 |
| textSelectedSolidColor | color | Color.TRANSPARENT | 按钮的选中颜色 |
| textStrokeColor | color | Color.TRANSPARENT | 按钮的边框颜色 |
| textStrokeWidth | dimension | 0 | 按钮的边框的宽度 |
| textRadius | dimension | 0 | 按钮的边角角度 |
| textLeftTopRadius | dimension | 0 | 按钮的边角角度 |
| textLeftBottomRadius | dimension | 0 | 按钮的边角角度 |
| textRightTopRadius | dimension | 0 | 按钮的边角角度 |
| textRightBottomRadius | dimension | 0 | 按钮的边角角度 |
| textDrawable | reference | / | 按钮的图标 |
| textNormalTextColor | color | Color.TRANSPARENT | 按钮的文字的颜色 |
| textSelectedTextColor | color | Color.TRANSPARENT | 按钮的文字点击时的颜色 |
CountDownButton
自带倒计时的按钮。
- 演示效果

- 使用案例
1. <com.xuexiang.xui.widget.button.CountDownButton
2. android:id="@+id/bt_countdown4"
3. style="@style/Button.Blue"
4. android:layout_marginLeft="20dp"
5. android:layout_marginTop="10dp"
6. android:text="获取验证码" />
- 属性表: (CountDownButton)
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| cdbt_countDownFormat | string | %ds | 倒计时过程中按钮文本的格式,默认"%ds",直接显示剩余秒数 |
| cdbt_countDown | integer | 60000毫秒 | 倒计时总时长(单位为毫秒) |
| cdbt_countDownInterval | integer | 1000 毫秒 | 倒计时间隔(单位为毫秒) |
| cdbt_enableCountDown | boolean | true | 倒计时是否可用 |
【注意】倒计时按钮,除了使用CountDownButton,还可以使用CountDownButtonHelper来辅助实现。
SwitchButton
滑块开关,支持自定义滑动样式,默认提供Material Design和ios风格的样式。
- 演示效果

- 使用案例
1. <com.xuexiang.xui.widget.button.switchbutton.SwitchButton
2. android:id="@+id/sb_ios"
3. style="@style/SwitchButtonStyle"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"
6. app:swb_animationDuration="300"
7. app:swb_backDrawable="@drawable/ios_back_drawable"
8. app:swb_thumbDrawable="@drawable/ios_thumb_selector"
9. app:swb_thumbMarginBottom="-8dp"
10. app:swb_thumbMarginLeft="-5dp"
11. app:swb_thumbMarginRight="-5dp"
12. app:swb_thumbMarginTop="-2.5dp"
13. app:swb_thumbRangeRatio="1.4" />
- 属性表: (SwitchButton)
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| swb_thumbDrawable | reference | / | 滑动块的图片资源 |
| swb_thumbColor | color | reference | / |
| swb_thumbMargin | dimension | reference | 2dp |
| swb_thumbMarginTop | dimension | reference | 2dp |
| swb_thumbMarginBottom | dimension | reference | 2dp |
| swb_thumbMarginLeft | dimension | reference | 2dp |
| swb_thumbMarginRight | dimension | reference | 2dp |
| swb_thumbWidth | dimension | reference | 20dp |
| swb_thumbHeight | dimension | reference | 20dp |
| swb_thumbRadius | dimension | reference | 10dp |
| swb_backRadius | dimension | reference | 10dp |
| swb_backDrawable | reference | / | 开关的背景图片资源 |
| swb_backColor | color | reference | R.attr.colorAccent |
| swb_fadeBack | boolean | true | 当开关进行切换的时候,背景是否渐变过渡 |
| swb_thumbRangeRatio | float | 1.8F | 开关和滑动块所占宽度的比例,必须大于1 |
| swb_animationDuration | integer | 250ms | 切换时,动画持续的时间 |
| swb_tintColor | color | reference | R.attr.colorAccent |
| swb_textOn | string | / | 开关开时的文字 |
| swb_textOff | string | / | 开关关时的文字 |
| swb_textThumbInset | dimension | 0 | 文字插入的滑块尺寸 |
| swb_textExtra | dimension | 0 | 文字拓展的空间 |
| swb_textAdjust | dimension | 0 | 文字显示区域调整 |
RippleView
点击出现水波纹效果 的组件。
- 使用案例
1. <com.xuexiang.xui.widget.button.RippleView
2. android:layout_width="match_parent"
3. android:layout_height="wrap_content"
4. android:layout_marginTop="?attr/xui_config_content_spacing_horizontal"
5. app:rv_type="simpleRipple">
7. <TextView
8. android:layout_width="match_parent"
9. android:layout_height="100dp"
10. android:layout_gravity="center"
11. android:layout_marginStart="?attr/xui_config_content_spacing_horizontal"
12. android:layout_marginEnd="?attr/xui_config_content_spacing_horizontal"
13. android:background="@color/app_color_theme_1"
14. android:gravity="center"
15. android:text="单波纹"
16. android:textColor="@color/xui_config_color_white"
17. android:textSize="20sp" />
19. </com.xuexiang.xui.widget.button.RippleView>
- 属性表: (RippleView)
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| rv_alpha | integer | 90 | 水波的透明度 |
| rv_frameRate | integer | 10 | 水波变化的帧率 |
| rv_rippleDuration | integer | 400ms | 水波持续的时间 |
| rv_color | color | Color.WHITE | 水波的颜色 |
| rv_centered | boolean | false | 水波是否从控件的中心起 |
| rv_type | enum | simpleRipple | 水波的样式 |
| rv_ripplePadding | dimension | 0 | 水波的padding |
| rv_zoom | boolean | false | 是否支持缩放动画 |
| rv_zoomScale | float | 1.03F | 缩放倍率 |
| rv_zoomDuration | integer | 200ms | 缩放动画持续的时间 |
FloatingActionButton
Google的支持包design中提供的优秀悬浮按钮。
- 属性表: (FloatingActionButton)
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| backgroundTint | color | 默认使用theme中colorAccent的颜色 | 按钮的背景颜色 |
| borderWidth | dimension | 0dp | 边框的宽度 |
| fabSize | enum | Normal(mini) | 设置按钮大小 |
| rippleColor | color | Color.TRANSPARENT | 设置点击时的背景颜色 |
