瞎扯

聊完View的绘制,聊聊View的自定义.
其实自定义view也不是什么特别难的事情.
难度主要取决于.思路.算法规则

关键的方法:

主要的方法其实也没几个.

onDraw

绘制的规则,核心

   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

比如画个圆:

   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float x = getWidth() / 2;
        float y = getHeight() / 2;
        canvas.drawCircle(x, y, x, new Paint());
    }

image.png

再画几个字:

image.png

    Paint paint = new Paint();
    Paint paint1 = new Paint();
    float s, min;//分秒
    {
        paint1.setColor(Color.WHITE);
        paint1.setTextSize(30);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float x = getWidth() / 2;
        float y = getHeight() / 2;
        canvas.drawCircle(x, y, x, paint);
        min =x;
        s =y;
        String str = min + ":" + s;
        //测量文字的长度
        float textSize = paint1.measureText(str) / 2;
        canvas.drawText(str, x - textSize, y, paint1);
    }

反正,拿着canvas,想怎么画就怎么画就行了.

---

invalidate

这个方法是通知Ui绘制更新的.

上面讲了,重写onDraw.就可以实现自定义view.
当然,实际操作,光重写了onDraw肯定还不行.
为什么.因为onDraw,如果不触发invalidate这类的更新方法,就只有第一次绘制时才会调用.总不可能.绘制一次就完了吧.我们的页面可是需要不停的交互的.

    @Override
    public void invalidate() {
        super.invalidate();
    }

就这么个方法,调就完了.

 Paint paint = new Paint();
    Paint paint1 = new Paint();
    int s, min;

    {
        paint1.setColor(Color.WHITE);
        paint1.setTextSize(30);
        //时间更新线程.
        new Thread(){
            @Override
            public void run() {
                super.run();
                while (true){//当然,实际不能这样搞.
                    //获取秒
                    s = Calendar.getInstance().get(Calendar.SECOND);
                     //获取分
                    min = Calendar.getInstance().get(Calendar.MINUTE);
                    //通知更新绘制.
                    invalidate();
                }
            }
        }.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float x = getWidth() / 2;
        float y = getHeight() / 2;
        canvas.drawCircle(x, y, x, paint);

        String str = min + ":" + s;
        //测量文字的长度
        float textSize = paint1.measureText(str) / 2;
        canvas.drawText(str, x - textSize, y, paint1);
    }

image.png

一个倒计时就出来了.

---

onTouchEvent

这个方法有啥用呢.
比如通过触摸事件改变参数.

  @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN://按下
                //这里必须消费ACTION_DOWN事件,后面才能收到ACTION_MOVE
                return true;
            case MotionEvent.ACTION_MOVE://移动
            case MotionEvent.ACTION_UP://抬起
                min = (int) x;//改变分值
                s = (int) y;//改变秒值
                invalidate();//通知更新
                break;
        }
        return super.onTouchEvent(event);
    }

---

玩会了这些方法,基本就能自定义view.搞事情了.

总结

日更第6天.亚历山大.

自定义View说简单呢,很简单.
说难呢.无底洞.差不多能写一辈子.
同样的方式,换成前端,也是一样.核心还是计算.
各种计算.比较费时间.

但一般的效果,也没想的那么复杂咯.别被里面写的一堆边距宽高计算判断吓到了.
太复杂的效果还有个傻办法就是用帧动画代替就好了.svg动画之类的代替就好了.

就这样吧

---

您的喜欢与回复是我最大的动力－＿－
交流群:493180098