前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android自定义View系列 (从小白做起) 二: 相知

Android自定义View系列 (从小白做起) 二: 相知

作者头像
Anymarvel
发布2018-10-22 11:26:06
2970
发布2018-10-22 11:26:06
举报
文章被收录于专栏:Android开发实战Android开发实战

Android App开发过程中,很多时候会遇到系统框架中提供的控件无法满足我们产品的设计需求,那么这时候我们可以选择先Google下有没有比较成熟的开源项目可以让我们用,当然现在Github上面的项目非常丰富,能够满足我们绝不多数的开发需求,但是在使用这些炫酷的第三方控件时,我们也要想一想,我们是不是也可以发挥自己的想象力,动手实现自己想要的控件,尽可能掌控实现的细节!

上一章节中,主要介绍了三个主要成分 1.LayoutInflater.inflate()的参数及其用法 2.四种构造函数的说明,以及使用的地方 3.工具Paint、Rect、Canvas的简单介绍 4.事件传递机制的简要描述

如上述四点还不是很明白的 可以根据demo进行复习下,本章节继续分析自定义控件view的方法及过程

初识View

Android所有的控件都是View或者View的子类,它其实表示的就是屏幕上的一块矩形区域,用一个Rect来表示,left,top表示View相对于它的parent View的起点,width,height表示View自己的宽高,通过这4个字段就能确定View在屏幕上的位置,确定位置后就可以开始绘制View的内容了。

View的绘制过程

一般情况下大家都知道View的绘制可以分为下面三个过程:

Measure

View会先做一次测量,算出自己需要占用多大的面积。View的Measure过程给我们暴露了一个接口onMeasure,方法的定义是这样的,

代码语言:javascript
复制
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {}

View类已经提供了一个基本的onMeasure实现,

代码语言:javascript
复制
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
          getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}public static int getDefaultSize(int size, int measureSpec) {  int result = size;  int specMode = MeasureSpec.getMode(measureSpec);  int specSize = MeasureSpec.getSize(measureSpec);  switch (specMode) {  case MeasureSpec.UNSPECIFIED:
      result = size;      break;  case MeasureSpec.AT_MOST:  case MeasureSpec.EXACTLY:
      result = specSize;      break;
  }  return result;
}

其中invoke了setMeasuredDimension()方法,设置了measure过程中View的宽高,getSuggestedMinimumWidth()返回View的最小Width,Height也有对应的方法。插几句,MeasureSpec类是View类的一个内部静态类,它定义了三个常量UNSPECIFIED、AT_MOST、EXACTLY,其实我们可以这样理解它,它们分别对应LayoutParams中match_parent、wrap_content、xxxdp。我们可以重写onMeasure来重新定义View的宽高。

Layout

Layout过程对于View类非常简单,同样View给我们暴露了onLayout方法

代码语言:javascript
复制
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {}

因为我们现在讨论的是View,没有子View需要排列,所以这一步其实我们不需要做额外的工作。

Draw

Draw过程,就是在canvas上画出我们需要的View样式。同样View给我们暴露了onDraw方法

代码语言:javascript
复制
protected void onDraw(Canvas canvas) {}

默认View类的onDraw没有一行代码,但是提供给我们了一张空白的画布,举个例子,就像一张画卷一样,我们就是画家,能画出什么样的效果,完全取决我们。

View中还有三个比较重要的方法

  1. requestLayout View重新调用一次layout过程。
  2. invalidate View重新调用一次draw过程
  3. forceLayout 标识View在下一次重绘,需要重新调用layout过程。 自定义属性

整个View的绘制流程我们已经介绍完了,还有一个很重要的知识,自定义控件属性,我们都知道View已经有一些基本的属性,比如layout_width,layout_height,background等,我们往往需要定义自己的属性,那么具体可以这么做。

1.在values文件夹下,打开attrs.xml,其实这个文件名称可以是任意的,写在这里更规范一点,表示里面放的全是view的属性。 2.因为我们下面的实例会用到2个长度,一个颜色值的属性,所以我们这里先创建3个属性。

代码语言:javascript
复制
<declare-styleable name="rainbowbar">
  <attr name="rainbowbar_hspace" format="dimension"></attr>
  <attr name="rainbowbar_vspace" format="dimension"></attr>
  <attr name="rainbowbar_color" format="color"></attr></declare-styleable>

那么到底怎么用呢,我们会看一个实例。

实现一个比较简单的Google彩虹进度条。

因为我们这里不用关注measrue和layout过程,直接重写onDraw方法即可。 其实就是调用canvas的drawLine方法,然后每次将draw的起点向前推进,在方法的结尾,我们调用了invalidate方法,上面我们已经说明了,这个方法会让View重新调用onDraw方法,所以就达到我们的进度条一直在向前绘制的效果。下面是最后的显示效果,制作成gif时好像有色差,但是真实效果是蓝色的。

自定义View代码地址:https://github.com/AnyMarvel/CustomView

有兴趣关注下公众号 持续更新


本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-07-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Android历练记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 初识View
  • View的绘制过程
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档