自定义view的简单实现(一)_简单实现自定义view

作者：空白诗007 | 2024-06-26 16:10:20

踩

简单实现自定义view

自定义view(一)

简单的五角星绘制

最近在研究自定义的view，俗话说什么东西都得从简单到困难，而自定义view又是安卓进阶必备，所以今天开发一个很简单的自定义view的五角星，作为入门实战
首先新建一个Wujiaoxing的java文件继承view,实现俩个参数的构造方法就行了，因为我们只在布局中使用，如果要在java文件中使用，最好是把构造方法都实现一下,然后相互调用
首先实现onMeasure方法,

    //定位屏幕的宽度
    private int width;
    //定义自定义view的中心点坐标
    private int centerX, centerY;
    public Wujiaoxing(Context context, AttributeSet attrs) {
        super(context, attrs);
        //加个背景颜色，用来区分我们自定义的大小
         setBackgroundColor(0x44ff0000);
    }

  @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //设置view的宽度是屏幕宽度和高度中的最小值
        width = Math.min(widthSize, heightSize);
        //当出现这个特殊情况的时候，把屏幕的宽度作为view的宽度
        if (heightMode == MeasureSpec.UNSPECIFIED) {
            width = widthSize;
        } else if (widthMode == MeasureSpec.UNSPECIFIED) {
            width = heightSize;
        }
        centerX = width / 2;
        centerY = width / 2;
        //因为是正方形，所以宽度和高度一样
        setMeasuredDimension(width, width);


    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

onMeasure是测量出我们需要的view的高度，比如我们需要一个正方形
简单的解释一下，MeasureSpec.getSize(widthMeasureSpec);拿到屏幕的宽度，
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
拿到宽度的mode，mode分为3个模式，分别对应view的高度，宽度的大小
3个模式分别为EXACTLY和AT_MOST，UNSPECIFIED

  1、MeasureSpec.UNSPECIFIED,父视图不对子视图施加任何限制，子视图可以得到任意想要的大小；

  2、MeasureSpec.EXACTLY，父视图希望子视图的大小是specSize中指定的大小；

  3、MeasureSpec.AT_MOST，子视图的大小最多是specSize中的大小。

  以上施加的限制只是父视图“希望”子视图的大小按MeasureSpec中描述的那样，但是子视图的具体大小取决于多方面的。
1
2
3
4
5
6
7

因为我们定义的view是正方形，所以宽度和高度是相等的
然后在layout中看下效果
这里写图片描述

可以看到，我们自定义view的大小已经出来了，而且是正方形的
,然后我们开始绘制五角星，首先需要确定的是五个点的坐标

这里写图片描述

首先中心点的坐标很明显就是width/2,width/2
我们把左上角看成0,0
那么第一个点的坐标是centerX,0
第二个点的坐标是0,centerX/2
这样分别得到5个点的坐标

 public List<Point> getFivePoint() {
        mPointList.clear();
        for (int i = 0; i < 6; i++) {
            mPointList.add(getPoint(i));
        }
        return mPointList;
    }

//采取4-1-5-2-3-4这样的顺序定义点的坐标
    private Point getPoint(int position) {
        int x = 0;
        int y = 0;

        if (position == 0) {
            x = (centerX / 2);
            y = width;

        } else if (position == 1) {
            x = centerX;
            y = 0;

        } else if (position == 2) {
            x = centerX * 3 / 2;
            y = width;

        } else if (position == 3) {
            x = 0;
            y = centerY / 2;

        } else if (position == 4) {
            x = width;
            y = centerY / 2;
        } else if (position == 5) {
            x = (centerX / 2);
            y = width;
        }

        return new Point(x, y);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

使用系统graphics包中的point用来存储x,y值
并创建一个list用来放置这5个点
现在我们有了存放这5个点坐标的集合mlistPoint
接下来就可以绘制了
采取4-1-5-2-3-4这样的顺序进行绘线
接下来实现onDraw方法
首先初始化我们的画笔

    private void init() {
        mPaint.setColor(0x88000000);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.STROKE);
    }1
2
3
4
5
6

在view的构造函数中调用初始化操作
然后实现ondraw方法

   @Override
    protected void onDraw(Canvas canvas) {
        getFivePoint();
        Path path = new Path();
        //首先将path移动到第一个点，然后往下一个点画,绘制的基础代码，一看就能明白的
        for (int i = 0; i < mPointList.size() - 1; i++) {
            path.moveTo(mPointList.get(i).x, mPointList.get(i).y);
            path.lineTo(mPointList.get(i + 1).x, mPointList.get(i + 1).y);
        }
        canvas.drawPath(path, mPaint);
        //用下面这种方法也可以
//            canvas.drawLine(centerX, centerY, mPointList.get(i).x, mPointList.get(i).y, mPaint);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

接下来在我们的layout中build一下文件，五角星就出来了

下面贴出全部的代码

package com.demo.swt.mystudyappshop.Wight;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

/**
 * 介绍：这里写介绍
 * 作者：sweet
 * 邮箱：sunwentao@imcoming.cn
 * 时间: 2017/2/17
 */

public class CstWuJiaoXingView extends View {
    private int width;
    private Paint mPaint = new Paint();
    private List<Point> mPointList = new ArrayList<>();
    private int centerX, centerY;

    public CstWuJiaoXingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setBackgroundColor(0x44ff0000);
        init();
    }


    private void init() {
        mPaint.setColor(0x88000000);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.STROKE);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);


        width = Math.min(widthSize, heightSize);
        if (heightMode == MeasureSpec.UNSPECIFIED) {
            width = widthSize;
        } else if (widthMode == MeasureSpec.UNSPECIFIED) {
            width = heightSize;
        }
        centerX = width / 2;
        centerY = width / 2;
        setMeasuredDimension(width, width);


    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w / 2;
        centerY = w / 2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        getFivePoint();
        Path path = new Path();

        for (int i = 0; i < mPointList.size() - 1; i++) {
            path.moveTo(mPointList.get(i).x, mPointList.get(i).y);
            path.lineTo(mPointList.get(i + 1).x, mPointList.get(i + 1).y);
        }
        canvas.drawPath(path, mPaint);
//            canvas.drawLine(centerX, centerY, mPointList.get(i).x, mPointList.get(i).y, mPaint);
    }


    public List<Point> getFivePoint() {
        mPointList.clear();
        for (int i = 0; i < 6; i++) {
            mPointList.add(getPoint(i));
        }
        return mPointList;
    }


    private Point getPoint(int position) {
        int x = 0;
        int y = 0;

        if (position == 0) {
            x = (centerX / 2);
            y = width;

        } else if (position == 1) {
            x = centerX;
            y = 0;

        } else if (position == 2) {
            x = centerX * 3 / 2;
            y = width;

        } else if (position == 3) {
            x = 0;
            y = centerY / 2;

        } else if (position == 4) {
            x = width;
            y = centerY / 2;
        } else if (position == 5) {
            x = (centerX / 2);
            y = width;
        }

        return new Point(x, y);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

然后是layout文件的

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">


    <com.demo.swt.mystudyappshop.Wight.CstWuJiaoXingView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>1
2
3
4
5
6
7
8
9
10
11

代码虽然很简单，但是什么事情都是从基础开始的，
下一期会带来一个五子棋游戏的简单制作，根据hyman大神的课程，编写的。用来作为我的记录

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】