Android 自定义View

Posted 2020-09-21 蜗牛慢慢

　　最近在看鸿洋大神的博客，在看到自定义部分View部分时，想到之前案子中经常会要用到"图片 + 文字"这类控件，如下图所示：

    之前的做法是在布局文件中，将一个Image & TextView组件放在LinearLayout/RelativeLayout中。今天就尝试了通过自定义View的方式来实现"图片 + 文字"组件。

　　首先在/res/value/目录下新建attrs.xml文件，在该文件中为CustomTextView定义以下几个attr。分别为

　　1.文字内容-titleText 2.文字颜色-titleTextColor 3.文字大小-titleTextSize

　　4.图像内容-image 5.图像宽度-imageWidth 6.图像高度-imageHeight 7.图像显示模式-imageScaleType

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--define some attrs for custom view-->

    <attr name="titleText" format="string"/>
    <attr name="titleTextColor" format="color"/>
    <attr name="titleTextSize" format="dimension"/>
    <attr name="image" format="reference"/>
    <attr name="imageWidth" format="dimension"/>
    <attr name="imageHeight" format="dimension"/>
    <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" />
        <attr name="imageWidth"/>
        <attr name="imageHeight"/>
    </declare-styleable>
</resources>

　　下面就是CustomTextView.java内容：

package com.example.steve.customizedview;

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.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

/**
 * Created by steve on 17-6-2.
 */

public class CustomTextView extends View {
    /**
     * 文本
     */
    private String mTitleText;
    /**
     * 文本的颜色
     */
    private int mTitleTextColor;
    /**
     * 文本的大小
     */
    private int mTitleTextSize;

    /**
     * 图片
     */
    private Bitmap mImage;
    private int mImageWidth;
    private int mImageHeight;
    /**
     * 图片显示模式
     */
    private int mImageScaleType;
    /**
     * 绘制时控制文本绘制的范围
     */
    private Rect mBound;
    private Paint mPaint;
    /**
     * Canvas大小
     */
    private int mWidth;
    private int mHeight;

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

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

    public CustomTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomTextView, defStyleAttr, 0);
        int count = a.getIndexCount();
        for (int i = 0; i < count; i++)
        {
            int attr = a.getIndex(i);
            switch (attr)
            {
                case R.styleable.CustomTextView_titleText:
                    mTitleText = a.getString(attr);
                    break;
                case R.styleable.CustomTextView_titleTextColor:
                    mTitleTextColor = a.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.CustomTextView_titleTextSize:
                    mTitleTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CustomTextView_image:
                    mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
                    break;
                case R.styleable.CustomTextView_imageScaleType:
                    mImageScaleType = a.getInt(attr, 0);
                    break;
                case R.styleable.CustomTextView_imageWidth:
                    mImageWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 24, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CustomTextView_imageHeight:
                    mImageHeight = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_DIP, 32, getResources().getDisplayMetrics()));
                    break;
            }

        }
        a.recycle();

        // 如果设置图片的宽和高的话，需要对原始图片进行缩放处理
        if (mImageWidth > 0 && mImageHeight > 0) {
            mImage = zoomImg(mImage, mImageWidth, mImageHeight);
        }

        mPaint = new Paint();
        mPaint.setTextSize(mTitleTextSize);
        mBound = new Rect();
        mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
    }

    public Bitmap zoomImg(Bitmap bm, int newWidth ,int newHeight){
        // 获得图片的宽高
        int width = bm.getWidth();
        int height = bm.getHeight();
        // 计算缩放比例
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        // 取得想要缩放的matrix参数
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        // 得到新的图片
        Bitmap newbm = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, true);
        return newbm;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //设置宽度
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specWidth = MeasureSpec.getSize(widthMeasureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            mWidth = specWidth;
        } else {
            int desireByImg = getPaddingLeft() + getPaddingRight() + mImage.getWidth();
            int desireByTitle = getPaddingLeft() + getPaddingRight() + mBound.width();
            if (specMode == MeasureSpec.AT_MOST) {
                int desireWidth = Math.max(desireByImg, desireByTitle);//取两者之间的最大值
                mWidth = Math.min(desireWidth, specWidth);
            }
        }

        //设置高度
        specMode = MeasureSpec.getMode(heightMeasureSpec);
        int specHight = MeasureSpec.getSize(heightMeasureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            mHeight = specHight;
        } else {
            int desireHight = getPaddingTop() + getPaddingBottom() + mImage.getHeight() + mBound.height();
            if (specMode == MeasureSpec.AT_MOST) {
                mHeight = Math.min(desireHight, specHight);
            }
        }
        setMeasuredDimension(mWidth, mHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Rect rect = new Rect();
        rect.left = getPaddingLeft();
        rect.right = mWidth - getPaddingRight();
        rect.top = getPaddingTop();
        rect.bottom = mHeight - getPaddingBottom();

        mPaint.setColor(mTitleTextColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTypeface(Typeface.DEFAULT_BOLD);//设置字体样式
        canvas.drawText(mTitleText, mWidth / 2 - mBound.width() * 1.0f / 2, mHeight - getPaddingBottom(), mPaint);

        rect.bottom = - mBound.height();//重新计算rect的高度，即减去字体占用的空间

        if (mImageScaleType == 1)
        {
            canvas.drawBitmap(mImage, null, rect, mPaint);
        } else
        {
            //计算居中的矩形范围
            rect.left = mWidth / 2 - mImage.getWidth() / 2;
            rect.right = mWidth / 2 + mImage.getWidth() / 2;
            rect.top = (mHeight - mBound.height()) / 2 - mImage.getHeight() / 2;
            rect.bottom = (mHeight - mBound.height()) / 2 + mImage.getHeight() / 2;

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

}

　　布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.steve.customizedview.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/custom_view_height"
        android:background="#F0F0F0">
        <com.example.steve.customizedview.CustomTextView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:paddingBottom="5dp"
            custom:titleText="@string/delete_text"
            custom:titleTextColor="#5C5C5C"
            custom:titleTextSize="12sp"
            custom:image="@drawable/delete_n"
            custom:imageWidth="28dp"
            custom:imageHeight="28dp"/>
        />
    </RelativeLayout>
</RelativeLayout>

　　该文章内容基本上都是参考http://blog.csdn.net/lmj623565791/article/details/24252901/，有兴趣的可以直接看鸿洋大神的blog。