一步一步教你学会自定义View并了解其绘制原理（一）

最新推荐文章于 2024-05-08 18:19:13 发布
置顶 最新推荐文章于 2024-05-08 18:19:13 发布
阅读量2k 收藏 3
点赞数 1
分类专栏： view绘制 文章标签： view-自定义vi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1035075390/article/details/56839749
版权

自定义view的绘制过程，看了很多关于自定义view的帖子、博客，写的也都不错，但我想通过图片+代码+注释的方式写一篇因为图片带给人的记忆效果远比长篇大论的文字好的多，再加上代码的辅助说明，那就更容易的掌握了，废话不多说，撸起袖子，开干！

自定义view的种类

  1. 继承自View（重写onMeasure、onLayout、onDraw方法）
  2. 继承自ViewGroup派生特殊的Layout
  3. 集成特定的View（如Textview）
  4. 继承特定的ViewGroup（如LinearLayout）

本文主要讲的是后两种的实现方式以Textview和LinearLayout为例

一、继承Textview并重写父类的构造函数

首先当我们自定义一个ConstructionView extends Textview时，系统会提示我们重写父类的构造函数，如图所示
这里写图片描述
下面是Textview的这四个构造函数的源码

 public TextView(Context context) {
 //若只调用这一个构造函数，传入的AttributeSet 为空，这时系统会抛异常，意思是传入的AttributeSet 不能为空
 //Caused by: java.lang.NoSuchMethodException: <init> [class android.content.Context, interface android.util.AttributeSet]
        this(context, null);
    }
//不能为空的原因就是加了@Nullable验证
    public TextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, com.android.internal.R.attr.textViewStyle);
    }

    public TextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    @SuppressWarnings("deprecation")
    public TextView(
            Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        //此处省略若干代码...
        }

所以在我们自定义View时，重写的构造函数一定要传入AttributeSet 对象，如果你非要调用第一个构造函数，你可以这样写：

public ConstrctionView(Context context) {
//在调用父类构造器的时候传入一个AttributeSet 对象
        super(context,com.android.internal.R.attr.textViewStyle);
    }
//也可通过直接调用第2个（或者第3、4个）
    public ConstrctionView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

现在自定义的ConstructionView有了，接下来就来看下view是如何绘制的

二、View的绘制流程

说到view的绘制过程，相信大家都知道，就是onMeasure–onLayout–onDraw这几个方法嘛，说的没错，但是如果在复杂的布局中每一个view又是如何绘制的呢？如果你很清楚，那就不用在这篇文章上耽误时间了，布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_fibonacci"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.kcgz.interview.FibonacciActivity">
<!--ViewGroup1、ViewGroup2均继承LinearLayout，MyView1、MyView2均继承自Textview-->
    <com.kcgz.interview.view.ViewGroup1
        android:id="@+id/vg001"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        android:orientation="vertical">


        <com.kcgz.interview.view.ViewGroup2
            android:layout_margin="20dp"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#00ff00"
            android:orientation="vertical"
            android:gravity="center">
            <com.kcgz.interview.view.MyView1
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#f58407"
                android:text="textview1" />
            <com.kcgz.interview.view.MyView2
                android:layout_marginTop="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#dedede"
                android:text="textview2"/>
        </com.kcgz.interview.view.ViewGroup2>

        <com.kcgz.interview.view.ViewGroup2
            android:layout_margin="20dp"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#0000ff"
            android:orientation="vertical"
            android:gravity="center">
            <com.kcgz.interview.view.MyView1
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#f58407"
                android:text="textview1" />
            <com.kcgz.interview.view.MyView2
                android:layout_marginTop="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#dedede"
                android:text="textview2"/>
        </com.kcgz.interview.view.ViewGroup2>
    </com.kcgz.interview.view.ViewGroup1>

</RelativeLayout>

通过图片看更直观，为了方便区分布局，特意加了背景色：
布局设计图

下面继续贴ViewGroup1与MyView1的代码，因为ViewGroup2，MyView2都是复制的这里就不在贴代码了，如果需要可以去github上下载源码查看。

//ViewGroup1
public class ViewGroup1 extends LinearLayout {
    public static final String TAG="viewgroup1";

    //这里只重写了两个参数的构造函数
    public ViewGroup1(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        ViewUtils.i(TAG,"onMeasure开始执行");
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        ViewUtils.i(TAG,"onMeasure执行完毕");
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        ViewUtils.i(TAG,"onLayout开始执行");
        super.onLayout(changed, l, t, r, b);
        ViewUtils.i(TAG,"onLayout执行完毕");
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        ViewUtils.i(TAG,"dispatchDraw开始执行");
        super.dispatchDraw(canvas);
        ViewUtils.i(TAG,"dispatchDraw执行完毕");
    }
    @Override
    protected void onDraw(Canvas canvas) {
        ViewUtils.i(TAG,"onDraw开始执行");
        super.onDraw(canvas);
        ViewUtils.i(TAG,"onDraw执行完毕");
    }
}
//MyView1
public class MyView1 extends TextView {
    public static final String TAG="MyView1";

    public MyView1(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        ViewUtils.i(TAG,"onMeasure开始执行");
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        ViewUtils.i(TAG,"onMeasure执行完毕");
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        ViewUtils.i(TAG,"onLayout开始执行");
        super.onLayout(changed, l, t, r, b);
        ViewUtils.i(TAG,"onLayout执行完毕");
    }

    @Override
    protected void onDraw(Canvas canvas) {
        ViewUtils.i(TAG,"onDraw开始执行");
        super.onDraw(canvas);
        ViewUtils.i(TAG,"onDraw执行完毕");
    }
}

02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup1: onMeasure开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup2: onMeasure开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView1: onMeasure开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView1: onMeasure执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView2: onMeasure开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView2: onMeasure执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup2: onMeasure执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup2: onMeasure开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView1: onMeasure开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView1: onMeasure执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView2: onMeasure开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView2: onMeasure执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup2: onMeasure执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup1: onMeasure执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup1: onLayout开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup2: onLayout开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView1: onLayout开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView1: onLayout执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView2: onLayout开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView2: onLayout执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup2: onLayout执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup2: onLayout开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView1: onLayout开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView1: onLayout执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView2: onLayout开始执行
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/MyView2: onLayout执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup2: onLayout执行完毕
02-23 23:45:56.502 5922-5922/com.kcgz.interview I/viewgroup1: onLayout执行完毕
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup1: onDraw开始执行
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup1: onDraw执行完毕
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup1: dispatchDraw开始执行
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup2: onDraw开始执行
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup2: onDraw执行完毕
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup2: dispatchDraw开始执行
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/MyView1: onDraw开始执行
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/MyView1: onDraw执行完毕
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/MyView2: onDraw开始执行
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/MyView2: onDraw执行完毕
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup2: dispatchDraw执行完毕
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup2: onDraw开始执行
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup2: onDraw执行完毕
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup2: dispatchDraw开始执行
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/MyView1: onDraw开始执行
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/MyView1: onDraw执行完毕
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/MyView2: onDraw开始执行
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/MyView2: onDraw执行完毕
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup2: dispatchDraw执行完毕
02-23 23:45:56.503 5922-5922/com.kcgz.interview I/viewgroup1: dispatchDraw执行完毕
以上便是启动Acticity后的view的绘制结果

如果你有耐心看完，就应该知道复杂布局的view是如何绘制的了，当然如果你没有耐心，那就看下面的图，结果就一目了然了：
这里写图片描述
画的不好，但大概的意思表示出来了，需要说明的是，在自定义的ViewGroup中，若在布局文件中没有给ViewGroup设置背景色，将不会调用viewGroup的onDraw方法，直接调用dispatchDraw方法，然后遍历子View中的onDraw方法进行绘制，下一篇会写一下View是如何开始执行的，如有错误希望您能指出，我会第一时间纠正。

源码下载

z1035075390
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义View-View绘制流程
金戈鐡馬
02-27 273
Android 中 Activity 是作为应用程序的载体存在，代表着一个完整的用户界面，提供了一个窗口来绘制各种视图，当 Activity 启动时，我们会通过 setContentView 方法来设置一个内容视图，这个内容视图就是用户看到的界面。那么 View 和 activity 是如何关联在一起的呢？
自定义View绘制流程
AdrianAndroid的专栏
10-21 398
开始 构造函数 onMeasure onSizeChanged onLayout onDraw 视图状态改变 结束
面试 100% 完全掌握：重新认识 View 的绘制流程(1)
最新发布
2401_84149814的博客
05-08 890
流程图分析了解view绘制流程了解如何附加到内容到页面关键类解释=====一. 流程图分析========1.1 创建Activity到setContentView的窗口附加流程图下图展示了window的创建到之后的窗体view树变化情况activity 设置布局流程1.2 view绘制流程图绘制流程图二. view绘制流程===========2.1 绘制流程分析在我们调用 和 的时候，我们会让view刷新布局和绘制。所以从这两个方法入手，可以完整地走一遍绘制流程。 绘制动画等行为主要通过 类协调。调用
Android中View绘制原理分析
TechMix的博客
04-23 640
1.Activity/Fragment/Dialog,Window和View的三类核心成员的关系 2.View和WindowManager的关系 2.ViewRootImpl的作用 2.View绘制是从何时开始的?是怎么分发到我们View上的? 3.View/ViewGroup的三大工作阶段 4.理解了View的工作原理后再看自定义View的实现思路 View与ViewRootImpl的绑定 5.小结
自定义View必备知识-View绘制流程
hdbdhdbh的博客
08-21 159
为了加速你的view，对于频繁调用的方法，需要尽量减少不必要的代码。先从onDraw开始，需要特别注意不应该在这里做内存分配的事情，因为它会导致GC，从而导致卡顿。在初始化或者动画间隙期间做分配内存的动作。不要在动画正在执行的时候做内存分配的事情。还需要尽可能的减少onDraw被调用的次数，大多数时候导致onDraw都是因为调用了invalidate().因此请尽量减少调用invaildate()的次数。
自定义View的绘制流程（让你深入理解自定义View）
Natty的博客
10-15 3924
自定义view是干嘛的呢？ 当我们不满足于Android提供的原生控件和布局时，就应该考虑到自定义view。 自定义View分为两大块: 自定义控件 和 自定义容器 自定义View必须重写两个构造方法 第一个是一个参数的上下文，用于在java代码中new对象使用 第二个是两个参数的一个上下文，一个AttributSet。 主要用于在xml中定义使用。 OnMesure 计算出控件的大小...
Android自定义View之继承TextView绘制背景
01-04
本文实例为大家分享了TextView绘制背景的方法，供大家参考，具体内容如下 效果： 实现流程： 1.初始化：对画笔进行设置 mPaintIn = new Paint(); mPaintIn.setAntiAlias(true); mPaintIn.setDither(true); ...
Android开发使用自定义View将圆角矩形绘制在Canvas上的方法
08-29
本文将详细介绍使用自定义View将圆角矩形绘制在Canvas上的方法，并结合实例形式分析了Android自定义view绘制圆角矩形的相关方法与使用技巧。 首先，我们需要了解何为圆角矩形绘制。圆角矩形绘制是指在Canvas上绘制...
Android自定义View实现shape图形绘制
01-04
概述 之前曾写过一篇文章介绍了Android中drawable使用Shape资源，通过定义drawable中的shape资源能够绘制简单的图形效果，如矩形，...于是我就想到使用自定义view来绘制我想要的结果。 1.画一条水平虚线 代码如下所示：
Android自定义View实现绘制虚线的方法详解
01-20
说实话当第一次看到这个需求的时候，第一反应就是Canvas只有drawLine方法，并没有drawDashLine方法啊！这咋整啊，难道要我自己做个遍历不断的drawLine？不到1秒，我就放弃这个想法了，因为太恶心了。方法肯定是有的...
这可能是第二好的自定义 View 教程之绘制，2024年最新android地图开发
2401_83977554的博客
04-11 710
clipRect()clipPath()自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
Android自定义View基本绘制流程及实例
11-08
Android自定义View基本绘制流程及实例
最简单的自定义View
weixin_38775077的博客
06-29 309
为什么要自定义Viewandroid提供了很多控件供我们使用 但有些功能是系统所提供的实现不 了的 这时候我们就需要自定义一个View来实现我们所需要的效果. 在Android中所有的控件都直接或间接的继承自View,分View和ViewGroup两部分. 我们常用的一些View比如TextView,ImageView都是继承自View并添加了一些各自的特性,ViewGroup也是继承View但是...
Android自定义View（1）——初步实现简单的自定义View
zy_jibai
07-28 3078
已经有一段时间没有给大家更新博客了，貌似自从学校的实训一开始就一直没有心思去学新的东西和写博客，因为这段时间一直都有很多事情要忙，而且笔者马上就要开始实习工作了，可能心理上也是有一定的压力哈哈。现在事情都处理的差不多了，可以重操旧业专心学习了！！！！！ 今天给大家带来的是如何关于自定义View的文章，之后笔者会将动画和自定义View的文章陆陆续续整合到一起，方便大家阅读。 目录 自定义Vie...
Window，View，View的绘制流程 ，自定义View ，自定义属性
weixin_43836998的博客
12-06 475
View
【Android】自定义View-View绘制流程
m0_56255097的博客
02-11 284
如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
自定义View的绘制原理图解
Checkiming的博客
09-10 878
Measure过程决定了View的宽高，Measure完成以后，可以通过getMeasuredWidth和getMeasuredHeight方法来获取到View测量后的宽高，在几乎所有的情况下它都等于View的最终宽高，这仅仅是在代码规范的前提之下。 由上述流程来看Measure流程很简单，关键点是在于widthMeasureSpec, heightMeasureSpec这两个参数信息怎么获得？
Android自定义view绘制顺序漫谈
和小胖
04-28 1358
  今天就跟大家说说自定义view里面的绘制顺序问题，因为有时候避免不了在同一个地方绘制不同的view，那么就避免不了遮盖问题，这个时候就就必须考虑绘制顺序的问题了。   说到绘制顺序就不得不提onDraw和dispatchDraw这两个方法，下面我们一一来看这两个方法。 onDraw 之前我们自定义view一般都继承了View这个类，其实Android里面所有的控件也都继承自...
6.自定义View-绘制
只影的博客
05-24 766
绘制的基本要素 自定义绘制的最基本的步骤是，提前创建好Paint对象，重写onDraw()，把绘制代码写在onDraw里面. 一、Canvas.drawXXX() 和 Paint 基础 drawXXX() 方法：在整个绘制区域统一涂上指定的颜色。 Canvas.drawColor(@ColorInt int color) 颜色填充 drawRGB(int r, int g, int b) 和 drawARGB(int a, int r, int g, int b) 作用同上 drawCirc
一步一步教你自定义控件——01
09-12
下面是一步一步教你如何自定义控件的简要指南： 第一步：创建一个新的Java类作为你的自定义控件。 首先，创建一个新的Java类，可以命名为你想要的控件名称。这个类应该继承自Android框架中的现有控件，例如View、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值