前面两篇博客,把View绘制的方法说了一下,但是,我们只在onDraw里面做文章,控件都是直接传入一个Context,还不能在布局文件里使用自定义View。这一篇博客,就不再讲绘制,在我们原先的基础上,真正实现一个可用的View。
方案:
1、在attrs.xml文件中添加View的自定义属性。
2、继承一个已有的View,比如Button,这样就不要考虑onMeasure方法的内容,因为安卓自带的View肯定已经把它写好了。
3、继承一个View,我们自己设计,实现View的全部功能。
自定义属性
首先,学会自定义属性,两个步骤1、配置attrs.xml文件,写入我们自定义属性;2、在View中引用我们的自定义属性。
配置attrs.xml文件
在res/values包下新建attrs.xml文件,配置好自定义控件名称、自定义属性名称。
我自定义了一个View,名叫RectView,自定义两个属性,rect_hight和rect_width,然后配置文件如下:
format的可选参数类型:
“reference” //引用
“color” //颜色
“boolean” //布尔值
“dimension” //尺寸值
“float” //浮点值
“integer” //整型值
“string” //字符串
“fraction” //百分数,比如200%
使用自定义属性
在自定义View中获取自定义属性:
//获取TypedArray对象
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RectView);
//获取自定义属性
int mWidth = typedArray.getDimensionPixelSize(R.styleable.RectView_rect_width, 300);
//回收TypedArray
typedArray.recycle();
或者使用for循环遍历
int n = typedArray.getIndexCount();
for (int i = 0; i < n; i++) {
switch (typedArray.getIndex(i)){
case R.styleable.RectView_rect_width:
int mWidth = typedArray.getDimensionPixelSize(R.styleable.RectView_rect_width, 300);
break;
}
}
Demo
使用上面给出的attrs.xml文件,在布局文件中使用我们的自定义View,在使用自定义属性的时候,注意在布局中写这一行:xmlns:app=”http://schemas.android.com/apk/res-auto”,在Android Studio下输入App回车即可。
布局文件:
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:layout_width="200dp"
android:layout_height="200dp"
app:rect_width="150dp"
app:rect_hight="150dp"
android:background="@android:color/holo_blue_light"/>
自定义View代码:
/**
* 在布局文件中使用自定义View
* Created by ChenSS on 2016/11/24.
*/
public class RectView extends View {
private int mWidth, mHeight;
private Paint mPaint;
public RectView(Context context) {
this(context, null);
}
public RectView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RectView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取所需的控件参数
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RectView);
mWidth = typedArray.getDimensionPixelSize(R.styleable.RectView_rect_width, 300);
mHeight = typedArray.getDimensionPixelSize(R.styleable.RectView_rect_hight, 500);
mPaint = new Paint();
mPaint.setAntiAlias(true);
//注意回收
typedArray.recycle();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRoundRect(30, 30, mWidth, mHeight, 40, 20, mPaint);
}
}
实现的效果:
简单地实现了一个自定义控件,绘制一个圆角矩形,从效果图可以看出,layout_width和layout_height决定了View的大小(蓝色区域),而我们自定义的rect_width和rect_hight用于绘制我们自己的图形(黑色区域)。
自定义View方式一:继承已有的View
继承Button,直接拷贝Button的所有构造函数;
注意:调用3个参数的构造函数时,第三个参数使用:R.attr.buttonStyle,这样使用wrap_content的时候,显示的大小和默认Button相同;
绘制思路:使用Xfermode,先绘制圆角矩形,然后设置PorterDuff.Mode,再绘制位图,将位图中圆角矩形的部分显示出来;
也可以使用Shape的子类绘制圆角矩形。
/**
* 自定义圆角矩形ImageView
* Created by ChenSS on 2016/11/24.
*/
public class RectView extends Button {
private Paint mPaint;
private Bitmap mBitmap;
private PorterDuffXfermode xfermode;
//边框
private static final int RECT_BORDER=5;
//圆角
private static final int RECT_RADIO=10;
public RectView(Context context) {
this(context, null);
}
public RectView(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.buttonStyle);
}
public RectView(Context context, AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);
}
public RectView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
mBitmap = ViewHelper.findBitmapById(context, R.mipmap.view_shape);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.GRAY);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//位图改变大小
mBitmap=ViewHelper.zoomImage(mBitmap,getMeasuredWidth(),getMeasuredHeight());
//描边
canvas.drawRoundRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(),
RECT_BORDER+RECT_RADIO, RECT_BORDER+RECT_RADIO, mPaint);
//离屏缓存
int sc = canvas.saveLayer(0, 0, mBitmap.getWidth(), mBitmap.getHeight(), null, Canvas.ALL_SAVE_FLAG);
//图片遮罩
canvas.drawRoundRect(RECT_BORDER, RECT_BORDER,
mBitmap.getWidth()-RECT_BORDER, mBitmap.getHeight()-RECT_BORDER,
RECT_RADIO, RECT_RADIO, mPaint);
mPaint.setXfermode(xfermode);
canvas.drawBitmap(mBitmap,RECT_BORDER, RECT_BORDER, mPaint);
mPaint.setXfermode(null);
// 还原画布
canvas.restoreToCount(sc);
}
}
采用这种方式自定义View,实现起来就十分简单,直接在onDraw中调用getMeasuredWidth()、getMeasuredHeight()就可以了,不用我们多考虑什么。
自定义View方式二:继承View
如果是继承View,就要重新考虑一下View的大小了,在Xml布局中,会有3种情况:match_parent、wrap_content或者指定一个确切的大小,区分这些情况,我们就要考虑MeasureSpec的Mode了,Mode一共三种类型:
EXACTLY:一般是设置了明确的值,或者是MATCH_PARENT
AT_MOST:表示子布局限制在一个最大值内,一般为WARP_CONTENT
UNSPECIFIED:表示子布局想要多大就多大,如果你想绘制Listview这样的东西,就考虑使用吧
对上面的代码做一些修改,把继承Button改成继承View,如果不重写onMeasure方法,你会发现match_parent、wrap_content效果是一样的,下面代码简单地重写了一下onMeasure方法。
/**
* 继承View实现自定义控件
* Created by ChenSS on 2016/11/24.
*/
public class RectView extends View {
private Paint mPaint;
private Bitmap mBitmap;
private PorterDuffXfermode xfermode;
//边框
private static final int RECT_BORDER = 5;
//圆角
private static final int RECT_RADIO = 10;
//默认宽度
private static final int DEFAULT_WIDTH = 600;
//默认高度
private static final int DEFAULT_HEIGHT = 200;
public RectView(Context context) {
this(context, null);
}
public RectView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RectView(Context context, AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);
}
public RectView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
mBitmap = ViewHelper.findBitmapById(context, R.mipmap.view_shape);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.GRAY);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//位图改变大小
mBitmap = ViewHelper.zoomImage(mBitmap, getMeasuredWidth(), getMeasuredHeight());
//描边
canvas.drawRoundRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(),
RECT_BORDER + RECT_RADIO, RECT_BORDER + RECT_RADIO, mPaint);
//离屏缓存
int sc = canvas.saveLayer(0, 0, mBitmap.getWidth(), mBitmap.getHeight(), null, Canvas.ALL_SAVE_FLAG);
//图片遮罩
canvas.drawRoundRect(RECT_BORDER, RECT_BORDER,
mBitmap.getWidth() - RECT_BORDER, mBitmap.getHeight() - RECT_BORDER,
RECT_RADIO, RECT_RADIO, mPaint);
mPaint.setXfermode(xfermode);
canvas.drawBitmap(mBitmap, RECT_BORDER, RECT_BORDER, mPaint);
mPaint.setXfermode(null);
// 还原画布
canvas.restoreToCount(sc);
}
@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);
int width;
int height;
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
width = DEFAULT_WIDTH;
}
if (heightMode == MeasureSpec.EXACTLY) {
height=heightSize;
} else {
height = DEFAULT_HEIGHT;
}
setMeasuredDimension(width, height);
}
}
自定义View进阶:Java代码修改View的显示
有时候,我们会有这样的需求,当我们点击图片的时候,会有一个新的图片替换掉旧的,其中的关键方法是postInvalidate(),在调用postInvalidate()之前,我们需要对参数进行一些设置,调用postInvalidate()之后,onDraw中的内容会重新执行一遍。自定义View的其它方法请参考:自定义View常用方法汇总
Demo:
/**
* 继承View实现自定义控件
* Created by ChenSS on 2016/11/24.
*/
public class RectView extends View {
private Paint mPaint;
private Bitmap mBitmap;
private PorterDuffXfermode xfermode;
private Context mContext;
//边框
private static final int RECT_BORDER = 5;
//圆角
private static final int RECT_RADIO = 10;
//默认宽度
private static final int DEFAULT_WIDTH = 600;
//默认高度
private static final int DEFAULT_HEIGHT = 200;
public RectView(Context context) {
this(context, null);
}
public RectView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RectView(Context context, AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);
}
public RectView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
mContext=context;
xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
mBitmap = ViewHelper.findBitmapById(context, R.mipmap.view_shape);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.GRAY);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//位图改变大小
mBitmap = ViewHelper.zoomImage(mBitmap, getMeasuredWidth(), getMeasuredHeight());
//描边
canvas.drawRoundRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(),
RECT_BORDER + RECT_RADIO, RECT_BORDER + RECT_RADIO, mPaint);
//离屏缓存
int sc = canvas.saveLayer(0, 0, mBitmap.getWidth(), mBitmap.getHeight(), null, Canvas.ALL_SAVE_FLAG);
//图片遮罩
canvas.drawRoundRect(RECT_BORDER, RECT_BORDER,
mBitmap.getWidth() - RECT_BORDER, mBitmap.getHeight() - RECT_BORDER,
RECT_RADIO, RECT_RADIO, mPaint);
mPaint.setXfermode(xfermode);
canvas.drawBitmap(mBitmap, RECT_BORDER, RECT_BORDER, mPaint);
mPaint.setXfermode(null);
// 还原画布
canvas.restoreToCount(sc);
}
@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);
int width;
int height;
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
width = DEFAULT_WIDTH;
}
if (heightMode == MeasureSpec.EXACTLY) {
height=heightSize;
} else {
height = DEFAULT_HEIGHT;
}
setMeasuredDimension(width, height);
}
/**
* 修改图片
*@param drawableId 图片资源ID
*/
public void setBitmap(int drawableId){
mBitmap.recycle();
mBitmap = ViewHelper.findBitmapById(mContext, drawableId);
if(mBitmap.isRecycled())
return;
postInvalidate();
}
}
上面的代码中,我们添加了一个setBitmap方法,这个方法用于获取本地的图片Id,然后修改自定义View中的mBitmap对象,然后调用postInvalidate()方法进行View的重新绘制。
在Activity中修改View的显示
public class RectActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_rect);
final RectView rectView= (RectView) findViewById(R.id.rect_id);
rectView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//替换背景
rectView.setBitmap(R.mipmap.view_robot);
}
});
}
}
点击前:
点击后: