Android按钮控件。囊括了目前比较常用的按钮控件(圆角按钮,描边按钮,倒计时按钮等),提供方便的按钮样式定义。
RoundButton
圆角按钮,使按钮能方便地指定圆角、边框颜色、边框粗细、背景色。因为该控件的圆角采用View 的background 实现, 所以与原生的 android:background有冲突。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.button.roundbutton.RoundButton
style="@style/RoundButton.Auto"
android:layout_marginTop="20dp"
android:text="默认圆角大小" />
<com.xuexiang.xui.widget.button.roundbutton.RoundButton
style="@style/RoundButton.Auto"
android:layout_marginTop="20dp"
android:text="自定义样式"
android:textColor="@color/xui_default_round_btn_white_text"
app:rb_backgroundColor="@color/xui_round_btn_green_bg"
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
可设置背景阴影样式的按钮。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.button.shadowbutton.ShadowButton
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_margin="16dp"
android:background="@mipmap/ic_launcher"
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资源文件,便可非常方便地配置按钮的样式。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.button.ButtonView
style="@style/ButtonView.Blue"
android:layout_margin="20dp"/>
<com.xuexiang.xui.widget.button.ButtonView
style="@style/ButtonView.Green"
android:layout_margin="20dp"/>
<com.xuexiang.xui.widget.button.ButtonView
style="@style/ButtonView.Gray"
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
自带倒计时的按钮。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.button.CountDownButton
android:id="@+id/bt_countdown4"
style="@style/Button.Blue"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
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风格的样式。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.button.switchbutton.SwitchButton
android:id="@+id/sb_ios"
style="@style/SwitchButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:swb_animationDuration="300"
app:swb_backDrawable="@drawable/ios_back_drawable"
app:swb_thumbDrawable="@drawable/ios_thumb_selector"
app:swb_thumbMarginBottom="-8dp"
app:swb_thumbMarginLeft="-5dp"
app:swb_thumbMarginRight="-5dp"
app:swb_thumbMarginTop="-2.5dp"
app:swb_thumbRangeRatio="1.4" />
- 属性表: (SwitchButton)
属性名 类型 默认值 备注 swb_thumbDrawable reference / 滑动块的图片资源 swb_thumbColor color|reference / 滑动块的颜色 swb_thumbMargin dimension|reference 2dp 滑动块的Margin swb_thumbMarginTop dimension|reference 2dp 滑动块的MarginTop swb_thumbMarginBottom dimension|reference 2dp 滑动块的MarginBottom swb_thumbMarginLeft dimension|reference 2dp 滑动块的MarginLeft swb_thumbMarginRight dimension|reference 2dp 滑动块的MarginRight 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
点击出现水波纹效果
的组件。
- 使用案例
<com.xuexiang.xui.widget.button.RippleView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/xui_config_content_spacing_horizontal"
app:rv_type="simpleRipple">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginStart="?attr/xui_config_content_spacing_horizontal"
android:layout_marginEnd="?attr/xui_config_content_spacing_horizontal"
android:background="@color/app_color_theme_1"
android:gravity="center"
android:text="单波纹"
android:textColor="@color/xui_config_color_white"
android:textSize="20sp" />
</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 | 设置点击时的背景颜色 |