自定义控件，上图下字的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>