安卓自定义view
一、自定义View
- 优点：控件最自由的实现方法，能自由控制整个View的实现
- 缺点：比较复杂，需要正确测量View的尺寸
手动绘制各种视觉效果、工作量大
本次学习的内容就是通过继承View来实现一个简单的ImageView，它能够根据用户设置的大小使得图片在任何尺寸下都能正常显示。
下面先上效果图片：
1.首先创建继承自View的SimpleView类
package com.example.customviewapplication;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
public class SimpleView extends View {
private Paint mBitmapPaint;
private Drawable mDrawable;
private int mWidth;
private int mHeight;
public SimpleView(Context context) {
this(context,null);
}
public SimpleView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public SimpleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initAttrs(attrs);
mBitmapPaint = new Paint();
mBitmapPaint.setAntiAlias(true);
}
private void initAttrs(AttributeSet attrs) {
if(attrs !=null){
//首先赋值
TypedArray array = null;
try{
array =
getContext().obtainStyledAttributes(attrs,R.styleable.SimpleImageView);
//根据图片id获取到drawable对象
mDrawable = array.getDrawable(R.styleable.SimpleImageView_src);
//测量drawable对象的宽高
measureDrawable();
}finally {
if (array != null) {
//然后回收
array.recycle();
}
}
}
}
在构造函数中获取该控件的属性，初始化要绘制的图片与画笔。
2.在Values目录下新建attr.xml文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="SimpleImageView">
<attr name="src" format="integer" />
</declare-styleable>
</resources>
3.在我们的activity_main.xml中引入我们的attr.xml文件，并且设置图片资源
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.example.customviewapplication.SimpleView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:src = "@drawable/pic_2"/>
</LinearLayout>
4.测量图片的大小
private void measureDrawable() {
if(mDrawable == null){
throw new RuntimeException("drawable不能为空");
}
mWidth = mDrawable.getIntrinsicWidth();
mHeight = mDrawable.getMinimumHeight();
}
当我们运行程序时，首先会从布局信息中解析SimpleView，获取属性，进入SimpleView后会首先调用initAttrs函数进行初始化。
mWidth、mHeight分别表示视图的宽度、高度。我们在xml文件中对应的Drawable得到了图片的宽高，图片有多大，我们的SimpleView就多大。在SimpleView被加载的时候，会调用onMeasuer函数来测量大小，然后再绘制
5.绘制视图内容
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//设置图片的宽高
setMeasuredDimension(mWidth,mHeight);
}
@Override
protected void onDraw(Canvas canvas) {
if (mDrawable == null) {
return;
}
//绘制图片
canvas.drawBitmap(ImageUtils.drawableToBitmap(mDrawable),
getLeft(),getTop(),mBitmapPaint);
}
到这一步就可以运行我们的程序了。
二、View尺寸的测量
为了支持用户自定义设置宽与高 我们需要根据用户的设置测量View的尺寸。效果如下图：
1.我们继续继续使用上文代码，这里我们要对onMeasure改写
定义变量
private int mWidth;
private int mHeight;
改写
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//宽度模式与大小
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
//高度模式与大小
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
//设置view的宽高
setMeasuredDimension(measureWidth(widthMode,width),measureHeight(heightMode,height));
}
private int measureWidth(int mode, int width) {
switch (mode){
case MeasureSpec.UNSPECIFIED:
case MeasureSpec.AT_MOST:
break;
case MeasureSpec.EXACTLY:
mWidth = width;
break;
}
return mWidth;
}
private int measureHeight(int mode, int height) {
switch (mode){
case MeasureSpec.UNSPECIFIED:
case MeasureSpec.AT_MOST:
break;
case MeasureSpec.EXACTLY:
mHeight = height;
break;
}
return mHeight;
}
在onMeasure函数中获取宽、高的模式与大小后，分别调用measureWidth、measureHeight函数根据MeasureSpec的mode与大小计算View的具体大小。在MeasureSpec.AT_MOST
与MeasureSpec.UNSPECIFIED类型中，讲View的宽度高度设置为图片的宽度高度，当用户指定时，他的模式为EXACTLY，这样就会根据View的大小重新创建一个图片。
2.修改绘制代码
private Bitmap mBitmap;
@Override
protected void onDraw(Canvas canvas) {
if (mBitmap == null) {
mBitmap = Bitmap.createScaledBitmap(ImageUtils.drawableToBitmap(mDrawable),
getMeasuredWidth(),getMeasuredHeight(),true);
}
//绘制图片
canvas.drawBitmap(mBitmap,getLeft(),getTop(),mBitmapPaint);
}
三、Canvas与Paint（画布与画笔）
简单的在视图中绘制一个竖向文本，
//保存画布状态
canvas.save();
//旋转90度
canvas.rotate(90);
//绘制文字
mBitmapPaint.setColor(Color.YELLOW);
mBitmapPaint.setTextSize(300);
canvas.drawText("黑猫警长",getLeft() +50,getTop() -50,mBitmapPaint);
canvas.restore();
这里有一个问题，drawText函数默认是横向绘制的，为了达到我们预期的效果，需要首先将画布旋转90度，这时候原点在左下角，向右方向x递增，向下则为y递增。假设原点为0，那么文本起始坐标就为（50，-50），x越大越靠右，y越小就越向上偏移。绘制完文本之后再将画布还原，此时就能得到我们想要的效果了！
git代码地址：
