Android ShapeButton - 简化xml selector写法

写控件的初衷：
      在日常的项目中，我们常常会用到一个按钮拥有两种点击状态，一种是pressed state,另外一种是unpressed state,通常我们会使用xml先写两个drawable xml文件：

（1）pressed state xml文件[android_shape_round_error_button_pressed.xml]：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp"></corners>
    <solid android:color="@color/error_button_pressed_color"></solid>
</shape>

（2）unpressed state xml文件[android_shape_round_error_button_unpressed.xml]：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp"></corners>
    <solid android:color="@color/error_button_unpressed_color"></solid>
</shape>

（3）利用上面两个xml最后写一个selctor xml 文件[android_error_button.xml]:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/android_shape_round_error_button_pressed" android:state_pressed="true"></item>
    <item android:drawable="@drawable/android_shape_round_error_button_unpressed" android:state_pressed="false"></item>
</selector>

（4）在自己页面xml控件属性中应用此selector背景：
 

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/android_error_button"/>

       在以上的两个xml文件中，我们看似是很简单的操作，一旦项目中冗杂的代码按钮，你会每个都要写这样的代码，如果你只是追求吧项目完工之类的，于是就直接用个普通背景
代替了，这样你也就没必要来写自定义View了吧，Coder是一个动脑的行业，因此我们选择这一行业，就应该在项目中吸取应有的教训，怎么把下一次的项目更好、更快地去完成，
这样的代码自己写着舒服，别人接管的人看着也舒服，后期维护一方便。

控件思路：
    此类控件无非就是先加载的时候默认有一个颜色，在点击事件或者触摸事件的时候就换了一种加深的颜色，我们不可能只想到我们做到
能换颜色就行了，因为即使你把两种颜色传递给你控件，那么你还要想这个颜色对应加深的颜色是什么颜色，没有必要，既然我们要
自定义控件，那么就一次性搞定控件，总之一句话，那就是我们怎么方便使用、怎么简单就怎么设计View。那么看似简单的控件有这么
几个问题：
（1）动态设置2种背景颜色
（2）默认颜色和点击颜色相似但是点击颜色要身些。
第一个问题其实不算什么问题，我们只要是控件都可以设置颜色，只是有一个问题的是，颜色处置问题。目前颜色拥有色调、饱和度
、色值。这种颜色变暗就只能在饱和度上面下功夫。饱和度在android有没有方法呢，我们开始只能猜测。于是我们可以在Android中寻找对应的类和方法，当然第一次想到的是Color
类，你可以先看饱和度对应的English:saturation,这时候你可以在Color类中find this word.你将会看着下面这几个类：

/**
 * Convert the argb color to its HSV components.
 *     hsv[0] is Hue [0 .. 360)
 *     hsv[1] is Saturation [0...1]
 *     hsv[2] is Value [0...1]
 * @param color the argb color to convert. The alpha component is ignored.
 * @param hsv  3 element array which holds the resulting HSV components.
 */
public static void colorToHSV(@ColorInt int color, @Size(3) float hsv[]) {
    RGBToHSV((color >> 16) & 0xFF, (color >> 8) & 0xFF, color & 0xFF, hsv);
}

     此方法是将ARGB颜色转成HSV组件,在HSV组件中可以设置hsv[1]的饱和度，当然看到这，我们的目的还是没达到的，我们的
目的是调颜色的饱和度，那么饱和度已经调整了，那么肯定需要HSV组件转换成颜色。我们先猜测是HSVto...类似的方法搜索，
结果是就是这个方法下面，所有有时候别先急着搜，先看看需要的方法的附近代码。下面就是HSV组件转换成颜色方法：

/**
 * Convert HSV components to an ARGB color. Alpha set to 0xFF.
 *     hsv[0] is Hue [0 .. 360)
 *     hsv[1] is Saturation [0...1]
 *     hsv[2] is Value [0...1]
 * If hsv values are out of range, they are pinned.
 * @param hsv  3 element array which holds the input HSV components.
 * @return the resulting argb color
*/
public static int HSVToColor(@Size(3) float hsv[]) {
    return HSVToColor(0xFF, hsv);
}

好了以上问题现在都不是问题了，现在是可以着手写自己的自定义View,此处的思路只是一种，我只是利用原有的控件的
属性加上原有的方法构造新控件，不想再draw,个人认为再次渲染没有原控件来的性能优越。


控件代码[ShapeButton]：
(1)attr.xml:

<!--ShapeButton-->
<attr name="shape" format="enum">
    <enum name="rectangle" value="0"></enum>
    <enum name="oval" value="1"></enum>
</attr>
<declare-styleable name="ShapeButton">
    <attr name="solid_color" format="color" />
    <attr name="stroke_color" format="color"/>
    <attr name="stroke_width" format="dimension"/>
    <attr name="corner_radius" format="dimension"/>
    <attr name="top_left_corner_radius" format="dimension"/>
    <attr name="top_right_corner_radius" format="dimension"/>
    <attr name="bottom_left_corner_radius" format="dimension"/>
    <attr name="bottom_right_corner_radius" format="dimension"/>
    <attr name="shape"/>
    <attr name="saturation" format="float"/>
</declare-styleable>

(2)ShapeButton源码：
 

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.GradientDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.android.R;


/**
 * Created by Relin on 2017/11/22.
 * This class is ButtonView you can setting background,stroke color
 * stroke width ,stroke width,the kinds of corner in sample way.
 * button color is change auto when click it and the color is old
 * color's saturation 92% ,if you think isn't suit to you application
 * you can change it,saturation is bright deep.
 */
public class ShapeButton extends TextView implements View.OnTouchListener{


    private int solidColor = Color.parseColor("#B4B4B4");
    private int strokeWidth = 0;
    private int strokeColor = Color.parseColor("#B4B4B4");
    private int shape = 0;
    private float cornerRadius = 0;
    private float topLeftCornerRadius = 0;
    private float topRightCornerRadius = 0;
    private float bottomLeftCornerRadius = 0;
    private float bottomRightCornerRadius = 0;


    private float saturation = 0.90f;


    private Drawable normalDrawable;
    private Drawable pressedDrawable;


    public ShapeButton(Context context) {
        super(context);
        initAttrs(context,null);
    }


    public ShapeButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(context,attrs);
    }


    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                setDrawable(pressedDrawable);
                break;
            case MotionEvent.ACTION_UP:
                setDrawable(normalDrawable);
                break;
        }
        return false;
    }


    private void initAttrs(Context context, AttributeSet attrs) {
        setOnTouchListener(this);
        if (attrs!=null){
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ShapeButton);
            solidColor = typedArray.getColor(R.styleable.ShapeButton_solid_color, Color.parseColor("#B4B4B4"));
            strokeWidth = (int) typedArray.getDimension(R.styleable.ShapeButton_stroke_width, 0);
            strokeColor = typedArray.getColor(R.styleable.ShapeButton_stroke_color, Color.parseColor("#B4B4B4"));
            if (typedArray.getString(R.styleable.ShapeButton_shape)!=null){
                shape = Integer.parseInt(typedArray.getString(R.styleable.ShapeButton_shape));
            }
            cornerRadius = typedArray.getDimension(R.styleable.ShapeButton_corner_radius, 0);
            topLeftCornerRadius = typedArray.getDimension(R.styleable.ShapeButton_top_left_corner_radius, 0);
            topRightCornerRadius = typedArray.getDimension(R.styleable.ShapeButton_top_right_corner_radius, 0);
            bottomLeftCornerRadius = typedArray.getDimension(R.styleable.ShapeButton_bottom_left_corner_radius, 0);
            bottomRightCornerRadius = typedArray.getDimension(R.styleable.ShapeButton_bottom_right_corner_radius, 0);
            saturation = typedArray.getFloat(R.styleable.ShapeButton_saturation,0.90f);
            typedArray.recycle();
        }
        normalDrawable = createShape(shape,strokeWidth, strokeColor, solidColor, cornerRadius, topLeftCornerRadius, topRightCornerRadius, bottomLeftCornerRadius, bottomRightCornerRadius);
        pressedDrawable = createShape(shape, strokeWidth, createPressedColor(strokeColor), createPressedColor(solidColor), cornerRadius, topLeftCornerRadius, topRightCornerRadius, bottomLeftCornerRadius, bottomRightCornerRadius);


        setDrawable(normalDrawable);
    }


    /**
     * create pressed state color by HSV
     *  hsv[2] :values is big - is deep or bright
     * @param color
     * @return
     */
    private int createPressedColor(int color) {
        int alpha = Color.alpha(color);
        float[] hsv = new float[3];
        Color.colorToHSV(color, hsv);
        hsv[2] *= saturation;
        return Color.HSVToColor(alpha, hsv);
    }


    /**
     * for all android api
     * set all kinds of background.
     * @param drawable
     */
    private void setDrawable(Drawable drawable) {
        if (Build.VERSION.SDK_INT >= 16) {
            setBackground(drawable);
        } else {
            setBackgroundDrawable(drawable);
        }
    }


    /**
     * create shape drawable
     * this method create you self background drawable
     * by shape.the same as code in xml.
     *
     * @param shape                   GradientDrawable.RECTANGLE  GradientDrawable.OVAL
     * @param strokeWidth             button stroke width
     * @param strokeColor             button stroke color
     * @param solidColor              button background color
     * @param cornerRadius            all corner is the same as is the radius
     * @param topLeftCornerRadius     top left corner radius
     * @param topRightCornerRadius    top right corner radius
     * @param bottomLeftCornerRadius  bottom left corner radius
     * @param bottomRightCornerRadius bottom right corner radius
     * @return
     */
    public Drawable createShape(int shape, int strokeWidth,
                                int strokeColor, int solidColor, float cornerRadius,
                                float topLeftCornerRadius, float topRightCornerRadius,
                                float bottomLeftCornerRadius, float bottomRightCornerRadius) {
        GradientDrawable drawable = new GradientDrawable();
        drawable.setShape(shape);
        drawable.setSize(10,10);
        drawable.setStroke(strokeWidth, strokeColor);
        drawable.setColor(solidColor);
        if (cornerRadius!=0){
            drawable.setCornerRadius(cornerRadius);
        }else{
            drawable.setCornerRadii(new float[]{topLeftCornerRadius, topLeftCornerRadius, topRightCornerRadius, topRightCornerRadius, bottomLeftCornerRadius, bottomLeftCornerRadius, bottomRightCornerRadius, bottomRightCornerRadius});
        }
        return drawable;
    }




}

 

（3）使用：
按钮类型可以是圆形、正方形、椭圆形，shape的选择+View自身的宽高设置就可以了。其中saturation设置点击后的饱和度的。

<com.android.widget.ShapeButton
    android:id="@+id/elven_fbtn_reloading"
    android:layout_width="160dp"
    android:layout_height="35dp"
    android:layout_marginTop="15dp"
    android:text="重新加载"
    app:corner_radius="8dp"
    android:textColor="@android:color/white"
    android:textSize="14sp"
    app:shape="rectangle"
    android:gravity="center" />