系列文章目录

HenCode报名链接：hencoder.ke.qq.com

自定义UI 基础知识
自定义UI 绘制饼图
自定义UI 圆形头像
自定义UI 自制表盘
自定义UI 简易图文混排
自定义UI 使用Camera做三维变换
自定义UI 属性动画
自定义UI 自定义布局

文章目录

系列文章目录
前言
自定义UI
- 自定义视图组件
补充知识点
- Paint
- - 抗锯齿
附录

前言

最近在学习Android自定义UI。在网上搜索了一番关于自定义UI的内容，发现目前反馈最好的应该是扔物线的自定义UI教程（腾讯课堂的上课链接）。在万能的Github交友社区找到了扔物线的HenCoderPlus课程的源码。这系列的文章主要是基于扔物线的源码来分析学习。

本篇文章不详细介绍一些官方已经有详细讲解的内容，仅仅是作为官方文档外补充的笔记^_^。如果有必要，将会将官方文档的链接贴出来，方便各位看官享用。

自定义UI

本部分内容参考整理自 Android Developer：自定义视图组件

直接看官方文档的定义：自定义UI就是通过创建自己的 View 子类，您可以精确控制屏幕元素的外观和功能。自定义UI可以根据自定义的程度分为三种：

完全自定义组件；
- 完全自定义组件需要扩展 onDraw() 和 onMeasure()。
整合包含一组现有控件的可再用组件，也称为复合组件。
- 复合组件的好处：可以非常快速地构建任意复杂化的复合视图，并像使用单个组件一样重复使用它们。
修改现有 View 类型
- 如果已经有一个组件非常契合您的需要，则只需扩展该组件并只替换您希望更改的行为即可。

自定义视图组件

这一块直接看Android Developer的官方文章，就可以熟悉大概的流程。

概览
创建自定义视图类
实现自定义绘图
使视图可交互
优化视图：以下内容摘录自本文章。
- 不要在onDraw()方法中分配对象。因为分配可能会引起垃圾回收，从而造成卡顿。
- 确保尽可能降低调用onDraw()的频率。对onDraw()的大多数调用是由对invalidate()的调用引起的，因此请避免对invalidate()的不必要调用。
- 尽可能保持较浅的视图层次结构。Android 界面系统都需要遍历整个视图层次结构，以确定每个视图所需的尺寸。如果发现有冲突的尺寸，可能需要多次遍历该层次结构。

补充知识点

Paint

官方类说明文档：Paint

抗锯齿

在创建Paint的时候，默认需要加上ANTI_ALIAS_FLAG来开启反锯齿的功能。该功能可以主动在绘制时，平滑处理图像的边缘，让图像显示效果更加圆润。对比效果可见下图（左图未开抗锯齿，右图主动添加了抗锯齿）。如果看不清晰，可以放大图片查看^_^。

附上演示的代码：

public class PieChart extends View {private static final int RADIUS = (int) Utils.dp2px(150);// 抗锯齿（可以有效的解决毛边的问题）// Paint paint = new Paint(); // 图一配置：默认Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // 图二配置：抗锯齿public PieChart(Context context, @Nullable AttributeSet attrs) {super(context, attrs);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);int dot = getWidth() / 2;canvas.drawCircle(dot, dot, RADIUS, paint);}
}

如果需要更加详细的说明，可以查看：「HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础 - 插播四：抗锯齿」的内容。

附录

Android Developer：自定义视图组件
扔物线官网：扔物线
- 很感谢大佬提供的教程和源码，才能好好系统学习下自定义UI的内容。
- rengwuxian/HenCoderPlus
- rengwuxian/HenCoderPlus3

自定义UI 基础知识相关推荐

网络测速全解析之一：自定义View基础知识（八）
一.事件分发机制详解: 大佬名言:所有的源码都是为了适应具体的应用场景而写的,只要能够理解运用场景,理解源码也就十分简单了. 核心问题是:正确理解在实际场景中事件分发机制的作用. 常见事件事件简介 ...
自定义UI 简易图文混排
系列文章目录自定义UI 基础知识自定义UI 绘制饼图自定义UI 圆形头像自定义UI 自制表盘自定义UI 简易图文混排自定义UI 使用Camera做三维变换自定义UI 属性动画自定义UI ...
自定义UI 圆形头像
系列文章目录自定义UI 基础知识自定义UI 绘制饼图自定义UI 圆形头像自定义UI 自制表盘自定义UI 简易图文混排自定义UI 使用Camera做三维变换自定义UI 属性动画自定义UI ...
自定义UI 自制表盘
系列文章目录自定义UI 基础知识自定义UI 绘制饼图自定义UI 圆形头像自定义UI 自制表盘自定义UI 简易图文混排自定义UI 使用Camera做三维变换自定义UI 属性动画自定义UI ...
vue自定义指令基础
今天,我们讲讲vue自定义指令基础知识,主要包括指令如何创建,如何注册,以及指令的相关属性钩子函数. 指令的注册我们通过以下方法注册一个全局自定义指令 Vue.directive(name,defi ...
Android基础知识：在UI线程中运行代码
本文翻译自:Android basics: running code in the UI thread In the viewpoint of running code in the UI threa ...
【UI设计培训基础知识】设计中的点线面-线
UI设计所要学习的知识有很多,想要在后期的工作中稳稳当当,基础知识一定要扎实,下面就是小编为大家整理的一份关于UI设计培训基础知识的相关内容,主要讲的是设计中的点线面-线,来看看下面的详细资料吧. 点 ...
Android自定义view之基础知识
Android自定义view之基础知识虽然Android已经自带了很多实用的view和layout,加以调教能实现很美观的界面,但是有一些情况下,需要实现特殊的界面效果,比如我们比较熟悉的各种播放器 ...
[Vue 牛刀小试]：第八章 - 组件的基础知识
一.前言在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...

自定义UI 基础知识