首先我们先来实现一个很简单的圆形自定义View
1.继承View并且重写onDraw方法
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
public class CircleView extends View {
//声明画笔颜色
private int mColor = Color.RED;
//声明画笔并设置抗锯齿
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
public CircleView(Context context) {
super(context);
init();
}
private void init() {
mPaint.setColor(mColor);
}
public CircleView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
int radius = Math.min(width,height)/2;
canvas.drawCircle(width/2,height/2,radius,mPaint);
}
}
此时一个圆形效果的自定义View已经写好了,它会一自己的宽/高的最小值来绘制一个红色的实心圆。
在把它放入布局文件中
<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.sihan.myview.CircleView
android:id="@+id/circleView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#000000"></com.sihan.myview.CircleView>
</LinearLayout>
如下图所示一个红色的实心圆就已经生成了
下面再来设置margin属性 为其设置20dp 效果如下
此时可以发现margin属性是生效的。因为margin属性是由父容器控制的。因此不需要特殊处理。
再来为其设置20dp的padding。效果如下
此时我们可以发现padding属性根本没有达到预期的效果,所以需要在代码中对padding进行处理。
再来设置宽度为wrap_content。我们也可以发现跟使用match_parent根本没有任何区别。 这一点是因为对直接继承View的控件,如果不对wrap_content做特殊处理,那么wrap_content就相当于matchParent。
解决warp_content
先处理wrap_content,为什么wrap_content的效果和match_parent一样呢?简单说:在View类中,当该View的布局宽高值为wrap_content,或match_parent时,该View测量的最终大小就是MeasureSpec中的测量大小–>SpecSize。因此,在自定义View时,需要重写onMeasure(w,h)用来处理wrap_content的情况,然后调用setMeasuredDimession(w,h)完成测量。若需要从源码角度了解该原理,可以先全面了解下onMeasure,就比较好理解这里的结论了。见文章Android自定义控件之测量onMeasure
下面,我们设定:当布局宽为wrap_content时,设置specSize为400px;当布局高为wrap_content时,设置specSize为200px。于是重写onMeasure(w,h)代码如下:
//两个参数是父View给的测量建议值MeasureSpec,代码执行到onMeasure(w,h),说明MyCircleView的measure(w,h)在执行中
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);//宽的测量大小,模式
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);//高的测量大小,模式
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int w = widthSpecSize; //定义测量宽,高(不包含测量模式),并设置默认值,查看View#getDefaultSize可知
int h = heightSpecSize;
//处理wrap_content的几种特殊情况
if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
w = 400; //单位是px
h = 200;
} else if (widthSpecMode == MeasureSpec.AT_MOST) {
//只要宽度布局参数为wrap_content, 宽度给固定值200dp(处理方式不一,按照需求来)
w = 400;
//按照View处理的方法,查看View#getDefaultSize可知
h = heightSpecSize;
} else if (heightSpecMode == MeasureSpec.AT_MOST) {
w = widthSpecSize;
h = 200;
}
//给两个字段设置值,完成最终测量
setMeasuredDimension(w, h);
}
解决Padding
针对padding的问题我们可以在onDraw的时候稍微修改一下就好
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
final int paddingLeft = getPaddingLeft();
final int paddingRight = getPaddingRight();
final int paddingTop = getPaddingTop();
final int paddingBottom = getPaddingBottom();
int width = getWidth() - paddingLeft - paddingRight;
int height = getHeight() -paddingBottom - paddingTop;
int radius = Math.min(width,height)/2;
canvas.drawCircle(paddingLeft+width/2,paddingTop+height/2,radius,mPaint);
}
以下是上面两个问题解决之后的效果
自定义属性
1.在value下创建自定义属性attrs.xml,文件内容如下
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CircleView">
<attr name="circle_color" format="color"/>
</declare-styleable>
</resources>
在上面xml文件中声明了一个自定义属性集合“CircleView",在这个集合里可以很多由自定义属性,这里color值的是颜色。除了颜色格式,自定义属性还有其他格式,比如reference是指资源id,dimmension是指尺寸,而像string, integer和boolean这种是指基本属性类型。
2.在View的构造方法中解析自定义属性的指并做响应的处理
public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.CircleView);
mColor = a.getColor(R.styleable.CircleView_circle_color,Color.RED);
a.recycle();
init();
}
首先加载自定义属性集合CircleView,接着解析CircleView属性集合中的circle_color属性。在这一步骤中如果没有指定颜色则选择红色。
效果就不演示了,偷懒~