Android自定控件基础（一）—

虽然本人有几年开发经验，但是自定义控件这一块儿，研究的很少，惭愧……用到的时候就是百度查找，复制粘贴。工时紧，总是想的快点完工就好。（都是借口啦，想学总会有时间哒）

作为一个Android开发要说自定义控件不会写，太丢人了，我决定一点点做起，以后用的都是自己的自定义控件！！！加油~~~

进入正题：此博客参考文章：启舰大神博客

一、先说一下自定义控件必须的Paint和Canvas

简单来说，就是画图所需要的比和纸（画布）Paint是笔 Canvas是纸有了纸笔，就尽情展现你的绘画天赋吧~

Paint的几个基本设置函数

paint.setAntiAlias(true);//抗锯齿功能作用是边缘柔化,可以消除混叠等
paint.setColor(Color.RED); //设置画笔颜色
paint.setStyle(Style.FILL);//设置填充样式
paint.setStrokeWidth(30);//设置画笔宽度
paint.setShadowLayer(10, 15, 15, Color.GREEN);//设置阴影

画布的背景设置

canvas.drawColor(Color.BLUE);
canvas.drawRGB(255, 255, 0); //这两个功能一样，都是用来设置背景颜色的。

二、代码实现

新建一个工程，新建一个类：MyView继承自View

 1 package com.matai.betheltest;

 2

 3 import android.content.Context;

 4 import android.graphics.Canvas;

 5 import android.graphics.Color;

 6 import android.graphics.Paint;

 7 import android.view.View;

 8

 9 public class MyView extends View {

10

11     private static final String TAG = "MyView";

12

13     private Context context;

14

15     public MyView(Context context) {

16         super(context);

17         this.context=context;

18     }

19

20     //重写OnDraw函数 用于绘图

21    @Override

22     protected void onDraw(Canvas canvas) {

23         super.onDraw(canvas);

24

25        Paint paint=new Paint();//设置画笔

26        paint.setAntiAlias(true);//抗锯齿功能（边缘柔化,可以消除混叠等）

27        paint.setColor(Color.RED);  //设置画笔颜色

28        paint.setStyle(Paint.Style.FILL);//设置填充样式   Style.FILL/Style.FILL_AND_STROKE/Style.STROKE

29        paint.setStrokeWidth(5);//设置画笔宽度

30        paint.setShadowLayer(2,2,2,Color.GREEN);//设置阴影

31

32        canvas.drawRGB(255,255,255);//设置画布背景颜色

33        //画圆

34        canvas.drawCircle(190, 200, 150, paint);

35    }

36 }

2. Activity布局文件设置

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout 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:id="@+id/frameLayout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".RobotActivity">

</FrameLayout>

3.Activity代码

 1 public class RobotActivity extends AppCompatActivity {

 2

 3     private static final String TAG = "RobotActivity";

 4

 5     private FrameLayout frameLayout;

 6

 7     //画几何图形

 8     private MyView myView;

 9

10     @Override

11     protected void onCreate(Bundle savedInstanceState) {

12         super.onCreate(savedInstanceState);

13         setContentView(R.layout.activity_robot);

14

15         frameLayout=findViewById(R.id.frameLayout);

16

17         myView=new MyView(this);

18

19         frameLayout.addView(myView);

20     }

运行结果：

三、多种几何图形实现

1. 画直线：canvas.drawLine(10,10,50,60,paint);参数说明：

drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint)

startX：开始画直线的x坐标

startY：开始画直线的y坐标

stopX：画直线结束时的x坐标

startY：画直线结束时的y坐标

paint：画笔

效果图：

2. 画多条直线：drawLines(float[] pts, @NonNull Paint paint) 参数说明：

pts：点的集合，每两个点形成一条直线，组织方式为｛x1,y1,x2,y2,x3,y3,……｝

float []pts={10,10,100,100,200,200,400,400};
canvas.drawLines(pts, paint);

效果图：

3.画点 drawPoint(float x, float y, @NonNull Paint paint)参数说明：

x：x坐标

y: y坐标

canvas.drawPoint(40,50,paint);

效果图：（点很大是因为我画笔宽度写成了50）

4. 多个点：

drawPoints(float[] pts, @NonNull Paint paint) 参数说明：同画两条直线一样

drawPoints(float[] pts, int offset, int count,@NonNull Paint paint)这个方法多出的两个参数说明：

offset：pts数组中跳过的数值个数，注意不是点的个数！一个点是两个数值；

count:参与绘制的数值的个数，指pts[]里数值个数，而不是点的个数，因为一个点是两个数值

代码为：float []pts={10,10,100,100,200,200,400,400}; canvas.drawPoints(pts, 0, 8, paint);（全部画出不跳过任何一个点）效果图：

代码为：float []pts={10,10,100,100,200,200,400,400}; canvas.drawPoints(pts, 2, 4, paint); （跳过第一个点不画最后一个点）效果图：

代码为：float []pts={10,10,100,100,200,200,400,400}; canvas.drawPoints(pts, 4, 4, paint); （跳过第二个点不花最后一个点和第一个点）效果图：

5. 矩形工具类RectF与Rect

两者区别不大，都是滑出一个矩形，最常用的构造方法是Rect(int left, int top, int right, int bottom) 都可以看懂是根据四个点构造矩形

canvas.drawRect(10, 10, 100, 100, paint);//直接构造效果图：

还有一种构造方法是传入RectF或者Rect矩形变量：drawRect (RectF rect, Paint paint)或者drawRect (Rect r, Paint paint)

使用：RectF rect = new RectF(120, 10, 210, 100);
canvas.drawRect(rect, paint);//使用RectF构造效果图：

6. 圆角矩形

void drawRoundRect (RectF rect, float rx, float ry, Paint paint) 参数说明：

RectF rect:要画的矩形
float rx:生成圆角的椭圆的X轴半径
float ry:生成圆角的椭圆的Y轴半径

使用：RectF rect = new RectF(100, 10, 300, 100);
canvas.drawRoundRect(rect, 20, 10, paint); 效果图：

7. 椭圆：椭圆是根据矩形生成的，矩形的长为椭圆的x轴宽为y

void drawOval (RectF oval, Paint paint) 参数说明：
RectF oval：用来生成椭圆的矩形

使用：RectF rect = new RectF(100, 10, 300, 100);
canvas.drawOval(rect, paint);//同一个矩形画椭圆效果图：

8.弧形：弧是椭圆的一部分，而椭圆是根据矩形来生成的，所以弧当然也是根据矩形来生成的。

drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 参数说明：

RectF oval:生成椭圆的矩形
       float startAngle：弧开始的角度，以X轴正方向为0度
       float sweepAngle：弧持续的角度
       boolean useCenter:是否有弧的两边，True，还两边，False，只有一条弧

使用：RectF rect1 = new RectF(100, 10, 300, 100);canvas.drawArc(rect1, 0, 90, true, paint);（有边边，左图）
RectF rect2 = new RectF(400, 10, 600, 100);canvas.drawArc(rect2, 0, 90, false, paint);（只有弧，右图）

记录学习，为什么不收藏原博客呢？因为自己重新写一遍印象深刻哼

巴特西

Android自定控件基础（一）——几何图形绘制

最新文章

热门文章