Android 开发进阶: 自定义 View 1-1 绘制基础
Android 开发进阶: 自定义 View 1-2 Paint 详解
Android 开发进阶:自定义 View 1-3 drawText() 文字的绘制
Android 开发进阶:自定义 View 1-4 Canvas 对绘制的辅助 clipXXX() 和 Matrix
Android 开发进阶:自定义 View 1-5 绘制顺序
Android 自定义 View 1-6:属性动画 Property Animation(上手篇)
Android 自定义 View 1-7:属性动画 Property Animation(进阶篇)
Android 自定义 View 1-8 硬件加速
Android UI 部分 2-1 布局基础
Android UI 部分 2-2 全新定义 View 的尺寸
Android UI 部分 2-3 定制 Layout 的内部布局
自定义绘制概述
二话不说,我反手就是一个视频:首先总结一下视频中的关键点:
自定义绘制的方式是重写绘制方法,其中最常用的是 onDraw()
绘制的关键是 Canvas 的使用Canvas 的绘制类方法: drawXXX() (关键参数:Paint)
Canvas 的辅助类方法:范围裁切和几何变换
可以使用不同的绘制方法来控制遮盖关系
概念已经在视频里全部讲出来了,知识点并不多,但你可能也看出来了,我讲得并不细。这是因为知识点虽然不多,但细节还是很多的,仅仅靠一节分享不可能讲完。我按照顺序把这些知识分成了 4 个级别,拆成几节来讲,你按照这 4 个级别的顺序学习下来,就能够平滑地逐步进阶。
自定义绘制知识的四个级别Canvas 的 drawXXX() 系列方法及 Paint 最常见的使用
Canvas.drawXXX() 是自定义绘制最基本的操作。掌握了这些方法,你才知道怎么绘制内容,例如怎么画圆、怎么画方、怎么画图像和文字。组合绘制这些内容,再配合上 Paint 的一些常见方法来对绘制内容的颜色和风格进行简单的配置,就能够应付大部分的绘制需求了。
今天这篇分享我要讲的就是这些内容。也就是说,你在看完这篇文章并做完练习之后,上面这几幅图你就会绘制出来了。从今以后,你也很少再需要假装一本正经地对设计师说「不行这个图技术上实现不了」,也不用心惊胆战得等待设计师的那句「那 iOS 怎么可以」了。
Paint 的完全攻略
Paint 可以做的事,不只是设置颜色,也不只是我在视频里讲的实心空心、线条粗细、有没有阴影,它可以做的风格设置真的是非常多、非常细。例如:拐角要什么形状?
开不开双线性过滤?
加不加特效?
可以调节的非常多,我就不一一列举了。当你掌握到这个级别,就真的不会有什么东西会是 iOS 能做到但你做不到的了。就算设计师再设计出了很难做的东西,做不出来的也不再会是你们 Android 组了。
Canvas 对绘制的辅助——范围裁切和几何变换。
范围裁切:
几何变换:
大多数时候,它们并不会被用到,但一旦用到,通常都是很炫酷的效果。范围裁切和几何变换都是用于辅助的,它们本身并不酷,让它们变酷的是设计师们的想象力与创造力。而你要做的,是把他们的想象力与创造力变成现实。
使用不同的绘制方法来控制绘制顺序
控制绘制顺序解决的并不是「做不到」的问题,而是性能问题。同样的一种效果,你不用绘制顺序的控制往往也能做到,但需要用多个 View 甚至是多层 View 才能拼凑出来,因此代价是 UI 的性能;而使用绘制顺序的控制的话,一个 View 就全部搞定了。
自定义绘制的知识,大概就分为上面这四个级别。在你把这四个级别依次掌握了之后,你就是一个自定义绘制的高手了。它们具体的细节,我将分成几篇来讲。今天这篇就是第一篇: Canvas.drawXXX() 系列方法及 Paint 最基本的使用。我要正式开始喽?
一切的开始:onDraw()
自定义绘制的上手非常容易:提前创建好 Paint 对象,重写 onDraw(),把绘制代码写在 onDraw() 里面,就是自定义绘制最基本的实现。大概就像这样:Paint paint = new Paint();@Overrideprotected void onDraw(Canvas canvas) {
super.onDraw(canvas); // 绘制一个圆
canvas.drawCircle(300, 300, 200, paint);
}
就这么简单。所以关于 onDraw() 其实没什么好说的,一个很普通的方法重写,唯一需要注意的是别漏写了 super.onDraw()。
Canvas.drawXXX() 和 Paint 基础
drawXXX() 系列方法和 Paint 的基础掌握了,就能够应付简单的绘制需求。它们主要包括:Canvas 类下的所有 draw- 打头的方法,例如 drawCircle() drawBitmap()。
Paint 类的几个最常用的方法。具体是:Paint.setStyle(Style style) 设置绘制模式
Paint.setColor(int color) 设置颜色
Paint.setStrokeWidth(float width) 设置线条宽度
Paint.setTextSize(float textSize) 设置文字大小
Paint.setAntiAlias(boolean aa) 设置抗锯齿开关
对于比较习惯于自学的人(我就是这样的人),你看到这里就已经可以去 Google 的官方文档里,打开 Canvas 和 Paint 的页面,把上面的这两类方法学习一下,然后今天的内容就算结束了。当然,这篇文章也可以关掉了。
下面的内容就是展开讲解上面的这两类方法。
Canvas.drawColor(@ColorInt int color) 颜色填充
这是最基本的 drawXXX() 方法:在整个绘制区域统一涂上指定的颜色。
例如 drawColor(Color.BLACK) 会把整个区域染成纯黑色,覆盖掉原有内容; drawColor(Color.parse("#88880000") 会在原有的绘制效果上加一层半透明的红色遮罩。drawColor(Color.BLACK); // 纯黑
drawColor(Color.parse("#88880000"); // 半透明红色
类似的方法还有 drawRGB(int r, int g, int b) 和 drawARGB(int a, int r, int g, int b) ,它们和 drawColor(color) 只是使用方式不同,作用都是一样的。canvas.drawRGB(100, 200, 100);
canvas.drawARGB(100, 100, 200, 100);
这类颜色填充方法一般用于在绘制之前设置底色,或者在绘制之后为界面设置半透明蒙版。
drawCircle(float centerX, float centerY, float radius, Paint paint) 画圆
前两个参数 centerX centerY 是圆心的坐标,第三个参数 radius 是圆的半径,单位都是像素,它们共同构成了这个圆的基本信息(即用这几个信息可以构建出一个确定的圆);第四个参数 paint 我在视频里面已经说过了,它提供基本信息之外的所有风格信息,例如颜色、线条粗细、阴影等。canvas.drawCircle(300, 300, 200, paint);