自定义图片、文字组合控件

效果







<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="CustomImageView">
<attr name="titleText"/>
<attr name="titleTextColor"/>
<attr name="titleTextSize"/>
<attr name="image"/>
<attr name="imageScaleType"/>
</declare-styleable>

package yu.cai.myview.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.text.TextPaint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;

import yu.cai.myview.R;

/**
* Created by 蔡宇奎 on 2017-7-5.
*/

public class CustomImageView extends View {
private static final String TAG = "CustomImageView";
private String mTitleText;
private int mTitleTextColor;
private float mTitleTextSize;
private int mImageResourse;
private int mScaleType;
private Bitmap mImageBitmap;
private Rect mTitleBound;
private Rect rect;
private Paint mPaint;

private static final int IMAGE_SCALE_FITXY = 0;

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

public CustomImageView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}

public CustomImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyleAttr, 0);
mTitleText = typedArray.getString(R.styleable.CustomImageView_titleText);

mTitleTextColor = typedArray.getColor(R.styleable.CustomImageView_titleTextColor, Color.BLACK);

mTitleTextSize = typedArray.getDimensionPixelSize(R.styleable.CustomImageView_titleTextSize,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));

mImageResourse = typedArray.getResourceId(R.styleable.CustomImageView_image, R.mipmap.ic_launcher);
mImageBitmap = BitmapFactory.decodeResource(getResources(), mImageResourse);

mScaleType = typedArray.getInt(R.styleable.CustomImageView_imageScaleType, IMAGE_SCALE_FITXY);

typedArray.recycle();

initPaint();
}

private void initPaint() {
rect = new Rect();

mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setTextSize(mTitleTextSize);
mTitleBound = new Rect();
// 计算了描绘字体需要的范围
mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mTitleBound);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);

int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
Log.e(TAG, "onMeasure: widthSize:" + widthSize + ",heightSize:" + heightSize);
Log.e(TAG, "onMeasure: mImageBitmap.getWidth()" + mImageBitmap.getWidth() + ",mImageBitmap.getHeight()" + mImageBitmap.getHeight());
Log.e(TAG, "onMeasure: mTitleBound.width():" + mTitleBound.width() + ",mTitleBound.height():" + mTitleBound.height());
int width;
int height;
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
int imgWidth = mImageBitmap.getWidth() + getPaddingLeft() + getPaddingRight();
int textWidth = mTitleBound.width() + getPaddingLeft() + getPaddingRight();
int desire = Math.max(imgWidth, textWidth);
width = Math.min(desire, widthSize);
}

/**
* 设置高度
*/
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
int desireHeight = mImageBitmap.getHeight() + mTitleBound.height() + getPaddingTop() + getPaddingBottom();
height = Math.min(desireHeight, heightSize);
}
setMeasuredDimension(width, height);
Log.e(TAG, "onMeasure: width:" + width + ",height:" + height);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(5);
mPaint.setColor(Color.CYAN);

canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);

rect.left = getPaddingLeft();
rect.right = getWidth() - getPaddingRight();
rect.top = getPaddingTop();
rect.bottom = getHeight() - getPaddingBottom();

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

//去掉文字所占高度
rect.bottom -= mTitleBound.height();

if (mScaleType == IMAGE_SCALE_FITXY) {
canvas.drawBitmap(mImageBitmap, null, rect, mPaint);
} else {
//居中矩形
rect.left = getWidth() / 2 - mImageBitmap.getWidth() / 2;
rect.right = getWidth() / 2 + mImageBitmap.getWidth() / 2;
rect.top = (getHeight() - mTitleBound.height()) / 2 - mImageBitmap.getHeight() / 2;
if (getHeight() > mImageBitmap.getHeight()) { //如果图片的高度大于控件高度，文字会不显示
rect.bottom = (getHeight() - mTitleBound.height()) / 2 + mImageBitmap.getHeight() / 2;
} else {
rect.bottom = getHeight() - mTitleBound.height();
}

Log.e(TAG, "rect.left:" + rect.left + ",rect.right:" + rect.right + ",rect.top:" + rect.top + ",rect.bottom" + rect.bottom);
canvas.drawBitmap(mImageBitmap, null, rect, mPaint);
}

Log.e(TAG, "onDraw: rect.height" + rect.height());

/**
* 当文字的宽度，大于控件的宽度时
*/
if (mTitleBound.width() > getWidth()) {
TextPaint paint = new TextPaint(mPaint);
String msg = TextUtils.ellipsize(mTitleText, paint, (float) getWidth() - getPaddingLeft() - getPaddingRight(),
TextUtils.TruncateAt.MARQUEE).toString();
canvas.drawText(msg, getPaddingLeft(), getHeight() - getPaddingBottom(), mPaint);
} else {
if (mScaleType == IMAGE_SCALE_FITXY) {
canvas.drawText(mTitleText, getWidth() / 2 - mTitleBound.width() / 2, getHeight() - getPaddingBottom(), mPaint);
} else {
int textHeight = 0;
if(getHeight() > mImageBitmap.getHeight()){
//使文字在剩余空间内居中显示
textHeight = (getHeight() - ((getHeight() - mTitleBound.height()) / 2 + mImageBitmap.getHeight() / 2)) / 2 + (getHeight() - mTitleBound.height()) / 2 + mImageBitmap.getHeight() / 2 + mTitleBound.height() / 2;
}else{
textHeight = getHeight() - getPaddingBottom();
}
Log.e(TAG, "textHeight:" + textHeight);
canvas.drawText(mTitleText, getWidth() / 2 - mTitleBound.width() / 2, textHeight, mPaint);
}
}

}
}

<yu.cai.myview.widget.CustomImageView
android:layout_width="200dp"
android:layout_height="300dp"
android:la
4000
yout_centerInParent="true"
app:titleText="蔡宇奎"
app:titleTextColor="@color/colorAccent"
app:imageScaleType="fillXY"
app:image="@mipmap/parallax_img"/>