前言
我们都知道,现实生活中画一幅画需要笔和纸,另外还需要各式各样的绘画技巧,那么同样的自定义view也需要这些。正好Android也给我们提供了这两样东西:Paint和Canvas,一个是画笔而另一个呢当然是画布啦
Paint中有各种setter方法可以设置不同的属性,比如setColor()设置画笔颜色,setStrokeWidth()设置描边线条,setStyle()设置画笔的样式:
Paint集成了所有“画”的属性,而Canvas则定义了所有要画的东西,我们可以通过Canvas下的各类drawXXX方法绘制各种不同的东西,比如绘制一个圆drawCircle(),绘制一个圆弧drawArc(),绘制一张位图drawBitmap()等等等:
初步了解完这些,就可以尝试绘制一个view了
具体步骤如下
首先新建一个AndroidStudio项目CustomView,然后在项目中新建一个views的包用于写自定义view相关的类,这里我们在views的包里新建一个CustomView类让它继承View类实现Runnable接口,具体代码如下所示:
package com.lijizhi.customviewdemo.views;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
/* 项目名 CustomViewDemo
* 包名 com.lijizhi.customviewdemo.views
* 文件名: CustomView
* 创建者 : LJZ
* 创建时间:2017/10/13 0013 上午 7:41
* 描述 自定义View
*/
public class CustomView extends View implements Runnable{
private Paint mPaint; //画笔
private Context mContext;//上下文的引用
private int radiu;//圆环半径
public CustomView(Context context){
this(context,null);
}
public CustomView(Context context, AttributeSet attrs){
super(context,attrs);
mContext=context;
initPaint();//初始化画笔
}
private void initPaint() {
//实例化画笔,并打开抗锯齿
mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
/*
* 设置画笔样式为描边,圆环嘛……当然不能填充不然就么意思了
*
* 画笔样式分三种:
* 1.Paint.Style.STROKE:描边
* 2.Paint.Style.FILL_AND_STROKE:描边并填充
* 3.Paint.Style.FILL:填充
*/
mPaint.setStyle(Paint.Style.STROKE);
//设置画笔颜色为浅灰色
mPaint.setColor(Color.LTGRAY);
/*
* 设置描边的粗细,单位:像素px
* 注意:当setStrokeWidth(0)的时候描边宽度并不为0而是只占一个像素
*/
mPaint.setStrokeWidth(10);
}
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
//绘制圆环
canvas.drawCircle(MeasureUtil.getScreenSize((Activity) mContext)[0] / 2, MeasureUtil.getScreenSize((Activity) mContext)[1] / 2, radiu, mPaint);
}
@Override
public void run(){
//确保线程不断执行不断刷新页面
while(true){
try{
//如果半径小于200则自加,否则大于200后重置半径值以实现往复
if(radiu<200){
radiu+=10;
// 刷新View
postInvalidate();
}else{
radiu=0;
}
//每执行一次暂停40毫秒
Thread.sleep(40);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
简单分析一下以上的代码,首先在CustomView类中声明了三个属性,分别为mPaint(画笔),mContext(上下文),radiu(圆环半径),紧接着就是编写CustomView的构造方法及重载方法,这里不得不提的是重载方法的第二个参数AttributeSet,为什么需要这个参数呢?因为我们定义一个view会用到layout_width,layout_height等等这些属性,所以就必须传入这个参数,否则会报错。然后就是实例化画笔对象,在onDraw方法里编写相应的逻辑操作,这里要想让圆环有动画效果,则必须开启一个子线程不断更改圆环的半径并刷新页面。
在绘制圆环的宽高这一块,我们用到了 MeasureUtil.getScreenSize,这里的工具类及其方法是需要我们自己定义的,具体代码如下所示:
package com.lijizhi.customviewdemo.views;
import android.app.Activity;
import android.util.DisplayMetrics;
/* 项目名 CustomViewDemo
* 包名 com.lijizhi.customviewdemo.views
* 文件名: MeasureUtil
* 创建者 : LJZ
* 创建时间:2017/10/13 0013 上午 7:41
* 描述 绘制工具类
*/
public final class MeasureUtil {
/**
* 获取屏幕尺寸
*
* @param activity
*
* @return 屏幕尺寸像素值,下标为0的值为宽,下标为1的值为高
*/
public static int[] getScreenSize(Activity activity){
DisplayMetrics metrics=new DisplayMetrics();
activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
return new int[]{metrics.widthPixels,metrics.heightPixels};
}
}
做完了前两步,我们就要在布局文件中引入我们刚刚自定义的view
如下所示:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<com.lijizhi.customviewdemo.views.CustomView
android:id="@+id/main_cv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
最后一步我们只需要在MainActivity中获取控件并开启子线程就行了。
package com.lijizhi.customviewdemo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.lijizhi.customviewdemo.views.CustomView;
public class MainActivity extends AppCompatActivity {
private CustomView mCustomView; //我们自定义View
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
// 获取控件
mCustomView=(CustomView)findViewById(R.id.main_cv);
/*
* 开线程
*/
new Thread(mCustomView).start();
}
}
最终效果如下图
这里我就简单的截了个图,实际的动态效果,大家可以自己跟着做一遍就好了。