Button

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	设置点击时的背景颜色

SwitchIconView

可切换图标状态的按钮。

使用案例

<com.xuexiang.xui.widget.button.SwitchIconView
    android:id="@+id/switchIconView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:padding="8dp"
    app:siv_disabled_alpha=".5"
    app:siv_disabled_color="#dadada"
    app:siv_enabled="false"
    app:siv_tint_color="#ffb700"
    app:srcCompat="@drawable/ic_camera" />

属性表: (SwitchIconView)

属性名	类型	默认值	备注
siv_tint_color	color	R.attr.colorAccent	填充颜色
siv_animation_duration	integer	300ms	动画持续时间
siv_disabled_alpha	float	0.5	不可点击时的透明度
siv_disabled_color	color	/	不可点击时的填充颜色
siv_enabled	boolean	true	是否可点击
siv_no_dash	boolean	false	不可点击时是否没有斜杠

SmoothCheckBox

自带切换动画的CheckBox。

使用案例

<com.xuexiang.xui.widget.button.SmoothCheckBox
    android:id="@+id/scb"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_margin="5dp"
    android:paddingTop="10dp"
    app:scb_color_checked="@color/app_color_theme_1" />

属性表: (SmoothCheckBox)

属性名	类型	默认值	备注
scb_duration	integer	300ms	切换动画的持续时间
scb_stroke_width	dimension	宽度的10分之一	未选中时边框宽度
scb_color_tick	color	Color.WHITE	对勾颜色
scb_color_checked	color	R.attr.colorAccent	选中时的填充颜色
scb_color_unchecked	color	Color.WHITE	未选中时的填充颜色
scb_color_unchecked_stroke	color	#DFDFDF	未选中时边框颜色

ShineButton

增强效果的按钮，自带闪烁的点击特效。

使用案例

<com.xuexiang.xui.widget.button.shinebutton.ShineButton
    android:id="@+id/shine_button"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_gravity="center"
    app:sb_checked_color="#f26d7d"
    app:sb_icon_image="@drawable/ic_heart"
    app:sb_normal_color="@android:color/darker_gray" />
    
<com.xuexiang.xui.widget.button.shinebutton.ShineButton
    android:id="@+id/shine_button_1"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_gravity="center"
    android:src="@android:color/darker_gray"
    app:sb_allow_random_color="false"
    app:sb_big_shine_color="#FF6666"
    app:sb_checked_color="#FF6666"
    app:sb_click_animation_duration="200"
    app:sb_enable_flashing="false"
    app:sb_icon_image="@drawable/ic_like"
    app:sb_normal_color="@android:color/darker_gray"
    app:sb_shine_animation_duration="1500"
    app:sb_shine_count="15"
    app:sb_shine_distance_multiple="1.5"
    app:sb_shine_turn_angle="10"
    app:sb_small_shine_color="#CC9999"
    app:sb_small_shine_offset_angle="20" />

属性表: (ShineButton)

属性名	类型	默认值	备注
sb_normal_color	color	#AAAAAA	未选中时的填充颜色
sb_checked_color	color	R.attr.colorAccent	选中时的填充颜色
sb_allow_random_color	boolean	false	是否使用随机颜色
sb_shine_animation_duration	integer	1500ms	发散动画持续的时间
sb_click_animation_duration	integer	200ms	点击动画持续的时间
sb_enable_flashing	boolean	false	是否开启闪烁
sb_shine_distance_multiple	float	1.5	发散距离的倍数，必须大于1
sb_shine_count	integer	7	发散点的数量
sb_shine_size	dimension	按钮宽度的一半	发散点起始的大小
sb_shine_turn_angle	float	20	发散点的转角度数
sb_small_shine_offset_angle	float	20	小发散点的偏移角度
sb_small_shine_color	color	#666666	小发散点的颜色
sb_big_shine_color	color	选中时的填充颜色	大发散点的颜色
sb_icon_image	reference	/	图标资源

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Button

RoundButton

ShadowButton

ButtonView

CountDownButton

SwitchButton

RippleView

FloatingActionButton

SwitchIconView

SmoothCheckBox

ShineButton

简介

组件使用

资源样式

工具类使用

拓展

Clone this wiki locally