Android按钮控件。囊括了目前比较常用的按钮控件(圆角按钮,描边按钮,倒计时按钮等),提供方便的按钮样式定义。

RoundButton

圆角按钮,使按钮能方便地指定圆角、边框颜色、边框粗细、背景色。因为该控件的圆角采用View 的background 实现, 所以与原生的 android:background有冲突。

  • 演示效果

Button - 图1

  • 使用案例
  1. <com.xuexiang.xui.widget.button.roundbutton.RoundButton
  2. style="@style/RoundButton.Auto"
  3. android:layout_marginTop="20dp"
  4. android:text="默认圆角大小" />
  5. <com.xuexiang.xui.widget.button.roundbutton.RoundButton
  6. style="@style/RoundButton.Auto"
  7. android:layout_marginTop="20dp"
  8. android:text="自定义样式"
  9. android:textColor="@color/xui_default_round_btn_white_text"
  10. app:rb_backgroundColor="@color/xui_round_btn_green_bg"
  11. app:rb_borderColor="@color/xui_round_btn_green_bg" />
  • 属性表:(RoundButton)
属性名类型默认值备注
rb_backgroundColorreference/背景颜色
rb_borderColorreference/边框颜色
rb_borderWidthdimension1dp边框宽度
rb_radiusdimension5dp圆角弧度
rb_radiusTopLeftdimension0圆角弧度
rb_radiusTopRightdimension0圆角弧度
rb_radiusBottomLeftdimension0圆角弧度
rb_radiusBottomRightdimension0圆角弧度

ShadowButton

可设置背景阴影样式的按钮。

  • 演示效果

Button - 图2

  • 使用案例
  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_pressedcolor#9C000000触摸时的颜色
sb_color_unpressedcolorColor.TRANSPARENT未触摸/触摸层的颜色
sb_ripple_colorcolor#FFEEEEEE波纹的颜色
sb_ripple_alphainteger47波纹的透明度
sb_alpha_pressedinteger48触摸时的透明度
sb_ripple_durationinteger1000波纹持续的时间(毫秒)
sb_radiusdimension2dp按钮角的弧度
sb_shape_typeenumrectangle(round)按钮的形状

ButtonView

无需任何xml资源文件,便可非常方便地配置按钮的样式。

  • 演示效果

Button - 图3

  • 使用案例
  1. <com.xuexiang.xui.widget.button.ButtonView
  2. style="@style/ButtonView.Blue"
  3. android:layout_margin="20dp"/>
  4. <com.xuexiang.xui.widget.button.ButtonView
  5. style="@style/ButtonView.Green"
  6. android:layout_margin="20dp"/>
  7. <com.xuexiang.xui.widget.button.ButtonView
  8. style="@style/ButtonView.Gray"
  9. android:layout_margin="20dp"/>
  • 属性表:(ButtonView)
属性名类型默认值备注
textSolidColorcolorColor.TRANSPARENT按钮的填充颜色
textSolidColorcolorColor.TRANSPARENT按钮的填充颜色
textSelectedSolidColorcolorColor.TRANSPARENT按钮的选中颜色
textStrokeColorcolorColor.TRANSPARENT按钮的边框颜色
textStrokeWidthdimension0按钮的边框的宽度
textRadiusdimension0按钮的边角角度
textLeftTopRadiusdimension0按钮的边角角度
textLeftBottomRadiusdimension0按钮的边角角度
textRightTopRadiusdimension0按钮的边角角度
textRightBottomRadiusdimension0按钮的边角角度
textDrawablereference/按钮的图标
textNormalTextColorcolorColor.TRANSPARENT按钮的文字的颜色
textSelectedTextColorcolorColor.TRANSPARENT按钮的文字点击时的颜色

CountDownButton

自带倒计时的按钮。

  • 演示效果

Button - 图4

  • 使用案例
  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_countDownFormatstring%ds倒计时过程中按钮文本的格式,默认"%ds",直接显示剩余秒数
    cdbt_countDowninteger60000毫秒倒计时总时长(单位为毫秒)
    cdbt_countDownIntervalinteger1000 毫秒倒计时间隔(单位为毫秒)
    cdbt_enableCountDownbooleantrue倒计时是否可用

【注意】倒计时按钮,除了使用CountDownButton,还可以使用CountDownButtonHelper来辅助实现。

SwitchButton

滑块开关,支持自定义滑动样式,默认提供Material Design和ios风格的样式。

  • 演示效果

Button - 图5

  • 使用案例
  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_thumbDrawablereference滑动块的图片资源
    swb_thumbColorcolor|reference滑动块的颜色
    swb_thumbMargindimension|reference2dp滑动块的Margin
    swb_thumbMarginTopdimension|reference2dp滑动块的MarginTop
    swb_thumbMarginBottomdimension|reference2dp滑动块的MarginBottom
    swb_thumbMarginLeftdimension|reference2dp滑动块的MarginLeft
    swb_thumbMarginRightdimension|reference2dp滑动块的MarginRight
    swb_thumbWidthdimension|reference20dp滑动块的宽度
    swb_thumbHeightdimension|reference20dp滑动块的高度
    swb_thumbRadiusdimension|reference10dp滑动块的边角
    swb_backRadiusdimension|reference10dp开关背景的边角
    swb_backDrawablereference开关的背景图片资源
    swb_backColorcolor|referenceR.attr.colorAccent开关的背景颜色
    swb_fadeBackbooleantrue当开关进行切换的时候,背景是否渐变过渡
    swb_thumbRangeRatiofloat1.8F开关和滑动块所占宽度的比例,必须大于1
    swb_animationDurationinteger250ms切换时,动画持续的时间
    swb_tintColorcolor|referenceR.attr.colorAccent提示文字的颜色
    swb_textOnstring开关开时的文字
    swb_textOffstring开关关时的文字
    swb_textThumbInsetdimension0文字插入的滑块尺寸
    swb_textExtradimension0文字拓展的空间
    swb_textAdjustdimension0文字显示区域调整

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">
  6. <TextView
  7. android:layout_width="match_parent"
  8. android:layout_height="100dp"
  9. android:layout_gravity="center"
  10. android:layout_marginStart="?attr/xui_config_content_spacing_horizontal"
  11. android:layout_marginEnd="?attr/xui_config_content_spacing_horizontal"
  12. android:background="@color/app_color_theme_1"
  13. android:gravity="center"
  14. android:text="单波纹"
  15. android:textColor="@color/xui_config_color_white"
  16. android:textSize="20sp" />
  17. </com.xuexiang.xui.widget.button.RippleView>
  • 属性表: (RippleView)
属性名类型默认值备注
rv_alphainteger90 水波的透明度
rv_frameRateinteger10水波变化的帧率
rv_rippleDurationinteger400ms水波持续的时间
rv_colorcolorColor.WHITE水波的颜色
rv_centeredbooleanfalse水波是否从控件的中心起
rv_typeenumsimpleRipple水波的样式
rv_ripplePaddingdimension0水波的padding
rv_zoombooleanfalse是否支持缩放动画
rv_zoomScalefloat1.03F缩放倍率
rv_zoomDurationinteger200ms缩放动画持续的时间

FloatingActionButton

Google的支持包design中提供的优秀悬浮按钮。

  • 属性表: (FloatingActionButton)
属性名类型默认值备注
backgroundTintcolor默认使用theme中colorAccent的颜色 按钮的背景颜色
borderWidthdimension0dp边框的宽度
fabSizeenumNormal(mini)设置按钮大小
rippleColorcolorColor.TRANSPARENT设置点击时的背景颜色