自定义控件（2）

写下这个是为了以后方便自己查看。

这个自定义的控件是图片和文字同时在一个控件里面。

首先我们在属性的xml文件里面添加图片属性（image，imageScaletype）。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="titleText" format="string"/>
    <attr name="titleTextColor" format="color"/>
    <attr name="titleTextSize" format="dimension"/>
    <attr name="image" format="reference"/>
    <attr name="imageScaletype">
        <enum name="fillXY" value="0"/>
        <enum name="center" value="1"/>
    </attr>
    <declare-styleable name="CustomTextView">
        <attr name="titleText"/>
        <attr name="titleTextColor"/>
        <attr name="titleTextSize"/>
        <attr name="image"/>
        <attr name="imageScaletype"/>
    </declare-styleable>

</resources>

接着就可以在自定义类里面的构造方法里面获取属性

/**
         * 获得我们所定义的自定义样式属性
         */
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomTextView, defStyleAttr, 0);
        int n = typedArray.getIndexCount();
        for (int i=0;i<n;i++){
            //获取单个属性的值的ID
            int aar = typedArray.getIndex(i);
            switch (aar) {
                case R.styleable.CustomTextView_image:
                    mImage = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(aar, 0));
                    break;
                case R.styleable.CustomTextView_imageScaletype:
                    mImageScale = typedArray.getIndex(aar);
                    break;
                case R.styleable.CustomTextView_titleText :
                     mTitleText = typedArray.getString(aar);
                    break;
                case R.styleable.CustomTextView_titleTextColor:
                     mTitleTextColor = typedArray.getColor(aar, Color.BLACK);
                    break;
                case R.styleable.CustomTextView_titleTextSize :
                    //typedArray.getDimensionPixelSize这个方法是获得int，
                    //typedArray.getDimension这个方法是获得float，
                     mTitleTextSize = typedArray.getDimensionPixelSize(aar, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
                default:
                    break;
            }
        }
        //获取完属性以后要释放资源
        typedArray.recycle();

获取完属性之后，通过onmeasure来测量，根据对比图片，文字的大小来决定控件的宽高。

  @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthmode = MeasureSpec.getMode(widthMeasureSpec);
        int widthsize = MeasureSpec.getSize(widthMeasureSpec);
        int heightmode = MeasureSpec.getMode(heightMeasureSpec);
        int heightsize = MeasureSpec.getSize(heightMeasureSpec);


        switch (widthmode) {
            case  MeasureSpec.EXACTLY:
                width = getPaddingLeft() + getPaddingRight() + widthsize;
                break;
            case MeasureSpec.AT_MOST:
                // 由图片决定的宽
                int desireByImg = getPaddingLeft() + getPaddingRight() + mImage.getWidth();
                // 由字体决定的宽
                int desireByTitle = getPaddingLeft() + getPaddingRight() + mBound.width();
                int desire = Math.max(desireByImg, desireByTitle);
                width = Math.min(desire, widthsize);
                break;
            case MeasureSpec.UNSPECIFIED:
               /* float textWidth = paint.measureText(mTitleText);
                width = (int) (getPaddingLeft() + getPaddingRight() + textWidth);*/
                break;

        }
        switch (heightmode) {
            case  MeasureSpec.EXACTLY:
                height = getPaddingLeft() + getPaddingRight() + heightsize;
                break;
            case MeasureSpec.AT_MOST:
                int desire = getPaddingTop() + getPaddingBottom() + mImage.getHeight() + mBound.height();
                height = Math.min(desire, heightsize);
                break;
            case MeasureSpec.UNSPECIFIED:
              /*  //                int textHeight = mRect.height(); //直接计算出来的会有误差
                Paint.FontMetrics fontMetrics = paint.getFontMetrics();
//                float textHeight = Math.abs((fontMetrics.descent - fontMetrics.ascent));
                float textHeight = Math.abs((fontMetrics.bottom - fontMetrics.top));
                height = (int) (getPaddingTop() + getPaddingBottom() + textHeight);*/
                break;

        }
        setMeasuredDimension(width,height);
          }

最后就是用ondraw整体的画出控件

@Override
protected void onDraw(Canvas canvas) {
   /* super.onDraw(canvas);
    paint.setColor(Color.YELLOW);
    canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),paint);
    paint.setColor(mTitleTextColor);
    canvas.drawText(mTitleText,getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, paint);*/

    //不空心画出控件背景，如果空心的话就是画一个正方形的线
    paint.setStrokeMiter(4);//圆环宽度
    paint.setStyle(Paint.Style.STROKE);//空心
    paint.setColor(Color.CYAN);
    canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),paint);

   //rect,主要是为了装载图片的 
    rect.left = getPaddingLeft();
    rect.right = width - getPaddingRight();
    rect.top = getPaddingTop();
    rect.bottom = height - getPaddingBottom();

    paint.setColor(mTitleTextColor);
    paint.setStyle(Paint.Style.FILL);
    
    if(mBound.width()>width){
        TextPaint mpaint = new TextPaint(paint);
        String msg = TextUtils.ellipsize(mTitleText, mpaint, (float) width - getPaddingLeft() - getPaddingRight(),
                TextUtils.TruncateAt.END).toString();
        canvas.drawText(msg, getPaddingLeft(), height - getPaddingBottom(), paint);
    }else
    {
        //正常情况，将字体居中
        canvas.drawText(mTitleText, width / 2 - mBound.width() * 1.0f / 2, height - getPaddingBottom(), paint);
    }
    rect.bottom -= mBound.height();
    if (mImageScale==IMAGE_SCALE_FITXY)
    {
        canvas.drawBitmap(mImage, null, rect, paint);
    } else
    {
        //计算居中的矩形范围
        rect.left = width / 2 - mImage.getWidth() / 2;
        rect.right = width / 2 + mImage.getWidth() / 2;
        rect.top = (height - mBound.height()) / 2 - mImage.getHeight() / 2;
        rect.bottom = (height - mBound.height()) / 2 + mImage.getHeight() / 2;

        canvas.drawBitmap(mImage, null, rect, paint);
    }

}