自定义控件，上图下字的Button，图片任意指定大小

最近处在安卓培训期，把自己的所学写成博客和大家分享一下，今天学的是这个自定义控件，上图下字的Button安卓自带，但是苦于无法设置图片大小（可以在代码修改），今天自己做了一个，首先看一下效果图，比较实用的应该是最后一种样式，第一个按钮添加了点击事件，第二个按钮添加了动画效果。

知识点

先说一下以前使用android:drawableTop=”“时候修改图片大小的方法：

        //Parameter.IMG_SMALL是图片的大小值，setCompoundDrawables参数指定图片的位置：左、上、右、下
        btn.setCompoundDrawables(
                null,
                findImgAsSquare(InformActivity.this,
                R.mipmap.order_forpay, Parameter.IMG_SMALL),
                null,
                null);

    /**
     * 获取,寻找并裁剪图片
     *
     * @param context
     * @param id 图片Id
     * @return
     */
    public static Drawable findImgAsSquare(Context context, int id, int sidedp) {
        Drawable drawable = ContextCompat.getDrawable(context, id);
        int px = ViewHelper.dip2px(context, sidedp);
        drawable.setBounds(0, 0, px, px);
        return drawable;
    }

    /**
     * 将dip或dp值转换为px值，保证尺寸大小不变
     *
     * @param context 上下文
     * @param dipValue dp的值
     * @return
     */
    public static int dip2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

自定义属性XML配置
在res/values包下新建attrs.xml文件，配置完attrs.xml文件之后，R文件自动生成对应参数，用于自定义控件的Java类使用，我这里添加了4个，也就是说生成了4个与之对应的参数，比如：drawable_hight生成的参数是：MyImgButton_drawable_hight，用户在xml文件中设置的drawable_hight的属性值最终会通过MyImgButton_drawable_hight返回。
attrs.xml添加如下参数:

    <declare-styleable name="MyImgButton">
        <attr name="drawable_hight" format="reference|dimension"></attr>
        <attr name="drawable_width" format="reference|dimension"></attr>
        <attr name="drawable_space" format="reference|dimension"></attr>
        <attr name="myDrawableTop" format="reference|integer"></attr>
    </declare-styleable>

format的可选参数类型：

• “reference” //引用
• “color” //颜色
• “boolean” //布尔值
• “dimension” //尺寸值
• “float” //浮点值
• “integer” //整型值
• “string” //字符串
• “fraction” //百分数,比如200%

布局XML文件头文件设置
使用自定义控件属性的时候，在Xml布局文件头中需要添加下面一段话，android studio下输入app可以默认生成,不必手动指定，有强迫症也可以将”app”可以替换为任意字母。
xmlns:app=”http://schemas.android.com/apk/res-auto”

布局XML文件引用自定义属性
在Xml布局调用自定义属性的时候，不再是”android：drawable_hight”，而是”app:drawable_hight”,前面的”app”取决于之前头文件的设置。

            app:drawable_hight="40dp"
            app:drawable_space="40dp"
            app:drawable_width="40dp"
            app:myDrawableTop="@drawable/main_home_no"

getMeasuredHeight()和getHeight()的区别
本次代码使用到getMeasuredHeight()方法，用于获取view的真实大小。
当屏幕可以包裹内容的时候，他们的值相等，只有当view超出屏幕后，才能看出他们的区别：getMeasuredHeight()是实际View的大小，与屏幕无关，而getHeight的大小此时则是屏幕的大小。getMeasuredHeight() 等于 getHeight()加上屏幕之外没有显示的大小。

TypedArray
关于获取xml属性值的方法有很多，个人比较喜欢这个，代码相对简洁，先获取TypedArray对象，再通过该对象逐个获取参数值， typedArray.getResourceId()前面一个参数是编辑attrs.xml自动生成的，后面一个是默认值，建议将默认值加入到配置文件中，或者设置为常量，便于以后修改。

 TypedArray typedArray = context.obtainStyledAttributes(attributeSet,
                R.styleable.MyImgButton);
 typedArray.getResourceId(
                R.styleable.MyImgButton_myDrawableTop, 0);

onDraw(Canvas canvas)
重写这个方法，通过Canvas对象重新绘制背景图片，配合画笔，可以制作更加复杂的控件。

关于我的自定义控件：

自定义了4个属性：
- drawable_space:图片到顶部的间距，文字到中心线的额外间距
- myDrawableTop:图片资源Id,与原先的background属性不冲突
- drawable_width:图片宽度
- drawable_hight:图片高度

重要参数：一定要指定textSize，代码中将View的高度被设置为textSize的3倍，纯粹是因为测试了很多次感觉这个比例最好看，使用方便，不需要特地去算view的高度。
存在问题：所有按钮是按照最开始的状态底部对齐，这是因为在Java代码中重新设置了控件大小，但是没有重新设置对齐的关系；控件的高度始终是textSize的3倍，并且无法被改变。解决办法就是将代码中关于设置View大小的那两行代码删除，然后手动设置android:layout_height，这里就不做演示。

自定义控件的Java类：

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.widget.Button;

/**
 * Created by ChenSS on 2016/9/20.
 */
public class MyImgButton extends Button {
    private float mDrawableWidth;
    private float mDrawableHight;
    private float mDrawableSpace;
    private Bitmap mBitmap;
    private float mTxtSize;

    public MyImgButton(Context context) {
        super(context, null);
    }

    public MyImgButton(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
        this.init(context, attributeSet);
    }

    public void init(Context context, AttributeSet attributeSet) {
        //获取所需的控件参数
        TypedArray typedArray = context.obtainStyledAttributes(attributeSet,
                R.styleable.MyImgButton);
        int imgId = typedArray.getResourceId(
                R.styleable.MyImgButton_myDrawableTop, 0);
        //如果没指定img直接返回
        if (imgId == 0)
            return;
        mTxtSize = this.getTextSize();
        //可以考虑将默认值设置到配置文件中
        mDrawableSpace = typedArray.getDimension(
                R.styleable.MyImgButton_drawable_space, 0);
        mDrawableHight = typedArray.getDimension(
                R.styleable.MyImgButton_drawable_hight, mTxtSize*2);
        mDrawableWidth = typedArray.getDimension(
                R.styleable.MyImgButton_drawable_width, mTxtSize*2);

        //获得位图
        mBitmap = BitmapFactory.decodeResource(getResources(), imgId);

        //下面两行可以考虑删除，然后手动设置android:layout_height
        //重新定义View的高度,图片高度+3倍的文本高度，这样设置个人感觉很不错，mDrawableSpace是额外指定的高度
        this.setHeight((int) (mTxtSize * 3 + mDrawableSpace * 2 + mDrawableHight));
        //虽然知道这个时候getMeasuredWidth()的值是0，还是设置一下
        this.setWidth(getMeasuredWidth());
    }

    /***
     * 图片的缩放方法
     *
     * @param bgimage   ：源图片资源
     * @param newWidth  ：缩放后宽度
     * @param newHeight ：缩放后高度
     * @return
     */
    public static Bitmap zoomImage(Bitmap bgimage, double newWidth,
                                   double newHeight) {
        // 获取这个图片的宽和高
        float width = bgimage.getWidth();
        float height = bgimage.getHeight();
        // 创建操作图片用的matrix对象
        Matrix matrix = new Matrix();
        // 计算宽高缩放率
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        // 缩放图片动作
        matrix.postScale(scaleWidth, scaleHeight);
        Bitmap bitmap = Bitmap.createBitmap(bgimage, 0, 0, (int) width,
                (int) height, matrix, true);
        return bitmap;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //缩放位图,不要在setImg方法中使用这个方法
        Bitmap b = zoomImage(mBitmap, mDrawableWidth, mDrawableHight);
        // 图片顶部居中显示
        int x = (int) ((this.getMeasuredWidth() - b.getWidth()) * 0.5);
        //y轴设置，默认顶部留一个文本大小的空白
        int y = (int) (mTxtSize + mDrawableSpace);
        canvas.drawBitmap(b, x, y, null);
        // 文本的坐标需要转换，因为默认情况下Button中的文字居中显示，y轴指定0
        x = 0;
        // 这里需要让文字在底部显示
        y = (int) ((this.getMeasuredHeight() / 2) - mTxtSize - mDrawableSpace);
        canvas.translate(x, y);
        super.onDraw(canvas);
    }
}

测试用Activity，这里添加了3个按钮，分别添加了点击事件和动画效果：

public class PersonView extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_person_view);
        this.init();
    }

    public void init() {
        MyImgButton btn1 = (MyImgButton) findViewById(R.id.person_view_btn_1);
        MyImgButton btn2 = (MyImgButton) findViewById(R.id.person_view_btn_2);
        MyImgButton btn3 = (MyImgButton) findViewById(R.id.person_view_btn_3);
        btn1.setOnClickListener(this);
        btn2.setOnClickListener(this);
        btn3.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.person_view_btn_1:
                Toast.makeText(PersonView.this, "点击了按钮", Toast.LENGTH_SHORT).show();
                break;
            case R.id.person_view_btn_2:
                this.rotateyY(view);
                break;
            case R.id.person_view_btn_3:

                break;
        }
    }
    /**
     * 图标沿着x轴中心旋转
     *
     * @param view
     */
    public void rotateyY(View view) {
        ObjectAnimator
                .ofFloat(view, "rotationY", 0.0F, 360.0F)
                .setDuration(3000)
                .start();
    }
}

Xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFF"
    tools:context="main.com.example.administrator.mydemo.animation.PersonView">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <main.com.example.administrator.mydemo.animation.MyImgButton
            android:id="@+id/person_view_btn_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello"
            android:textColor="#000000"
            android:textSize="15dp"
            app:drawable_hight="40dp"
            app:drawable_width="40dp"
            app:myDrawableTop="@drawable/main_home_no" />

        <main.com.example.administrator.mydemo.animation.MyImgButton
            android:id="@+id/person_view_btn_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello"
            android:textColor="#000000"
            android:textSize="15dp"
            app:drawable_hight="40dp"
            app:drawable_space="40dp"
            app:drawable_width="40dp"
            app:myDrawableTop="@drawable/main_home_no" />

        <main.com.example.administrator.mydemo.animation.MyImgButton
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:background="#FFF"
            android:id="@+id/person_view_btn_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello"
            android:textColor="#000000"
            app:myDrawableTop="@drawable/main_home_no" />
    </LinearLayout>
</LinearLayout>