Andrews is best to use a button

background

Button should be one of the most common components of our App inside, especially common.

Usually we write a button routine was simple and fixed. Roughly divided into the following steps:

Textview write a position according to the size of the draft design layout inside xml
Accordance with the provisions of the draft design and color to create a rounded shape file in the drawable directory
This shape file as background Textview

Such a pretty standard buttons was born, and then you can continue to happily developed. It would have been no problem, than let UI sister paper cut plan advanced a lot, but along with the design you will find a lot of UI sister paper the idea, there are a variety of different interfaces and different background color rounded buttons this time you need to perform three steps above again N times.

Finally, you will find a wide variety of backgrounds button under your drawable resource directory, difficult to manage. Especially if there is need to use the button clicks required effect selector, this time might produce three documents to meet the demand, so generally speaking very cumbersome.

idea

For these reasons as well as the prevalence of the use of buttons, I feel it is necessary to write a simple to use and can meet the daily needs of a variety of buttons. We need to sort out the next button to achieve results:

Simple (i.e., may utilize a variety of settings button attribute)
You can support setting button text, buttons, text color, text size buttons
Can support a unified set fillet size, you can also set the size of a button each fillet individually
Support can set the background color of a button
You can support selector
You can support round button
Supports gradient button, you can set the gradient color support in all directions
Can support setting bordered button, you can set the border color and width
Whether support can click the Settings button
You can set button with an icon, supports custom button size, and automatic scaling, icons support provided in four directions around the text up and down, support from the custom text from icons

Introduced

implementation 'top.androidman:superbutton:1.0.1'

Achieve results

Andrews is best to use a button

0x1 basic codes using Dictionary

effect

Andrews is best to use a button

Code

<top.androidman.SuperButton
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_margin="20dp"
        app:color_normal="@color/color_accent"
        app:corner="10dp"
        app:text="@string/poetry_1"
        app:textColor="@color/color_white"
        app:textSize="22sp" />

Attribute interpretation

Button text
app: text = "Moonlight"
Button text color
app: textColor = "@ color / color_white"
按钮文字大小
app:textSize="22sp"
按钮背景颜色
app:color_normal="@color/color_accent"

0x2 单独设置每个圆角

效果

Andrews is best to use a button

代码

<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:color_normal="@color/color_6596ff"
    app:corner="40dp"
    app:corner_left_bottom="0dp"
    app:text="单独设置左下角为0dp"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

属性解释

单独设置左下角角度
app:corner_left_bottom="0dp"
单独设置左上角角度
app:corner_left_top="5dp"
单独设置右上角角度
app:corner_right_top="22dp"
单独设置右下角角度
app:corner_right_bottom="0dp"
按钮四个角的圆角角度
app:corner="10dp"

注意：单独设置角度会覆盖corner属性

0x3 Selector

效果

Andrews is best to use a button

代码

<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    android:onClick="test"
    app:color_normal="@color/color_accent"
    app:color_pressed="@color/color_ffB419"
    app:corner="10dp"
    app:text="点击会变色哦"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

属性解释

当按钮点下时会显示设置的颜色效果
app:color_normal="@color/color_accent"

0x4 圆形按钮

效果

Andrews is best to use a button

代码

 <top.androidman.SuperButton
    android:layout_width="160dp"
    android:layout_height="160dp"
    android:layout_margin="20dp"
    android:onClick="test"
    app:color_normal="@color/color_accent"
    app:drawable_middle="@mipmap/icon_like"
    app:drawable_middle_height="50dp"
    app:drawable_middle_width="50dp"
    app:shape="CIRCLE" />

属性解释

按钮上只有图标没有文字
app:drawable_middle="@mipmap/icon_like"
按钮上图标高度
app:drawable_middle_height="50dp"
按钮上图标宽度
app:drawable_middle_width="50dp"

注意：当设置此属性时，文字的相关属性将会失效

0x5 渐变背景的按钮

效果

Andrews is best to use a button

代码

<top.androidman.superbutton.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:color_direction="RIGHT_LEFT"
    app:color_end="@color/color_14c7de"
    app:color_start="@color/color_red"
    app:corner="20dp"
    app:text="从右到左渐变"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

属性解释

开始颜色
app:color_start="@color/color_14c7de"
结束颜色
app:color_end="@color/color_red"
颜色渐变方向
app:color_direction="RIGHT_LEFT"
TOP_BOTTOM 从上到下
BOTTOM_TOP 从下到上
LEFT_RIGHT 从左到右
RIGHT_LEFT 从右到左
TR_BL 从右上到左下
BL_TR 从左下到右上
BR_TL 从右下到左上
TL_BR 从左上到右下

注意：当设置颜色渐变时，color_normal，color_pressed设置将失效

0x6 有边框按钮

效果

Andrews is best to use a button

代码

<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:border_color="@color/color_red"
    app:border_width="2dp"
    app:color_normal="@color/color_accent"
    app:corner="10dp"
    app:text="@string/poetry_1"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

属性解释

边框宽度
app:border_width="2dp"
边框颜色
app:border_color="@color/color_red"

0x7 按钮不可点击

效果

Andrews is best to use a button

代码

<top.androidman.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    android:onClick="test"
    app:button_click_able="false"
    app:color_normal="@color/color_accent"
    app:corner="10dp"
    app:singleLine="false"
    app:text="app:button_click_able=false\n也可以代码设置"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

属性解释

按钮是否可以点击，默认为true可以点击
app:button_click_able="false"
按钮文字是否单行，默认为true单行
app:singleLine="false"

注意：按钮提供有方法对点击事件进行控制，请参考高级使用里面相关方法

0x8 带图标按钮

效果

Andrews is best to use a button

代码

<top.androidman.superbutton.SuperButton
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    app:color_normal="@color/color_red"
    app:corner="20dp"
    app:drawable_padding="20dp"
    app:drawable_right="@mipmap/icon_like"
    app:text="图标在右边"
    app:textColor="@color/color_white"
    app:textSize="22sp" />

属性解释

图标在文字右边
app:drawable_right="@mipmap/icon_like"
Icon to the left of the text
app: drawable_left = "@ mipmap / icon_like"
Icon in the top text
app: drawable_top = "@ mipmap / icon_like"
Icons in the text below
app: drawable_bottom = "@ mipmap / icon_like"
Icons from the text from
app: drawable_padding = "20dp"
According to the text size scaling icons, the default is true, is false when the original display size of the icon
app: drawable_auto = "true"

All the Properties button support

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="SuperButton">
        <!--默认配置-->
        <attr name="text" format="reference|string" />
        <!--按钮文字颜色-->
        <attr name="textColor" format="reference|color" />
        <!--按钮文字大小-->
        <attr name="textSize" format="dimension" />
        <!--文字是否单行，默认单行-->
        <attr name="singleLine" format="boolean" />

        <!--默认背景颜色-->
        <attr name="color_normal" format="reference|color" />
        <!--按压时的背景颜色-->
        <attr name="color_pressed" format="reference|color" />

        <!--图片在文字左边-->
        <attr name="drawable_left" format="reference|color" />
        <!--图片在文字右边-->
        <attr name="drawable_right" format="reference|color" />
        <!--图片在文字上边-->
        <attr name="drawable_top" format="reference|color" />
        <!--图片在文字下边-->
        <attr name="drawable_bottom" format="reference|color" />
        <!--图片距文字的距离-->
        <attr name="drawable_padding" format="dimension" />
        <!--图标根据文字大小自动缩放图标-->
        <attr name="drawable_auto" format="boolean" />

        <!--只有图片的情况,此时会忽略文字，即便设置-->
        <attr name="drawable_middle" format="reference|color" />
        <!--图片在中间时宽-->
        <attr name="drawable_middle_width" format="dimension" />
        <!--图片在中间时高-->
        <attr name="drawable_middle_height" format="dimension" />

        <!--形状-->
        <attr name="shape" format="enum">
            <!--圆形-->
            <enum name="CIRCLE" value="1" />
            <!--矩形-->
            <enum name="RECT" value="2" />
        </attr>

        <!--按钮背景是渐变色时设置-->
        <!--开始颜色-->
        <attr name="color_start" format="color" />
        <!--结束颜色-->
        <attr name="color_end" format="color" />
        <!--颜色方向-->
        <attr name="color_direction" format="enum">
            <!--从上到下-->
            <enum name="TOP_BOTTOM" value="0x1" />
            <!--从右上到左下-->
            <enum name="TR_BL" value="0x2" />
            <!--从右到左-->
            <enum name="RIGHT_LEFT" value="0x3" />
            <!--从右下到左上-->
            <enum name="BR_TL" value="0x4" />
            <!--从下到上-->
            <enum name="BOTTOM_TOP" value="0x5" />
            <!--从左下到右上-->
            <enum name="BL_TR" value="0x6" />
            <!--从左到右-->
            <enum name="LEFT_RIGHT" value="0x7" />
            <!--从左上到右下-->
            <enum name="TL_BR" value="0x8" />
        </attr>

        <!--按钮圆角，如果单独设置会覆盖此设置-->
        <attr name="corner" format="dimension" />
        <!--左上角圆角半径-->
        <attr name="corner_left_top" format="dimension" />
        <!--左下角圆角半径-->
        <attr name="corner_left_bottom" format="dimension" />
        <!--右上角圆角半径-->
        <attr name="corner_right_top" format="dimension" />
        <!--右下角圆角半径-->
        <attr name="corner_right_bottom" format="dimension" />

        <!--边框宽度-->
        <attr name="border_width" format="dimension" />
        <!--边框颜色-->
        <attr name="border_color" format="color" />
        <!--按钮是否可以点击-->
        <attr name="button_click_able" format="boolean" />

    </declare-styleable>
</resources>

Advanced Applications

1. want to modify the relevant button to call the following method:

 /**
     * 修改文字
     */
    superButton.setText(CharSequence text);

    /**
     * 修改文字颜色
     */
    superButton.setTextColor(@ColorInt int textColor);

    /**
     * 修改按钮背景颜色
     */
    superButton.setColorNormal(@ColorInt int colorNormal);

When the control code is required under certain conditions, then not the click button is grayed out, the following methods can be called directly:

 /**
     * 调用此方法后按钮颜色被改变，按钮无法点击
     */
    superButton.setUnableColor(@ColorInt int color);

If you just want to click the Settings button is unavailable, do not need to change the color of the button, you can use the following method

/**
     * 设置按钮是否可以点击
     */
    superButton.setButtonClickable(boolean buttonClickable);