Android: 自定义View

简介

每天我们都会使用很多的应用程序,尽管他们有不同的约定,但大多数应用的设计是非常相似的。这就是为什么许多客户要求使用一些其他应用程序没有的设计,使得应用程序显得独特和不同。

如果功能布局要求非常定制化,已经不能由Android内置的View创建 —这时候就需要使用自定义View了。而这意味着在大多数情况下,我们将需要相当长的时间来完成它。但这并不意味着我们不应该这样做,因为实现它是非常令人兴奋和有趣的。

我最近面临了类似的情况:我的任务是使用ViewPager实现Android应用引导页。不同于iOS,Android并没有提供这样的View,所以我不得不编写一个自定义View来实现它。

我花了一些时间来实现它。幸运的是,时下很多开源项目都有类似可复用的View,这节省了我和其他开发者的时间。我决定基于这种View创建一个公共库。如果你有类似的功能需求并且缺乏时间实现它,可以在github repo发现它。

Sample of using PageIndicatorView

绘制!

因为编写自定义View比起普通的View更耗时,你应该只在为了实现特定的功能但没有更简单的方法情况下使用自定义View,或者你希望通过自定义View解决以下问题:

  1. 性能。如果你布局里面有很多View,你想通自定义View优化它,使其更轻量。
  2. 视图层次结构复杂。
  3. 一个完全自定义的View,需要手动绘制才能实现。

如果你还没有尝试过编写自定义View,这篇文章将教会你绘制扁平的自定义View的一些技巧。我将会告诉你整体的视图结构,如何实现具体的功能,不要重犯常见的错误,以及实现动画效果!

我们需要知道的第一件事 –View的生命周期。不知出于某种原因,谷歌并没有提供View生命周期的图表,由于开发者普遍对其有误解,导致了一些意想不到的错误和问题,所以我们要认清这过程。

构造函数

每个View的生命都是从构造函数开始。而且这是一个绘制初始化,进行各种计算,设定默认值或做任何我们需要的事情很好的地方。

但是,为了使我们的View更易于使用和配置,Android提供了很有用的AttributeSet接口。它很容易实现,而且绝对值得花时间去了解和实现它,因为它会帮助你(和你的团队)通过静态参数来设置View,对于以后新特性加入或者新屏幕拓展性支持也更好。

首先,创建一个新的文件attrs.xml。所有不同的自定义View属性都可以放在该文件中。正如你看到的这个例子,我们有一个PageIndicatorView和它的唯一属性piv_count。

Custom Attributes sample

紧接着在View的构造函数中,你需要获取这个属性并使用它,如下图所示。


  1. public PageIndicatorView(Context context, AttributeSet attrs) { 
  2.     super(context, attrs); 
  3.     TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.PageIndicatorView); 
  4.     int count = typedArray.getInt(R.styleable.PageIndicatorView_piv_count,0); 
  5.     typedArray.recycle(); 
  6. }  

注意:

  • 在创建自定义属性使用一个简单的前缀,以避免与其它View类似的属性名称冲突。一般我们使用View名称缩写,就像例子中的piv_。
  • 如果你使用的是Android Studio,一旦你使用完属性,lint会建议你调用recycle()方法 。The reason is just to get rid of inefficiently bound data that’s not gonna be used again。[译者注:翻译有点拗口,其实就是回收TypedArray,以便后面重用]

onAttachedToWindow

父View调用addView(View)后,这个View将被依附到一个窗口。在这个阶段,我们的View会知道它被包围的其他view。如果你的View和其他View在相同的layout.xml,这是通过id找到他们的好地方(你可以通过属性进行设置),同时可以保存为全局(如果需要)的引用。

onMeasure

这意味着我们的自定义View到了处理自己的大小的时候。这是非常重要的方法,因为在大多数情况下,你的View需要有特定的大小以适应你的布局。

当你重写此方法,需要记得的是,最终要设置setMeasuredDimension(int width, int height) 。

onMeasure

当处理自定义View的大小时候,使用者可能通过layout.xml或者动态设置了具体的大小。要正确地计算它,我们需要做几件事情。

1.计算你的View内容所需的大小(宽度和高度)。

2.获取你的View MeasureSpec大小和模式(宽度和高度)。


  1. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
  2.         int widthMode = MeasureSpec.getMode(widthMeasureSpec); 
  3.         int widthSize = MeasureSpec.getSize(widthMeasureSpec); 
  4.         int heightMode = MeasureSpec.getMode(heightMeasureSpec); 
  5.         int heightSize = MeasureSpec.getSize(heightMeasureSpec); 
  6.     }  

3.检查MeasureSpec 设置和调整View(宽度和高度)的尺寸模式。


  1. int width; 
  2.   if (widthMode == MeasureSpec.EXACTLY) { 
  3.      width = widthSize; 
  4.    } else if (widthMode == MeasureSpec.AT_MOST) { 
  5.      width = Math.min(desiredWidth, widthSize); 
  6.   } else { 
  7.     width = desiredWidth; 
  8.   }  

注意:

看看MeasureSpec的值:

  • MeasureSpec.EXACTLY 意味着硬编码大小值,所以你应该设置指定的宽度或高度。
  • MeasureSpec.AT_MOST 用于表明你的View匹配父View的大小,所以它应该和他想要的大小一样大。

[译者注:此时View尺寸只要不超过父View允许的最大尺寸即可]

  • MeasureSpec.UNSPECIFIED 实际上是视图包装尺寸。因此,你可以使用上面计算所需的大小。

在通过setMeasuredDimension设置最终值之前,以防万一,可以检查这些值不为负数。这可以避免在布局预览时一些问题。

onLayout

此方法分配大小和位置给它的每一个子View。正因为如此,我们正在研究一个扁平的自定义视图(继承简单的View)不具有任何子View,那么就没有理由重写此方法。[译者注:实现可以参考Custom Layouts on Android]

onDraw

这就是发生魔法的地方。在这里,使用Canvas和Paint对象你将可以画任何你需要的东西。

一个Canvas实例从onDraw参数得来,它一般用于绘制不同形状,而Paint对象定义形状颜色。简单地说,Canvas用于绘制对象,而Paint用于造型。它们无处不在,无论绘制的是一个直线,圆或长方形。

onDraw() — methods example

使自定义View,要始终牢记onDraw会花费大量的时间。当布局有一些变化,滚动、快速滑动都会导致重新绘制。所以这就是为什么Android Studio也建议:避免在onDraw中进行对象分配的操作,对象应该只创建一次并在将来重用。

onDraw() — Paint object recreation

onDraw() — Paint object reuse

注意:

  • 在执行绘制时始终牢记重用对象,而不创建新的。不要依赖于IDE高亮一个潜在的问题,而是自己有意识地去做这件事,因为在onDraw调用一个内部会创建对象的方法时,IDE无法识别它。
  • 同时请不要硬编码View大小。其他开发者在使用时可以定义不同的大小,所以View大小应该取决于它有什么尺寸。

View 更新

从View的生命周期图可以得知,可以重绘View自身有两种方法。invalidate()和requestLayout()方法会帮助你在运行时动态改变View状态。但为什么需要两个方法?

  • invalidate()用来简单重绘View。例如更新其文本,色彩或触摸交互性。View将只调用onDraw()方法再次更新其状态。
  • requestLayout()方法,你可以看到其将会从`onMeasure()开始更新View。这意味着你的View更新后,它改变它的大小,你需要再次测量它,并依赖于新的大小来重新绘制。

动画

在自定义View中,动画是一帧一帧的过程。这意味着,如果你想使一个圆半径从小变大,你将需要逐步增加半径并调用invalidate()来重绘它。

在自定义View动画中,ValueAnimator是你的好朋友。下面这个类将帮助你从任何值开始执行动画到最后,甚至支持Interpolator(如果需要)。


  1. ValueAnimator animator = ValueAnimator.ofInt(0, 100); 
  2. animator.setDuration(1000); 
  3. animator.setInterpolator(new DecelerateInterpolator()); 
  4. animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
  5.   public void onAnimationUpdate(ValueAnimator animation) { 
  6.     int newRadius = (int) animation.getAnimatedValue(); 
  7.   } 
  8. });  

注意:

当每一次新的动画值出来时,不要忘记调用invalidate()。

本文作者:佚名

来源:51CTO

时间: 2024-12-24 20:47:06

Android: 自定义View的相关文章

android自定义view插入xml

问题描述 android自定义view插入xml 自定义View代码如下.我希望把这个view插入到一个layout的xml的文件中.一直出错,错误类型是error inflating class.应该是这个View出的问题package com.example.browserstation; import java.util.Timer;import java.util.TimerTask; import android.content.Context;import android.graph

组合-android自定义view怎样指定自定义view的布局

问题描述 android自定义view怎样指定自定义view的布局 我有现成的布局xml文件,现在想定义一个组合的自定义view,怎样把这个view的布局指定为一个xml文件 解决方案 LayoutInflater.from(mActivity).inflate(R.layout.mainscreen_title, this, true);这样就行了,this是当前的View,而后面这两个参数是将R.layout.mainscreen_title attachToRoot 也就是以当前这个Vie

Android自定义View之使用贝塞尔曲线实现流量进度条

第一次写带图片的博客,多少还是有点紧张,效果不好,请将就着看,前面的图是今天要写的控件的效果图,元素不多,分别是一个按钮和一个自定义的控件. 在此以前,我看过许多的书,比如<Android群英传>.<第一行代码>等,也看了很多大神的博客,但是即便是这样,当我看到这么多代码的时候,一直都没有真正的动手去敲过这些代码,以至于我总是觉得自定义View是一个多么高深莫测的技术,我们这些小白是难以触及的,但是当昨晚看了一篇鸡汤之后,觉得人还是要学会专注,要耐得住寂寞,要沉得住气.所以在未来的

Android自定义View之绘制音乐播放器示波器

周末玩的有点嗨,没更新博客了,今天补上,这个示波器是在大学的时候老师教的,但是出来工作一直没有用到过,渐渐的也就忘记了,现在重新学习一下.来看看效果图: 这里是一个自定义的柱状图,然后有一个按钮,点击按钮的时候,这里柱子会不停的运动,类似于音乐播放器里示波器的跳动. 跟前面几个自定义view的方式类似,重写了onSizeChange()方法和onDraw()方法  先列一下我们要用到的变量 Paint mPaint; mWidth; mRectWidth; mRectHeight; mRectC

Android自定义View之弧线展示图

前面我也写了有几个自定义进度的控件,那么,今天,我再加一个控件,原理跟前面讲的差不多,先看看效果: 这个是一个以弧线为依托的进度控件,主要包括了两个圆弧.一个圆.一个文本. 当我们点击开始按钮的时候,会出现一个动画,逐渐的出现进度,好了,下面开始我们的编码. 新建一个类,继承自View,实现三个构造方法,接着定义变量,初始化变量的数据.代码如下: Paint mArcPaint, mCirclePaint, mTextPaint, mPaint; length; mRadius; mCircle

Android自定义View之仿QQ等级天数进度

最近一直都在看自定义View这一块.差不多一个星期了吧.这个星期坚持每天更新博客,感觉自己的技术也有点突破,对自定义View的计算也有了更深的认识. 今天坐地铁玩手机的时候,看到手机一个成长天数进度的控件,觉得挺有意思的,于是想自己也写一个.效果如下: 由图可以知道,这里面有很多个元素,首先是背景的矩形区域,其次就是两个环形,然后三个Text文本.其实不复杂,我们一点一点的去实现. 首先呢,画矩形背景.这里用到一个RectF的类,这个类包含一个矩形的四个单精度浮点坐标.矩形通过上下左右4个边的坐

Android自定义View之仿vivo i管家病毒扫描动画效果

技术是永无止境的,如果真的爱技术,那就勇敢的坚持下去.我很喜欢这句话,当我在遇到问题的时候.当我觉得代码枯燥的时候,我就会问自己,到底是不是真的热爱技术,这个时候,我心里总是起着波澜,我的答案是肯定的,我深深的爱着这门技术. 今天我们继续聊聊Android的自定义View系列.先看看效果吧: 这个是我手机杀毒软件的一个动画效果,类似于雷达搜索,所以用途还是很广泛的,特别是先了解一下这里的具体逻辑和写法,对技术的进步一定很有用. 先简单的分析一下这里的元素,主要有四个圆.一个扇形.还有八条虚线.当

Android自定义View之实现理财类APP七日年化收益折线图效果

这段时间的自定义View学习,学会了绘制柱状图.绘制折线图.绘制进度控件,那我们今天就来聊聊另外一种自定义的View,这就是我们常见的七日年化收益折线图效果.先看看长什么样. 这就是效果图了,元素相对而言还是比较多的,这里有线.柱状图.文字.折线.点等等.看起来好像很复杂,但是呢,只要一步一步的实现,那还是可以达到这种效果的,之前我们说过的, 自定义View,就像是在photo shop里面画图,想要什么就画什么,我们可以有很多的画笔工具,也可以有很多的图层. 先看看我们这一次用到哪些变量. P

Android自定义View——自定义搜索框(SearchView)

概述 在Android开发中,当系统数据项比较多时,常常会在app添加搜索功能,方便用户能快速获得需要的数据.搜索栏对于我们并不陌生,在许多app都能见到它,比如豌豆荚 在某些情况下,我们希望我们的自动补全信息可以不只是纯文本,还可以像豌豆荚这样,能显示相应的图片和其他数据信息,因此Android给我们提供的AutoCompleteTextView往往就不够用,在大多情况下我们都需要自己去实现搜索框. 分析 根据上面这张图,简单分析一下自定义搜索框的结构与功能,有  1. 搜索界面大致由三部门组

Android自定义View之圆形进度条总结

最近撸了一个圆形进度条的开源项目,算是第一次完完整整的使用自定义 View .在此对项目开发思路做个小结,欢迎大家 Star 和 Fork. 该项目总共实现了三种圆形进度条效果 CircleProgress:圆形进度条,可以实现仿 QQ 健康计步器的效果,支持配置进度条背景色.宽度.起始角度,支持进度条渐变 DialProgress:类似 CircleProgress,但是支持刻度 WaveProgress:实现了水波纹效果的圆形进度条,不支持渐变和起始角度配置,如需此功能可参考 CircleP