Android 自定义View (ImageView )

如果你还认为自己还年轻，还可以蹉跎岁月的话，你终将一事无成，老来叹息。

本讲内容：自定义View(可以在布局文件多次用)

示例一：自定义View显示一张图片，下面包含图片的文本介绍

下面是res/layout/activity_main.xml 布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.example.customview2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.view.CustomImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:padding="5dp"
        custom:image="@drawable/a"
        custom:imageScaleType="center"
        custom:titleText="hello Lin"
        custom:titleTextColor="#ff00ff"
        custom:titleTextSize="30sp" />

    <com.view.CustomImageView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="12dp"
        android:padding="5dp"
        custom:image="@drawable/b"
        custom:imageScaleType="center"
        custom:titleText="Are you sleeping.Lin"
        custom:titleTextColor="#ff0000"
        custom:titleTextSize="25sp" />

    <com.view.CustomImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:padding="5dp"
        custom:image="@drawable/c"
        custom:imageScaleType="center"
        custom:titleText="四眼妹^~^"
        custom:titleTextColor="#00ff00"
        custom:titleTextSize="20sp" />

</LinearLayout>

下面是res/values/attrs.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>

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

</resources>

下面是自定义CustomTitleView.java文件：

public class CustomImageView extends View {
	// 控件的宽
	private int mWidth;
	// 控件的高
	private int mHeight;
	// 控件中的图片
	private Bitmap mImage;
	// 图片的缩放模式
	private int mImageScale;

	private static final int IMAGE_SCALE_FILLXY = 0;
	private static final int IMAGE_SCALE_CENTER = 1;

	// 图片的介绍
	private String mTitle;
	// 字体的颜色
	private int mTextColor;
	// 字体的大小
	private int mTextSize;

	private Paint mPaint;

	// 对文本的约束
	private Rect mTextBound;

	// 控制整体布局
	private Rect rect;

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

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

	// 初始化所特有自定义类型
	public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
				R.styleable.CustomImageView, defStyle, 0);
		int n = a.getIndexCount();

		for (int i = 0; i < n; i++) {
			int attr = a.getIndex(i);

			switch (attr) {
			case R.styleable.CustomImageView_image:
				mImage = BitmapFactory.decodeResource(getResources(),a.getResourceId(attr, 0));
				break;
			case R.styleable.CustomImageView_imageScaleType:
				mImageScale = a.getInt(attr, 0);
				break;
			case R.styleable.CustomImageView_titleText:
				mTitle = a.getString(attr);
				break;
			case R.styleable.CustomImageView_titleTextColor:
				mTextColor = a.getColor(attr, Color.BLACK);
				break;
			case R.styleable.CustomImageView_titleTextSize:
				mTextSize = a.getDimensionPixelSize(attr, (int) TypedValue
						.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16,
								getResources().getDisplayMetrics()));
				break;
			}
		}
		a.recycle();

		rect = new Rect();
		mPaint = new Paint();
		mTextBound = new Rect();
		mPaint.setTextSize(mTextSize);
		// 计算了描绘字体需要的范围
		mPaint.getTextBounds(mTitle, 0, mTitle.length(), mTextBound);
	}

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

		if (specMode == MeasureSpec.EXACTLY) {// match_parent , accurate
			mWidth = specSize;
		} else {
			// 由图片决定的宽
			int desireByImg = getPaddingLeft() + getPaddingRight() + mImage.getWidth();
			// 由字体决定的宽
			int desireByTitle = getPaddingLeft() + getPaddingRight()
					+ mTextBound.width();

			if (specMode == MeasureSpec.AT_MOST) {// wrap_content
				int desire = Math.max(desireByImg, desireByTitle);
				mWidth = Math.min(desire, specSize);
			}
		}

		// 设置高度
		specMode = MeasureSpec.getMode(heightMeasureSpec);
		specSize = MeasureSpec.getSize(heightMeasureSpec);
		if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
		{
			mHeight = specSize;
		} else {
			int desire = getPaddingTop() + getPaddingBottom() + mImage.getHeight() + mTextBound.height();
			if (specMode == MeasureSpec.AT_MOST)// wrap_content
			{
				mHeight = Math.min(desire, specSize);
			}
		}
		setMeasuredDimension(mWidth, mHeight);

	}

	protected void onDraw(Canvas canvas) {
		// super.onDraw(canvas);
		// 边框
		mPaint.setStrokeWidth(4);
		mPaint.setStyle(Paint.Style.STROKE);
		mPaint.setColor(Color.CYAN);
		canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);

		rect.left = getPaddingLeft();
		rect.right = mWidth - getPaddingRight();
		rect.top = getPaddingTop();
		rect.bottom = mHeight - getPaddingBottom();

		mPaint.setColor(mTextColor);
		mPaint.setStyle(Style.FILL);

		// 当前设置的宽度小于字体需要的宽度，将字体改为xxx...
		if (mTextBound.width() > mWidth) {
			TextPaint paint = new TextPaint(mPaint);
			String msg = TextUtils.ellipsize(mTitle, paint,
					(float) mWidth - getPaddingLeft() - getPaddingRight(),
					TextUtils.TruncateAt.END).toString();
			canvas.drawText(msg, getPaddingLeft(),
					mHeight - getPaddingBottom(), mPaint);

		} else {
			// 正常情况，将字体居中
			canvas.drawText(mTitle, mWidth / 2 - mTextBound.width() * 1.0f / 2,
					mHeight - getPaddingBottom(), mPaint);
		}

		// 取消使用掉的快
		rect.bottom -= mTextBound.height();

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

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

	}

}

下面是MainActivity.java主界面文件：

public class MainActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		//要写在R.layout.activity_main前面，否则会报错
		requestWindowFeature(Window.FEATURE_NO_TITLE); 
		setContentView(R.layout.activity_main);
	}
}

Take your time and enjoy it 顶一个呗~