Skip to content

Button

Jump to bottom
xuexiangjys edited this page Jan 12, 2019 · 10 revisions

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 文字显示区域调整

FloatingActionButton

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

  • 属性表: (FloatingActionButton)
属性名 类型 默认值 备注
backgroundTint color 默认使用theme中colorAccent的颜色  按钮的背景颜色
borderWidth dimension 0dp 边框的宽度
fabSize enum Normal（mini） 设置按钮大小
rippleColor color Color.TRANSPARENT 设置点击时的背景颜色

简介

组件使用

资源样式

工具类使用

拓展

Clone this wiki locally