使用 Android Studio自定义View02——图文混排的View

整理总结自鸿洋的博客：http://blog.csdn.net/lmj623565791/article/details/24300125

com.cctvjiatao.customview02.act.MainActivity.java

/**
 * 自定义的View结构为：上部是图片，下部是文字。注意图文混排的宽度的取值、图片显示的方式。
 */
public class MainActivity extends Activity {

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

res/values/attrs.xml

res/layout/activity_main.xml

com.cctvjiatao.customview02.view.ImgAndText.java

public class ImgAndText extends View {

    //自定义属性
    private String mTitle;
    private int mTitleColor;
    private int mTitleSize;
    private Bitmap mImage;
    private int mImageScaleType;

    //常规属性
    private static final int IMAGE_SCALE_FITXY = 0;
    private static final int IMAGE_SCALE_CENTER = 1;
    private int width;//view的宽
    private int height;//view的高
    private Rect mRect;//view的整体区域
    private Rect mTitleBound;//title的区域
    private Paint mPaint;

    public ImgAndText(Context context) {
        this(context, null);
    }

    public ImgAndText(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ImgAndText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ImgAndText, defStyleAttr, 0);
        int n = typedArray.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.ImgAndText_title:
                    mTitle = typedArray.getString(attr);
                    break;
                case R.styleable.ImgAndText_titleColor:
                    mTitleColor = typedArray.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.ImgAndText_titleSize:
                    mTitleSize = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                            16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.ImgAndText_image:
                    mImage = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(attr, 0));
                    break;
                case R.styleable.ImgAndText_imageScaleType:
                    mImageScaleType = typedArray.getInt(attr, 0);
                    break;
            }
        }
        typedArray.recycle();
        mRect = new Rect();
        mPaint = new Paint();
        mTitleBound = new Rect();
        mPaint.setTextSize(mTitleSize);
        mPaint.getTextBounds(mTitle, 0, mTitle.length(), mTitleBound);//title的绘制区域
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int specMode, specSize;

        //设置宽度
        specMode = MeasureSpec.getMode(widthMeasureSpec);
        specSize = MeasureSpec.getSize(widthMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            width = specSize;
        } else {
            int widthImg = getPaddingLeft() + mImage.getWidth() + getPaddingRight();//图片的宽度
            int widthTitle = getPaddingLeft() + mTitleBound.width() + getPaddingRight();//title的宽度
            if (specMode == MeasureSpec.AT_MOST) {
                width = Math.min(Math.max(widthImg, widthTitle), specSize);
            }
        }

        //设置高度
        specMode = MeasureSpec.getMode(heightMeasureSpec);
        specSize = MeasureSpec.getSize(heightMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            height = specSize;
        } else {
            int heightImgAndTitle = getPaddingTop() + mImage.getWidth() + mTitleBound.height() + getPaddingBottom();//图片+Title的高度
            if (specMode == MeasureSpec.AT_MOST) {
                height = Math.min(heightImgAndTitle, specSize);
            }
        }

        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        //绘制边框
        mPaint.setStrokeWidth(4);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.CYAN);
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);

        //图片和文字
        mRect.left = getPaddingLeft();
        mRect.right = width - getPaddingRight();
        mRect.top = getPaddingTop();
        mRect.bottom = height - getPaddingBottom();

        mPaint.setColor(mTitleColor);
        mPaint.setStyle(Paint.Style.FILL);

        //文字
        if (width > mTitleBound.width()) {//如果 view宽度大于title的宽度，则tltle居中显示
            canvas.drawText(mTitle, width / 2 - mTitleBound.width() * 1.0f / 2, height - getPaddingBottom(), mPaint);
        } else {//如果 view宽度小于title的宽度，则tltle缩略形式显示
            TextPaint textPaint = new TextPaint(mPaint);
            String msg = TextUtils.ellipsize(mTitle, textPaint, width - getPaddingLeft() - getPaddingRight(), TextUtils.TruncateAt.END).toString();
            canvas.drawText(msg, getPaddingLeft(), height - getPaddingBottom(), mPaint);
        }

        //图片
        mRect.bottom -= mTitleBound.height();//减掉被title用掉的高度
        if (mImageScaleType == IMAGE_SCALE_FITXY) {
            canvas.drawBitmap(mImage, null, mRect, mPaint);
        } else {
            mRect.left = width / 2 - mImage.getWidth() / 2;
            mRect.right = width / 2 + mImage.getWidth() / 2;
            mRect.top = height / 2 - mTitleBound.height() / 2 - mImage.getHeight() / 2;
            mRect.bottom = height / 2 - mTitleBound.height() / 2 + mImage.getWidth() / 2;
            canvas.drawBitmap(mImage, null, mRect, mPaint);
        }
    }
}

程序运行结果如图：