自定义控件一

        自定义控件主要分成三种，1.完全自定义的控件；2.对当前的控件进行扩展；3.对当前的控件组合。

        首先看第一种，完全自定义控件。以MyCircleImageView为例来说明自定义控件的创建方法。

先来看看MyCircleImageView 的效果，如下图所示，将一幅图片显示为圆形，并可以在边缘加上自己设定的颜色。

        创建的过程大致分为以下几步：

        1）创建MyCircleImageView类继承自View，并提供初始化函数

public class MyCircleImageView extends View{
  
    public MyCircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public MyCircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //初始化
    }

    public MyCircleImageView(Context context) {
        super(context);
    }

}

 

        2）自定义属性

        在MyCircleView当中，设置了三个自定义的属性，分别是图片资源、边缘宽度、边缘颜色。

自定义属性写在attr.xml文件当中。

    <declare-styleable name="MyCircleImageView">
        <attr name="imageSrc" format="reference"/>
        <attr name="borderWidth" format="dimension"/>
        <attr name="borderColor" format="color"/>
    </declare-styleable>

        3）在XML布局文件当中引入自定义属性

        引入自定义属性的时候还必须加入自定义属性的命名空间，如下图所示

xmlns:custom="http://schemas.android.com/apk/res-auto"

然后就可以在view当中加入自定义属性了

    <com.example.a.circleimage.MyCircleImageView
        android:id="@+id/top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        custom:imageSrc="@drawable/mycatch"
        custom:borderColor="@color/yellow"
        custom:borderWidth="10dp"/>

        4）在代码当中读取XML文件当中的属性，初始化View

    private void initAttrs(AttributeSet attrs){
        if(attrs!=null){
            TypedArray array = null;
            try{
                //读取属性
                array = getContext().obtainStyledAttributes(attrs,R.styleable.MyCircleImageView);
                this.mDrawable = array.getDrawable(R.styleable.MyCircleImageView_imageSrc);
                this.mBorderWidth = array.getDimension(R.styleable.MyCircleImageView_borderWidth,0);
                this.mBorderColor = array.getInt(R.styleable.MyCircleImageView_borderColor, 0);
                this.mesureDrawable();
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }

        5）测量View的尺寸

        首先看一下设置View尺寸的三种模式，如下表所示

模式类型	说明
EXACTLY	对应于match_parent或者具体的数值
AT_MOST	对应于wrap_content
UNSPECIFIED	开发人员可以按照自己的意愿设置成任何大小，应用比较少

       复写父类的onMeasure（）方法，并且只有当模式为EXACTLY时，宽高才从MeasureSpec当中取，其他模式则宽高设置成图片的宽高。

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //获取宽度的模式和大小
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        //获取高度的模式和大小
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        //设置view的宽和高
        this.setMeasuredDimension(this.measureWidth(widthMode,width),this.measureHeight

(heightMode,height));
    }

    private int measureWidth(int mode ,int width){
        switch (mode){
            case MeasureSpec.UNSPECIFIED:
                break;
            case MeasureSpec.AT_MOST:
                break;
            case MeasureSpec.EXACTLY:
                this.mWidth = width;
                break;
        }
        return mWidth;
    }

    private int measureHeight(int mode , int height){
        switch (mode){
            case MeasureSpec.UNSPECIFIED:
                break;
            case MeasureSpec.AT_MOST:
                break;
            case MeasureSpec.EXACTLY:
                this.mHeight = height;
                break;
        }
        return mHeight;
    }

         6）绘制View

         复写ondraw（）函数，将所得到的图片绘制成为圆形，并在外层添加颜色边缘。

@Override
    protected void onDraw(Canvas canvas) {
        if(mBitmap == null){
            mBitmap = Bitmap.createScaledBitmap(drawableToBitmap(mDrawable),
                                                 getMeasuredWidth(),
                                                 getMeasuredHeight(),
                                                 true);
        }

        BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP,
                Shader.TileMode.CLAMP);
        this.mPaint.setShader(bitmapShader);
        this.mPaint.setStyle(Paint.Style.FILL);
        float x = mBitmap.getWidth()/2.0f;
        float y = mBitmap.getHeight()/2.0f;
        float radiu = Math.min(x,y);
        canvas.drawCircle(x,y,radiu,mPaint);
        if(this.mBorderColor!=0 && this.mBorderWidth!=0){
            Paint borderPaint = new Paint();
            borderPaint.setColor(this.mBorderColor);
            borderPaint.setStyle(Paint.Style.STROKE);
            borderPaint.setStrokeWidth(mBorderWidth);
            borderPaint.setAntiAlias(true);
            canvas.drawCircle(x,y,radiu+1-mBorderWidth/2.0f,borderPaint);
        }
    }

完整的源码如下：

public class MyCircleImageView extends View {

    private Paint mPaint;//画笔
    private Drawable mDrawable;//图片
    private int mWidth;//宽度
    private int mHeight;//高度
    private Bitmap mBitmap;
    private int mBorderColor;//边框颜色
    private float mBorderWidth;//边框宽度

    public MyCircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public MyCircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.initAttrs(attrs);
        this.mPaint = new Paint();
        this.mPaint.setAntiAlias(true);//抗锯齿
    }

    public MyCircleImageView(Context context) {
        super(context);
    }

    private void initAttrs(AttributeSet attrs){
        if(attrs!=null){
            TypedArray array = null;
            try{
                //读取属性
                array = getContext().obtainStyledAttributes(attrs,R.styleable.MyCircleImageView);
                this.mDrawable = array.getDrawable(R.styleable.MyCircleImageView_imageSrc);
                this.mBorderWidth = array.getDimension(R.styleable.MyCircleImageView_borderWidth,0);
                this.mBorderColor = array.getInt(R.styleable.MyCircleImageView_borderColor, 0);
                this.mesureDrawable();
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }

    //测量控件的大小
    public void mesureDrawable(){
        if(this.mDrawable!=null){
            this.mHeight = this.mDrawable.getIntrinsicHeight();
            this.mWidth = this.mDrawable.getIntrinsicWidth();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if(mBitmap == null){
            mBitmap = Bitmap.createScaledBitmap(drawableToBitmap(mDrawable),
                                                 getMeasuredWidth(),
                                                 getMeasuredHeight(),
                                                 true);
        }

        BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP,
                Shader.TileMode.CLAMP);
        this.mPaint.setShader(bitmapShader);
        this.mPaint.setStyle(Paint.Style.FILL);
        float x = mBitmap.getWidth()/2.0f;
        float y = mBitmap.getHeight()/2.0f;
        float radiu = Math.min(x,y);
        canvas.drawCircle(x,y,radiu,mPaint);
        if(this.mBorderColor!=0 && this.mBorderWidth!=0){
            Paint borderPaint = new Paint();
            borderPaint.setColor(this.mBorderColor);
            borderPaint.setStyle(Paint.Style.STROKE);
            borderPaint.setStrokeWidth(mBorderWidth);
            borderPaint.setAntiAlias(true);
            canvas.drawCircle(x,y,radiu+1-mBorderWidth/2.0f,borderPaint);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //获取宽度的模式和大小
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        //获取高度的模式和大小
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        //设置view的宽和高
        this.setMeasuredDimension(this.measureWidth(widthMode,width),this.measureHeight

(heightMode,height));
    }

    private int measureWidth(int mode ,int width){
        switch (mode){
            case MeasureSpec.UNSPECIFIED:
                break;
            case MeasureSpec.AT_MOST:
                break;
            case MeasureSpec.EXACTLY:
                this.mWidth = width;
                break;
        }
        return mWidth;
    }

    private int measureHeight(int mode , int height){
        switch (mode){
            case MeasureSpec.UNSPECIFIED:
                break;
            case MeasureSpec.AT_MOST:
                break;
            case MeasureSpec.EXACTLY:
                this.mHeight = height;
                break;
        }
        return mHeight;
    }

    //将drawable转换成bitmap
    public Bitmap drawableToBitmap(Drawable drawable) {
        Bitmap bitmap = Bitmap.createBitmap(
                drawable.getIntrinsicWidth(),
                drawable.getIntrinsicHeight(),
                drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
                        : Bitmap.Config.RGB_565);

        Canvas canvas = new Canvas(bitmap);
        canvas.setBitmap(bitmap);
        drawable.setBounds(0, 0,  drawable.getIntrinsicWidth() ,drawable.getIntrinsicHeight());
        drawable.draw(canvas);

        return bitmap;

    }
}