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

效果






    <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:layout_centerInParent="true"
        app:titleText="蔡宇奎"
        app:titleTextColor="@color/colorAccent"
        app:imageScaleType="fillXY"
        app:image="@mipmap/parallax_img"/>


猜你喜欢

转载自blog.csdn.net/cai784921129/article/details/74550286