在自定义控件(一)中呢,大家已经对自定义控件有了一个基本的认识,今天就和大家分享一下如何自定义类继承view来实现我们的功能。
需求
效果图如上图所示,要求如下:
- 背景颜色从上到下由深变浅。
- 小黄点的数量从上到下由多到少。
- 小黄点的颜色大小随机。
- 该控件可分为5个等级,最佳为背景全白,没有小黄点。最严重为颜色最深,小黄点最多。
好,需求就是这个样子。看到这里呢,希望小伙伴们先不要着急往下看,可以设身处地的想一想,如果是自己做的话,要怎样实现。
实现方案
接下来跟大家分享一下我的实现方案。看到这个需求我想到的方案有两个。
- 把每一颗牙齿作为一个单位,我们去控制单个牙齿的背景色和小黄点的数量。然后绘制出四颗牙齿,按顺序摆放。优点是可以比较精确的控制每颗牙齿的显示情况。缺点是每颗牙齿都要去绘制,需要自己去用画笔滑出牙齿的轮廓,背景和小黄点。
- 把四颗牙齿作为一个单位,分成上下两层。上层是一张中间透明,两边是白色的图片。下层是一个从上到下颜色由深到钱,小黄点由少到多的自定义view。通过绘制不同的背景层,显示我们要的效果。优点是只需要绘制背景即可实现我们要的功能,不需要去分别绘制每颗牙齿的轮廓。鉴于我们的需求,不需要精确到每颗牙齿,这里我们选择第二种实现方案。
具体实现
我们先梳理一下第二种实现方式需要用到的知识点
1.自定义类继承view实现自定义控件的步骤。
2.如何去测量控件的大小。
3.画笔的使用。
好,接下来我们来按步骤实现这个控件。
初始化
/**
* 定义两种模式,平均和渐变
*/
public enum MODE {
AVERAGE, SHADE
}
public Chart(Context context) {
super(context);
init();
}
public Chart(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public Chart(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
random = new Random();
isNull = false;
isBig = false;
deltaX = 20;
deltaY = 30;
bgAlpha = 50;
sizeY = 1;
floatY = 10;
de = 3;
mode = MODE.AVERAGE;
}
为了让小黄点从上到下由少到多的显示,我是这样实现的,随机生成一个0-20的初始Y轴坐标,然后绘制每列的小黄点。小黄点的间距是逐渐减小的,这样小黄点就会越来越密集。而X的坐标是一个初始值加上一个随机值,这样绘制出来的小黄点每两列间距也是随机的。显示效果会比较好看。
在初始化的方法里,我们初始化了一些x轴和y轴的初始数据。同时我定义了两种模式,一种是小黄点均匀分布,两一种是逐渐增多。
测量
系统帮我们测量的高度和宽度都是MATCH_PARNET,当我们设置明确的宽度和高度时,系统帮我们测量的结果就是我们设置的结果,当我们设置为WRAP_CONTENT,或者MATCH_PARENT系统帮我们测量的结果就是MATCH_PARENT的长度。
所以,当设置了WRAP_CONTENT时,我们需要自己进行测量,即重写onMesure方法”:
重写之前先了解MeasureSpec的specMode,一共三种类型:
EXACTLY:一般是设置了明确的值或者是MATCH_PARENT
AT_MOST:表示子布局限制在一个最大值内,一般为WARP_CONTENT
UNSPECIFIED:表示子布局想要多大就多大,很少使用
下面是测量的方法
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(getMeasuredLength(widthMeasureSpec, true, this), getMeasuredLength(heightMeasureSpec, false, this));
}
/**
* 根据布局模式计算宽高
*
* @param measureSpec
* @param isWidth
* @return
*/
public static int getMeasuredLength(int measureSpec, boolean isWidth, View view) {
int result;
int specMode = View.MeasureSpec.getMode(measureSpec);
int specSize = View.MeasureSpec.getSize(measureSpec);
if (specMode == View.MeasureSpec.EXACTLY) {
result = specSize;
} else {
if (isWidth) {
result = view.getPaddingLeft() + view.getPaddingRight();
} else {
result = view.getPaddingTop() + view.getPaddingBottom();
}
if (specMode == View.MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
绘制
@Override
protected void onDraw(Canvas canvas) {
//isNull为true,背景为纯白色,不显示牙菌斑
if (isNull) {
//填充背景颜色
mPaint.setColor(0xffffffff);
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
} else {
//填充背景颜色
mPaint.setColor(0xffFEF8ED);
//绘制点
// int canvasWidth = canvas.getWidth();
int canvasHeight = canvas.getHeight();
LinearGradient lg = new LinearGradient(0, 0, 0, canvasHeight, 0x7ff1b351, 0xfff1b351, Shader.TileMode.MIRROR);
mPaint.setShader(lg);
mPaint.setAlpha(bgAlpha);
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
int x = 0;
//绘制Cap为ROUND的点
mPaint.setStrokeCap(Paint.Cap.ROUND);
switch (mode) {
case AVERAGE:
for (int i = 0; i < 80; i++) {
int startX = deltaX + random.nextInt(10);//x每次增加的距离
int startY = 0 + random.nextInt(floatY);
x = x + startX;
int y = startY;
for (int j = 0; j < 80; j++) {
int alpha = 70 + random.nextInt(100);//随机生成透明度的点
int size = 5 + random.nextInt(5);//设置线宽,如果不设置线宽,无法绘制点
mPaint.setStrokeWidth(size);
mPaint.setAlpha(alpha);
mPaint.setShader(null);//清空渐变色
canvas.drawPoint(x, y + deltaY, mPaint);
y = y + deltaY;
}
}
break;
case SHADE:
for (int i = 0; i < 80; i++) {
int startX = deltaX + random.nextInt(10);//x每次增加的距离
int startY = 0 + random.nextInt(floatY);
x = x + startX;
int deltay = deltaY;
int y = startY;
boolean isFirst = true;
// Log.e(TAG, "" + startY);
for (int j = 0; j < 80; j++) {
int alpha = 70 + random.nextInt(100);//随机生成透明度的点
int size;
if (isBig) {
size = (int) ((5 + random.nextInt(10)) * de / 3);
} else {
size = (int) ((3 + random.nextInt(7)) * de / 3);//设置线宽,如果不设置线宽,无法绘制点
}
mPaint.setStrokeWidth(size);
mPaint.setAlpha(alpha);
if (deltay < 15) {
deltay = 20;
}
if (isFirst) {
canvas.drawPoint(x, y, mPaint);
isFirst = false;
} else {
canvas.drawPoint(x, y + deltay, mPaint);
y = y + deltay;
}
deltay -= sizeY;
}
}
break;
}
}
}
在这里,我们给先给画笔设置一个线性随机色,绘制背景。
然后设置设置画笔粗细为随机,透明度随机,来绘制小黄点。为了使小黄点在不同分辨率上显示出相同的效果,它的像素值我们来根据手机的分辨率去计算。
public int getDis(Activity activity) {
DisplayMetrics metric = new DisplayMetrics();
activity.getWindowManager().getDefaultDisplay().getMetrics(metric);
int width = metric.widthPixels; // 屏幕宽度(像素)
int height = metric.heightPixels; // 屏幕高度(像素)
float density = metric.density; // 屏幕密度(0.75 / 1.0 / 1.5 / 2.0)
int densityDpi = metric.densityDpi; // 屏幕密度DPI(120 / 160 / 240 / 320)
if (density < 1.0) {
return -1;
} else if (density == 1.0) {
return 0;
} else if (density == 1.5) {
return 1;
} else {
return 2;
}
}
引用
到这里这个控件基本上就写完了,然后我们需要给外部提供一个方法,去设置这个控件的不同状态。
/**
* 根据不同的时间,显示不同的背景(小图)
*
* @param time
*/
public void setChartLittele(int time, float de) {
this.de = de;
if (time >= 400) {
setBg(true, 0, 0, 0, 0, 0, Chart.MODE.SHADE);
} else if (time >= 320 && time < 400) {
setBg(false, 26, 36, 1, 20, 10, Chart.MODE.SHADE);
} else if (time >= 240 && time < 320) {
setBg(false, 22, 32, 1, 20, 20, Chart.MODE.SHADE);
} else if (time >= 160 && time < 240) {
setBg(false, 18, 28, 1, 20, 30, Chart.MODE.SHADE);
} else if (time >= 80 && time < 160) {
setBg(false, 14, 24, 1, 20, 40, Chart.MODE.SHADE);
} else if (time >= 0 && time < 80) {
setBg(false, 10, 20, 1, 20, 50, Chart.MODE.SHADE);
}
}
/**
* 设置背景牙菌斑的密集程度
*
* @param deltaX x轴每次往后移动的距离(随机)
* @param deltaY y轴每次往下移动的距离
* @param sizeY 渐变模式y每次减少的距离
* @param floatY Y轴开始的随机坐标
* @param bgAlpha 背景渐变色的透明度
* @param mode 模式
*/
public void setBg(boolean isNull, int deltaX, int deltaY, int sizeY, int floatY, int bgAlpha, MODE mode) {
this.isNull = isNull;
this.deltaX = deltaX;
this.deltaY = deltaY;
this.sizeY = sizeY;
this.floatY = floatY;
this.bgAlpha = bgAlpha;
this.mode = mode;
invalidate();
}
看一下布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:gravity="center" >
<FrameLayout
android:layout_width="115dp"
android:layout_height="115dp" >
<com.oracleen.view.Chart
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/check_right_second" />
</FrameLayout>
</LinearLayout>
这里我们用了一个framelayout,上层是一张镂空的图片,下层是我们绘制的背景。
然后在activity中设置背景的显示级别。
chart = (Chart) findViewById(R.id.chart);
chart.setChartLittele(300, getDis(this));
OK,搞定。demo链接。
demo
下一章我会和大家分享一下组合view的实现,把今天实现的view和前景图片做成一个控件,添加一些属性,使用起来会更方便一些。