从0到1深入浅出自定义控件的点点滴滴

小记:昨日朋友相聚,相谈甚欢,半夜凌晨酒意散,渴醒,思维发散。早起,一缕阳光,一支烟,一杯清茶,一张简桌,安静,惬意,自由。

写在前面

原创文章,转载请保留出处!
http://www.jianshu.com/p/e2ddf2ae2148

本篇将介绍自定义控件的点点滴滴。你将了解自定义控件的如下知识:

  • 常见的几种自定义控件
  • 为什么要使用
  • onMeasure、onLayout、onDraw的使用场景
  • 整体书写过程
  • 自定义属性的作用以及怎么用
  • 个人书写的几个案例

常见的几种自定义控件

  1. 组合属性扩展控件,利用常用API给单一控件提供多种功能(如:一个带有沉浸式的toolbar;一个带有点击事件的TextView;)
  2. 组合控件,控件件根据业务相互联系,对外使用时作为一个整体的控件,达到独立使用(如:点击收起隐藏的可扩展TextView;上文的上下拉刷新控件-组合SwipeRefreshLayout + RecyclerView)
  3. 一些有特定显示效果的控件(仪表盘;播放器的音频跳动条;)

为什么要使用自定义控件

关于为什么要使用我觉得无外乎两点:

  1. 从产品功能出发 - 系统现有API达不到特定的效果
  2. 从代码结构出发 - 使控件封装组合,对外单一暴露,达到面向对象的效果,方便维护和复用

onMeasure()、onLayout()、onDraw()的使用场景

注:上面三个方法是根据具体情况相机使用,不是必须同时使用,下面会讲解每个方法是用来干什么以及怎么使用

- onMeasure(介绍其职责、你怎么去使用操作)

onMeasure - 主要负责测量控件来设置控件的大小。
普及个常识,方便理解: 比如你写了一个textView,你需要去设置宽高,可以wrap_content,可以match_parent,也可以是具体的某个数值,当你设置完后,编译textView时系统会调用onMeasure根据你所设置的值去测量控件的大小。(根据文字的大小,系统默认控件的内间距) 注意这里仅仅是测量,不包括她显示在哪个位置以及绘制(显示)
那么你怎么去操作使用?
1 - 重写onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法。
ps:为了阐明清楚,这里做一个讲解。onMeasure测量,系统是通过两个方面来确定大小的:模式和大小(specMode 和specSize)。spaceMode有三个值 -- 1,当控件宽高是match_parent或者是几dp时值为MeasureSpec.EXACTLY,代表精确;;2,当控件宽高是wrap_content时值为MeasureSpec.AT_MOST,代表控件兼容内部内容时,大小最大不会超过控件的父布局;;3,值为MeasureSpec.UNSPECIFIED时代表控件想有多大便有多大,不常用,一般由于滑动控件
2 - 根据参数获取控件的宽高并设置,这里有个常用的代码模版

    int defaultSize = 200;
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int height = measureSize(defaultSize, heightMeasureSpec);
        int width = measureSize(defaultSize, widthMeasureSpec);
        
        //重中之重,用来根据获取的值测量view的大小
        setMeasuredDimension(width, height);
    }

    private int measureSize(int defaultSize, int measureSpec) {
        int result = defaultSize;
        int specMode = View.MeasureSpec.getMode(measureSpec);
        int specSize = View.MeasureSpec.getSize(measureSpec);
        if (specMode == View.MeasureSpec.EXACTLY) {
            //当布局宽高是match_parent或者某一个具体的dp
            result = specSize;
            
        } else if (specMode == View.MeasureSpec.AT_MOST) {
            //当布局宽高是wrap_content,你需要一个默认的值defaultSize
            
        } else if (specMode == MeasureSpec.UNSPECIFIED) {

        }
        return result;
    }

- onLayout(介绍其职责、你怎么去使用操作)

  1. onLayout负责控件所在布局中位置。主要应用于确定ViewGroup中子View的位置,在View给其孩子设置尺寸和位置时被调用。
  2. 怎么去使用?
    子View必须重写onLayout(boolean, int, int, int, int)方法,并且调用各自的layout(int, int, int, int)方法。

API: onLayout(boolean changed, int left, int top, int right, int bottom);
参数讲解:

1)参数changed表示view有新的尺寸或位置;
2)参数l表示相对于父view的Left位置;
3)参数t表示相对于父view的Top位置;
4)参数r表示相对于父view的Right位置;
5)参数b表示相对于父view的Bottom位置;

如下图示:注意Y轴向下为正

坐标图.png

2 - 一般用法:

       // 获得所有子View个数
        int childCount = getChildCount();
        // 遍历子View
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            // 获得子View的高度
            int childViewHeight = childView.getMeasuredHeight();
            // 获得子View的宽度
            int childViewWidth = childView.getMeasuredWidth();
            // 下面这行是核心api,调用layout给每一个子View设定位置(根据ui要求而定,是一个数学运算)
            childView.layout(mLeft, height, mLeft + childViewWidth, height  + childViewHeight);
        }

- onDraw(介绍其职责、你怎么去使用操作)

  • onDraw负责控件的绘制显示
    API : onDraw(Canvas canvas)
    Canvas中的方法很多,Canvas可以绘制的对象有:
    弧线(arcs) canvas.
    填充颜色(argb和color)
    Bitmap
    圆(circle和oval)
    点(point)
    线(line)
    矩形(Rect)
    图片(Picture)
    圆角矩形 (RoundRect)
    文本(text)
    顶点(Vertices)
    路径(path)
  • 如下代码绘制圆形:
        rectPaint = new Paint();
        rectPaint.setStyle(Paint.Style.STROKE);//只描边
        rectPaint.setStrokeWidth(barWidth);
        rectPaint.setColor(Color.parseColor("#F2935B"));

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawArc(mRectF, 0, 360, false, circleBgPaint);
        }

ps:invalidate()和postInvalidate()都可以调用OnDraw(),用来主动更新ui,前者是在UI线程自身中使用,而后者在非UI线程中使用。

整体书写过程

  • 自定义控件没有特定的书写过程,你根据具体的产品和UI要求而定。有时不需要重写onMeasure、onLayout、onDraw这三个方法(如下面demo中的自定义带有沉浸式状态栏的toolbar)、有时需要重写里面的某几个方法(如demo中的自定义动态音频跳动条和一个带动画进度的圆环)。但是自定义控件有一定的绘制流程,即执行顺序。
    绘制过程:
    onFinishInflate()
    onAttachedToWindow()
    onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    onLayout(boolean changed, int l, int t, int r, int b)
    onDraw(Canvas canvas)
    onDetachedFromWindow()

自定义属性的作用以及怎么用

  • 作用或者意义吧,了解这些后你就知道什么时候用以及为什么用。
  1. 作用1:扩展了系统没有的属性。举个例子:比如你现在的业务场景中需要定义一个根据数值来确定圆弧角度的进度条,你需要定义进度条的颜色,宽度,开始角度等等,这时你可以自己定义控件的这些属性。当然较真的你可能会发现像这些属性都可以通过系统API来实现,没错,确实如此,这也是引入作用2的原因。
  2. 作用2:自定义属性可以是你的控件变成动态可以配置的,使你的控件可以动态控制大小、宽高、速度、颜色等等等等。因为这时你的控件持有了特定意义的属性,可以在xml配置不同属性的值,来是你的控件“活动”起来。
    总结:最终其实是你在xml设置相关属性的值,然后在自定义控件代码中获取这个属性的值,根据这个值执行相关的逻辑来达到你的效果
  • 怎么用?

不废话,上代码。

  1. 定义你需要的属性(在res - values - attri.xml)
    <declare-styleable name="CircleBarView">
        <attr name="circle_color" format="color"></attr>
        <attr name="circle_bg_color" format="color"></attr>
        <attr name="circle_stoken_width" format="dimension"></attr>
        <attr name="start_angle" format="float"></attr>
    </declare-styleable>

ps: declare-styleable name = ***; 这代表你定义属性的整体引用名字

  1. 设置xml中的控件属性值
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ui.customview.CircleBarView
        android:id="@+id/circle_bar_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:circle_bg_color="@android:color/darker_gray"
        app:circle_color="@android:color/holo_green_dark"
        app:circle_stoken_width="20dp"
        app:start_angle="90"
        />
</RelativeLayout>

这里声明下:关于自定义属性你需要引入命名空间,在跟布局中引入xmlns:app="http://schemas.android.com/apk/res-auto",控件中通过命名空间app来索引定义的属性

  1. 代码中获取属性的值
    public CircleBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, @Nullable AttributeSet attrs) {
        //通过属性的整体引用名字来获取全部属性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleBarView);
        //参数1-xml中的相应属性的值,参数2-获取不到时默认显示的值
        int circleBgColor = typedArray.getColor(R.styleable.CircleBarView_circle_bg_color, Color.GRAY);
        int circleColor = typedArray.getColor(R.styleable.CircleBarView_circle_color, Color.GREEN);
        barWidth = typedArray.getDimension(R.styleable.CircleBarView_circle_stoken_width, px2dip(context, 10));
        startAngle = typedArray.getFloat(R.styleable.CircleBarView_start_angle, 0);
        //记着回收
        typedArray.recycle();
    }

通过以上三步实现定义属性和取值过程,最终其实是你在xml设置相关属性的值,然后在自定义控件代码中获取这个属性的值,根据这个值执行相关的逻辑来达到你的效果

注:属性的取值类型(attr中的format)有如下几种
     1.reference:参考指定Theme中资源ID,这个类型意思就是你传的值可以是引用资源
     2.string:字符串,如果你想别人既能直接写值也可以用类似"@string/test"引用资源的方式,可以写成format="string|reference"
     3.Color:颜色
     4.boolean:布尔值
     5.dimension:尺寸值
     6.float:浮点型
     7.integer:整型
     8.fraction:百分数
     9.enum:枚举 ,如果你提供的属性只能让别人选择,不能随便传入,就可以写成这样
        <attr name="language">
              <enum name="china" value="1"/>
              <enum name="English" value="2"/>
        </attr>
     10.flag:位或运算

个人书写的几个案例

ps: demo中一直添添加加,里面包括的东西也略微繁杂,但是也简单根据功能分包了。包括了线程中断,应用重启,动静态代理,沉浸式和自定义控件三个,如果只看本文相关案例,请移步项目中的ui包下,里面注释详细
项目源码demo地址,如有帮助请star,本demo长期更新

闷骚代码男,码字不易,请抬起你的小手,点个赞呗~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容