GcsSloop

构建个人 Wiki 站点的完整技能

Thu, 07 May 2026 00:00:00 +0800

如何使用这份文档

直接把本页面链接丢给 Codex、Claude Code、OpenCode 等 AI 编程工具，让 AI 帮你完成全部配置和整理工作。

具体操作：

把当前文档的链接或内容发送给 AI 工具
告诉 AI 你想搭建个人 Wiki 站点
AI 会根据本文档的流程，提示你配置以下平台账号和认证：
- Cloudflare 账号和 API Token
- Obsidian 或 Markdown 知识库
- Quartz 静态站点生成器
整体流程、数据整理和平台配置都可以交给 AI 处理

本文档的价值在于：为 AI 提供完整的知识库架构规范和操作流程，让 AI 能准确理解你的知识管理需求，并按标准流程执行。

个人 Wiki 不是”把 Markdown 放进一个目录”这么简单。真正能长期运转的系统，需要同时解决四件事：资料从哪里来，原始资料如何保持可信，知识如何被二次编译，最后如何发布成稳定可访问的网站。

这套技能的核心思想是：把知识管理当成一条工程流水线，而不是一个随手堆文件的笔记夹。

一句话模型

inbox -> raw -> wiki -> outputs -> Quartz -> Cloudflare Pages

每一层只做一件事：

层级	作用	原则
`inbox/`	收集碎片、草稿、摘录和未整理想法	允许混乱，不要求结构稳定
`raw/`	保存原始资料和最小元数据	只补 frontmatter，不改写成总结稿
`wiki/`	编译摘要、概念和本地索引	结构化、可追溯、可检索
`outputs/`	保存问答、健康检查、发布成品	只放运行结果，不当作原始输入
`outputs/quartz/`	发布工程	由脚本生成站点，不手工改生成目录

只要这条边界守住，个人知识库就不会在几个月后变成无法维护的资料堆。

适用场景

这套技能适合以下人群：

想把 Obsidian、Markdown、AI Agent 和静态站点结合起来的人。
已经有大量资料、摘录、网页、知乎回答、论文、报告，但缺少统一整理流程的人。
希望让个人知识库既能被自己检索，又能选择性发布成公开网站的人。
希望用 AI 辅助整理，但不想让 AI 把来源、事实和总结混在一起的人。

不适合只想临时写几篇博客的人。博客可以直接写文章，Wiki 更适合长期沉淀、交叉引用和反复编译。

仓库结构

推荐从下面这组目录开始：

.
├── inbox/
│   └── processed/
├── raw/
│   ├── articles/
│   ├── books/
│   ├── papers/
│   ├── videos/
│   ├── podcasts/
│   ├── zhihu/
│   ├── reports/
│   └── manifests/
├── wiki/
│   ├── summaries/
│   ├── concepts/
│   └── indexes/
├── outputs/
│   ├── qa/
│   ├── health/
│   └── quartz/
├── .agents/
│   └── skills/
└── docs/
    └── skills/

其中最重要的边界是：raw/ 是输入层，wiki/ 是编译层，outputs/ 是运行层。不要把三者混用。

Inbox：允许混乱，但不能永久混乱

inbox/ 是预处理层，用来接收还没有定型的内容：

临时摘录
网页片段
阅读笔记
会议碎片
个人想法
没判断价值的材料

这里可以乱，但不能长期不处理。进入正式知识库之前，必须先做四件事：

拆分：一份笔记里混了多个主题，要拆开。
归并：同一来源的多个片段，要合并。
补上下文：来源、作者、时间、链接、资料类型。
判断归属：它是文章、书、论文、视频、播客、知乎，还是报告。

处理完成后，原始 inbox 内容移动到 inbox/processed/。这个目录只是临时已处理区，不能作为正式知识来源引用，也不参与索引、编译和发布。

Raw：原始资料层

raw/ 的职责是保存可信输入。它可以补元数据，但不要把原始内容改写成总结稿。

第一层目录只回答“资料是什么形态”，不要回答“资料讲什么主题”。例如：

raw/articles/
raw/books/
raw/papers/
raw/videos/
raw/podcasts/
raw/zhihu/
raw/reports/

知乎内容统一放到 raw/zhihu/，不要因为它讲管理、AI 或商业，就分散到 raw/articles/management/ 里。主题归属交给 frontmatter。

一个 raw 条目至少包含这些字段：

---
title: 提问的智慧
source_type: zhihu
domain:
  - 通用
topics:
  - 沟通
  - 提问
source_url: https://example.com/source
author: 作者名
published: 2017-01-26
ingested_at: 2026-05-07
tags:
  - 沟通
  - 提问
---

字段的分工要清楚：

字段	作用
`domain`	大领域，例如管理、低空经济、人工智能、通用
`topics`	可聚类主题，例如沟通、领导力、无人机、政策
`tags`	给人阅读和站点标签页使用的中文检索标签
`source_url`	原始出处，不要只放首页或转载页
`original_title`	原题过长或营销化时，用来保留原题

标题要短、稳定、可读。不要使用序号前缀，不要用冒号、横线、下划线拼标题，也不要保留 **标题** 这类 Markdown 标记。

Wiki：编译层

wiki/ 不保存原文，保存对原文的结构化加工结果。

综述

综述放在 wiki/summaries/，文件命名使用：

<主题>综述.md

例如：

wiki/summaries/团队管理综述.md
wiki/summaries/低空经济综述.md
wiki/summaries/个人知识库综述.md

一篇综述至少包含：

主题
核心结论
关键证据
疑点与限制
关键术语
来源

综述的重点是“围绕主题聚合证据”，不是按导入批次写日报。不要创建 S-001、第1批资料总结 这种文件。

概念

概念放在 wiki/concepts/，文件名使用纯概念名：

wiki/concepts/组织博弈.md
wiki/concepts/向上管理.md
wiki/concepts/知识编译.md

概念页要解决“这个概念到底是什么”和“如何判断一个现象是否属于它”。建议结构是：

定义
别名
相关概念
边界：包含什么，不包含什么
常见混淆
判定规则
代表证据
来源

概念页不要写成综述压缩版。综述负责叙述和证据聚合，概念负责定义、边界和判定。

索引

索引放在 wiki/indexes/，常用三个：

wiki/indexes/All-Sources.md
wiki/indexes/All-Concepts.md
wiki/indexes/All-Topics.md

索引只服务本地 AI 和脚本检索，不参与公开站点发布，也不作为知识图谱节点。索引里只放目录和跳转，不堆正文。

Outputs：运行结果层

outputs/ 用来保存“运行中产生的结果”，而不是保存新资料。

常见内容有三类：

目录	内容
`outputs/qa/`	复杂问答归档
`outputs/health/`	健康检查报告
`outputs/quartz/`	Quartz 发布工程

复杂问答归档建议包含：

问题
时间
使用来源
结论
证据
不确定性

健康检查至少检查三件事：

一致性：概念定义是否冲突。
完整性：条目是否缺定义、例子或来源。
孤岛：是否存在没有链接、无法被主题检索到的内容。

Agent Skills：把流程固化成可执行动作

个人 Wiki 最容易失败的地方，是每次整理都靠临场发挥。更好的方式是把流程拆成一组可调用的 skills。

推荐最小技能集：

Skill	作用
`triage-inbox`	把 inbox 里的碎片整理成 raw-ready 材料
`ingest-source`	把确认后的资料写入 raw 并补元数据
`compile-summaries`	从 raw 编译主题综述
`compile-concepts`	从综述沉淀概念条目
`refresh-indexes`	刷新 sources、concepts、topics 索引
`archive-qa`	把复杂问答沉淀到 outputs/qa
`run-health-check`	检查一致性、完整性和孤岛
`deploy-project`	构建并发布 Quartz 站点

技能文件放在：

.agents/skills/<skill-name>/SKILL.md

对应的人类说明文档放在：

docs/skills/

这样做的好处是：Agent 执行有机器可读的规则，人自己维护时也有中文操作手册。

附件处理

图片、PDF、视频等附件不要直接塞进 git。更稳的做法是：

先放入 inbox。
由整理脚本统一重命名。
上传到对象存储，例如 Cloudflare R2。
在 raw 或 wiki 中引用发布路径，例如 /assets/...。

这样仓库保持轻量，站点发布也更稳定。

发布路径规范

公开站点里的链接不要写本机绝对路径。应该使用发布路径：

/raw/...
/wiki/...
/assets/...

例如：

来源：[提问的智慧](/raw/zhihu/2017-01-26-提问的智慧/)
相关概念：[向上管理](/wiki/concepts/向上管理/)

这条规则很重要。只要文章里出现 /Users/... 这类路径，公开站点就和你的本机环境绑定了。

Quartz 发布工程

outputs/quartz/ 是完整的 Quartz 发布工程，但其中的 .generated-content/ 是生成目录，不能手工编辑。

发布流程应该固定成一个脚本入口：

./scripts/publish-project.sh

脚本负责：

进入 outputs/quartz/。
执行站点构建。
读取当前 git commit hash、commit message 和工作区状态。
使用 Wrangler 发布到 Cloudflare Pages。

如果只想检查命令，不真正发布：

./scripts/publish-project.sh --dry-run

默认 Pages 项目可以设为 wiki-gcssloop，也可以通过环境变量覆盖：

CLOUDFLARE_PAGES_PROJECT=your-project ./scripts/publish-project.sh

完整工作流

日常使用时，可以按这个顺序执行：

把新资料放入 inbox/
用 triage-inbox 拆分、归并、补上下文
用 ingest-source 写入 raw/
检查 raw 的 title、domain、topics、tags、source_url
用 compile-summaries 生成或更新主题综述
用 compile-concepts 维护概念页
用 refresh-indexes 更新本地索引
必要时用 archive-qa 保存复杂问答
定期用 run-health-check 做体检
用 deploy-project 发布 Quartz 站点

这条链路里最关键的是第 4 步。没有稳定元数据，后面的综述、概念和索引都会退化成手工整理。

判断一条资料能不能进入 raw

可以用下面的 checklist：

是否知道来源？
是否知道作者或发布主体？
是否知道发布时间，至少知道抓取时间？
是否能判断资料形态？
是否能写出简短标题？
是否能归入一个或多个 domain？
是否能标出一个或多个 topics？
是否保留了原始链接？
涉及政策、数据、统计时，是否有原始出处？

如果这些问题答不上来，先不要进入 raw，继续留在 inbox 处理。

判断一篇综述是否合格

一篇合格综述应该做到：

不是原文复制。
不是单篇资料的读后感。
不是按导入批次堆条目。
每个关键结论能回到来源。
能明确列出疑点和限制。
能产生可沉淀的概念候选。

综述不是越长越好。它的价值在于让你快速看到某个主题下“目前已经知道什么，还不知道什么”。

判断一个概念页是否合格

一个合格概念页应该能回答：

它是什么？
它不是什么？
它和哪些概念容易混？
判断它是否成立的规则是什么？
有哪些代表性证据？
这些证据来自哪里？

如果一个概念页只有一段定义，没有边界、混淆和判定规则，它还只是词条，不是可用的知识工具。

最小可运行版本

如果从零开始，不要一次性搭完整系统。可以先做最小版本：

inbox/
raw/articles/
wiki/summaries/
wiki/concepts/
wiki/indexes/
outputs/quartz/

第一阶段只要求做到：

所有资料先进入 inbox。
确认有价值的资料进入 raw。
每周编译 1 到 3 篇综述。
每周沉淀 3 到 5 个概念。
每次发布只走固定脚本。

等这个流程稳定后，再补附件上传、健康检查、问答归档和多平台发布。

最常见的错误

错误	后果
直接把 inbox 内容发布	资料来源和结构不稳定
raw 里写总结稿	原始资料和编译结果混在一起
按主题创建 raw 一级目录	资料形态和主题分类纠缠
综述按批次命名	后续无法按主题复用
概念页只写定义	无法用于判断和推理
索引参与发布	本地检索层污染公开站点
手工编辑生成目录	下次构建被覆盖
公开链接写本机路径	站点迁移和访问都会失效

结论

构建个人 Wiki 站点，真正要搭的不是一个网站，而是一条可重复运行的知识生产线。

inbox 负责接收混乱，raw 负责保留可信输入，wiki 负责结构化编译，outputs 负责沉淀运行结果，Quartz 和 Cloudflare Pages 负责把其中适合公开的部分发布出去。

只要每一层职责清楚，再配合一组稳定的 Agent skills，个人 Wiki 就可以从“写笔记”升级为“持续编译自己的知识系统”。

安卓自定义View进阶-画笔基础(Paint)

Wed, 24 Oct 2018 00:00:00 +0800

在Android自定义View系列文章中，前面的部分有详细的讲解画布(Canvas)的功能和用法，但是和画布(Canvas)共同出现的画笔(Paint)却没有详细的讲解，本文带大家较为详细的了解一下画笔的相关内容。

Paint 在英文中作为名词时主要含义是涂料，油漆，颜料的意思，作为动词则具有绘画、粉刷的意思，不过在程序相关的中文博客里面，Paint 通常被解释为画笔，本文也将采用这种翻译，因此本文里面提到的画笔如没有特殊表明就指代 Paint。

0.引子

通过本系列前面的文章知道，View 上的内容是通过 Canvas 绘制出来的，但 Canvas 中的大多数绘制方法都是需要 Paint 作为参数的，例如 canvas.drawCircle(100, 100, 50, paint) 最后就需要传递一个 Paint。这是为什么呢？

因为画布本身只是呈现的一个载体，真正绘制出来的效果却要取决于画笔，就像同样白纸，要绘制一幅山水图，用毛笔画和用铅笔画的效果肯定是完全不同的，决定不同显示效果的并不是画布(Canvas), 而是画笔(Paint)。

同样，在程序设计中也采用的类似的设计思想，画布的 draw 方法只是规定了所需要绘制的是什么东西，但具体绘制出什么效果则通过画笔来控制。
例如： canvas.drawCircle(100, 100, 50, paint)，这个方法说明了要在坐标 (100, 100) 的位置绘制一个半径为 50 的圆，但是这个圆具体要绘制成什么样子却没有明确的表明，圆的颜色，圆环还是圆饼等都没有明确的指示，而这些内容正存在于画笔之中。

1. 内容概览

既然是介绍画笔，自然要先总览一下它都有哪些功能，下面简要的列出一些本文中会涉及到的内容。

1.1 内部类

类型	简介
enum	Paint.Cap Cap指定了描边线和路径(Path)的开始和结束显示效果。
enum	Paint.Join Join指定线条和曲线段在描边路径上连接的处理。
enum	Paint.Style Style指定绘制的图元是否被填充，描边或两者均有(以相同的颜色)。

1.2 常量

类型	简介
int	ANTI_ALIAS_FLAG 开启抗锯齿功能的标记。
int	DITHER_FLAG 在绘制时启用抖动的标志。
int	FILTER_BITMAP_FLAG 绘制标志，在缩放的位图上启用双线性采样。

1.3 构造方法

构造方法	摘要
Paint()	使用默认设置创建一个新画笔。
Paint(int flags)	创建一个新画笔并提供一些特殊设置(通过 flags 参数)。
Paint(Paint paint)	创建一个新画笔，并使用指定画笔参数初始化。

1.4 公开方法

画笔有 100 个左右的公开方法，限于篇幅，在本文中只会列举一部分方法，其余的内容，则放置于后续文章中再详细介绍。

返回值	简介
int	getFlags() 获取画笔相关的一些设置(标志)。
int	getFlags() 获取画笔相关的一些设置(标志)。
void	setFlags(int flags) 设置画笔的标志位。
void	set(Paint src) 复制 src 的画笔设置。
void	reset() 将画笔恢复为默认设置。
int	getAlpha() 只返回颜色的alpha值。
void	setAlpha(int a) 设置透明度。
int	getColor() 返回画笔的颜色。
void	setColor(int color) 设置颜色。
void	setARGB(int a, int r, int g, int b) 设置带透明通道的颜色。
float	getStrokeWidth() 返回描边的宽度。
void	setStrokeWidth(float width) 设置线条宽度。
Paint.Style	getStyle() 返回paint的样式，用于控制如何解释几何元素（除了drawBitmap，它总是假定为FILL_STYLE）。
void	setStyle(Paint.Style style) 设置画笔绘制模式(填充，描边，或两者均有)。
Paint.Cap	getStrokeCap() 返回paint的Cap，控制如何处理描边线和路径的开始和结束。
void	setStrokeCap(Paint.Cap cap) 设置线帽。
Paint.Join	getStrokeJoin() 返回画笔的笔触连接类型。
void	setStrokeJoin(Paint.Join join) 设置连接方式。
float	getStrokeMiter() 返回画笔的笔触斜接值。用于在连接角度锐利时控制斜接连接的行为。
void	setStrokeMiter(float miter) 设置画笔的笔触斜接值。用于在连接角度锐利时控制斜接连接的行为。
PathEffect	getPathEffect() 获取画笔的 patheffect 对象。
PathEffect	setPathEffect(PathEffect effect) 设置 Path 效果。
boolean	getFillPath(Path src, Path dst) 将任何/所有效果（patheffect，stroking）应用于src，并将结果返回到dst。结果是使用此画笔绘制绘制 src 将与使用默认画笔绘制绘制 dst 相同（至少从几何角度来说是这样的）。

2. 画笔介绍

由于画笔需要控制的内容也相当的多，因此它内部包含了相当多的属性变量，配置起来也相当繁杂，不过比较好的是，画笔会提供一套默认设置来供我们使用。例如，创建一个新画笔，这个新画笔已经默认设置了绘制颜色为黑色，绘制模式为填充。

2.1 画笔基本设置

要使用画笔就要会创建画笔，创建一个画笔是非常简单的，在之前的文章中也有过简单的介绍。它有三种创建方法，如下：

// 1.创建一个默认画笔，使用默认的配置
Paint()
// 2.创建一个新画笔，并通过 flags 参数进行配置。
Paint(int flags)
// 3.创建一个新画笔，并复制参数中画笔的设置。
Paint(Paint paint)

第1种方式创建默认画笔的方式相信大家都会。

第2种方式如果设置 flags 为 0 创建出来和默认画笔也是相同的，至于 flags 参数可用设置哪些内容，可以参考最上面的常量表格，里面的参数都是可以设置的，如果需要设置多个参数，参数之间用 | 进行连接即可。如下：

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG); 

第3种方式是根据已有的画笔复制一个画笔，就是将已有画笔的所有属性都复制到新画笔种，也比较容易理解：

Paint paintCopy = new Paint(paint);

复制后的画笔是一个全新的画笔，对复制后的画笔进行任何修改调整都不会影响到被复制的画笔。

你可以观察下面的测试代码来了解以上的3种创建方式。

Paint paint1 = new Paint();
Log.i(TAG, "paint1 isAntiAlias = " + paint1.isAntiAlias());
Log.i(TAG, "paint1 isDither = " + paint1.isDither());

Paint paint2 = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
Log.i(TAG, "paint2 isAntiAlias = " + paint2.isAntiAlias());
Log.i(TAG, "paint2 isDither = " + paint2.isDither());

Paint paint3 = new Paint(paint2);
paint3.setAntiAlias(false);
Log.i(TAG, "paint3 isAntiAlias = " + paint3.isAntiAlias());
Log.i(TAG, "paint3 isDither = " + paint3.isDither());

输出结果：

paint1 isAntiAlias = false
paint1 isDither = false
    
paint2 isAntiAlias = true
paint2 isDither = true
    
paint3isAntiAlias = false
paint3 isDither = true

画笔在创建之后依旧可以调整，上面的第2种和第3种创建方式，进行的参数设置，在画笔创建完成后依旧可以进行。通过如下的方法：

返回值	简介
int	getFlags() 获取画笔相关的一些设置(标志)。
void	setFlags(int flags) 设置画笔的标志位。
void	set(Paint src) 复制 src 的画笔设置。
void	reset() 将画笔恢复为默认设置。

不过并不建议使用 setFlags 方法，这是因为 setFlags 方法会覆盖之前设置的内容，例如：

Paint paint = new Paint();
paint.setFlags(Paint.ANTI_ALIAS_FLAG);
paint.setFlags(Paint.DITHER_FLAG);
Log.i(TAG, "paint isAntiAlias = " + paint.isAntiAlias());
Log.i(TAG, "paint isDither = " + paint.isDither());

输出结果：

paint isAntiAlias = false
paint isDither = true

从结果可以看出，只有最后一次设置的内容有效，之前设置的所有内容都会被覆盖掉。因此不推荐使用。

如果了解 Google 工程师比较喜欢的编码规范就可以知道原因是什么，最终的flags是由多个flag用”或(|)”连接起来的，也就是一个变量，如果直接使用 set 方法，自然是会覆盖掉之前设置的内容的。如果想要调整 flag 个人建议还是使用 paint 提供的一些封装方法，如：setDither(true)，而不要自己手动去直接操作 flag。

如果有人对 flags 的存储方式感兴趣可以看看这个例子，假如：0x0001 表示类型A， 0x0010 表示类型B，0x0100 表示类型C，0x1000 表示类型D，那么当类型ABD同时存在，但C不存在时时只用存储 0x1011 即可，相比于使用4个 boolean 值来说，这种方案可以显著的节省内存空间的占用，并且用户设置起来也比较方便，可以使用或”|“同时设置多个类型。当然弊端也是有的，那就是单独更改其中一个参数时时稍微麻烦一点，需要进行一些位运算。

使用 set(Paint src) 可以复制一个画笔，但需要注意的是，如果调用了这个方法，当前画笔的所有设置都会被覆盖掉，而替换为所选画笔的设置。

如果想将画笔重置为初始状态，那就调用 reset() 方法，该方法会让画笔的所有设置都还原为初始状态，调用该方法后得到的画笔和刚创建时的状态是一样的。

2.2 画笔颜色

这个是最常用的方法，它相关的方法如下；

返回值	简介
int	getAlpha() 只返回颜色的alpha值。
void	setAlpha(int a) 设置透明度。
int	getColor() 返回画笔的颜色。
void	setColor(int color) 设置颜色。
void	setARGB(int a, int r, int g, int b) 设置带透明通道的颜色。

Android 中有 1 个透明通道(Alpha)和 3 个色彩通道(RGB)，其中 Alpha 通道可以单独设置。通过 getAlpha() 和 setAlpha(int a) 方法可以单独调整透明通道，其中 setAlpha(int a) 中参数的取值范围是 0 - 255，即对应 16 进制中的 0x00 - 0xFF。

// 下面两种设置方式是等价的，一种是 10 进制，一种是 16 进制
paint1.setAlpha(204);
paint2.setAlpha(0xCC);

同理，setARGB(int a, int r, int g, int b) 的 4 个参数的取值范围也是 0 - 255，对应 0x00 - 0xFF，下面的设置同样是等价的。

paint1.setARGB(204, 255, 255, 0);
paint2.setARGB(0xCC, 0xFF, 0xFF, 0x00);

当然，这样设置起来比较麻烦，我们最常用的还是直接使用 setColor(int color) 方法，它接受一个 int 类型的参数来表示颜色，我们既可以使用系统内置的一些标准颜色，也可以使用自定义的一些颜色，如下：

paint.setColor(Color.GREEN);
paint.setColor(0xFFE2A588);

注意：

在使用 setColor 方法时，所设置的颜色必须是 ARGB 同时存在的，通常每个通道用两位16进制数值表示，如 0xFFE2A588。总共 8 位，其中 FF 表示 Alpha 通道。

如果不设置 Alpha 通道，则默认Alpha通道为 0，即完全透明，如：0xE2A588，总共 6 位，没有 Alpha 通道，如果这样设置，则什么颜色也绘制不出来。

同样需要注意的是，setColor 不能直接引用资源，不能这样使用：paint.setColor(R.color.colorPrimary); 如果你这样使用了，编译器会报错的。如果想要使用预定义的颜色资源，可以像下面这样调用：

int color = context.getResources().getColor(R.color.colorPrimary);
paint.setColor(color);

2.4 画笔宽度

画笔宽度，就是画笔的粗细，它通过下面的方式设置。

// 将画笔设置为描边
paint.setStyle(Paint.Style.STROKE);
// 设置线条宽度
paint.setStrokeWidth(120);

注意：这条线的宽度是同时向两边进行扩展的，例如绘制一个圆时，将其宽度设置为 120 则会向外扩展 60 ，向内缩进 60，如下图所示。

因此如果绘制的内容比较靠近视图边缘，使用了比较粗的描边的情况下，一定要注意和边缘保持一定距离(边距>StrokeWidth/2) 以保证内容不会被剪裁掉。

如下面这种情况，直接绘制一个矩形，如果不考虑画笔宽度，则绘制的内容就可能不正常。

在一个 1000x1000 大小的画布上绘制与个大小为 500x500 ，宽度为 100 的矩形。

灰色部分为画布大小。
红色为分割线，将画笔分为均等的四份。
蓝色为矩形。

paint.setStrokeWidth(100);
paint.setColor(0xFF7FC2D8);
Rect rect = new Rect(0, 0, 500, 500);
canvas.drawRect(rect, paint);

如果考虑到画笔宽度，需要绘制一个大小刚好填充满左上角区域的矩形，那么实际绘制的矩形就要小一些，(如果只是绘制一个矩形的话，可以将矩形向内缩小画笔宽度的一半) 这样绘制出来就是符合预期的。

paint.setStrokeWidth(100);
paint.setColor(0xFF7FC2D8);
Rect rect = new Rect(0, 0, 500, 500);
rect.inset(50, 50);     // 注意这里，向内缩小半个宽度
canvas.drawRect(rect, paint);

这里只是用矩形作为例子说明，事实上，绘制任何图形，只要有描边的，就要考虑描边宽度占用的空间，需要适当的缩小图形，以保证其可以完整的显示出来。

注意：在实际的自定义 View 中也不要忽略 padding 占用的空间哦。

hairline mode (发际线模式)：

在设置画笔宽度的的方法有如下注释：

Set the width for stroking.
Pass 0 to stroke in hairline mode.
Hairlines always draws a single pixel independent of the canva's matrix.

在画笔宽度为 0 的情况下，使用 drawLine 或者使用描边模式(STROKE)也可以绘制出内容。只是绘制出的内容始终是 1 像素，不受画布缩放的影响。该模式被称为hairline mode (发际线模式)。

如果你设置了画笔宽度为 1 像素，那么如果画布放大到 2 倍，1 像素会变成 2 像素。但如果是 0 像素，那么不论画布如何缩放，绘制出来的宽度依旧为 1 像素。

// 缩放 5 倍
canvas.scale(5, 5, 500, 500);

// 0 像素 (Hairline Mode)
paint.setStrokeWidth(0);
paint.setColor(0xFF7FC2D8);
canvas.drawCircle(500, 455, 40, paint);

// 1 像素
paint.setStrokeWidth(1);
paint.setColor(0xFF7FC2D8);
canvas.drawCircle(500, 545, 40, paint);

可以看到，在放大 5 倍的情况下，1 像素已经变成了 5 像素，但 hairline mode 绘制出来依旧是 1 像素。

2.3 画笔模式

这里的画笔模式(Paint.Style)就是指绘制一个图形时，是绘制边缘轮廓，绘制内容区域还是两者都绘制，它有三种模式。

Style	简介
Paint.Style.FILL	填充内容，也是画笔的默认模式。
Paint.Style.STROKE	描边，只绘制图形轮廓。
Paint.Style.FILL_AND_STROKE	描边+填充，同时绘制轮廓和填充内容。

//填充
mPaint.setStyle(Paint.Style.FILL);
// 描边
mPaint.setStyle(Paint.Style.STROKE);
// 描边+填充
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

示例程序：

用一个简单的例子说明一下不同模式的区别。

// 画笔初始设置
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(50);
paint.setColor(0xFF7FC2D8);

// 填充，默认
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(500, 200, 100, paint);

// 描边
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(500, 500, 100, paint);

// 描边 + 填充
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(500, 800, 100, paint);

2.5 画笔线帽

画笔线帽(Paint.Cap)用于指定线段开始和结束时的效果。

// 它通过下面方式设置
paint.setStrokeCap(Paint.Cap.ROUND);

Android 中有三种线帽可供选择。

Cap	简介
Paint.Cap.BUTT	无线帽，也是默认类型。
Paint.Cap.SQUARE	以线条宽度为大小，在开头和结尾分别添加半个正方形。
Paint.Cap.ROUND	以线条宽度为直径，在开头和结尾分别添加一个半圆。

我们用以下代码来测试线帽。

// 画笔初始设置
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);
paint.setStrokeWidth(80);
float pointX = 200;
float lineStartX = 320;
float lineStopX = 800;
float y;

// 默认
y = 200;
canvas.drawPoint(pointX, y, paint);
canvas.drawLine(lineStartX, y, lineStopX, y, paint);

// 无线帽(BUTT)
y = 400;
paint.setStrokeCap(Paint.Cap.BUTT);
canvas.drawPoint(pointX, y, paint);
canvas.drawLine(lineStartX, y, lineStopX, y, paint);

// 方形线帽(SQUARE)
y = 600;
paint.setStrokeCap(Paint.Cap.SQUARE);
canvas.drawPoint(pointX, y, paint);
canvas.drawLine(lineStartX, y, lineStopX, y, paint);

// 圆形线帽(ROUND)
y = 800;
paint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawPoint(pointX, y, paint);
canvas.drawLine(lineStartX, y, lineStopX, y, paint);

注意：

画笔默认是无线帽的，即 BUTT。
Cap 也会影响到点的绘制，在 Round 的状态下绘制的点是圆的。
在绘制线条时，线帽时在线段外的，如上图红色部分所显示的内容就是线帽。
上图中红色的线帽是用特殊方式展示出来的，直接绘制的情况下，线帽颜色和线段颜色相同。

2.6 线段连接方式(拐角类型)

画笔的连接方式(Paint.Join)是指两条连接起来的线段拐角显示方式。

// 通过下面方式设置连接类型
paint.setStrokeJoin(Paint.Join.ROUND);

它同样有三种样式：

Cap	简介
Paint.Join.MITER	尖角 (默认模式)
Paint.Join.BEVEL	平角
Paint.Join.ROUND	圆角

通过效果图可以看出几种不同模式的补偿规则。

2.7 斜接模式长度限制

Android 中线段连接方式默认是 MITER，即在拐角处延长外边缘，直到相交位置。

根据数学原理我们可知，如果夹角足够小，接近于零，那么交点位置就会在延长线上无限远的位置。 为了避免这种情况，如果连接模式为 MITER(尖角)，当连接角度小于一定程度时会自动将连接模式转换为 BEVEL(平角)。

那么多大的角度算是比较小呢？根据资料显示，这个角度大约是 28.96°，即 MITER(尖角) 模式下小于该角度的线段连接方式会自动转换为 BEVEL(平角) 模式。

我们可以通过下面的方法来更改默认限制：

// 设置 Miter Limit，参数并不是角度
paint.setStrokeMiter(10);

注意：

参数 miter 就是对长度的限制，它可以通过这个公式计算：miter = 1 / sin ( angle / 2 ) ， angel 是两条线的形成的夹角。

其中 miter 的数值应该 >= 0，小于 0 的数值无效，其默认数值是 4，下表是 miter 和角度的一些对应关系。

miter angle

10 11.48

9 12.76

8 14.36

7 16.43

6 19.19

5 23.07

4 28.96

3 38.94

2 60

1 180

关于这部分内容可以在 SkPaint_Reference 查看到。

miter	angle
10	11.48
9	12.76
8	14.36
7	16.43
6	19.19
5	23.07
4	28.96
3	38.94
2	60
1	180

2.8 PathEffect

PathEffect 在绘制之前修改几何路径，它可以实现划线，自定义填充效果和自定义笔触效果。PathEffect 虽然名字看起来是和 Path 相关的，但实际上它的效果可以作用于 Canvas 的各种绘制，例如 drawLine， drawRect，drawPath 等。

注意： PathEffect 在部分情况下不支持硬件加速，需要关闭硬件加速才能正常使用：

Canvas.drawLine() 和 Canvas.drawLines() 方法画直线时，setPathEffect() 是不支持硬件加速的；

PathDashPathEffect 对硬件加速的支持也有问题，所以当使用 PathDashPathEffect 的时候，最好也把硬件加速关了。

在 Android 中有 6 种 PathEffect，4 种基础效果，2 种叠加效果。

PathEffect	简介
CornerPathEffect	圆角效果，将尖角替换为圆角。
DashPathEffect	虚线效果，用于各种虚线效果。
PathDashPathEffect	Path 虚线效果，虚线中的间隔使用 Path 代替。
DiscretePathEffect	让路径分段随机偏移。
SumPathEffect	两个 PathEffect 效果组合，同时绘制两种效果。
ComposePathEffect	两个 PathEffect 效果叠加，先使用效果1，之后使用效果2。

// 通过 setPathEffect 来设置效果
paint.setPathEffect(effect);

2.8.1 CornerPathEffect

CornerPathEffect 可以将线段之间的任何锐角替换为指定半径的圆角(适用于 STROKE 或 FILL 样式)。

// radius 为圆角半径大小，半径越大，path 越平滑。
CornerPathEffect(radius);

**使用 CornerPathEffect，可以实现圆角矩形效果。但是在一些特殊情况下，它和圆角矩形的显示效果还是稍有不同的，例如下面这种情况：

RectF rect = new RectF(0, 0, 600, 600);
float corner = 300;

// 使用 CornerPathEffect 实现类圆角效果
canvas.translate((1080 - 600) / 2, (1920 / 2 - 600) / 2);
paint.setPathEffect(new CornerPathEffect(corner));
canvas.drawRect(rect, paint);

// 直接绘制圆角矩形
canvas.translate(0, 1920 / 2);
paint.setPathEffect(null);
canvas.drawRoundRect(rect, corner, corner, paint);

如上图所示，左侧是使用 CornerPathEffect 将矩形的边角变圆润的效果，右侧则是直接绘制圆角矩形的效果。我们知道，在绘制圆角矩形时，如果圆角足够大时，那么绘制出来就会是圆或者椭圆。但是使用 CornerPathEffect 时，不论圆角有多大，它也不会变成圆形或者椭圆。

CornerPathEffect 也可以让手绘效果更加圆润。

一些简单的绘图场景或者签名场景中，一般使用 Path 来保存用户的手指轨迹，通过连续的 lineTo 来记录用户手指划过的路径，但是直接的 LineTo 会让转角看起来非常生硬，而使用 CornerPathEffect 效果则可以快速的让轨迹圆润起来。

如上图，左侧是未经优化的原始路径，右侧是使用了 CornerPathEffect 效果后的路径。上图测试代码如下：

public class CornerPathEffectTestView extends View {
    Paint mPaint = new Paint();
    PathEffect mPathEffect = new CornerPathEffect(200);
    Path mPath = new Path();

    public CornerPathEffectTestView(Context context) {
        this(context, null);
    }

    public CornerPathEffectTestView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mPaint.setStrokeWidth(20);
        mPaint.setStyle(Paint.Style.STROKE);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                mPath.reset();
                mPath.moveTo(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                break;
        }
        postInvalidate();
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制原始路径
        canvas.save();
        mPaint.setColor(Color.BLACK);
        mPaint.setPathEffect(null);
        canvas.drawPath(mPath, mPaint);
        canvas.restore();

        // 绘制带有效果的路径
        canvas.save();
        canvas.translate(0, canvas.getHeight() / 2);
        mPaint.setColor(Color.RED);
        mPaint.setPathEffect(mPathEffect);
        canvas.drawPath(mPath, mPaint);
        canvas.restore();
    }
}

2.8.2 DashPathEffect

DashPathEffect 用于实现虚线效果(适用于 STROKE 或 FILL_AND_STROKE 样式)。

// intervals：必须为偶数，用于控制显示和隐藏的长度。
// phase：相位。
DashPathEffect(float intervals[], float phase)

参数	简介
intervals[]	间隔，用于控制虚线显示长度和隐藏长度，它必须为偶数(且至少为 2 个)，按照[显示长度，隐藏长度，显示长度，隐藏长度]的顺序来显示。
phase	相位(和正余弦函数中的相位类似，周期为intervals长度总和)，也可以简单的理解为偏移量。

Path path_dash = new Path();
path_dash.lineTo(0, 1720);

canvas.save();
canvas.translate(980, 100);
paint.setPathEffect(new DashPathEffect(new float[]{200, 100}, 0));
canvas.drawPath(path_dash, paint);
canvas.restore();

canvas.save();
canvas.translate(400, 100);
paint.setPathEffect(new DashPathEffect(new float[]{200, 100}, 100));
canvas.drawPath(path_dash, paint);
canvas.restore();

如上图所示，虚线效果是根据 intervals[] 中的数值周期显示的，而 phase 则用于控制相位差(偏移量)。

注意：intervals[] 中是允许设置多组数据的，每两个为一组，第一个表示显示长度，第二个表示隐藏长度。

DashPathEffect 使用起来比较简单，但是也有人拿来玩一些特殊效果，例如这篇文章：使用DashPathEffect绘制一条动画曲线。不过这篇文章中实现的效果也可以使用 PathMeasure 的截取功能来实现，通过截取不同长度的 Path 来实现动画效果。

2.8.3 PathDashPathEffect

这个也是实现类似虚线效果，只不过这个虚线中显示的部分可以指定为一个 Path(适用于 STROKE 或 FILL_AND_STROKE 样式)。

// shape: Path 图形
// advance: 图形占据长度
// phase: 相位差
// style: 转角样式
PathDashPathEffect(Path shape, float advance, float phase, PathDashPathEffect.Style style);

注意：参数中的 shape 只能是 FILL 模式。

PathDashPathEffect 允许使用一个 Path 图形作为显示效果，如下：

注意：参数中的shape(Path)只能是 FILL 模式，即便画笔是 STROKE 样式，shape 也只会是 FILL。

上图中分割线示例代码：

// 画笔初始设置
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);

RectF rectF = new RectF(0, 0, 50, 50);

// 方形
Path rectPath = new Path();
rectPath.addRect(rectF, Path.Direction.CW);

// 圆形 椭圆
Path ovalPath = new Path();
ovalPath.addOval(rectF, Path.Direction.CW);

// 子弹形状
Path bulletPath = new Path();
bulletPath.lineTo(rectF.centerX(), rectF.top);
bulletPath.addArc(rectF, -90, 180);
bulletPath.lineTo(rectF.left, rectF.bottom);
bulletPath.lineTo(rectF.left, rectF.top);

// 星星形状
PathMeasure pathMeasure = new PathMeasure(ovalPath, false);
float length = pathMeasure.getLength();
float split = length / 5;
float[] starPos = new float[10];
float[] pos = new float[2];
float[] tan = new float[2];
for (int i = 0; i < 5; i++) {
    pathMeasure.getPosTan(split * i, pos, tan);
    starPos[i * 2 + 0] = pos[0];
    starPos[i * 2 + 1] = pos[1];
}
Path starPath = new Path();
starPath.moveTo(starPos[0], starPos[1]);
starPath.lineTo(starPos[4], starPos[5]);
starPath.lineTo(starPos[8], starPos[9]);
starPath.lineTo(starPos[2], starPos[3]);
starPath.lineTo(starPos[6], starPos[7]);
starPath.lineTo(starPos[0], starPos[1]);
Matrix matrix = new Matrix();
matrix.postRotate(-90, rectF.centerX(), rectF.centerY());
starPath.transform(matrix);


canvas.translate(360, 100);
// 绘制分割线 - 方形
canvas.translate(0, 100);
paint.setPathEffect(new PathDashPathEffect(rectPath, rectF.width() * 1.5f, 0, PathDashPathEffect.Style.TRANSLATE));
canvas.drawLine(0, 0, 1200, 0, paint);

// 绘制分割线 - 圆形
canvas.translate(0, 100);
paint.setPathEffect(new PathDashPathEffect(ovalPath, rectF.width() * 1.5f, 0, PathDashPathEffect.Style.TRANSLATE));
canvas.drawLine(0, 0, 1200, 0, paint);

// 绘制分割线 - 子弹型
canvas.translate(0, 100);
paint.setPathEffect(new PathDashPathEffect(bulletPath, rectF.width() * 1.5f, 0, PathDashPathEffect.Style.TRANSLATE));
canvas.drawLine(0, 0, 1200, 0, paint);

// 绘制分割线 - 星型
canvas.translate(0, 100);
paint.setPathEffect(new PathDashPathEffect(starPath, rectF.width() * 1.5f, 0, PathDashPathEffect.Style.TRANSLATE));
canvas.drawLine(0, 0, 1200, 0, paint);

PathDashPathEffect.Style

PathDashPathEffect 的最后一个参数是 PathDashPathEffect.Style，这个参数用于处理 Path 图形在转角处的样式。

Style	简介
TRANSLATE	在转角处对图形平移。
ROTATE	在转角处对图形旋转。
MORPH	在转角处对图形变形。

2.8.4 DiscretePathEffect

DiscretePathEffect 可以让 Path 产生随机偏移效果。

// segmentLength: 分段长度
// deviation: 偏移距离
DiscretePathEffect(float segmentLength, float deviation);

至今尚未见过这种效果的应用场景。

2.8.5 SumPathEffect

SumPathEffect 用于合并两种效果，它相当于两种效果都绘制一遍。

// 两种效果相加
SumPathEffect(PathEffect first, PathEffect second);

2.8.6 ComposePathEffect

ComposePathEffect 也是合并两种效果，只不过先应用一种效果后，再次叠加另一种效果，因此交换参数最终得到的效果是不同的。

// 构造一个 PathEffect, 其效果是首先应用 innerpe 再应用 outerpe (如: outer(inner(path)))。
ComposePathEffect(PathEffect outerpe, PathEffect innerpe);

2.9 getFillPath

// 根据原始Path(src)获取预处理后的Path(dst)
paint.getFillPath(Path src, Path dst);

在 PathEffect 一开始有这样一句介绍：“PathEffect 在绘制之前修改几何路径… ” 这句话表示的意思是，我们在绘制内容时，会在绘制之前对这些内容进行处理，最终进行绘制的内容实际上是经过处理的，而不是原始的。

事实上，我们所有绘制的图形，包括线条，矩形，Path 等内容，由于存在线条宽度，填充模式，线帽等不同的设置，在绘制之前都是需要进行预处理的。

Q: 我们能不能拿到预处理后的图形呢？

A: 答案是可以的，但是我们只能拿到 Path 预处理后的内容。

如上图，我们使用一个圆弧形状的 Path，设置画笔为描边，绘制出来就是第一个图形的效果。

Path arcPath = new Path();
arcPath.addArc(new RectF(100, 100, 500, 500), 30, 300);

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
canvas.drawPath(arcPath, paint);

将画笔设置为描边模式，较粗的描边效果，线帽效果为 Round 后绘制出来就是第二个图形的效果。

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(100);

canvas.drawPath(arcPath, paint);

如果通过 paint 的 getFillPath 获取处理后的 Path，然后绘制出来就是第三种图形的样式。

Path borderPath = new Path();
paint.getFillPath(arcPath, borderPath);	// getFillPath

// 测试画笔，注意设置为 STROKE
Paint testPaint = new Paint();
testPaint.setStyle(Paint.Style.STROKE);
testPaint.setStrokeWidth(2);
testPaint.setAntiAlias(true);
// 绘制通过 getFillPath 获取到的 Path
canvas.drawPath(borderPath, testPaint);

Q: 可是我们拿到预处理后的 Path 有什么作用呢？

A: 尽管通常情况下我们用不到，但在一些特殊情况下还是有些作用的，可以通过下面的一个实例了解。

在我前段时间开源的一个库里面，需要实现下面这样的效果，一个弧形的 SeekBbar。

如上图，是一个非常粗的圆弧，有一个白色的描边，这个白色的描边效果就可以通过 getFillPath 轻松实现。

// 通过 getFillPath 来获得圆弧的实际区域, 存储到 mBorderPath 中
mArcPaint.getFillPath(mSeekPath, mBorderPath);

直接用 getFillPath 获取到这个粗圆弧的边缘，存储到 mBorderPath 中，把 mBorderPath 用白色画笔绘制出来就可以实现上图中的描边效果啦。

并且，用户的点击事件也需要进行一些限制，只有用户点击到圆弧上的时候才能触发进度变化，而点击其余部分则不处理，这里可以利用 getFillPath 和 Region 来实现点击区域限定。

关于使用 Region 判断点击区域可以参考：特殊控件的事件处理方案

Path mSeekPath = ...	// 圆弧 Path。
Path mBorderPath = ...	// 圆弧 Path 的边缘。
Paint mArcPaint = ...	// 画笔，设置好 Style，Cap, StrokeWidth。
Region mArcRegion = ...	// 用户点击区域

// 通过 getFillPath 来获得圆弧的实际区域, 存储到 mBorderPath 中
mArcPaint.getFillPath(mSeekPath, mBorderPath);
// 将实际区域赋值给 Region
mArcRegion.setPath(mBorderPath, new Region(0, 0, w, h));

// 使用 Region 判断点击是否处于 Region 区域中
mArcRegion.contains(x, y);

更多的细节可以去开源库 ArcSeekBar 中查看。

ArcSeekBar: https://github.com/GcsSloop/arc-seekbar

3. 结语

在 Android 绘图之中，Paint 是相当重要的组成部分，由于 Paint 内容十分繁杂，本文也只能介绍其中一部分内容，关于画笔图像优化，叠加模式，文本处理等相关内容会放到后续的文章中进行介绍。

About Me

作者微博: @GcsSloop

参考文章

雕虫晓技(十) Android超简单气泡效果

Sun, 09 Sep 2018 00:00:00 +0800

【示例项目：BubbleSample】

最近有用到水下气泡上升效果，因此在网上查了一下资料，结果还真找到了，就是这篇文章 [Android实例] 水下气泡上升界面效果, 不过这篇文章所附带的示例代码是有些问题的，例如View移除后，线程没有正确关闭，锁屏后再打开屏幕，气泡会挤成一团等问题，因此我在它的原理基础上稍为进行了一些调整和修改，解决了这些问题，它可以实现下面这样的效果：

0. 基本原理

气泡效果的基本原理非常简单，其实所谓的气泡就是一个个的半透明圆而已，它的基本逻辑如下：

如果当前圆的数量没有超过数量上限，则随机生成半径不同的圆。
设定这些圆的初始位置。
随机设定垂直向上平移速度。
随机设定水平平移速度。
不断的刷新圆的位置然后绘制。
将超出显示区域的圆进行移除。
不断重复。

原理可以说非常简单，但是也有一些需要注意的地方，尤其是线程，最容易出问题。

在原始的 demo 中，直接把线程创建和计算逻辑直接放到了 onDraw 里面，而且没有关闭线程，这自然会导致很多问题的发生。没有关闭线程会造成View的内存泄露，而把计算逻辑放在 onDraw 里面则会加大绘制的负担，拖慢刷新速度，在机能较弱的情况下会导致明显卡顿的发生。而解决这些问题的最好办法则是专事专办，将合适的内容放在合适的位置，下面来看一下具体的代码实现。

1. 代码实现

1.1 定义气泡

气泡效果我们关心的属性并不多，主要有这几种：半径、坐标、上升速度、水平平移速度。由于我们只在 View 内部使用，因此直接创建一个内部类，然后在内部类中定义这些属性。

private class Bubble {
    int radius;     // 气泡半径
    float speedY;   // 上升速度
    float speedX;   // 平移速度
    float x;        // 气泡x坐标
    float y;        // 气泡y坐标
}

1.2 生命周期处理

由于需要用线程来进行计算和控制刷新，就少不了开启和关闭线程，这个自然要符合 View 的生命周期，因此我在 View 被添加到界面上时开启了一个线程用于生成气泡和刷新气泡位置，然后在 View 从界面上移除的时候关闭了这个线程。

@Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    startBubbleSync();
}

@Override
protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    stopBubbleSync();
}

1.3 开启线程

开启线程非常简单，就是简单的创建了一个线程，然后在里面添加了一个 while 死循环，然后不停的执行休眠、创建气泡、刷新气泡位置、申请更新UI 等操作。

这里没有用变量来控制循环，而是监听了中断事件，在当拦截到 InterruptedException 的时候，使用 break 跳出了死循环，因此线程也就结束了，方法简单粗暴。

// 开始气泡线程
private void startBubbleSync() {
    stopBubbleSync();
    mBubbleThread = new Thread() {
        public void run() {
            while (true) {
                try {
                    Thread.sleep(mBubbleRefreshTime);
                    tryCreateBubble();
                    refreshBubbles();
                    postInvalidate();
                } catch (InterruptedException e) {
                    System.out.println("Bubble线程结束");
                    break;
                }
            }
        }
    };
    mBubbleThread.start();
}

1.4 关闭线程

由于线程运行时监听了 interrupt 中断，这里直接使用 interrupt 通知线程中断就可以了。

// 停止气泡线程
private void stopBubbleSync() {
    if (null == mBubbleThread) return;
    mBubbleThread.interrupt();
    mBubbleThread = null;
}

1.5 创建气泡

为了防止气泡数量过多而占用太多的性能，因此在创建气泡之前需要先判断当前已经有多少个气泡，如果已经有足够多的气泡了，则不再创建新的气泡。

同时，为了让气泡产生过程看起来更合理，在气泡数量没有达到上限之前，会随机的创建气泡，以防止气泡扎堆出现，因此设立了一个随机项，生成的随机数大于 0.95 的时候才生成气泡，让气泡生成过程慢一些。

创建气泡的过程也很简单，就是随机的在设定范围内生成一些属性，然后放到 List 中而已。

PS：这里使用了一些硬编码和魔数，属于不太好的习惯。不过由于应用场景固定，这些参数需要调整的概率比较小，影响也不大。

// 尝试创建气泡
private void tryCreateBubble() {
    if (null == mContentRectF) return;
    if (mBubbles.size() >= mBubbleMaxSize) {
        return;
    }
    if (random.nextFloat() < 0.95) {
        return;
    }
    Bubble bubble = new Bubble();
    int radius = random.nextInt(mBubbleMaxRadius - mBubbleMinRadius);
    radius += mBubbleMinRadius;
    float speedY = random.nextFloat() * mBubbleMaxSpeedY;
    while (speedY < 1) {
        speedY = random.nextFloat() * mBubbleMaxSpeedY;
    }
    bubble.radius = radius;
    bubble.speedY = speedY;
    bubble.x = mWaterRectF.centerX();
    bubble.y = mWaterRectF.bottom - radius - mBottleBorder / 2;
    float speedX = random.nextFloat() - 0.5f;
    while (speedX == 0) {
        speedX = random.nextFloat() - 0.5f;
    }
    bubble.speedX = speedX * 2;
    mBubbles.add(bubble);
}

1.6 刷新气泡位置

这里主要做了两项工作：

将超出显示区域的气泡进行移除。
计算新的气泡显示位置。

可以看到这里没有直接使用原始的List，而是复制了一个 List 进行遍历，这样做主要是为了规避 ConcurrentModificationException 异常，(对Vector、ArrayList在迭代的时候如果同时对其进行修改就会抛出 java.util.ConcurrentModificationException 异常)。

对复制的 List 进行遍历，然后对超出显示区域的 Bubble 进行移除，对没有超出显示区域的 Bubble 位置进行了刷新。可以看到，这里逻辑比较复杂，有各种加减计算，是为了解决气泡飘到边缘的问题，防止气泡飘出水所在的范围。

// 刷新气泡位置，对于超出区域的气泡进行移除
private void refreshBubbles() {
    List<Bubble> list = new ArrayList<>(mBubbles);
    for (Bubble bubble : list) {
        if (bubble.y - bubble.speedY <= mWaterRectF.top + bubble.radius) {
            mBubbles.remove(bubble);
        } else {
            int i = mBubbles.indexOf(bubble);
            if (bubble.x + bubble.speedX <= mWaterRectF.left + bubble.radius + mBottleBorder / 2) {
                bubble.x = mWaterRectF.left + bubble.radius + mBottleBorder / 2;
            } else if (bubble.x + bubble.speedX >= mWaterRectF.right - bubble.radius - mBottleBorder / 2) {
                bubble.x = mWaterRectF.right - bubble.radius - mBottleBorder / 2;
            } else {
                bubble.x = bubble.x + bubble.speedX;
            }
            bubble.y = bubble.y - bubble.speedY;
            mBubbles.set(i, bubble);
        }
    }
}

1.7 绘制气泡

绘制气泡同样简单，就是遍历 List，然后画圆就行了。

这里同样复制了一个新的 List 进行操作，不过这个与上面的原因不同，是为了防止多线程问题。由于在绘制的过程中，我们的计算线程可能会对原始 List 进行更新，可能导致异常的发生。为了避免这样的问题，就复制了一个 List 出来用于遍历绘制。

// 绘制气泡
private void drawBubble(Canvas canvas) {
    List<Bubble> list = new ArrayList<>(mBubbles);
    for (Bubble bubble : list) {
        if (null == bubble) continue;
        canvas.drawCircle(bubble.x, bubble.y,
                bubble.radius, mBubblePaint);
    }
}

2. 完整代码

完整的示例代码非常简单，所以直接贴在了正文中，同时，你也可以从文末下载完整的项目代码。

public class BubbleView extends View {

    private int mBubbleMaxRadius = 30;          // 气泡最大半径 px
    private int mBubbleMinRadius = 5;           // 气泡最小半径 px
    private int mBubbleMaxSize = 30;            // 气泡数量
    private int mBubbleRefreshTime = 20;        // 刷新间隔
    private int mBubbleMaxSpeedY = 5;           // 气泡速度
    private int mBubbleAlpha = 128;             // 气泡画笔

    private float mBottleWidth;                 // 瓶子宽度
    private float mBottleHeight;                // 瓶子高度
    private float mBottleRadius;                // 瓶子底部转角半径
    private float mBottleBorder;                // 瓶子边缘宽度
    private float mBottleCapRadius;             // 瓶子顶部转角半径
    private float mWaterHeight;                 // 水的高度

    private RectF mContentRectF;                // 实际可用内容区域
    private RectF mWaterRectF;                  // 水占用的区域

    private Path mBottlePath;                   // 外部瓶子
    private Path mWaterPath;                    // 水

    private Paint mBottlePaint;                 // 瓶子画笔
    private Paint mWaterPaint;                  // 水画笔
    private Paint mBubblePaint;                 // 气泡画笔

    public BubbleView(Context context) {
        this(context, null);
    }

    public BubbleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mWaterRectF = new RectF();

        mBottleWidth = dp2px(130);
        mBottleHeight = dp2px(260);
        mBottleBorder = dp2px(8);
        mBottleRadius = dp2px(15);
        mBottleCapRadius = dp2px(5);

        mWaterHeight = dp2px(240);

        mBottlePath = new Path();
        mWaterPath = new Path();

        mBottlePaint = new Paint();
        mBottlePaint.setAntiAlias(true);
        mBottlePaint.setStyle(Paint.Style.STROKE);
        mBottlePaint.setStrokeCap(Paint.Cap.ROUND);
        mBottlePaint.setColor(Color.WHITE);
        mBottlePaint.setStrokeWidth(mBottleBorder);

        mWaterPaint = new Paint();
        mWaterPaint.setAntiAlias(true);

        initBubble();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mContentRectF = new RectF(getPaddingLeft(), getPaddingTop(), w - getPaddingRight(), h - getPaddingBottom());

        float bl = mContentRectF.centerX() - mBottleWidth / 2;
        float bt = mContentRectF.centerY() - mBottleHeight / 2;
        float br = mContentRectF.centerX() + mBottleWidth / 2;
        float bb = mContentRectF.centerY() + mBottleHeight / 2;
        mBottlePath.reset();
        mBottlePath.moveTo(bl - mBottleCapRadius, bt - mBottleCapRadius);
        mBottlePath.quadTo(bl, bt - mBottleCapRadius, bl, bt);
        mBottlePath.lineTo(bl, bb - mBottleRadius);
        mBottlePath.quadTo(bl, bb, bl + mBottleRadius, bb);
        mBottlePath.lineTo(br - mBottleRadius, bb);
        mBottlePath.quadTo(br, bb, br, bb - mBottleRadius);
        mBottlePath.lineTo(br, bt);
        mBottlePath.quadTo(br, bt - mBottleCapRadius, br + mBottleCapRadius, bt - mBottleCapRadius);


        mWaterPath.reset();
        mWaterPath.moveTo(bl, bb - mWaterHeight);
        mWaterPath.lineTo(bl, bb - mBottleRadius);
        mWaterPath.quadTo(bl, bb, bl + mBottleRadius, bb);
        mWaterPath.lineTo(br - mBottleRadius, bb);
        mWaterPath.quadTo(br, bb, br, bb - mBottleRadius);
        mWaterPath.lineTo(br, bb - mWaterHeight);
        mWaterPath.close();

        mWaterRectF.set(bl, bb - mWaterHeight, br, bb);

        LinearGradient gradient = new LinearGradient(mWaterRectF.centerX(), mWaterRectF.top,
                mWaterRectF.centerX(), mWaterRectF.bottom, 0xFF4286f4, 0xFF373B44, Shader.TileMode.CLAMP);
        mWaterPaint.setShader(gradient);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mWaterPath, mWaterPaint);
        canvas.drawPath(mBottlePath, mBottlePaint);
        drawBubble(canvas);
    }

    //--- 气泡效果 ---------------------------------------------------------------------------------

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        startBubbleSync();
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        stopBubbleSync();
    }


    private class Bubble {
        int radius;     // 气泡半径
        float speedY;   // 上升速度
        float speedX;   // 平移速度
        float x;        // 气泡x坐标
        float y;        // 气泡y坐标
    }

    private ArrayList<Bubble> mBubbles = new ArrayList<>();

    private Random random = new Random();
    private Thread mBubbleThread;

    // 初始化气泡
    private void initBubble() {
        mBubblePaint = new Paint();
        mBubblePaint.setColor(Color.WHITE);
        mBubblePaint.setAlpha(mBubbleAlpha);
    }

    // 开始气泡线程
    private void startBubbleSync() {
        stopBubbleSync();
        mBubbleThread = new Thread() {
            public void run() {
                while (true) {
                    try {
                        Thread.sleep(mBubbleRefreshTime);
                        tryCreateBubble();
                        refreshBubbles();
                        postInvalidate();
                    } catch (InterruptedException e) {
                        System.out.println("Bubble线程结束");
                        break;
                    }
                }
            }
        };
        mBubbleThread.start();
    }

    // 停止气泡线程
    private void stopBubbleSync() {
        if (null == mBubbleThread) return;
        mBubbleThread.interrupt();
        mBubbleThread = null;
    }

    // 绘制气泡
    private void drawBubble(Canvas canvas) {
        List<Bubble> list = new ArrayList<>(mBubbles);
        for (Bubble bubble : list) {
            if (null == bubble) continue;
            canvas.drawCircle(bubble.x, bubble.y,
                    bubble.radius, mBubblePaint);
        }
    }

    // 尝试创建气泡
    private void tryCreateBubble() {
        if (null == mContentRectF) return;
        if (mBubbles.size() >= mBubbleMaxSize) {
            return;
        }
        if (random.nextFloat() < 0.95) {
            return;
        }
        Bubble bubble = new Bubble();
        int radius = random.nextInt(mBubbleMaxRadius - mBubbleMinRadius);
        radius += mBubbleMinRadius;
        float speedY = random.nextFloat() * mBubbleMaxSpeedY;
        while (speedY < 1) {
            speedY = random.nextFloat() * mBubbleMaxSpeedY;
        }
        bubble.radius = radius;
        bubble.speedY = speedY;
        bubble.x = mWaterRectF.centerX();
        bubble.y = mWaterRectF.bottom - radius - mBottleBorder / 2;
        float speedX = random.nextFloat() - 0.5f;
        while (speedX == 0) {
            speedX = random.nextFloat() - 0.5f;
        }
        bubble.speedX = speedX * 2;
        mBubbles.add(bubble);
    }

    // 刷新气泡位置，对于超出区域的气泡进行移除
    private void refreshBubbles() {
        List<Bubble> list = new ArrayList<>(mBubbles);
        for (Bubble bubble : list) {
            if (bubble.y - bubble.speedY <= mWaterRectF.top + bubble.radius) {
                mBubbles.remove(bubble);
            } else {
                int i = mBubbles.indexOf(bubble);
                if (bubble.x + bubble.speedX <= mWaterRectF.left + bubble.radius + mBottleBorder / 2) {
                    bubble.x = mWaterRectF.left + bubble.radius + mBottleBorder / 2;
                } else if (bubble.x + bubble.speedX >= mWaterRectF.right - bubble.radius - mBottleBorder / 2) {
                    bubble.x = mWaterRectF.right - bubble.radius - mBottleBorder / 2;
                } else {
                    bubble.x = bubble.x + bubble.speedX;
                }
                bubble.y = bubble.y - bubble.speedY;
                mBubbles.set(i, bubble);
            }
        }
    }

    private float dp2px(float dpValue) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, getResources().getDisplayMetrics());
    }
}

3. 结语

由于本项目是一个示例性质的项目，因此设计的比较简单，结构也是简单粗暴，并没有经过精心的雕琢，存在一些疏漏也说不定，如果大家觉得逻辑上存在问题或者有什么疑惑，欢迎在下面(公众号、小专栏)的评论区留言。

公众号查看到该文章的可以通过点击【阅读原文】下载到所需的示例代码，非公众号阅读的可以从文末或者文初下载到示例项目。

【示例项目：BubbleSample】

ArcSeekBar(圆弧拖动条)

Sun, 02 Sep 2018 00:00:00 +0800

GitHub项目地址: https://github.com/GcsSloop/arc-seekbar

这个是在公司项目中准备使用的一个控件，本准备直接在网上搜一个用，可惜找到的很多都是 ProgressBar，并不具备拖拽功能，于是自己动手实现了一个，其功能和特性均仿照 SeekBar 进行设计。

效果预览

支持的特性

主要文件

名字	摘要
ArcSeekBar	圆弧形状SeekBar。

1. 基本用法

<com.gcssloop.widget.ArcSeekBar
    android:id="@+id/arc_seek_bar"
    android:layout_width="280dp"
    android:layout_height="280dp"
    app:arc_colors="@array/arc_colors_default"
    app:arc_max="100"
    app:arc_open_angle="90"
    app:arc_progress="0"
    app:arc_rotate_angle="90"
    app:arc_thumb_color="#fff"
    app:arc_thumb_mode="STROKE"
    app:arc_thumb_radius="16dp"
    app:arc_thumb_width="3dp"
    app:arc_width="40dp"/>

2. 配置属性

可以在布局文件中配置的基本属性如下：

属性名称	摘要	是否必须设置	类型
arc_width	圆弧的宽度	否	dp
arc_open_angle	圆弧开口的角度	否	int
arc_rotate_angle	旋转角度，默认90	否	int
arc_colors	圆弧渐变色	否	array
arc_max	进度最大数值	否	int
arc_progress	默认进度	否	int
arc_thumb_width	拖动按钮描边宽度	否	dp
arc_thumb_color	拖动按钮颜色	否	color
arc_thumb_radius	拖动按钮半径	否	dp
arc_thumb_mode	拖动按钮模式(FILL、STROKE、FILL_STROKE)	否	emnu
arc_border_width	描边宽度，默认为 0，即不显示。	否	dp
arc_border_color	描边颜色，默认为白色。	否	color

3. 属性简介

3.1 基本绘制属性

进度条宽度(arc_width)、开口角度(arc_open_angle)、旋转角度(arc_rotate_angle) 的基本含义如上图所示。

进度条宽度(arc_width)： 进度条宽度是上图白色部分所示的内容，是控制绘制宽窄的。
开口角度(arc_open_angle)： 开口角度是上图中下方没有进度显示的部分，如果开口角度为 0 则绘制出来是一个圆。如果开口角度为 180 度，则为一个半圆。
旋转角度： 旋转角度是圆环开口的最终指向，该数值默认为 90 度。

3.2 渐变色

渐变色如上图所展示的那样，允许指定大于等于两种以上的颜色进行渲染，基本使用如下.

1. 在 /res/values 里面定义一个 array 数组，其条目为一系列颜色(颜色数量大于等于2)。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="arc_colors_default">
        <item>#1a2a6c</item>
        <item>#b21f1f</item>
        <item>#fdbb2d</item>
    </array>
</resources>

2. 引用指定颜色

<com.gcssloop.widget.ArcSeekBar
    android:layout_width="280dp"
    android:layout_height="280dp"
    app:arc_colors="@array/arc_colors_default"/>

注意：所指定的颜色数组数量必须大于 2，如果想要使用纯色，则直接将两个array条目设置为同一种颜色即可。

3.3 进度属性

进度属性有两个， arc_max 指定最大数值， arc_progress 指定默认的进度。

3.4 拖动按钮属性

拖动按钮即上方演示图中的圆环， arc_thumb_width：指定圆环宽度。
arc_thumb_color： 指定按钮颜色。
arc_thumb_radius： 指定按钮半径。
arc_thumb_mode： 指定按钮绘制模式，默认为 STROKE(描边)，可以指定 FILL、STROKE、FILL_STROKE。

3.5 描边

v1.1.0 以上版本支持。

可以实现描边效果，具体看图。

4.添加方法

4.1 添加仓库

在项目的 build.gradle 文件中配置仓库地址。

allprojects {
    repositories {
        jcenter()
        // 私有仓库地址
       maven { url "http://lib.gcssloop.com:8081/repository/gcssloop-central/" }
    }
}

4.2 添加项目依赖

在需要添加依赖的 Module 下添加以下信息，使用方式和普通的远程仓库一样。

implementation 'com.gcssloop.widget:arc-seekbar:1.1.0'

作者简介

作者微博: @GcsSloop

个人网站: http://www.gcssloop.com

更新日志

v1.1.0

完善 onMeasure。
添加描边(border)属性。

v1.0.0

完成基本的 ArcSeekBar 功能与相关的自定义属性。

版权信息

Copyright (c) 2018 GcsSloop

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

雕虫晓技(九) Netty与私有协议框架

Sat, 01 Sep 2018 00:00:00 +0800

关于作者

GcsSloop，一名 2.5 次元魔法师。
微博 | GitHub | 博客

1.前言

【本文示例源码下载】

在本系列的前一篇，说了 Android 与数据流的斗争，主要是 Android 前端自身处理方案。这一篇则是涉及一些前后端方面的数据传输的问题。

通常来说，Android 和服务端之间的数据传输都会采用标准协议规范，且大多数是基于 HTTP 协议的，例如在Android端最常用的 Retrofit，则是 RESTful 风格的一套网络框架。虽然这是我们最常用的框架之一，但是很多人对该框架了解并不是特别深入，只知道用它可以和服务器进行交互，但是对于它在网络交互中到底处于哪一位置则比较模糊，下面就带大家看一下：

+=================================+
|    协议    | ---> |   对应的工具  |
+=================================+
      |                    |
      ∇                    ∇
+-----------+      +--------------+
|  RESTful  | ---> |   Retrofit   |
+-----------+      +--------------+
      |                    |
      ∇                    ∇
+-----------+      +--------------+
|   HTTP    | ---> |    OkHttp    | 
+-----------+      +--------------+
     |                     |
     ∇                     ∇
+-----------+       +-------------+
|  TCP/IP   | --->  | Socket+Okio |
+-----------+       +-------------+
     |                     |
     ∇                     ∇
+-----------+       +-------------+
| 更底层协议  | --->  |  更底层工具  |
+-----------+       +-------------+

在上面，左侧是对应的一些协议规范，右侧则是对这些协议规范实现的相关工具，当然任何一套规范都有多种实现工具可以用，上面只是在 Android 平台最常用的一套实现方案而已。

相信学过计算机网络相关的同学都知道“OSI网络七层模型”和“TCP/IP五层模型”，我们的网络正是建立在这些模型之上的，而这些模型实际上是一套又一套的规范。这些规范与语言无关，与平台设备无关，不论你用什么设备，使用什么语言进行开发，只要遵守这一套规范就可以接入现有的网络。正因如此，我们现在的各种设备才可以通过网络进行相互的通信，交流。

2.标准协议与私有协议

上面是一些标准协议，即一种公开的，大家都采用的一种协议，在目前的工作中，我们大部分情况也会采用标准协议，因为标准协议都会有成熟的库可以用，可以快速的进行业务开发，而不用纠结各种底层通信的各种问题。

2.1 私有协议适用场景

凡事都有例外，标准协议固然好，但在某些特定的场景下却不一定合适。

性能限制：我们需要和一些智能设备(物联网设备)直接进行通信，受限于这些设备的性能功耗等问题，无法承载部分标准协议库过大的内存消耗。
实时性要求：又或者我们本身需要传输的数据就很简单，而且需要较高的实时性，而部分标准协议每一次传输都需要携带很多的冗余内容，这明显会降低数据解析速度。
安全性：还有另外一个原因则是为了安全，私有协议固然也可能会被逆向破解，但由于私有协议的保密性，破解起来会更加麻烦，也更耗费时间，如果发现被破解了，更新一下协议规范就可以直接让之前的破解失效。

2.2 私有协议缺陷

当然，私有协议也并非全是好处，不然目前也不可能是标准协议的天下了。首先还是安全性，其次开发速度，当然第三方对接也是大问题。
安全性：私有协议虽然因为规范保密而让其显得“更安全”，但规范一旦被泄露，安全性也就无从谈起了。部分协议设计者觉得协议是私有的，就在安全设计方面稍为欠缺了一点考虑，导致协议规范一旦被泄露，内容也就跟着被泄露了。相比之下，标准协议固然都是使用同一套标准，但是其安全性却更高一筹，对于需要保密的内容，在你知道协议规范的前提下依旧是难以破解的。
开发速度： 私有协议就意味着没有标准库可以使用，需要完全自己进行开发和解析。这样无疑会降低前期的开发速度。而开发速度对于企业来说则意味着大量的人力成本，对于部分企业而言，是不愿意承担这样的成本的。
第三方对接： 现在很少有企业会单独运作，多多少少都会和其他的企业有所业务往来，因此双方的部分系统就需要考虑对接问题，如果双方企业均采用私有协议，无疑还是会加大对接的成本，对企业来说可能并不是一件好事。

3. 私有协议开发

作为一名 Android 程序员，虽然用到私有协议的机会可能比较少，但是也有碰到需要用的时候，既然用到了那也不能虚，毕竟技术学习永无止境。我最近在公司也就遇上的需要用到私有协议的地方，因此也对私有协议了解了一下，学习了一下如何封装私有协议。

封装协议不比调用网络库，自己封装协议需要考虑的东西又很多，例如：数据包格式，数据包的拆包和封包，如何保持长连接，掉线如何自动重连，多个线程之间通信的处理方案，如何与前端隔离，即调用过程透明化。这么说吧，封装一个协议很简单，但是如果想要封装好则比较困难的。下面带大家实现一个自定义协议，并将其封装起来。

这里主要使用到了 Netty 框架和 RxJava 相关技术，有关 Netty 相关的技术个人推荐看《Netty 实战》这本书，当然自己去搜索网络博客也是可以的，对于 Netty 的基本使用方法，不在本文范围之内。

3.1 私有协议规范(C0DE协议)

由于是简单教程向，协议自然也不能设计的太复杂，下面带大家实现一个我自定义的 C0DE 协议。是 C0DE，不是 CODE，里面是数字 0。

3.1.1 基本包结构

帧头				内容	帧尾
1 byte	1 byte	4 byte	4 byte	-	2 byte	1 byte
0xC0	帧类型	确认码	内容长度	内容，可能没有	CRC 校验码	0xDE

0xC0：表示一帧的开始
帧类型：表示该帧的功能(不可以与帧头、帧尾重复)
确认码：该帧的唯一标记，用于区分不同的帧，每一帧的确认码都应该不同，服务端给客户的响应，确认码应与客户端发送的确认码相同。
内容长度：内容区域的长度，可能为0
内容：存放的内容，长度不定。
CRC校验：使用 CRC-16/XMODEM 标准进行校验，校验范围：帧类型、确认码、内容长度和内容。用于验证内容的完整性。
0xDE：表示一帧的结束。

转义：

为了防止内容区域出现于帧头、帧尾相同的内容，导致无法准确的获取一帧的内容，所以设立了的转义规则，在帧头和帧尾之间遇到特殊字段都需要进行转义。防止出现冲突。

0xC0 -> 0xAD 0x00
0xDE -> 0xAD 0x01
0xAD -> 0xAD 0x02

注意： 该帧结构没有设计加密，是明文格式，在实际运用中需要对内容区域进行加密，加密方案则需要前后端采用统一的标准。

3.1.2 心跳命令

由于网络环境比较复杂，如果客户端和服务端长时间没有联系的话，就会可能被中间的传输设备默认进行断开，如果需要保持长连接的话，就需要发送一些空数据包作为心跳数据，以避免被中间设备断开。

客户端发送帧：

帧头				内容	帧尾
1 byte	1 byte	4 byte	4 byte	-	2 byte	1 byte
0xC0	0x00	确认码	0	无	CRC 校验码	0xDE

服务端响应帧：

帧头				内容	帧尾
1 byte	1 byte	4 byte	4 byte	-	2 byte	1 byte
0xC0	0x00	确认码	0	无	CRC 校验码	0xDE

3.1.3 2233命令

2233 由客户端发送一个 22 命令，服务端收到后回复一个 33，该命令没有内容。

客户端发送帧：

帧头				内容	帧尾
1 byte	1 byte	4 byte	4 byte	-	2 byte	1 byte
0xC0	0x22	确认码	0	无	CRC 校验码	0xDE

服务端响应帧：

帧头				内容	帧尾
1 byte	1 byte	4 byte	4 byte	-	2 byte	1 byte
0xC0	0x33	确认码	0	无	CRC 校验码	0xDE

3.1.2 内容命令

客户端发送一段内容，服务端收到后返回另一段内容，例如：当客户端发送内容为 Fu 时，服务端收到会返回一个 ck.

客户端发送帧：

帧头				内容	帧尾
1 byte	1 byte	4 byte	4 byte	-	2 byte	1 byte
0xC0	0x01	确认码	内容长度	内容	CRC 校验码	0xDE

服务端响应帧：

帧头				内容	帧尾
1 byte	1 byte	4 byte	4 byte	-	2 byte	1 byte
0x01	0x01	确认码	内容长度	内容	CRC 校验码	0xDE

最终定义了 3 条指令，下面就看如何将这些指令封装起来。

3.2 协议封装

这里我们使用 Netty(4.0.56版本) 来做服务端与客户端，其中客户端与以调用者之间则使用 RxJava(2.1.16版本)，使用 intelliJ IEDA 作为开发工具。由于是使用 Java 语言进行开发的，你可以将其直接移植到 Android 项目中，而不用更改代码内容。

你可以在文初或者文末下载到相关的 IntelliJ 工程代码，本文限于篇幅并不会将所有的代码内容都讲解到，如果有疑惑，可以去直接查看源代码。

有人可能会疑惑，Netty 主要是用 java 开发的，那么服务端和 Android 都是用 java 就可以了，但是如果需要在 iOS 端使用怎么办？协议本身就是与平台和语言无关的，iOS 上也有网络交互逻辑，只需要按照协议规范发送数据就可以了，不是必须使用 Netty 框架。当然，由于我本身对 iOS 开发了解有限，因此本文也就没有 iOS 相关的内容了。

既然是要将私有协议封装起来，那么就要有一定的结构，最终设计出来的结构如下：

服务端：

服务端设计的结构比较简单，网络数据流在经过解码器之后转化为 Packet，各个 Packet 通过 Netty 分发到对应的 Handler 进行处理，Handler 处理结束后，将需要发送到内容封装成 Packet 发送，Packet 通过 Encoder 转换为 byte[]，然后通过网络送到客户端。

客户端：

绿色的线条表示发送的数据经过的主要路径。

橙色线条表述服务器返回结果数据经过的主要路径。

可以看出，客户端的设计相对来说要复杂更多，这是因为客户端需要考虑到对图形化界面对支持和调用的透明化(即上层调用者完全无需知道底层的实现方案和逻辑)。除此之外，由于网络的不确定性，接受到的返回结果顺序未必和发送顺序一致，因此就需要对接收到的结果进行甄别，判断是那一次请求的返回结果(Frame里面的确认码就是用于区分返回结果属于哪一请求的)。因此，客户端的逻辑设计就变得更加复杂，不过得益于 Netty 良好的设计，这种复杂程度还是可以接受的。

上层调用者只需关心 API 层都提供了哪些方法可以使用，而 API 调用层只和 Service 有限的接口进行交互，最终和服务器交互的一切细节都被隐藏在 Service 中。

Service 不仅负责两个输入输出队列的基本管理，还需要负责保持与服务端的长连接，以及断线重连机制。尽管需要处理的内容稍微有点多，但是在 Netty 框架强力的支持下，只用了不到 400 行代码就实现了所有的功能。

管理总览先看这么多，下面看一下里面的部分实现细节。

3.2.1 工具类

项目中主要是工具类有两个，一个是 CRC 校验工具，另一个则是 byte 数组和其他数据相互转换的工具。

CRCUtils： CRC 校验存在多个不同的标准，因此服务端与客户端使用标准必须统一，我这里采用了 CRC-16/XMODEM 标准。关于 CRC 校验工具的代码网上随处可见，我这里也只是根据网络代码简单封装了一下，具体可以看项目中。

**ByteUtils： ** 由于通过网络传输的数据都是 byte 数组，所有的数据都绕不开数据转换过程，这里也只是简单的封装了一些常用的转换方法，这些方法都是随处可以查到的，详情依旧见项目中。

3.2.2 基础数据包

由于我们最终发送的任何数据都是 byte[] 我可以直接把需要发送的数据直接按照规范写到 byte[] 然后发送出去，但是呢，这样直接写数据显然是很不直观的，例如：C0 00 00 00 00 01 00 00 00 00 AA 51 DE 就是一个简单的心跳数据包，但是谁能一眼看出来这是个心跳包呢？这样显然是不合适的。因此需要将其封装为数据包，如用 GHeartPacket 表示心跳数据包，需要心跳数据的时候直接创建一个 GHeartPacket 发送，这样会直观很多，而且不容易出错。

在封装之前，先观察一下协议的基本结构：

帧头				内容	帧尾
1 byte	1 byte	4 byte	4 byte	-	2 byte	1 byte
0xC0	帧类型	确认码	内容长度	内容，可能没有	CRC 校验码	0xDE

首先，帧头和帧尾是固定不变的，内容长度和 CRC校验码是计算出来的，实际上我们各种数据包主要变化的内容就是帧类型，确认码和内容而已，因此我们可以将不变的或者可以计算得出的内容抽象出来，作为基础的数据包，而最终的数据包，继承自该基础数据包，并提供变动的内容即可。

基础的数据包提供一个 getFrameBytes() 的抽象方法，该方法最终生成的数据就是通过网络发送的数据，同时提供数据打包，数据转义和反转义功能，最终看起来是这样子：

/**
 * 基础发送数据包
 * 基本的帧结构
 * +----------+----------+--------------------------------------------------------
 * |  大小    |  固定值   |  摘要
 * +----------+----------+--------------------------------------------------------
 * | 1 bytes  | 0xC0     |  帧起始符
 * | 1 bytes  |          |  帧类型
 * | 4 bytes  |          |  确认码
 * | 4 bytes  |          |  内容长度
 * |          |          |  内容
 * | 2 bytes  |          |  校验码 CRC 校验
 * | 1 bytes  | 0xDE     |  帧结束符
 * +----------+----------+--------------------------------------------------------
 * 加密范围:帧类型+确认码+内容长度+内容.
 */
public abstract class Packet {
    //--- 通用数据 ---
    public static final byte HEAD = (byte) 0xC0;    // 帧头
    public static final byte TAIL = (byte) 0xDE;    // 帧尾

    private static final byte REVISE_CODE = (byte) 0xAD;    // 转义码
    private static final byte REVISE_HEAD = (byte) 0x00;    // 头部
    private static final byte REVISE_TAIL = (byte) 0x01;    // 尾部
    private static final byte REVISE_SELF = (byte) 0x02;    // 自身
    //--- 通用数据结束 ---

    private int mCode;  // 响应吗，一帧的唯一标识符号

    public Packet() {
    }

    /**
     * 创建一帧同时设置响应码
     *
     * @param code 响应码
     */
    public Packet(int code) {
        mCode = code;
    }

    /**
     * 获取帧数据(byte[]), 该数据可以直接通过 TCP 协议进行发送.
     *
     * @return 帧数据
     */
    public abstract byte[] getFrameBytes();

    /**
     * 原始数据转换到帧数据,CRC校验,头部和尾部以及相关信息.
     *
     * @param type 帧类型
     * @param code 确认码
     * @param data 原始数据
     * @return 帧数据
     */
    public static byte[] packet(byte type, int code, @Nullable byte[] data) {
        int data_len = 0;
        if (null != data) {
            data_len = data.length;
        }
        int total_len = data_len + 11;                  // 总长度
        ByteBuffer buffer = ByteBuffer.allocate(total_len);   // 分配一个合适大小的区域
        buffer.put(type);                               // 添加帧类型
        buffer.putInt(code);                            // 添加响应码
        buffer.putInt(data_len);                        // 数据长度
        if (null != data) {
            buffer.put(data);                           // 添加数据
        }

        // 获取 CRC 数据
        buffer.flip();                                  // 准备读取数据
        buffer.mark();                                  // mark 指针位置, 防止读取后该部分数据被清除
        byte[] crc_data = new byte[buffer.limit()];     // 分配空间(之前所有的数据都参与 CRC 校验)
        buffer.get(crc_data);                           // 获取数据
        buffer.reset();                                 // 重置指针位置
        buffer.compact();                               // 切换到写状态
        short crc = CRCUtils.getCRC(crc_data);          // 计算 CRC
        buffer.putShort(crc);                           // 添加 CRC

        // 数据转义
        byte[] content = revise((byte[]) buffer.flip().array());

        // 添加头尾
        ByteBuffer frame = ByteBuffer.allocate(content.length + 2);
        frame.put(HEAD);
        frame.put(content);
        frame.put(TAIL);

        return (byte[]) frame.flip().array();          // 返回最终结果
    }

    /**
     * 转义
     *
     * @param raw 原始数据
     * @return 转义后数据
     * 0xC0 -> 0xAD 0x00
     * 0xDE -> 0xAD 0x01
     * 0xAD -> 0xAD 0x02
     */
    public static byte[] revise(byte[] raw) {
        ByteBuffer temp = ByteBuffer.allocate(raw.length * 2);
        for (byte b : raw) {
            if (b == HEAD) {
                temp.put(REVISE_CODE).put(REVISE_HEAD);
            } else if (b == TAIL) {
                temp.put(REVISE_CODE).put(REVISE_TAIL);
            } else if (b == REVISE_CODE) {
                temp.put(REVISE_CODE).put(REVISE_SELF);
            } else {
                temp.put(b);
            }
        }

        int ret_len = temp.position();
        byte[] ret = new byte[ret_len];
        temp.flip();
        temp.get(ret);
        return ret;
    }

    /**
     * 还原,反转义
     *
     * @param raw 转义后的数据
     * @return 原始数据
     * 0xAD 0x00 -> 0xC0
     * 0xAD 0x01 -> 0xDE
     * 0xAD 0x02 -> 0xAD
     * @throws Exception 发现不符合转义要求的数据，抛出异常，表明转义失败
     */
    public static byte[] revert(byte[] raw) throws Exception {
        ByteBuffer temp = ByteBuffer.allocate(raw.length);
        for (int i = 0; i < raw.length; i++) {
            Byte b = raw[i];
            if (b == REVISE_CODE) {
                i++;
                byte type = raw[i]; // 此处发生越界异常
                if (type == REVISE_HEAD) {
                    temp.put(HEAD);
                } else if (type == REVISE_TAIL) {
                    temp.put(TAIL);
                } else if (type == REVISE_SELF) {
                    temp.put(REVISE_CODE);
                } else {
                    throw new RuntimeException("revert error!");
                }
            } else {
                temp.put(b);
            }
        }

        int ret_len = temp.position();
        byte[] ret = new byte[ret_len];
        temp.flip();
        temp.get(ret);
        return ret;
    }


    public int getCode() {
        if (0 == mCode) {
            mCode = CodeUtils.getCode();
        }
        return mCode;
    }

    public void setCode(int code) {
        mCode = code;
    }

    //--- 接收或者发送时间 ---
    private long time = System.currentTimeMillis();

    public void updateTime() {
        time = System.currentTimeMillis();
    }

    public long getTime() {
        return time;
    }
}

通过数据抽象处理后，其他的数据包就比较容易实现了，例如：

心跳数据包：

public class GHeartPacket extends Packet {
    public static final byte FRAME_TYPE_HEART = (byte) 0x00;    // 心跳

    public GHeartPacket() {}

    public GHeartPacket(int code) { super(code); }

    @Override
    public byte[] getFrameBytes() {
        return packet(FRAME_TYPE_HEART, getCode(), null);
    }
}

内容数据包：

public class GContentPacket extends Packet {
    public static final byte FRAME_TYPE_CONTENT = (byte) 0x01;  // 内容

    private byte[] content;

    public GContentPacket(byte[] data) {
        content = data;
    }

    public GContentPacket(@NonNull String str) {
        content = str.getBytes(Charset.forName("UTF-8"));
    }

    public GContentPacket(int code, byte[] data) {
        super(code);
        content = data;
    }

    public GContentPacket(int code, @NonNull String str) {
        super(code);
        content = str.getBytes(Charset.forName("UTF-8"));
    }

    @Override
    public byte[] getFrameBytes() {
        return packet(FRAME_TYPE_CONTENT, getCode(), content);
    }

    public String getContent() {
        if (null == content) return "";
        return new String(content, Charset.forName("UTF-8"));
    }
}

有了基础数据包之后，利用基础数据包提供的方法，再去封装其他的数据包就十分容易了，上面以两类数据包举例，可以拓展任何其他类型的数据包。

3.2.3 数据包的编解码

编码器：

由于我们封装的 Packet 已经自带了编码功能，因此编码器就非常简单了，首先继承 MessageToByteEncoder 然后调用 packet 的 getFrameBytes() 方法就可以了。

/**
 * 作用: TCP 数据帧编码器
 * 作者: GcsSloop
 */
public class TCPFrameEncoder extends MessageToByteEncoder<Packet> {
    @Override
    protected void encode(ChannelHandlerContext cxt, Packet in, ByteBuf out) throws Exception {
        out.writeBytes(in.getFrameBytes());
    }
}

解码器：

然而解码就比较麻烦了，不过根据协议一步步的处理也是可以的，解码主要有以下步骤：

根据帧头和帧尾准确获得一帧的内容数据。
判断内容数据长度是否符合要求。
对内容数据进行反转义。
进行 CRC 校验，确认内容完整性。
对内容尝试进行分解(得到帧类型，确认码，数据)。
将分解后的数据交给子类进行处理。

注意：一旦涉及到 TCP 传输数据，肯定绕不开 TCP 粘包和拆包问题，通常来说一个数据包使用一个 TCP 包来发送，发生粘包就是两个较小的数据包合并为一个 TCP 包同时发送，拆包则是一个较大的数据包被拆分为多个小的 TCP 包进行发送，如果对粘包和拆包问题处理不当，会导致数据解析出现问题。

不过拆包和粘包问题在这里是不会有影响的：
第一，我们有明确的帧头和帧尾表明界限，解决了粘包问题。
第二，Netty 默认已经处理了拆包问题，你可以注意一下 decode 中调用了 skipBytes 用于跳过已经处理过的数据，如果没有处理的数据在下次回调 decode 方法时还会存在。

/**
 * 作用: 基础 TCP 数据帧解码器, 只对基本结构进行解析, 具体需要转换为什么类型,交由子类进行处理
 * 作者: GcsSloop
 * 摘要: 基本的帧结构
 * +----------+----------+--------------------------------------------------------
 * |  大小    |  固定值   |  摘要
 * +----------+----------+--------------------------------------------------------
 * | 1 bytes  | 0xC0     |  帧起始符
 * | 1 bytes  |          |  帧类型
 * | 4 bytes  |          |  确认码
 * | 4 bytes  |          |  内容长度
 * |          |          |  内容
 * | 2 bytes  |          |  校验码 CRC 校验
 * | 1 bytes  | 0xDE     |  帧结束符
 * +----------+----------+--------------------------------------------------------
 * 加密范围:帧类型+确认码+内容长度+内容.
 */
public abstract class BaseTCPFrameDecoder extends ByteToMessageDecoder {
    @Override
    protected void decode(ChannelHandlerContext channelHandlerContext, ByteBuf in, List<Object> list) throws Exception {
        ByteBuffer buffer = in.nioBuffer();
        byte temp;
        ByteBuffer frame = ByteBuffer.allocate(buffer.limit());

        while (buffer.position() < buffer.limit()) {
            temp = (byte) (buffer.get() & 0xFF);
            // 发现开始位置标识(尝试获取一帧的数据)
            if (temp == HEAD) {
                frame.clear();
                while (buffer.position() < buffer.limit()) {
                    temp = (byte) (buffer.get() & 0xFF);
                    if (temp != Packet.TAIL) {
                        frame.put(temp);
                    } else {
                        break;
                    }
                }
                // 如果 temp != TAIL, 说明该数据帧不是完整的，无需解析
                if (temp != Packet.TAIL) {
                    return;
                }

                // 说明该帧数据是完整的，可以尝试进行解析，此时 frame 中存储的是去除了帧头和帧尾的数据
                in.skipBytes(buffer.position());            // 跳过该帧内容

                // 在解析之前先进行反转义
                byte[] raw = new byte[frame.position()];
                frame.flip();                               // 切换到读取模式
                frame.get(raw);                             // 获取原始数据(frame中所有数据)
                frame.compact();                            // 将读取过的数据清除

                byte[] content = Packet.revert(raw);        // 获取反转义后数据
                frame.put(content);                         // 将反转义后数据依旧放入 frame 中

                // 长度校验
                if (frame.position() < 11) {                // 判断帧的长度是否足够，一帧必须包含帧类型，确认码，内容长度，CRC校验码，因此最少也需要 11 个 byte
                    System.out.println("frame length too short!");
                    return;
                }

                // CRC 校验
                if (!checkCRC(content)) {
                    System.out.println("CRC check error!");
                    return;
                }

                // TODO 输出内容信息
                System.out.println(b2h(content));

                frame.flip();
                byte frame_type = frame.get();              // 帧类型
                int frame_code = frame.getInt();            // 确认码
                int data_len = frame.getInt();              // 内容长度

                int need_len = data_len + 11;               // 有了内容长度，就可以得到该帧需要的长度
                if (frame.limit() != need_len) {         // 对帧长度进行严格校验
                    System.out.println("frame length error，real length = " + frame.position() + ", but need length = " + need_len);
                    return;
                }

                byte[] frame_data = new byte[data_len];
                frame.get(frame_data);                      // 帧内容

                Packet packet = decodeData(frame_type, frame_code, frame_data);
                if (null != packet) {
                    list.add(packet);
                }
            }
        }
    }

    /**
     * 检查内容区域是否符合 CRC 校验
     *
     * @param content 内容数据，不包括帧头和帧尾部
     * @return 校验结果，true 表示校验成功，false 表示校验失败
     */
    public static boolean checkCRC(byte[] content) {
        short crc_result = CRCUtils.getCRC(content, 0, content.length - 2);
        byte[] crc_raw = new byte[2];
        System.arraycopy(content, content.length - 2, crc_raw, 0, 2);
        short crc_short = BytesUtils.byteArrayToShort(crc_raw);
        return crc_result == crc_short;
    }

    /**
     * 解析内容数据, 只有通过了数据帧校验和 CRC 校验的数据才会被送到这里进行解析
     * 帧头, 帧尾, 校验码, 没有进行传递.
     *
     * @param frame_type 帧类型
     * @param frame_code 确认码
     * @param data       数据
     * @return 数据包
     */
    @Nullable
    public abstract Packet decodeData(byte frame_type, int frame_code, byte[] data);
}

基础解码器只是做到将数据分解成为原始数据，但是并没有转换为数据包，数据包最终转换需要交由其子类进行处理。

服务端解码器：

服务端解码器为基础解码器的子类，主要就是实现了将原始数据转换为数据包的过程。

public class ServerTCPFrameDecoder extends BaseTCPFrameDecoder {
    @Override
    public Packet decodeData(byte frame_type, int frame_code, byte[] data) {
        if (frame_type == FRAME_TYPE_HEART) {
            return new GHeartPacket(frame_code);
        } else if (frame_type == FRAME_TYPE_22) {
            return new G22Packet(frame_code);
        } else if (frame_type == FRAME_TYPE_CONTENT) {
            return new GContentPacket(frame_code, data);
        }
        return null;
    }
}

客户端解码器：

客户端解码器同理。

public class ClientTCPFrameDecoder extends BaseTCPFrameDecoder {

    @Override
    public Packet decodeData(byte frame_type, int frame_code, byte[] data) {
        if (frame_type == FRAME_TYPE_HEART) {
            GHeartPacket heart = new GHeartPacket(frame_code);
            return heart;
        } else if (frame_type == FRAME_TYPE_33) {
            G33Packet g33 = new G33Packet(frame_code);
            return g33;
        } else if (frame_type == FRAME_TYPE_CONTENT) {
            GContentPacket content = new GContentPacket(frame_code, data);
            return content;
        }
        return null;
    }
}

编解码器只是负责将数据包和数据流之间的相互转换，最终数据处理则是应该交由 Handler 进行处理。

3.2.4 数据包的处理

服务端处理：

在这里，由于服务端是用来测试的，因此处理就比较简单了，数据在解码后会转换为对应的 Packet，而 Netty 会将 Packet 发送给对应的 Handler，Handler 收到数据后，将需要返回给客户端的内容发送出去就可以了。

public class G22Handler extends SimpleChannelInboundHandler<G22Packet> {
    @Override
    protected void channelRead0(ChannelHandlerContext ctx, G22Packet g22) throws Exception {
        System.out.println("收到 22， 回复 33");
        G33Packet g33 = new G33Packet(g22.getCode());
        ctx.writeAndFlush(g33);
    }
}

例如： 2233 命令，当服务端收到 G22Packet 后，发送一个 G33Packet。

客户端处理：

1. 客户端数据包的发送：

客户端有一个数据发送队列，在服务开启时，会启动一个线程不断的查询队列中是否存在数据，如果存在数据就将数据发送出去：

mWorkThread = new Thread(new Runnable() {
    @Override
    public void run() {
        try {
            // 连接服务
            future = boot.connect(host, port).sync();
            System.out.println("服务已启动!");
            mSendQueue.clear();

            while (true) {
                Packet packet = mSendQueue.take();
                if (packet instanceof ClosePacket) {
                    break;
                }
                // 发送
                future.channel().writeAndFlush(packet);
            }
            System.out.println("服务关闭!");
        } catch (InterruptedException e) {
            System.out.println("服务被强制关闭!");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
});
mWorkThread.start();

数据发送队列使用的 LinkedBlockingDeque 是一个双向队列，在轮训中使用了 take 方法来获取头部数据，而 take 方法在队列中没有数据时会阻塞，直到有新的数据进来，这样可以防止 while 循环空转，占用过高的 CPU 资源。

同时为了可以优雅的终止服务，设置了一个特殊的数据包 ClosePacket，当该线程收到 ClosePacket 之后就会停止轮训，结束线程。

有了该轮训后，所有需要发送的数据只需丢入到发送队列中即可发送出去。

public void sendPacket(Packet packet) {
    if (!isStart || null == mWorkThread) {
        System.out.println("服务未开启!");
        return;
    }
    try {
        mSendQueue.add(packet);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

2. 客户端数据包的接收

数据包可以是单向发送的，即只有客户端发向服务端，或者只有服务端发给客户端，这样的单向数据后很好处理，只用转交给对应的 Handler 即可。

但是还有很多情况下数据传递是双向的，例如：客户端发送请求获取用户信息，服务端收到后将用户信息返回给客户端。双向数据传递就需要把服务端返回的数据返回给对应的调用者，为了可以分辨服务端返回的数据包属于哪一个调用者发送的，在每一帧的数据里面都有确认码，客户端发送时每一帧的确认码都不相同，而服务端收到后会在返回帧里面设置相同的确认码，这样在客户端收到服务端的回执数据后就可以通过确认码知道是哪一次调用的结果了。

首先，客户端收到服务端发送过来的消息后会先进行解码，之后交给 AckHandler，AckHandler 会把消息放到接收队列中。

class AckHandler extends SimpleChannelInboundHandler<Packet> {

    @Override
    protected void channelRead0(ChannelHandlerContext cxt, Packet ack) throws Exception {
        //noinspection StatementWithEmptyBody
        if (ack instanceof GHeartPacket) {
            System.out.println("心跳正常.");
        } else {
            System.out.println("收到数据:" + ack.getClass().getSimpleName());
            mRecvQueue.put(ack);
        }
    }
}

如果想要获取对应的结果，则通过 getFilterPacket 方法来过滤接收队列中的内容：

@Nullable
public Packet getFilterPacket(Filter filter, long timeout) throws InterruptedException {
    long starttime = System.currentTimeMillis();    // 记录开始时间
    Packet ret = null;
    // 在未超时的情况下不断尝试获取新数据
    do {
        // 计算新的 timeout
        long newtimeout = timeout - (System.currentTimeMillis() - starttime);
        if (newtimeout < 100) {
            newtimeout = 100;
        }
        Packet packet = mRecvQueue.pollLast(newtimeout, TimeUnit.MILLISECONDS);
        if (filter.accept(packet)) {
            // 获取到数据，直接跳出循环
            ret = packet;
            break;
        } else {
            // 将不需要的数据放回队列
            if (null != packet)
                mRecvQueue.putFirst(packet);
        }
        Thread.sleep(10);   // 默认休眠， 防止不断重复的取垃圾数据
    } while (System.currentTimeMillis() - starttime < timeout);
    return ret;
}

考虑到网络的不确定性，有时可能因为网络原因而无法收到回执结果，因此在获取过滤数据时是有超时设置的，一旦超过这个时限，如果依旧未获取到结果，则会返回 null。

但是这会导致另外一个问题的发生，如果服务端返回数据速度比较慢，在返回时，客户端读取早就已经超时了，那么这条数据就会变成垃圾数据堆积在接收队列中。为了避免垃圾数据堆积，我让其在空闲时清除接收队列中的超时数据。

private void clearTimeoutPacket(IdleStateEvent evt) throws InterruptedException {
    if (evt.state() == IdleState.ALL_IDLE) {
        int size = mRecvQueue.size();
        for (int i = 0; i < size; i++) {
            Packet packet = mRecvQueue.pollFirst();
            if (null == packet) break;
            if (!isPacketTimeout(packet)) {
                mRecvQueue.putLast(packet);
            } else {
                //System.out.println("清理掉一条垃圾数据 队列大小 = " + mRecvQueue.size());
            }
        }
    }
}

3.2.5 心跳逻辑

由于网络连接的不稳定性，为了可以与服务端保持长连接，需要设计心跳机制来保证连接的稳定性。这里的心跳逻辑非常简单，那就是在发生“写超时(即一段时间内没有向服务端发送任何数据)“的情况下向服务端发送一个心跳包。

// 发送心跳
private void heartbeat(IdleStateEvent evt) {
    if (evt.state() == IdleState.WRITER_IDLE) {
        GHeartPacket mHeartBeat = new GHeartPacket();
        sendPacket(mHeartBeat);
    }
}

3.2.6 自动重连

在服务端与客户端断开连接时，需要判断一下是用户断开了连接还是因为网络原因意外断开了连接。如果是意外原因，则会尝试进行重新连接：

// 自动重试
private void autoRetryConnect() {
    Timer timer = new Timer();//实例化Timer类
    timer.schedule(new TimerTask() {
        public void run() {
            if (isConnected || isUserClose) {
                timer.cancel();
            } else {
                tryReconnectSync();
            }
        }
    }, 100, mHeartbeatTime);
}

4. 后记

限于文章篇幅，不可能将所有的内容都讲解到，在文章之外依旧有很多的知识需要学习，如果你对 Netty 尚不了解的话，推荐看一下《Netty 官方文档》和《Netty实战》，或者在网上搜索一下 Netty 相关的知识，这将会有助于你理解本文的内容。同样，上文也只是展示了一些较为核心的内容，至于如何把这些内容串联起来，里面到底是用了那种设计思路和设计的细节，更推荐大家下载一下文章开头或者结尾的项目源码进行查看(如果是在公众号中看到这篇文章，可以点击查看原文，在原文中下载)，项目为 IntelliJ 项目，自己可以试运行一下，相信每个人都会有自己的理解和感悟。

最后，由于本文所做设计为示例性质，仅仅花费了一天的时间把想到的内容转换为代码实现，不可能面面俱到，只是把一些核心功能做出来，如果有什么疑惑可以在文末评论或者联系我的私人微信“GcsSloop”进行交流。

【本文示例源码下载】

雕虫晓技(八) Android与数据流的斗争

Sun, 12 Aug 2018 00:00:00 +0800

关于作者

GcsSloop，一名 2.5 次元魔法师。
微博 | GitHub | 博客

本文并没有什么实质性的内容，只是自己工作和学习这段时间的一些经验杂谈，仅从自己的角度阐述一下自己观察到的一些内容，可能并不全面，也不一定正确，仅供大家参考一下。

目前 Android 开发，从广义上来说可以划为前端的一部分，毕竟大部分 Android 开发所做的工作就是从服务器获取数据，将这些数据用合适的方式展示给用户，再把用户操作产生的数据传递给服务器。在这样的情境下 Android 开发所需要解决的一个核心问题就是数据的传递，如何把服务器与页面内容关联起来，并且保持同步。相信对于这一过程，每一个工程师都有自己的解决方案。这一个过程看似简单，但真正想要将其比较完美的实现，却也需要花费一番功夫。

蛮荒时代

在 Android 开发还未成熟，处于蛮荒时期的时候，没有成型方案作为参考，此时比较常见的做法就是在 Activity 里创建线程，在线程内发送网络请求，之后用 Handler 把请求结果传递到主线程，主线程收到信息后更新页面，这种方式缺陷是十分明显的，它会造成 Activity 十分臃肿，随着项目的发展会变成一团乱麻。

网络库

后来出现了诸多成型的网络的封装库，因此网络请求的核心逻辑就不在 Activity 中了，这为 Activity 减轻了不少负担，但是此时又一个问题出现了，那就是如何从请求库获取网络请求的返回结果，此时大多数网络库都采用了一个最容易想到的方案，那就是 Callback，Activity 发出请求时会得到一个 Callback，并通 Callback 回调得到最终的网络请求结果。

数据层

但是网络请求问题解决了，但是很快另一个问题又成了比较困扰的内容，例如：网络请求得到的结果并不能直接使用，需要进行一些数据的转换，又或者网络请求并不需太高的实时性，请求一次后需要缓存起来，避免多次重复请求。这样在 Activity 中就需要一些数据转换操作，或者进行一些数据库相关的操作，很快 Activity 又会变得臃肿起来。

为了避免在 Activity 中直接进行这些操作而变得臃肿，很多人不得不在网络请求和 Activity 之间封装一个数据层，Activity 向数据层请求数据，数据层根据需要从网络或者数据库获取数据并且对数据进行转换，然后交给 Activity。此时数据需要如何传递呢？

Activity <--callbac-1-- 数据层 <--callback-2-- 网络请求

通常来说需要 Activity 向数据层发送请求时附带一个 Callback，而数据层直接向网络发出请求时又是另外一个 Callback，需要把数据从一个 Callback 传递到另一 Callback，当然这是对于一些比较简单的业务，如果业务更加复杂一点，可能会划分更多的层和节点，那么就不仅仅是两个 Callback 了，数据需要多在多个 Callback 之间流动，Callback 太多就会导致逻辑不是那么清晰，当项目大到一定程度时，里面的各种 Callback 就能把人绕晕。

EventBus

为了解决错综复杂的 Callback 问题，EventBus 诞生了，它的核心其实就是发布订阅模式，当 Activity 需要获取一些信息时，发送一个事件(Event), 数据层接收到 Event 后执行相关操作，之后同样通过发送 Event 告诉 Activity 最终的结果。此时各个组件之间不需要再去关心各种错中复杂的数据传递方式，只需要把需要传递的数据包装成一个个的 Event 再通过 EventBus 发送出去，如果需要相关的事件的话，就在合适的位置注册一下监听该事件。

所谓事件总线，就是把所有的事件都通过一个地方进行传递，这个和计算机硬件上的总线原理类似，因此也就被称为“事件总线”，在我最初接触到这种思想时，确实也被惊艳了一下，这种方式在一定程度上解决了过多 Callback 的问题，让代码看起来更加简洁了。

但是这种方式也并不是完美无缺的，它的确让代码更加简洁了，但是它将数据传递的过程隐藏起来了，相当于切断了数据流的追踪线路，增大了数据流追踪的难度，如果整个项目都是自己设计或者一开始就参与的问题倒是不大，但是如果是接手别人的项目是这样设计的，那么接手的人很可能会一脸懵逼。

例如：我需要当前的用户的信息，也知道通过哪个 Event 来接收这一信息，但是我发现接收到的信息有时是错误的，因此我需要找到发送该信息的位置并修改这一错误，这时就比较麻烦了，因为所有信息都是通过 EventBus 发送的，但我无法通过 EventBus 直接追踪到发送位置，因此我需要找到该 Event ，并追踪这个 Event 都被哪些地方使用了，然后从这些地方中筛选出时哪里发送了这个错误信息，对于一个庞大的项目来说，这一工作量无疑是巨大的，假若前人在多个地方都发送了这一个 Event，我则需要对所有发送过这个 Event 的地方都进行检查，这会浪费大量的工作时间。因此在实际的公司项目上我很少采用 EventBus 这一方案，尽管它很好用，但是这一点缺陷就足以致命。

数据流

正在我纠结到底如何传递数据时，Rx 技术方案就出现在了我的面前，Rx 的核心思想就是响应式编程，即一种面向数据流和变化传播的编程范式，数据更新是相关联的。 这种思想和 Linux 中的管道也是类似的，数据从一个地方进入转换后输出，而这个输出恰好是另一段处理的输入，就这样把数据串联起来。

这是一个简单的例子，将一个空白的圆通过两步转换变成我们所需要的样子，数据从一个位置流向另一个位置，并不断的变化。
Rx 核心之一就是数据流，包括 Java8 中也有引入类似的流式思想。

响应式这一思想并不算特别新颖，不过是这种思想近些年才被人用代码实现出来具备了商用能力而已，随着 RxJava 技术的成熟，目前我参与的项目中所有的数据获取基本都是通过 RxJava 进行处理的。并且基于 RxJava 提供的强大操作符和线程调度能力，确实也算解决了一大难题。

相比于 EventBus 这种形式，这种方案最重要的还是数据流的可追踪性，还是上面的例子，如果我发现了最终的结果有错误，那么我只需要跟随着这条数据链不断的向上追踪，并逐一环节的进行检查即可，很快就能找到问题的根源所在。就目前而言，这种方式还是不错的，尤其是配合 Java8 的一些新特性使用，相当爽快。

如果想要了解这一思想的运用方式，个人推荐看《RxJava的官方文档》和《Java8 实战》，看完这些基本就可以理解响应式编程中数据流这一思想了。

LiveData

LiveData 是 Google 最近推出的一种技术方案，它需要配合 Lifecycle 来使用，它解决的问题核心不是数据传输的问题，而是生命周期。我们都知道网络传输是比较慢的，而且具有不确定性，因此 Android 不允许其在主线程中执行，必须另开线程，在线程中获得结果后通过一些方式将结果告诉主线程，主线程并根据这些信息进行更新，正是因为网络返回时间的不确定性导致了一个问题的发生，当网络结果返回时，可能需要这一结果的页面已经不存在了。

例如：在我打开一个 activity 时发起了一个网络，网络请求的结果会更新 activity 里面的内容，但是在我发起请求后我不想要这个结果了，直接点击返回键把 activity 关闭了，如果我在关闭 activity 时忘记了取消这次网络请求，那么它在一段时间后就可能会返回结果，并在返回结果里面尝试去更新一些已经被销毁的 View，就会产生异常，导致程序崩溃。

为了避免这些问题的出现我们不得不在代码里面添加很多安全检查，每当有类似的情况出现都需要安全检查，于是核心的业务逻辑就可能被淹没在了诸多的安全检查中。

为了解决这一问题，Lifecycle 和 LiveData 就出现了，其实在 Lifecycle 出现之前，就有采用类似思想的技术方案出现，但是 Lifecycle 是 Google 官方推出的内容，在 support 包里面的很多组件已经默认支持了 Lifecycle，因此使用 Lifecycle 和 LiveData 会更加的简便。

在引入的 LiveData 后，基本的项目结构就变成下面这样了：

这只是一个简略的结构，在实际的项目中使用时肯定是比这个要复杂的，需要根据具体的业务需求选择不同的技术方案。

在经过上述的几次演变后，Activity 的工作量大大的减轻了，网络、数据库、一部分安全检查逻辑都被从 Activity 中移除了，Activity 只需要绑定一下 View，并控制一下显示内容就可以了，因此会看起来特别的简洁，如果配合 Butterknife 和 Dagger2 来使用的话，会更加简洁，不过这两个内容并不在本文的讨论范围内，因此也就不展开叙述了。

以上提到的相关技术，并没有详细的说明，若比较感兴趣，可以自己查询关键词去详细的了解一下。

结语

马上结束了，顺便插一个题外话，随着 Android 相关从业人员的大量增加，相关的技术发展也是突飞猛进，几乎每个一段时间都有新的技术跳到我们面前，例如近两年蓬勃发展的 MVP 和 MVVM 架构，Kotlin，Flutter 等技术，很多人感觉自己在被技术追着走一样，似乎一天不学习，明天就赶不上发展形势了。在这种情况下，有些人被逼不断的去学习这些新技术，不断的储备，未雨绸缪。也有人在主动的追逐着这些新技术，每当新技术出现后，就迫不及待的想要把这些技术用到现有的项目中。

我个人觉得被迫学习或者疯狂追逐都不是一种很好的状态，每当一项新技术的出现，必然是解决了一些旧有技术无法解决的痛点，在新技术出现时没必要第一时刻就去学习如何使用它，但需要先查一下它的来龙去脉，它是为何而来，解决了哪些问题，相比于之前的技术有何优点，缺陷又在哪里。只有在了解了这些情况之后，再根据自身情况决定是否需要学习，盲目的学习可能会浪费掉自己的时间，同样，根据公司的项目需求再决定是否应该引入这项技术，有时引入一项不合适的技术方案反而会拖慢整体的进度。

最后，以上的一些观点仅为自己观察的内容，由于自己从业时间有限，接触到的项目自然也是有限的，所以上述理论并不能适合所有的 Android 项目，具体情况还需要具体分析才行。

安卓自定义View进阶-缩放手势检测(ScaleGestureDecetor)

Thu, 09 Aug 2018 00:00:00 +0800

0. 前言

Android 缩放手势检测，ScaleGestureDetector 相关内容的用法和注意事项，本文依旧属于事件处理这一体系，在大多数的情况下，缩放手势都不是单独存在的，需要配合其它的手势来使用，所以推荐配合手势检测(GestureDetector) 一起观看。如果是用在自定义的控件上，则需要配合 Matrix 相关内容使用起来可能会更加方便，如果对 Matrix 不太熟悉也可以看本系列文章之前的内容来补充一下相关知识。如果你没看过之前的文章，可以到自定义 View 系列来查看这些内容。

缩放手势对于大部分 Android 工程师来说，需要用到的机会比较少，它最常见于以下的一些应用场景中，例如：图片浏览，图片编辑(贴图效果)、网页缩放、地图、文本阅读(通过缩放手势调整文字大小)等。应用场景相对比较狭窄，不过肯定也会有一些用武之地，它可以实现如下的效果：

2.缩放手势检测(ScaleGestureDetector)

缩放手势检测同样是官方提供的手势检测工具，它的使用方式的 GentureDetector 类似，也是通过 Listener 进行监听用户的操作手势，它是对缩放手势进行了一次封装，可以方便用户快速的完成缩放相关功能的开发。缩放手势相对比较简单，网络上也能查到不少非官方实现的缩放手势计算方案，但部分非官方的方案确实有所局限，例如只支持两个手指的计算，在出现超过两个手指时，只计算了前两个手指的移动，这样显然是不合理的。而官方的这种实现方案轻松的应对了多个手指的情况，下面我们就来看看它是如何实现的吧。

2.1 构造方法

它有两个构造方法，和 GestureDetector 类似，如下所示：

ScaleGestureDetector(Context context, ScaleGestureDetector.OnScaleGestureListener listener)

ScaleGestureDetector(Context context, ScaleGestureDetector.OnScaleGestureListener listener, Handler handler)

2.2 手势监听器

它只有两个监听器，但严格来说，这两个监听器是同一个，只不过一个是接口，另一个是空实现而已。

监听器	简介
OnScaleGestureListener	缩放手势检测器。
SimpleOnScaleGestureListener	缩放手势检测器的空实现。

OnScaleGestureListener

缩放手势监听器有 3 个方法：

方法	简介
boolean onScaleBegin(ScaleGestureDetector detector)	缩放手势开始，当两个手指放在屏幕上的时候会调用该方法(只调用一次)。如果返回 false 则表示不使用当前这次缩放手势。
boolean onScale(ScaleGestureDetector detector)	缩放被触发(会调用0次或者多次)，如果返回 true 则表示当前缩放事件已经被处理，检测器会重新积累缩放因子，返回 false 则会继续积累缩放因子。
void onScaleEnd(ScaleGestureDetector detector)	缩放手势结束。

2.3 简单示例

这是使用 ScaleGestureDetector 的一个极简用例，当然，它没有实现任何功能，只是用日志的方式输出了几个我们比较关心的参数而已。

public class ScaleGestureDemoView extends View {
    private static final String TAG = "ScaleGestureDemoView";

    private ScaleGestureDetector mScaleGestureDetector;

    public ScaleGestureDemoView(Context context) {
        super(context);
    }

    public ScaleGestureDemoView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initScaleGestureDetector();
    }

    private void initScaleGestureDetector() {
        mScaleGestureDetector = new ScaleGestureDetector(getContext(), new ScaleGestureDetector.SimpleOnScaleGestureListener() {
            @Override
            public boolean onScaleBegin(ScaleGestureDetector detector) {
                return true;
            }

            @Override
            public boolean onScale(ScaleGestureDetector detector) {
                Log.i(TAG, "focusX = " + detector.getFocusX());       // 缩放中心，x坐标
                Log.i(TAG, "focusY = " + detector.getFocusY());       // 缩放中心y坐标
                Log.i(TAG, "scale = " + detector.getScaleFactor());   // 缩放因子
                return true;
            }

            @Override
            public void onScaleEnd(ScaleGestureDetector detector) {
            }
        });
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mScaleGestureDetector.onTouchEvent(event);
        return true;
    }
}

3. 基本原理

由于缩放手势检测使用起来非常简单，没有什么复杂的内容，不仅如此，它的实现也非常简单，下面我就带大家简单分析一下它的基本原理。在缩放手势中我们其实主要关心的只有两个参数而已，一个是缩放的中心点，另一个就是缩放比例了。 下面我们就看看这两个参数是如何计算出来的.

3.1 计算缩放的中心点(焦点)

如果只有两个手指的话，缩放的中心点自然是非常容易计算的，那就是两个手指坐标的中点，但是如果有多个手指该如何计算缩放的中心点呢？

计算中心点的原理其实也非常简单，那就是将所有的坐标都加起来，然后除以数量即可。

这是一个简单的数学原理，并不复杂，如果有不理解的，自己尝试计算一下也就能明白了。不过在实际运用中还是需要注意一下的，用户的手指数量可能并不是固定的，用户可能随时抬起来或者按下手指，ScaleGestureDetector 中是这样实现的：

 final boolean anchoredScaleCancelled =
            mAnchoredScaleMode == ANCHORED_SCALE_MODE_STYLUS && !isStylusButtonDown;
    final boolean streamComplete = action == MotionEvent.ACTION_UP ||
            action == MotionEvent.ACTION_CANCEL || anchoredScaleCancelled;

    // 注意这里
    if (action == MotionEvent.ACTION_DOWN || streamComplete) {
		//重置侦听器正在进行的任何缩放。
        //如果是ACTION_DOWN，我们正在开始一个新的事件流。
        //这意味着应用程序可能没有给我们所有的事件(事件被上层直接拦截了)。
        if (mInProgress) {
            mListener.onScaleEnd(this);
            mInProgress = false;
            mInitialSpan = 0;
            mAnchoredScaleMode = ANCHORED_SCALE_MODE_NONE;
        } else if (inAnchoredScaleMode() && streamComplete) {
            mInProgress = false;
            mInitialSpan = 0;
            mAnchoredScaleMode = ANCHORED_SCALE_MODE_NONE;
        }

        if (streamComplete) {
            return true;
        }
    }

可以看到，当触发 down 或者触发 up，cancel 时，如果之前处于缩放计算的状态，会将其状态重置，并调用 onScaleEnd 方法。

当然，你可能注意到了 mAnchoredScaleMode 等内容，这些是对触控笔等外设的支持，对于大部分工程师来说，用到的机会比较少，不管即可。

计算中心点：

final boolean configChanged = action == MotionEvent.ACTION_DOWN ||
        action == MotionEvent.ACTION_POINTER_UP ||
        action == MotionEvent.ACTION_POINTER_DOWN || anchoredScaleCancelled;

// 注意这里
final boolean pointerUp = action == MotionEvent.ACTION_POINTER_UP;
final int skipIndex = pointerUp ? event.getActionIndex() : -1;

// 确定焦点
float sumX = 0, sumY = 0;
final int div = pointerUp ? count - 1 : count;
final float focusX;
final float focusY;
if (inAnchoredScaleMode()) {
    // 在锚定比例模式下，焦点始终是双击或按钮按下时手势开始的位置
    focusX = mAnchoredScaleStartX;
    focusY = mAnchoredScaleStartY;
    if (event.getY() < focusY) {
        mEventBeforeOrAboveStartingGestureEvent = true;
    } else {
        mEventBeforeOrAboveStartingGestureEvent = false;
    }
} else {
	// 注意这里， 最终计算得到焦点
    for (int i = 0; i < count; i++) {
        if (skipIndex == i) continue;
        sumX += event.getX(i);
        sumY += event.getY(i);
    }

    focusX = sumX / div;
    focusY = sumY / div;
}

3.2 计算缩放比例

计算缩放比例也很简单，就是计算各个手指到焦点的平均距离，在用户手指移动后用新的平均距离除以旧的平均距离，并以此计算得出缩放比例。

// 计算到焦点的平均距离
float devSumX = 0, devSumY = 0;
for (int i = 0; i < count; i++) {
    if (skipIndex == i) continue;
    devSumX += Math.abs(event.getX(i) - focusX);
    devSumY += Math.abs(event.getY(i) - focusY);
}
final float devX = devSumX / div;
final float devY = devSumY / div;

// 注意这里
final float spanX = devX * 2;
final float spanY = devY * 2;
final float span;
if (inAnchoredScaleMode()) {
    span = spanY;
} else {
    // 相当于 sqrt(x*x + y*y)
    span = (float) Math.hypot(spanX, spanY);
}

当用户移动的距离超过一定数值(数值大小由系统定义)后，会触发 onScaleBegin 方法，如果用户在 onScaleBegin 方法里面返回了 true，表示接受事件后，就会重置缩放相关数值，并且开始积累缩放因子。

// mSpanSlop 和 mMinSpan 都是从系统里面取得的预定义数值，该数值实际上影响的是缩放的灵敏度。
// 不过该参数并没有提供设置的方法，如果对灵敏度不满意的话，和通过直接之际复制一个 ScaleGestureDetector 到项目中， 并且修改其中的数值。
final int minSpan = inAnchoredScaleMode() ? mSpanSlop : mMinSpan;
if (!mInProgress && span >=  minSpan &&
        (wasInProgress || Math.abs(span - mInitialSpan) > mSpanSlop)) {
    mPrevSpanX = mCurrSpanX = spanX;
    mPrevSpanY = mCurrSpanY = spanY;
    mPrevSpan = mCurrSpan = span;
    mPrevTime = mCurrTime;
    mInProgress = mListener.onScaleBegin(this);
}

通知用户缩放：

if (action == MotionEvent.ACTION_MOVE) {
    mCurrSpanX = spanX;
    mCurrSpanY = spanY;
    mCurrSpan = span;

    boolean updatePrev = true;

    if (mInProgress) {
        // 注意这里，用户的返回值决定了是否重新计算缩放因子
        updatePrev = mListener.onScale(this);
    }

    // 如果用户返回了 true ，就会重新计算缩放因子
    if (updatePrev) {
        mPrevSpanX = mCurrSpanX;
        mPrevSpanY = mCurrSpanY;
        mPrevSpan = mCurrSpan;
        mPrevTime = mCurrTime;
    }
}

4. 后记

由于缩放手势检测确实比较简单，没什么好讲的内容，如果看了上面的内容依旧有疑惑的话，推荐去看一下源码，源码的逻辑也非常简洁明了，相信看完之后也就能够彻底理解它的原理了。

最后附上文章一开始展示所用图片的源代码，点击下载项目获取源代码。

下载项目

About Me

作者微博: @GcsSloop

雕虫晓技(七) 用旧Android手机做远程摄像头

Tue, 12 Jun 2018 00:00:00 +0800

关于作者

GcsSloop，一名 2.5 次元魔法师。
微博 | GitHub | 博客

0. 前言

科技发展越来越快，手机也换的越来越频繁，有很多旧手机都被淘汰了，这些旧手机一般没什么用，也不能卖，毕竟手机中可能还存在着一些私人数据可能没有清空，因此这些旧手机就只能放在家里落灰了。

对于大多数人来说，这些旧手机都是无法被利用起来的，虽然网上有很多的利用旧手机的教程，但很多要么是很鸡肋，要么是操作难度较高，需要较强的动手能力。

那么今天呢，就教大家如何低成本的快速将旧 Android 手机变成一个可远程访问的摄像头。

本文定位是一个比较基础的教程，假设大家对这方面都不熟悉，所以文中啰嗦的内容比较多，有些技术点如果大家已经有所了解，可以跳过内容。

1. 搭建局域网摄像头

搭建局域网摄像头需要一个软件，那就是 ip-webcam，能访问谷歌商店的用户可以直接在商店内搜索 “ip-webcam” 下载即可，对于无法访问的用户可以到 https://www.appsapk.com/ip-webcam/ 进行下载。

ip-webcam 是一款免费软件(免费版本存在广告)，它有一个付费的 pro 版本，pro版本功能更强，但只能在谷歌商店购买，如果想买但是没有可用的付款卡，可以使用礼品卡进行充值购买，礼品卡在淘宝有卖。但是对于普通用户来说，免费版已经足够了。

ip-webcam 的图标是这样的：

打开后里面大概这样子：

由于我们后面会把这个摄像头放到公网上，所以需要把设置一个账号密码，不然很不安全。但是如果只是需要在局域网使用的话，账号密码可以留空。

在配置完账号密码后，其他内容可以按照自己的需要进行调整，需要注意的是，如果家庭网络的上行带宽比较低的话，可以适当的把视频分辨率和帧率调低一点，否则在外网访问的时候会一直卡顿。

在设置完成后，翻到最后面一条，直接点击开启服务器即可。

在服务开启后，会在界面上显示视频的连接地址，如下：

如上图所示，上面的地址就是服务访问地址，在当前网络内任意电脑或者手机上输入该地址即可访问到摄像头，点击浏览器选项就可以看到视频的内容。

可以看到，它除了查看视频之外，还有很多功能，例如：动作检测(自动抓拍)，开关闪光灯，循环录制等。

还有更多的高级功能，例如配合 tasker 来开发更多功能，大家可以自行发掘。

注意：

用手机做摄像头，需要注意发热问题，部分手机因为设计问题，长期开启摄像头会导致手机发热严重，如果长时间发热可能会损坏设备，至于自己的设备是否适合做摄像头，可以自己先试验一下，一般来说，常温下运行一两个小时以上没有因为过热导致关机等问题就可以作为一直开启的摄像头来用。但是仍然需要注意不要放置于温度过高或者阳光直射的地方。

如果是一直开启则应该放置在电源附近，或者买一根比较长的数据线来为其充电。

2. 连接到公网

上面开启的摄像头只能在局域网使用，如果需要在公网使用，那么就稍微麻烦一点了。如果自己办理的宽带有静态的公网IP，那么可以在路由器上设置一下端口映射就可以在外网访问了。

但是大部分用户办理的宽带都是动态公网IP或者共享公网IP，那么设置端口映射就不管用了，因此就需要考虑一些其他方案。

2.1 免费方案

如果不想花钱，直接搜索动态域名解析、内网穿透就可以找到相关软件，有很多商业的软件可以用，例如：花生壳、nat123 等。这些商业软件都有详细的使用说明，我也就不再赘述了，有需要的可以自行搜索使用方案，对于动手能力不太强或者需求不大的用户来说，直接注册后使用免费套餐即可，相对来说安装更加简单。

但是免费一般会有很多的限制，例如流量限制，映射条数限制，域名限制等。并且一般还需要实名认证。因此个人试用过一段时间这种方案后，觉得用着很不舒服，于是也就放弃了。

2.2 极客方案

首先声明，这种方案并非免费，但是所有的内容都可以掌控在自己手里，如果仅仅只是需要一个家庭摄像头的话，又不想花太多钱，直接去淘宝买一个成品带服务或许更便宜一点。

(由于家庭摄像头拍摄位置可能会涉及到隐私区域，因此个人对部分商业摄像头直接把非加密视频数据上传到公司服务器上是十分不信任的，除此之外，很多商业摄像头为了方便远程调试安装，都留有一定的远程控制方案，我相信商业公司员工不会私自查看视频信息，但是这种方式会给一些居心不良的黑客留下可乘之机，因此我自己搭建了一套服务。)

我使用的这种方案需要一个公网服务器作为代理，因为服务器不承载主要的运算服务，只是做流量转发，所以不需要很高的性能，也不需要大量的存储空间，我自己目前使用的是1核1G的乞丐级配置，在阿里云上租用一年300多。当然，部分国外的服务器会更加便宜，例如我在其他平台上租用的美国服务器，一年服务费用大约200多元，赶上促销的话，不到100元就能租用一年的服务，但是由于是做流量转发的，自己又主要在国内活动，国外的服务器延迟稍微有点大，因此就买了比较贵的阿里云服务。需要注意的是，如果不想备案的话，可以买香港服务器，当然国外的cn2也是可以接受的。

最重要的是，一台服务可以做的事情很多，包括但不限于以下事情：私有云盘、个人网站、Git仓库、代理服务、游戏服务器、下载服务、爬虫。

2.2.1 实现原理

上面说了一大堆乱七八糟的东西，下面先说一下这种方案的原理：

原理其实非常简单，就是一个反向代理服务，用一台公网的代理服务器(proxy-server)作为跳板，可以从公网上任意位置访问这个服务器，之后这个服务器会把接收到的信息转发给对应的代理客户端(peoxy-client)，由代理客户端去访问处于内网的服务，内网服务响应后，按照相反的路径传递回去，最终就可以实现从任意位置访问到内网的服务啦，原理图如下：

图片来自： lanproxy

2.2.2 实现方案

我在GitHub上找到了一个开源的反向代理工具，这个工具有打包好的版本，并且部署非常简单，它就是 lanproxy。

GitHub 地址： https://github.com/ffay/lanproxy

lanproxy是一个将局域网个人电脑、服务器代理到公网的内网穿透工具，目前仅支持tcp流量转发，可支持任何tcp上层协议（访问内网网站、本地支付接口调试、ssh访问、远程桌面…）。目前市面上提供类似服务的有花生壳、TeamView、GoToMyCloud等等，但要使用第三方的公网服务器就必须为第三方付费，并且这些服务都有各种各样的限制，此外，由于数据包会流经第三方，因此对数据安全也是一大隐患。 https://lanproxy.io2c.com

2.2.3 下载软件

到 lanproxy-releases 下载打包好的服务端和客户端。

2.2.4 上传服务端到自己的服务器

我自己使用的是阿里云的服务器，CentOS 7.4 系统，因此就以此系统为基准做介绍，当然，其他的系统也是支持的(包括各类Linux和WIndows)。

这里需要注意的是，此处需要熟悉一些基础的 linux 相关命令，假设大家都会一点基础的 Linux 命令。

如果大家对 vi(vim) 等文本编辑命令熟悉的话，直接上传原始server端压缩包到服务，解压后通过这些命令对配置文件(proxy-server-20171116/conf/config.propertoes)进行编辑即可。

如果不熟悉 linux 上文本编辑相关命令，可以现在自己电脑上解压，找到对应的配置文件(proxy-server-20171116/conf/config.propertoes) 进行编辑，之后再次压缩进行上传到服务器也可以。

默认的配置文件如下：

server.bind=0.0.0.0
server.port=4900

server.ssl.enable=true
server.ssl.bind=0.0.0.0
server.ssl.port=4993
server.ssl.jksPath=test.jks
server.ssl.keyStorePassword=123456
server.ssl.keyManagerPassword=123456
server.ssl.needsClientAuth=false

config.server.bind=0.0.0.0
config.server.port=8090
config.admin.username=admin
config.admin.password=admin

注意：修改 username 和 password 字段。

之后通过 scp 命令将服务端上传到服务器：

scp local_file remote_username@remote_ip:remote_folder

# 例如
scp lanproxy-server-20171116.zip root@12.34.56.78:/home/lanproxy

2.1.3 安装基础工具

使用 ssh 命令登陆服务器，阿里云可以直接在网页登陆，其他服务器使用ssh命令登陆即可。

# 登陆到服务器
ssh root@ip
# 输入密码，密码从购买服务器的平台获取，输入密码时不会显示任何字符，输入完成后直接点击回车键就可以了。

如果你的服务上没有zip软件解压工具，可以通过下面的命令安装：

yum install zip unzip

除了这些工具外，还需要安装 java 运行环境，直接安装 openjdk就可以了，1.7 或者 1.8 版本都可以。

yum install java-1.7.0-openjdk.x86_64

安装完成后解压软件：

unzip lanproxy-server-20171116.zip

2.2.5 启动服务

到解压后文件夹中的 bin 目录下，执行启动命令：

./startup.sh

如果启动成功，它会显示一个 pid，例如：

./startup.sh 
Starting the proxy server ...started
PID: 19875

到这里，服务就正式启动了，后续的内容可以到网页上进行设置，访问 http://IP:8090 就能看到管理页面了(IP是服务器的公网IP)。

PS：如果无法访问到，请检查是否可以 ping 通该端口，服务器的防火墙，和阿里云的安全组规则。

登陆页面如下：

用之前配置的用户名和密码进行登录，登陆后添加一个客户端，如下，名称随便写，密钥用随机生成的即可。

之后你会看到在配置管理里面多了一个条目 G-IPCam, 点击该条目然后点击添加配置进行添加端口映射(添加一条摄像头的映射，后端代理信息就填写之前摄像头上显示的 IP 地址)：

点击提交后，一条映射数据就被添加上去了。

注意：

如果使用的是阿里云服务器，要设置安全组配置来开放 8080 端口，如果是其他平台的服务器，则要设置防火墙来开放端口，具体设置方法需要根据服务器系统类型来设置，可以自己搜索。

2.2.6 客户端连接

使用局域网内的任意一台主机作为跳板连接公网代理服务器。

下面这一段取自 lanproxy 说明文档。

到上面为止，服务端已经搭建完成了，只要客户端连接成功就可以通过互联网进行访问了，在手机所在的局域网内的任意电脑主机上安装客户端(client)，在上面下载的发布包中有基于java的跨平台客户端，配置方式如下：

Java client的配置文件放置在conf目录中，配置 config.properties

#与在proxy-server配置后台创建客户端时填写的秘钥保持一致；
client.key=
ssl.enable=true
ssl.jksPath=test.jks
ssl.keyStorePassword=123456

#这里填写实际的proxy-server地址；没有服务器默认即可，自己有服务器的更换为自己的proxy-server（IP）地址
server.host=lp.thingsglobal.org

#proxy-server ssl默认端口4993，默认普通端口4900
#ssl.enable=true时这里填写ssl端口，ssl.enable=false时这里填写普通端口
server.port=4993

安装java1.7或以上环境
linux（mac）环境中运行bin目录下的 startup.sh
windows环境中运行bin目录下的 startup.bat

如果不想安装Java环境，可以直接运行该平台编译好的client。

普通端口连接

# mac 64位
nohup ./client_darwin_amd64 -s SERVER_IP -p SERVER_PORT -k CLIENT_KEY &

# linux 64位
nohup ./client_linux_amd64 -s SERVER_IP -p SERVER_PORT -k CLIENT_KEY &

# windows 64 位
./client_windows_amd64.exe -s SERVER_IP -p SERVER_PORT -k CLIENT_KEY

SSL端口连接

# mac 64位
nohup ./client_darwin_amd64 -s SERVER_IP -p SERVER_SSL_PORT -k CLIENT_KEY -ssl true &

# linux 64位
nohup ./client_linux_amd64 -s SERVER_IP -p SERVER_SSL_PORT -k CLIENT_KEY -ssl true &

# windows 64 位
./client_windows_amd64.exe -s SERVER_IP -p SERVER_SSL_PORT -k CLIENT_KEY -ssl true

如果没有错误出现的话，连接成功后，在网页上可以看到客户端的连接状态变成了在线，如下：

可以看到，上面的客户端有一个是连接状态，另一个是离线状态。

2.2.7 在公网查看

如果上述步骤均正常，最后客户端显示在线状态就可以到网页上查看摄像头了，访问 http://proxy-server-ip:8080 (例如:http://12.34.56.78:8080) 看是否显示正常。

正常的话就会显示如下界面：

如果无法正常显示，请依次检查如下问题：

检查服务器是否可以 ping 通。
检查 lanproxy

2.2.8 独立摄像头

在上面摄像头和公网服务器之间通信使用了一台局域网内的主机作为跳板，需要一只处于开启状态才能保证摄像头的连接正常，但是这样会引起一些其他问题，例如主机风扇噪音过大，比较耗电等，我们毕竟只是需要一个小小的中转服务，这样就会显得比较浪费了。之前为了解决这个问题，准备买一个树莓派来作为局域网内流量中转设备，毕竟树莓派功耗相对于个人PC来说要小很多，并且更加安静。

后来发现meefik大神开发了相关的应用，可以直接在 Android 设备上部署 Linux 系统，于是想，既然可以部署 Linux 系统，那么岂不是可以在摄像头所在手机上直接进行流量中转了？于是又折腾了一下，最终证实方案可行，但是过程却是比较麻烦，下面分享一下主要的过程。

获取 root 权限。
安装 busybox
安装 linux deploy

虽然步骤看似简单，但是坑确实超多，随着 Android 系统越来越完善，在大部分情况下已经不需要 root 了，导致很多 root 工具都无法使用了，在试用了几乎所有的root工具后，最后还是靠刷机获取的 root 权限，我用的设备是华为旧手机，先去官网申请解锁 bootloader，然后刷入第三方的 Recovery，最后在网上找到一个自带root权限的系统刷入进去，需要注意的是，如果是主力机，目前还是不要刷机了，因为现在在网络上可以找到的刷机包，基本都捆绑了一些垃圾应用，哪些搞纯净包的因为没法盈利，大部分早就不更新了，所以刷机需谨慎。

当然，如果是手机已经基本不用了，那随便折腾都行，不过刷机后记得第一时间卸载掉所有的垃圾应用，我使用的是Es文件浏览器，借助它的root工具箱卸载掉位于系统中的垃圾应用，卸载完成后重启一下设备。

如果正常获取了 root 权限，后续就比较简单了。到 Github·Busybox 下载apk文件，之后安装到手机中，如果 bubsybox 申请 root 权限，点击允许即可。

之后到 Github · linuxdeploy 下载文件，同样安装到手机中，如果需要安装对应版本的系统，可以在网络上搜索相关的教程，例如 “linux deploy 安装 CentOS”，由于教程过长，这里就不过多叙述了。

系统安装完成后，同样利用 scp 命令把对应的 client 长传到系统中，例如我安装了一个 kail 系统，架构是 armv71，需要上传 client_linux_arm7 这个文件，完成之后使用 ssh 登陆进系统，按照上一步的方式启动服务，如果在网页上可以看到状态为在线，那么就说明可以正常使用了，后续的操作步骤和前面两步的一致。

使用这种方式可以省掉一个中转用的PC，在同一台手机上开启摄像头，并且直接在这台手机上可服务器连接，更加省电，也避免了主机噪音。

3. 其它

如果你有自己的域名的话，可以把服务器IP绑定到自己的域名上，方便记忆地址。

有部分服务器只允许开启80端口，对于这种情况，可以使用nginx或者配合lanproxy作者的另一款软件proxygateway 把其他端口的服务转发到80端口。例如：远程摄像头服务被代理到了 8080 端口，我们访问需要通过这个链接来访问： gcssloop.com:8080，但是8080端口被封闭了，导致无法访问，此时通过nginx进行端口转发，配置cat.gcssloop.com转发到8080端口。

server {
    listen 80;
    server_name cat.gcssloop.com;
    location / {
        proxy_pass http://localhost:8080;
    }
}

我们可以通过访问 cat.gcssloop.com，来查看摄像头了。

如果你有多个摄像头，按照上面这种方式配置就可以通过不同的域名来访问不同的摄像头了，例如：room.gcssloop.com(室内)，door.gcssloop.com(门口)，而不用去记哪些烦人的端口地址。

4. 后记

使用这种方案部署摄像头基本上不用写代码，只用按照固定的格式来填一些配置文件就可以了，因此并不需要对编程方面有多么深入的了解，唯一比较麻烦的可能就是服务器的选取，和一些linux相关指令了，相信看这篇文章的人都对linux有所了解，即便没有多少了解，学习起来也是很容易的，毕竟此处能用到的指令就那么几个常用的，即便不会，花一两个小时学一下也是不亏的。

如果喜欢的话，欢迎打赏赞助一些服务器费用。

关于作者

GcsSloop，一名 2.5 次元魔法师。

雕虫晓技(六) 网格分页布局源码解析(下)

Tue, 10 Apr 2018 00:00:00 +0800

0. 前言

pager-layoutmanager： https://github.com/GcsSloop/pager-layoutmanager

在网格分页布局源码解析(上)中，主要分享了如何定义一个网格布局，正常运行的效果看起来其实和 GridLayoutManager 有些类似。

这是它的下篇，主要讲解如何让它滑动时一页一页的滚动，而不是随意的滚动，除此之外，还包括一些其他相关内容，例如滚动、平滑滚动和超长距离滚动需要注意的一些细节。

1. 分页对齐

在开始讲解前，先看一下启用了分页对齐和未启用分页对齐的效果有何不同：

在左侧未启用分页对齐时，滚动到哪里就会停在哪里。在右侧启用了分页对齐后，滚动距离较小时，会回弹到当前页，滚动距离超过阀值时，会自动滚动到下一页。

让其页面对齐的方法有很多种，其核心就是控制滚动距离，在本文中，我们使用 RecyclerView 官方提供的条目对齐方式，借助 SnapHelper 来进行页面对齐。

1.1 SnapHelper

SnapHelper 是官方提供的一个辅助类，主要用于拓展 RecyclerView，让 RecyclerView 在滚动结束时不会停留在任意位置，而是根据一定的规则来约束停留的位置，例如：卡片布局在停止滚动时始终保证一张卡片居中显示，而不是出现两张卡片都显示一半这种情况。

有关 SnapHelper 的更多内容可以参考：让你明明白白的使用RecyclerView——SnapHelper详解

官方提供了两个 SnapHelper 的实例，分别是 LinearSnapHelper 和 PagerSnapHelper，不过这两个都不太符合我们的需求，因此我们要自定义一个 SnapHelper 来协助我们完成分页对齐。

1.2 让 LayoutManager 支持 SnapHelper

SnapHelper 会尝试处理 Fling，但为了正常工作，LayoutManager 必须实现RecyclerView.SmoothScroller.ScrollVectorProvider 接口，或者重写 onFling(int，int) 并手动处理 Fling。

Fling: 手指从屏幕上快速划过，手指离开屏幕后，界面由于“惯性”依旧会滚动一段时间，这个过程称为 Fling。Fling 从手指离开屏幕时触发，滚动停止时结束。

我们先让 LayoutManager 实现该接口。

public class PagerGridLayoutManager extends RecyclerView.LayoutManager
        implements RecyclerView.SmoothScroller.ScrollVectorProvider {
    /**
     * 计算到目标位置需要滚动的距离{@link RecyclerView.SmoothScroller.ScrollVectorProvider}
     * @param targetPosition 目标控件
     * @return 需要滚动的距离
     */
    @Override
    public PointF computeScrollVectorForPosition(int targetPosition) {
    	PointF vector = new PointF();
        int[] pos = getSnapOffset(targetPosition);
        vector.x = pos[0];
        vector.y = pos[1];
        return vector;
    }
    
    //--- 下面两个方法是自定义的辅助方法 ------------------------------------------------------
    
    /**
     * 获取偏移量(为PagerGridSnapHelper准备)
     * 用于分页滚动，确定需要滚动的距离。
     * {@link PagerGridSnapHelper}
     *
     * @param targetPosition 条目下标
     */
    int[] getSnapOffset(int targetPosition) {
        int[] offset = new int[2];
        int[] pos = getPageLeftTopByPosition(targetPosition);
        offset[0] = pos[0] - mOffsetX;
        offset[1] = pos[1] - mOffsetY;
        return offset;
    }

    /**
     * 根据条目下标获取该条目所在页面的左上角位置
     *
     * @param pos 条目下标
     * @return 左上角位置
     */
    private int[] getPageLeftTopByPosition(int pos) {
        int[] leftTop = new int[2];
        int page = getPageIndexByPos(pos);
        if (canScrollHorizontally()) {
            leftTop[0] = page * getUsableWidth();
            leftTop[1] = 0;
        } else {
            leftTop[0] = 0;
            leftTop[1] = page * getUsableHeight();
        }
        return leftTop;
    }
    
    // 省略其它部分代码...
}

注意：由于我们是分页对齐，所以，最终滚动停留的位置始终应该以页面为基准，而不是以具体条目为基准，所以，我们要计算出目标条目所在页面的坐标，并以此为基准计算出所需滚动的距离。

当然，除了 Fling 操作，我们在用户普通滑动结束时也要进行一次页面对齐，为了支持这一功能，我们在 PagerGridLayoutManager 再定义一个方法，用于寻找当前应该对齐的 View。

/** 获取需要对齐的View
 * @return 需要对齐的View
 */
public View findSnapView() {
    // 适配 TV
    if (null != getFocusedChild()) {
        return getFocusedChild();
    }
    if (getChildCount() <= 0) {
        return null;
    }
    // 以当前页面第一个View为基准
    int targetPos = getPageIndexByOffset() * mOnePageSize;   // 目标Pos
    for (int i = 0; i < getChildCount(); i++) {
        int childPos = getPosition(getChildAt(i));
        if (childPos == targetPos) {
            return getChildAt(i);
        }
    }
    // 如果没有找到就返回当前的第一个 View
    return getChildAt(0);
}

/** 根据 offset 获取页面 Index
 *  计算规则是，在当前状态下，哪个页面显示区域最大，就认为该页面是主要的页面，
 *。最终对齐时也会以该页面为基准。
 * @return 页面 Index
 */
private int getPageIndexByOffset() {
    int pageIndex;
    if (canScrollVertically()) {
        int pageHeight = getUsableHeight();
        if (mOffsetY <= 0 || pageHeight <= 0) {
            pageIndex = 0;
        } else {
            pageIndex = mOffsetY / pageHeight;
            if (mOffsetY % pageHeight > pageHeight / 2) {
                pageIndex++;
            }
        }
    } else {
        int pageWidth = getUsableWidth();
        if (mOffsetX <= 0 || pageWidth <= 0) {
            pageIndex = 0;
        } else {
            pageIndex = mOffsetX / pageWidth;
            if (mOffsetX % pageWidth > pageWidth / 2) {
                pageIndex++;
            }
        }
    }
    Logi("getPageIndexByOffset pageIndex = " + pageIndex);
    return pageIndex;
}

主要方法时 findSnapView，寻找当前应该对齐的 View，需要注意的是临界点的处理方案，例如在横向滚动的状态下，向左翻页未超过左侧页面中心位置，则松手后应该继续回到当前页面，若是超过了左侧页面中心位置，则松手后应该自动滚动到左侧页面。向右翻页同理，应该以当前状态下，显示区域最大的页面作为基准。

1.3 自定义 PagerGridSnapHelper

由于官方已经有了一个 PagerSnapHelper，为了避免混淆，我起名叫做 PagerGridSnapHelper。

由于官方已经实现了一些基础逻辑，所以实现一个 SnapHelper 还是比较简单的，主要是实现一些方法就行了，不过由于 SnapHelper 某些内容没有提供设置途径，因此我们会重载部分方法，所以下面的代码可能会看起来稍长，其实很简单。

public class PagerGridSnapHelper extends SnapHelper {
    @Nullable
    @Override
    public int[] calculateDistanceToFinalSnap(@NonNull RecyclerView.LayoutManager layoutManager, @NonNull View targetView) {
        return new int[0];
    }

    @Nullable
    @Override
    public View findSnapView(RecyclerView.LayoutManager layoutManager) {
        return null;
    }

    @Override
    public int findTargetSnapPosition(RecyclerView.LayoutManager layoutManager, int velocityX, int velocityY) {
        return 0;
    }
}

继承 SnapHelper 后，它会让我们实现 3 个方法。

1.3.1 计算到目标控件需要的距离

这里直接使用我们之前在 LayoutManager 中定义好的 getSnapOffset 就可以了。

/**
 * 计算需要滚动的向量，用于页面自动回滚对齐
 *
 * @param layoutManager 布局管理器
 * @param targetView    目标控件
 * @return 需要滚动的距离
 */
@Nullable
@Override
public int[] calculateDistanceToFinalSnap(@NonNull RecyclerView.LayoutManager layoutManager,
                                          @NonNull View targetView) {
    int pos = layoutManager.getPosition(targetView);
    Loge("findTargetSnapPosition, pos = " + pos);
    int[] offset = new int[2];
    if (layoutManager instanceof PagerGridLayoutManager) {
        PagerGridLayoutManager manager = (PagerGridLayoutManager) layoutManager;
        offset = manager.getSnapOffset(pos);
    }
    return offset;
}

1.3.2 获得需要对齐的 View

这个主要用于用户普通滚动停止时的对齐，直接使用之前 LayoutManager 中定义好的 findSnapView 就可以了。

/**
 * 获得需要对齐的View，对于分页布局来说，就是页面第一个
 *
 * @param layoutManager 布局管理器
 * @return 目标控件
 */
@Nullable
@Override
public View findSnapView(RecyclerView.LayoutManager layoutManager) {
    if (layoutManager instanceof PagerGridLayoutManager) {
        PagerGridLayoutManager manager = (PagerGridLayoutManager) layoutManager;
        return manager.findSnapView();
    }
    return null;
}

1.3.3 获取目标控件的位置下标

这个主要用于处理 Fling 事件，因此我们需要判断一下用户的 Fling 的方向，进而来获取需要对齐的条目，对于此处来说，就是上一页或者下一页的第一个条目。

/**
 * 获取目标控件的位置下标
 * (获取滚动后第一个View的下标)
 *
 * @param layoutManager 布局管理器
 * @param velocityX     X 轴滚动速率
 * @param velocityY     Y 轴滚动速率
 * @return 目标控件的下标
 */
@Override
public int findTargetSnapPosition(RecyclerView.LayoutManager layoutManager,
                                  int velocityX, int velocityY) {
    int target = RecyclerView.NO_POSITION;
    Loge("findTargetSnapPosition, velocityX = " + velocityX + ", velocityY" + velocityY);
    if (null != layoutManager && layoutManager instanceof PagerGridLayoutManager) {
        PagerGridLayoutManager manager = (PagerGridLayoutManager) layoutManager;
        if (manager.canScrollHorizontally()) {
            if (velocityX > PagerConfig.getFlingThreshold()) {
                target = manager.findNextPageFirstPos();
            } else if (velocityX < -PagerConfig.getFlingThreshold()) {
                target = manager.findPrePageFirstPos();
            }
        } else if (manager.canScrollVertically()) {
            if (velocityY > PagerConfig.getFlingThreshold()) {
                target = manager.findNextPageFirstPos();
            } else if (velocityY < -PagerConfig.getFlingThreshold()) {
                target = manager.findPrePageFirstPos();
            }
        }
    }
    Loge("findTargetSnapPosition, target = " + target);
    return target;
}

为此我们需要在 LayoutManager 中再添加两个方法，就是做一些简单的计算，另外防止越界就可以了。

/**
 * 找到下一页第一个条目的位置
 *
 * @return 第一个搞条目的位置
 */
int findNextPageFirstPos() {
    int page = mLastPageIndex;
    page++;
    if (page >= getTotalPageCount()) {
        page = getTotalPageCount() - 1;
    }
    Loge("computeScrollVectorForPosition next = " + page);
    return page * mOnePageSize;
}

/**
 * 找到上一页的第一个条目的位置
 *
 * @return 第一个条目的位置
 */
int findPrePageFirstPos() {
    // 在获取时由于前一页的View预加载出来了，所以获取到的直接就是前一页
    int page = mLastPageIndex;
    page--;
    Loge("computeScrollVectorForPosition pre = " + page);
    if (page < 0) {
        page = 0;
    }
    Loge("computeScrollVectorForPosition pre = " + page);
    return page * mOnePageSize;
}

1.4 参数控制

实际上经过上面的步骤，一个简单的分页对齐辅助工具有完成了，但是有时手感可能会不太好，例如说 Fling 的触发速度，是需要用很大力气才能触发翻页操作呢，还是只需轻轻一划就会翻页呢，这个我们需要控制一下。

除此之外，还有就是自动滚动时的滚动速度控制，是很快的就滚动过去呢，还是慢慢的滚动到目标位置，官方提供的一些参数在实际应用时可能并不符合我们的需求，因此我们可以自定义一些参数来控制。

1.4.1 控制 Fling 触发速度

官方使用的是 RecyclerView 的最小触发速度，但是这个速度我们无法设置，因此我们对这段代码重载一下，替换成我们自己定义的速度。

/**
 * 一扔(快速滚动)
 *
 * @param velocityX X 轴滚动速率
 * @param velocityY Y 轴滚动速率
 * @return 是否消费该事件
 */
@Override
public boolean onFling(int velocityX, int velocityY) {
    RecyclerView.LayoutManager layoutManager = mRecyclerView.getLayoutManager();
    if (layoutManager == null) {
        return false;
    }
    RecyclerView.Adapter adapter = mRecyclerView.getAdapter();
    if (adapter == null) {
        return false;
    }
    // 官方方案
    // int minFlingVelocity = mRecyclerView.getMinFlingVelocity();
    
    // 替换成自定义触发速度
    int minFlingVelocity = PagerConfig.getFlingThreshold();
    Loge("minFlingVelocity = " + minFlingVelocity);
    return (Math.abs(velocityY) > minFlingVelocity || Math.abs(velocityX) > minFlingVelocity)
            && snapFromFling(layoutManager, velocityX, velocityY);
}

由于 snapFromFling 方法不是公开的，不可重载，我们按照官方实现复制过来一份就行了，此处没有贴出。

1.4.2 控制滚动速度

自动滚动速度主要是有 SmoothScroller 来控制，此处我们自己进行创建 SmoothScroller 来控制平滑滚动的速度。

/**
 * 通过自定义 LinearSmoothScroller 来控制速度
 * @param layoutManager 布局故哪里去
 * @return 自定义 LinearSmoothScroller
 */
protected LinearSmoothScroller createSnapScroller(RecyclerView.LayoutManager layoutManager) {
    if (!(layoutManager instanceof RecyclerView.SmoothScroller.ScrollVectorProvider)) {
        return null;
    }
    return new PagerGridSmoothScroller(mRecyclerView);
}

此处的 PagerGridSmoothScroller 是我们自己实现的，继承自 LinearSmoothScroller，很简单。

public class PagerGridSmoothScroller extends LinearSmoothScroller {
    private RecyclerView mRecyclerView;

    public PagerGridSmoothScroller(@NonNull RecyclerView recyclerView) {
        super(recyclerView.getContext());
        mRecyclerView = recyclerView;
    }

    @Override
    protected void onTargetFound(View targetView, RecyclerView.State state, Action action) {
        RecyclerView.LayoutManager manager = mRecyclerView.getLayoutManager();
        if (null == manager) return;
        if (manager instanceof PagerGridLayoutManager) {
            PagerGridLayoutManager layoutManager = (PagerGridLayoutManager) manager;
            int pos = mRecyclerView.getChildAdapterPosition(targetView);
            int[] snapDistances = layoutManager.getSnapOffset(pos);
            final int dx = snapDistances[0];
            final int dy = snapDistances[1];
            Logi("dx = " + dx);
            Logi("dy = " + dy);
            final int time = calculateTimeForScrolling(Math.max(Math.abs(dx), Math.abs(dy)));
            if (time > 0) {
                action.update(dx, dy, time, mDecelerateInterpolator);
            }
        }
    }

    @Override
    protected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {
        return PagerConfig.getMillisecondsPreInch() / displayMetrics.densityDpi;
    }
}

经过这些步骤之后，一个可调控，简单方便的分页对齐工具就开发完成了，可以像这样使用了。

// 设置滚动辅助工具
PagerGridSnapHelper pageSnapHelper = new PagerGridSnapHelper();
pageSnapHelper.attachToRecyclerView(mRecyclerView);

2. 处理滚动到指定条目(页面)

在上面一篇文章中，只是简单的开发了一个分页网格布局，该网格布局实现了布局和基本的滚动处理，经过本篇的上半篇文章，实现了分页对齐功能。

但是，该分页布局管理器依旧存在问题，例如，你会发现它只能手动的进行滚动，你无法用代码控制它滚动到距离的条目和页面，例如，你调用 recyclerView.scrollToPosition(0); 它是没有任何响应的。这是因为我们没有处理滚动到指定条目的方案。

2.1 直接滚动

由于我们是页面对齐，所以滚动到指定条目，也就是滚动到指定条目所在到页面，因此我们可以这样写。

public void scrollToPosition(int position) {
    int pageIndex = getPageIndexByPos(position);
    scrollToPage(pageIndex);
}

先计算出条目所在页面的下标，然后滚动到该页面。但是 scrollToPage 方法需要我们自己实现一下，逻辑也很简单，如下：

public void scrollToPage(int pageIndex) {
    if (pageIndex < 0 || pageIndex >= mLastPageCount) {
        Log.e(TAG, "pageIndex = " + pageIndex + " is out of bounds, mast in [0, " + mLastPageCount + ")");
        return;
    }

    if (null == mRecyclerView) {
        Log.e(TAG, "RecyclerView Not Found!");
        return;
    }

    int mTargetOffsetXBy = 0;
    int mTargetOffsetYBy = 0;
    if (canScrollVertically()) {
        mTargetOffsetXBy = 0;
        mTargetOffsetYBy = pageIndex * getUsableHeight() - mOffsetY;
    } else {
        mTargetOffsetXBy = pageIndex * getUsableWidth() - mOffsetX;
        mTargetOffsetYBy = 0;
    }
    Loge("mTargetOffsetXBy = " + mTargetOffsetXBy);
    Loge("mTargetOffsetYBy = " + mTargetOffsetYBy);
    mRecyclerView.scrollBy(mTargetOffsetXBy, mTargetOffsetYBy);
    setPageIndex(pageIndex, false);
}

其实就是先计算出目标页面的坐标，然后计算滚动到该位置需要的距离，最后调用 RecyclerView 的滚动就可以了。

但是，在 LayoutManager 中是无法直接取到 RecyclerView 的，因此我们在 onAttachedToWindow 方法中获得当前 LayoutManager 的 RecyclerView，并记录下来。

private RecyclerView mRecyclerView;

@Override
public void onAttachedToWindow(RecyclerView view) {
    super.onAttachedToWindow(view);
    mRecyclerView = view;
}

在有了 scrollToPage 方法后，我们还可以定义两个常用的方法，上一页和下一页，来供外部使用。

/**
 * 上一页
 */
public void prePage() {
    scrollToPage(getPageIndexByOffset() - 1);
}

/**
 * 下一页
 */
public void nextPage() {
    scrollToPage(getPageIndexByOffset() + 1);
}

就这样，直接滚动就处理好了。

2.2 平滑滚动

和直接滚动一样，我们同样实现平滑滚动到指定条目，平滑滚动到指定页面，上一页，下一页等功能，实现方式页和直接滚动类似，将所有的操作都统一转化为滚动到指定页面，最终有滚动到指定页面来实现具体功能。

// 平滑滚动到指定条目
@Override
public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
    int targetPageIndex = getPageIndexByPos(position);
    smoothScrollToPage(targetPageIndex);
}

// 平滑滚动到上一页
public void smoothPrePage() {
    smoothScrollToPage(getPageIndexByOffset() - 1);
}

// 平滑滚动到下一页
public void smoothNextPage() {
    smoothScrollToPage(getPageIndexByOffset() + 1);
}

// 平滑滚动到指定页面
public void smoothScrollToPage(int pageIndex) {
    if (pageIndex < 0 || pageIndex >= mLastPageCount) {
        Log.e(TAG, "pageIndex is outOfIndex, must in [0, " + mLastPageCount + ").");
        return;
    }
    if (null == mRecyclerView) {
        Log.e(TAG, "RecyclerView Not Found!");
        return;
    }

    // 如果滚动到页面之间距离过大，先直接滚动到目标页面到临近页面，在使用 smoothScroll 最终滚动到目标
    // 否则在滚动距离很大时，会导致滚动耗费的时间非常长
    int currentPageIndex = getPageIndexByOffset();
    if (Math.abs(pageIndex - currentPageIndex) > 3) {
        if (pageIndex > currentPageIndex) {
            scrollToPage(pageIndex - 3);
        } else if (pageIndex < currentPageIndex) {
            scrollToPage(pageIndex + 3);
        }
    }

    // 具体执行滚动
    LinearSmoothScroller smoothScroller = new PagerGridSmoothScroller(mRecyclerView);
    int position = pageIndex * mOnePageSize;
    smoothScroller.setTargetPosition(position);
    startSmoothScroll(smoothScroller);
}

和直接滚动不同的是，平滑滚动会有一个简单的滚动动画效果，这个动画效果借助 SmoothScroller 来实现，为了保证滑动效果一致，我们使用和 SnapHelper 相同的 PagerGridSmoothScroller。

需要注意的是，在进行超长距离的平滑滚动时，如果不做特殊处理，可能要滚动很长的时间(会花费超过 10s 甚至更长的时间在滚动上)，为了限制平滑滚动花费的时间，这里对滚动距离做了一个简单的限制，即最大可以平滑滚动 3 个页面的长度，如果超过 3 个页面的长度后，则先直接跳转到临近页面，再执行平滑滚动，这样就可以保证很快执行完超长距离的平滑滚动，具体代码逻辑参考上面。

3. 结语

到此为止，一个简单的网格分页布局管理器(PagerGridLayoutManager)和分页辅助工具(PagerGridSnapHelper)就开发完了，当然，这个库还有很多可以完善的地方，事实上，在写本文的同时，我又对它很多的细节又重新打磨了一遍。因此你如果查看就版本的话，代码内容可能会稍有不同，但基本逻辑是相同的。

如果喜欢本文的话，欢迎点赞、分享或者打赏支持。

关于作者

GcsSloop，一名 2.5 次元魔法师。

雕虫晓技(五) 网格分页布局源码解析(上)

Sun, 08 Apr 2018 00:00:00 +0800

关于作者

GcsSloop，一名 2.5 次元魔法师。
微博 | GitHub | 博客

0.前言

pager-layoutmanager： https://github.com/GcsSloop/pager-layoutmanager

这个是我之前公开分享的一个开源库【PagerLayoutManager(网格分页布局)】的详细解析，在开始讲解之前，先看看它能实现的一些效果。

上面是它的应用场景之一，再看一下实现这种场景所需的代码：

// 布局管理器
PagerGridLayoutManager layoutManager = new PagerGridLayoutManager(1, 4, PagerGridLayoutManager.HORIZONTAL);
mRecyclerView.setLayoutManager(layoutManager);

// 滚动辅助器
PagerGridSnapHelper snapHelper = new PagerGridSnapHelper();
snapHelper.attachToRecyclerView(mRecyclerView);

没错，想要实现这样分页滚动的效果，只需要四五行代码就可以了，至于 RecyclerView 和 Adapter 使用官方提供的即可。

1. 摘要

之前项目中有类似的需求，在网上寻找了一些实现方案，结果均不太满意。

有些方案使用起来过于麻烦，例如 ViewPager + GridView，不用我说，用过的都知道，这种方案数据绑定十分麻烦，并且会多一层View嵌套，相对来说会损耗一些性能。

有些则是存在重大缺陷，例如内存泄露，性能问题等，像上面那种场景仅展示几个固定条目的情况还不明显，但是当需要动态加载几百个条目的时候缺陷就显现出来了，会造成严重的滑动卡顿，当数据达到一定数量级的时候，可能直接导致ANR。

在试过诸多方案，踩过很多坑以后，依旧没有找到合适的方案，于是自己动手，丰衣足食，也就有了这个项目。

这个项目已经在公司多个项目上使用，经过十几个版本的迭代更新，基本上已经没有重大bug了，更新日志可以见这里： PagerLayoutManager。

如果你只是需要这样一个组件，那么直接点击上面的链接，看它的说明文档就可以了，本文不是你需要的，但如果你想要知道它的具体实现方案，对它进行改进的话，那么下文的内容可能会对你有所帮助。

2. 基础网格布局解析

2.1 方案选择

首先项目所需要的核心内容主要有以下几点：

网格效果
分页显示
横向排布

所需效果大概就如上图所示，为了避免重复造轮子，在一开始我想要使用一些现有的组件来完成。

最先想到的自然是网格布局，但是呢，项目需要动态加载数百条的数据，网格布局本身不带有条目自动回收创建功能，如果同让上百个View存在于一个页面之中，不卡爆才怪。
之后想到的是 ViewPager+GridLayout，但是这种方案数据拆分和绑定十分麻烦，遂放弃。
然后想 RecyclerView + GridLayoutManager 看起来靠谱一点，首先使用 GridLayoutMnager，作出网格效果，然后监听滚动事件来控制滚动距离，一切看起来都是那么美好，但是，事实证明这种方案还是太难使用。

首先网格布局同时只能控制行数或者列数其中一个，如果想要如果想要像设定那样2行3列，一页整好现实6条数据，那么View的宽高是需要动态计算的，如果设置了固定大小，必然会导致适配问题，

其次，数据不一定是整页，如果是2行3列，一页6条数据，那么使用 GridLayoutManager滑动后可能会出现这样的效果，另外，数据排列顺序也并非我所需要的：

这显然不是我想要的效果，在数据不足一页时，我需要的效果是这样的：

如果想要在不动 GridLayoutManager 的情况下实现需求，则需要执行如下操作：

假设，需要显示2行3列，共8条数据，那么需要执行如下操作：
1. 将不足一页部分补足一页
```
1、2、3、4、5、6、7、8
1、2、3、4、5、6、7、8、空、空、空、空
```
2. 通过数据变换调整数据次序使其显示符合预期
```
1、2、3、4、5、6、7、8、空、空、空、空
1、4、2、5、3、6、7、空、8、空、空、空
```
3. 通过监听滚动控制滚动距离来实现分页显示
另外，页面数据是分页加载显示的，如果使用上面这种方案，单是数据处理逻辑就能把我绕进去。

在经过深思熟虑之后，我决定自定义一个 LayoutManager 来实现这个“简单”的需求。幸好 RecyclerView 的扩展性非常强，自定义一个 LayoutManager 也不是什么难事，下面我们就一步步的的实现一个分页网格布局。

2.2 创建一个基础的 LayoutManager

首先我们创建一个 PagerGridLayoutManager 并继承 RecyclerView.LayoutManager，实现其抽象方法，一个LayoutManager 就可以用了，如下：

public class PagerGridLayoutManager extends RecyclerView.LayoutManager {
    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
    }
}

这是一个符合规范的 LayoutManager，但是目前它不会将任何View显示在界面上，因为它没有对条目进行处理，也就意味着没有条目会添加到界面上。但我们先不着急处理子条目，在真正布局之前，我们先来解决一些简单的基础问题。

2.3 确定行列数数和滚动方向

由于行列数会直接关系到一个页面显示条目的个数，进而影响到总共可以滚动的j距离和页数总数，所以它们要在构造方法中设置。

而滚动方向一般都是确定的，横向或者竖向，并且基本不变，所以，它也可以在构造方法中进行设置，提醒使用者不要忘记滚动方向。

所以为 PagerGridLayoutManager 添加如下的属性和构造方法：

public static final int VERTICAL = 0;           // 垂直滚动
public static final int HORIZONTAL = 1;         // 水平滚动

@IntDef({VERTICAL, HORIZONTAL})
public @interface OrientationType {}            // 滚动类型

@OrientationType
private int mOrientation = HORIZONTAL;          // 默认水平滚动

private int mRows = 0;                          // 行数
private int mColumns = 0;                       // 列数
private int mOnePageSize = 0;                   // 一页的条目数量

/**
 * 构造函数
 *
 * @param rows        行数
 * @param columns     列数
 * @param orientation 方向
 */
public PagerGridLayoutManager(@IntRange(from = 1, to = 100) int rows,
                              @IntRange(from = 1, to = 100) int columns,
                              @OrientationType int orientation) {
    mOrientation = orientation;
    mRows = rows;
    mColumns = columns;
    mOnePageSize = mRows * mColumns;
}

注意：

上面使用了 @IntDef 注解自定义了一个 OrientationType 注解，用于防治用户随意设置数值。
使用 @IntRange 方法将行列数限制在一个较合理的范围内。
在初始化的时候利用行列数计算出了一页应该有多少个条目，方面后面使用。

在确定了滚动方向后，顺便就可以实现 LayoutManager 以下两个方法了，这两个方法会真正的决定 RecyclerView 可以滚动的方向。

/** 是否可以水平滚动
 * @return true 是，false 不是。
 */
@Override
public boolean canScrollHorizontally() {
    return mOrientation == HORIZONTAL;
}

/** 是否可以垂直滚动
 * @return true 是，false 不是。
 */
@Override
public boolean canScrollVertically() {
    return mOrientation == VERTICAL;
}

2.4 计算子条目的宽高

由于我们是分页网格显示，目前已经知道了行列数，如果再知道 RecyclerView 的宽高，就能算出单个自条目的所能占用的宽高了。

因此我们再添加两个方法用于获取 RecyclerView 的可用宽高：

/** 获取可用的宽度
 * @return 宽度 - padding
 */
private int getUsableWidth() {
    return getWidth() - getPaddingLeft() - getPaddingRight();
}

/** 获取可用的高度
 * @return 高度 - padding
 */
private int getUsableHeight() {
    return getHeight() - getPaddingTop() - getPaddingBottom();
}

注意：可用宽高要减去 Padding 数值。

有了总的可用宽高，在分别处以行列数就可以得到每一个子条目占用的宽高了。

private int mItemWidth = 0;  // 条目宽度
private int mItemHeight = 0; // 条目高度
mItemWidth = getUsableWidth() / mColumns;
mItemHeight = getUsableHeight() / mRows;

2.5 计算条目显示区域

既然知道了条目的宽高，那么只要知道这个条目所在位置就能确切的知道它的显示区域了。

这里使用的计算方案是：条目所在页面的偏移量 + 条目在页面内的偏移量。
同时由于页面可能会反复的滑动，因此不可能每次滚动时都重新计算一下条目的位置，因此计算过的条目用 mItemFrames 存储起来，之后想要获取该条目的显示区域，直接从 mItemFrames 中取出即可，防止重复计算造成的性能浪费。至于存储所耗费的内存空间，其实并不算大，存储 10 万个 Rect 耗费内存也才 4M 左右，正常情况下一般不会超过一万条数据，所耗费的空间一般不会超过 0.5M，大可以放心使用。

private SparseArray<Rect> mItemFrames;  // 条目的显示区域

/** 获取条目显示区域
 * @param pos 位置下标
 * @return 显示区域
 */
private Rect getItemFrameByPosition(int pos) {
    Rect rect = mItemFrames.get(pos);
    if (null == rect) {
        rect = new Rect();
        // 计算显示区域 Rect
        // 1. 获取当前View所在页数
        int page = pos / mOnePageSize;

        // 2. 计算当前页数左上角的总偏移量
        int offsetX = 0;
        int offsetY = 0;
        if (canScrollHorizontally()) {
            offsetX += getUsableWidth() * page;
        } else {
            offsetY += getUsableHeight() * page;
        }

        // 3. 根据在当前页面中的位置确定具体偏移量
        int pagePos = pos % mOnePageSize;       // 在当前页面中是第几个
        int row = pagePos / mColumns;           // 获取所在行
        int col = pagePos - (row * mColumns);   // 获取所在列

        offsetX += col * mItemWidth;
        offsetY += row * mItemHeight;

        rect.left = offsetX;
        rect.top = offsetY;
        rect.right = offsetX + mItemWidth;
        rect.bottom = offsetY + mItemHeight;

        // 存储
        mItemFrames.put(pos, rect);
    }
    return rect;
}

2.6 布局 ChildView

在进行完上面几步操作添加了这些基础方法后后，这个 PagerGridLayoutManager 实际上还是没法使用的，因为它依旧没有将子条目添加的屏幕上，因此屏幕上什么也不会有。

如果熟悉 ViewGroup 的人可能会知道，要控制 ChildView 在 ParentView 中的位置，需要在 ParentView 的 onLayout 方法中调整 ChildView 的具体摆放位置和大小。其实 LayoutManager 和 ViewGroup 的布局是有些类似的，需要在 LayoutManager 的 onLayoutChildren 方法中控制 ChildView 的大小和显示位置。

那么具体如何将子条目添加的屏幕上呢，像下面这样就可以：

public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
    int i = 0;
    // 获取第 0 个条目，如果不存在的话 RecyclerView 会自动创建
    View child = recycler.getViewForPosition(i);	
    // 获取该条目的具体应该显示位置
    Rect rect = getItemFrameByPosition(i);
    // 将该条目添加的界面上
    addView(child);
    // 测量该条目，注意 mWidthUsed = 总可用宽度-其余条目占用的宽度， mHeightUsed = 总可用高度-其余条目占用高度
    measureChildWithMargins(child, mWidthUsed, mHeightUsed);
    // 获取布局参数 LayoutParams
    RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) child.getLayoutParams();
    // 使用 layoutDecorated 确定具体显示位置，注意 margin 数值的处理(此处代码不完整，非最终代码)
    layoutDecorated(child,
            rect.left + lp.leftMargin,
            rect.top + lp.topMargin,
            rect.right - lp.rightMargin,
            rect.bottom - lp.bottomMargin);
}

这样子就可以将第 0 个 ViewView 添加到页面上了，鹅妹子嘤！但是这样子只能添加一个 View 如果有很多个 View 需要显示怎么办呢？第一反应自然是循环大法：

for(int i = 0; i < getItemCount(); i++){
    // 省略添加View的代码
}

哈哈，似乎一切都很完美，稍等，似乎有点不对，话说 RecyclerView 最强大的不是条目的回收和复用吗？它是自动进行回收和复用的吗？

这个自然不是，一个条目是否需要被添加到缓存池或者销毁，是由 LayoutManager 进行控制的，而上面这段代码并没有回收复用条目相关的代码，这显然是不正确的。不仅如此，上面这段代码会将所有的条目都转化为 View 放到页面上，假如只有几个条目还可以，若是存在几百上千个条目，就上面这一个 for 循环一下子就能把内存耗尽，因此这种写法是万万不可的。

一个 RecyclerView 可以有很多的条目，但设备屏幕大小是有限的，所以显示在屏幕上的 View 数量始终是有限的，因此我们将当前显示在屏幕上的 View 显示出来，超出显示区域的 View 则放入缓冲区或者销毁掉。因此我们要知道当前哪些 View 应该被显示，哪些应该被销毁。

首先我们要知道当前的总偏移量，根据偏移量和 RecyclerView 的大小来计算出显示区域，之后将显示区域外的 View 移除掉，显示区域内的 View 添加到当前的界面上。

2.6.1 计算偏移量

在计算和更新偏移量时注意最大可以用偏移量，防止越界。

private int mOffsetX = 0;                       // 水平滚动距离(偏移量)
private int mOffsetY = 0;                       // 垂直滚动距离(偏移量)
private int mMaxScrollX;                        // 最大允许滑动的宽度
private int mMaxScrollY;                        // 最大允许滑动的高度


// 在 onLayoutChildren 时计算可以滚动的最大数值，并对滚动距离进行修正
if (canScrollHorizontally()) {
    mMaxScrollX = (mPageCount - 1) * getUsableWidth();
    mMaxScrollY = getUsableHeight();
    if (mOffsetX > mMaxScrollX) {
        mOffsetX = mMaxScrollX;
    }
} else {
    mMaxScrollX = getUsableWidth();
    mMaxScrollY = (mPageCount - 1) * getUsableHeight();
    if (mOffsetY > mMaxScrollY) {
        mOffsetY = mMaxScrollY;
    }
}


// 更新偏移量
@Override
public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State
        state) {
    int newX = mOffsetX + dx;
    int result = dx;
    if (newX > mMaxScrollX) {
        result = mMaxScrollX - mOffsetX;
    } else if (newX < 0) {
        result = 0 - mOffsetX;
    }
    mOffsetX += result;
    setPageIndex(getPageIndexByOffset(), true);
    offsetChildrenHorizontal(-result);
    return result;
}

@Override
public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State
        state) {
    int newY = mOffsetY + dy;
    int result = dy;
    if (newY > mMaxScrollY) {
        result = mMaxScrollY - mOffsetY;
    } else if (newY < 0) {
        result = 0 - mOffsetY;
    }
    mOffsetY += result;
    offsetChildrenVertical(-result);
    return result;
}

2.6.2 计算显示区域

根据 offset 和 view 的大小计算当前实际的显示区域，有了显示区域就能知道哪些条目应该显示在当前界面上。

Rect displayRect = new Rect(
    getPaddingLeft() + mOffsetX,
    getPaddingTop() + mOffsetY,
    getWidth() - getPaddingLeft() - getPaddingRight() + mOffsetX,
    getHeight() - getPaddingTop() - getPaddingBottom() + mOffsetY);

2.6.3 判断哪些条目应该被更新

这个判断自然也是有些技巧的，如果是像前面那样，每一次更新都直接一个 for 循环判断所有的条目是否应该显示，那么当条目数量上千时，滑动肯定会卡爆，因为每一次滑动都会导致多次界面的刷新，如果每一次刷新都直接一个 for 循环循环上千次，那么一次滑动循环体执行次数就可能有上万次了，卡顿那才奇怪呢。

所以我们这里使用这样的策略：

刷新前将所有的 View 都移除放到缓冲区
计算当前显示区域的页面是哪个
只刷新与之临近页面的 View

这样不论总共有多少个条目，我们每一次刷新都只会更新几个到几十个条目，会节省大量到时间。

// 1.移除所有View
detachAndScrapAttachedViews(recycler); 

// 2.根据偏移量来计算当前页面和临近页面，计算出这些页面的开始和结束位置
int startPos = 0;
int pageIndex = getPageIndexByOffset();
startPos = pageIndex * mOnePageSize;
Logi("startPos = " + startPos);
startPos = startPos - mOnePageSize * 2;
if (startPos < 0) {
    startPos = 0;
}
int stopPos = startPos + mOnePageSize * 4;
if (stopPos > getItemCount()) {
    stopPos = getItemCount();
}

// 3.针对这些 View 添加到屏幕上或者移除
for (int i = startPos; i < stopPos; i++) {
    // 添加或者移除
    addOrRemove(recycler, displayRect, i);
}

注意：如果你去看项目的源码会看到下面这样的逻辑：

if (isStart) {
    for (int i = startPos; i < stopPos; i++) {
        addOrRemove(recycler, displayRect, i);
    }
} else {
    for (int i = stopPos - 1; i >= startPos; i--) {
        addOrRemove(recycler, displayRect, i);
    }
}

大家可能会奇怪，为啥会有这样的迷之逻辑呢？一个 For 循环居然还要区分正反。
实际上这是为了控制条目移除和添加的顺序，要先移除再添加，这样会移除的 View 会被先放到缓冲区中，再添加 View 时就可以直接从缓冲区中把被移除的条目直接取出来使用了，而不用重新创建，以减少开销。如果不控制顺序的话，先执行添加操作，由于缓冲区中没有可以使用的 View，会进行先创建，之后再添加到界面上，最后执行移除操作会导致有大量的 View 滞留在缓冲区中，会造成严重的性能浪费。

2.6.4 添加或者移除条目

如果条目的显示区域和当前显示区域有重叠部分(有交集)，就将 View 添加到界面上，否则就将 View 移除。

private void addOrRemove(RecyclerView.Recycler recycler, Rect displayRect, int i) {
    View child = recycler.getViewForPosition(i);
    Rect rect = getItemFrameByPosition(i);	// 获得当前条目显示区域
    // 判断条目显示区域和当前显示区域是否有重叠，如果有重叠就添加，没有就移除
    if (!Rect.intersects(displayRect, rect)) {
        removeAndRecycleView(child, recycler);   // 回收入暂存区
    } else {
        addView(child);
        measureChildWithMargins(child, mWidthUsed, mHeightUsed);
        RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) child.getLayoutParams();
        layoutDecorated(child,
                rect.left - mOffsetX + lp.leftMargin,
                rect.top - mOffsetY + lp.topMargin,
                rect.right - mOffsetX - lp.rightMargin,
                rect.bottom - mOffsetY - lp.bottomMargin);
    }
}

经过上面几步操作，一个最基础的网格布局就完成啦，但是请注意的是，为了比较清晰的表达出核心逻辑，上面的部分代码移除了一部相对无关紧要的逻辑，因此并非最终的代码，最终代码请参考【GitHub · pager-layoutmanager 】。

3. 结语

在本篇中，只是讲解了有关网格布局相关的知识，此处假设大家已经了解了 RecyclerView 中自定义 LayoutManager 的基础内容，如果不太了解的话，可以先去搜索了解一下基础的知识。另外，关于分页对齐等相关内容会在后续的文章中给大家介绍。

pager-layoutmanager： https://github.com/GcsSloop/pager-layoutmanager

如果喜欢本文的话，欢迎点赞、分享或者打赏支持。

关于作者

GcsSloop，一名 2.5 次元魔法师。

雕虫晓技(四) 搭建私有Maven仓库(带容灾备份)

Thu, 15 Mar 2018 00:00:00 +0800

关于作者

GcsSloop，一名 2.5 次元魔法师。
微博 | GitHub | 博客

0. 前言

随着 Android 开发的发展，Android 开发也相对越来越简单，很多基础库只用简单的添加一行依赖就可以使用了，不用自己去手动添加，升级也只需要修改一下版本号，简单便捷。那么它是如何实现的呢？事实上，我们所依赖的这些文件，是存放在一些公开仓库中的，当我们添加这些依赖时，Gredle 会自动去仓库中查找是否存在，如果存在，就下载下来放到本地参与编译。

我们最常用的一些公开库大部分是放在 jcenter 仓库中的，我们在创建项目的时候会默认添加 jcenter 仓库，在项目的 build.gradle 文件中可以看到，如下：

allprojects {
    repositories {
        jcenter()
    }
}

但是，当我们自己开发的一些基础组件，也想要这样方面的添加到项目中时，就有点麻烦了，我们可以使用 bintray 把这些组件上传到 jcenter 上面，但是上传过程非常麻烦，有一定的审核周期，并且一旦通过几乎无法撤销。

除了 jcenter 这个官方使用的仓库，jitpack 也是不错的选择，它借助于 GitHub 进行上传，上传和配置过程都有极大的简化，并且没有审核周期，很多公开项目都转用 jitpack 了。

但是，公开仓库仅适合托管一些公开的内容，假若这些库涉及到部分商业机密，或者存在某些私密技术方案，不希望被竞争公司了解，那么托管在公开仓库上无疑是非常不合适的。

为了解决这些需求，自然就会有私有仓库的诞生，相信有不少公司都有自己的私有仓库。 如何搭建一个私有仓库网络上有大量的教程，也并不困难，但是重点是如何保证私有仓库的安全稳定却是一个大问题。 如果仓库出现问题，则可能会导致所有的项目都无法 build 通过，会浪费大量的开发时间。

因此，在搭建一个私有仓库时，就必须要考虑到风险问题。下面我们就从头开始搭建一个仓库，并将教大家如何规避一些常见的风险。

1. 仓库搭建

我们 Android 使用的是 maven 仓库，关于私有的 maven 仓库，有很多集成好的仓库环境，甚至你可以不借助任何环境自己手动维护一个仓库。当然，手动维护仓库需要耗费非常多的时间和精力，对于普通的开发人员来说，是得不偿失的，毕竟时间就是金钱，因此我们使用集成好的仓库环境，例如本文中会用到 Sonatype 的 Nexus。

1.1 Java环境

要运行 Nexus，需要 Java 环境，根据教程进行 Oracle Java 安装和配置即可，配置好环境就可以进行下一步了。

1.2 下载

到 Sonytype 官网 https://www.sonatype.com/download-oss-sonatype 下载自己所需的平台和版本。

直接下载对应平台的版本即可。

下载后解压到合适的目录，无需安装，可以看到两个文件夹(所有平台的都一样)，如下:

目录	备注
nexus-x.x.x-xx	这个文件夹是存放应用程序的。
sonatype-work	这个文件夹是存放仓库和设置等相关内容的，如果备份数据，只用备份这个文件夹即可。

初次配置，我们只用关注如下几个文件即可：

文件	备注
./nexus-3.8.0-02/bin/nexus	运行程序
./nexus-3.8.0-02/bin/nexus.rc	用户配置
./nexus-3.8.0-02/etc/nexus-default.properties	端口配置

初期需要了解的文件就这三个，在 Linux 系统上使用 root 用户直接运行可能会警告，因此可以配置一下nexus.rc文件。至于端口号，默认是 8081，如果对这个没特殊要求，默认即可。

至于 ./nexus-3.8.0-02/bin/nexus 是主要的运行程序，建议将 bin 目录配置到环境变量中，这样就可以在任意位置启动和停止该程序了，否则只有在 bin 目录下才能调整。

Window 版本是 ./nexus-3.8.0-02/bin/nexus.exe 不过用法是一样的。

1.3 运行

在命令行工具中输入启动命令：

nexus start

如果一切顺利，在等待几十秒到一两分钟之后就可以查看我们的仓库了，如果出错了，可以使用 run 命令来查看具体的出错原因：

# run 命令相当于 debug 模式，会输出所有的日志信息
nexus run

当然，Nexus 还有很多其他命令(例如:停止、重启、查看状态等)：

nexus {start|stop|run|run-redirect|status|restart|force-reload}

1.4 查看

在输入 nexus start 命令后，稍微等待一两分钟，就可以查看仓库了，如果在本机有图形化界面，直接在浏览器中输入 http://localhost:8081 即可查看，如果修改了端口号，后面写对应的端口号即可。如果是运行在服务器上，则在其他电脑上输入http://{服务器ip}:{port} IP 和对应的端口号。如果运行成功，则会看到类似如下界面：

备注：

在 Linux 和 Mac 上通过 ifconfig 查看本机 IP。
在 Windows 上通过 ipconfig 查看本机 IP。
127.0.0.1(localhost) 是本机回环地址，在其他机器上访问时不要使用这个地址。

2. 仓库配置

经过上面的步骤，我们就有了一个空仓库，但是这个仓库还还需要进行一些基础的配置。

2.1 账号配置

初次登陆时使用默认账号：admin，密码：admin123。

2.1.2 登陆后创建一个新用户

2.1.3 填写用户信息

填写具体的用户信息，其中比较重要的部分已经用红字标记出来了。

注意：

注意用户权限，默认应该是有两个权限，管理员权限和所有用户(包括未登录用户)权限。
Roles 左侧为目前的权限组，右侧为当前用户拥有的权限组，可以通过 [>] 和 [<] 按钮来调整用户权限。
在创建完新的用户后记得删除最初的管理员账号或者修改管理员账号的密码。
用户所拥有的权限，是根据其拥有的权限组决定的，只要拥有 nx-admin 权限组，就拥有所有的管理权限，要注意该权限的分配。

2.2 创建仓库

仓库也是在设置中进行创建的，如下：

我们用 maven 仓库即可，可以看到，仓库主要有三种类型：

hosted： 本地仓库，我们一般使用这种类型的仓库。
proxy： 代理仓库，用于代理其他远程仓库。
group： 仓库组，用来合并多个 hosted / proxy 仓库。

在一般情况下，我们创建 hosted 类型的 maven 仓库。

填写仓库信息

如果没有特殊需求，直接填写一个名称然后点击创建即可。

注意：

Version policy(版本模式) 有三种模式 Release(发布)、Snapshot(快照)、Mixed(混合)。
Layout policy(布局模式) 有两种模式 Strict(严格模式)、Permissive(宽松模式)。
Deployment policy(部署模式) 有三种模式 Allow redploy(允许重新部署)、Disable redploy(不允许重新部署)、Read-only(只读)。

一般情况下按照默认配置即可，需要注意的是，部署策略一般情况下请使用默认配置 Disable redploy(不允许重新部署)，例如，v1.0.0 版本的组建上传后，修改后再次以 v1.0.0 版本进行上传会上传失败，这样可以保证版本上传后不会被误覆盖掉，如果确定之前 v1.0.0 版本是错误上传的，需要重新上传，可以手动删除后再次上传，这样是最稳妥的。

在创建完成后就可以在仓库列表中查看到新创建的仓库了。

2.3 用户权限配置

用户权限配置相对来说稍微复杂一点，如果开发人员较少，又都是老手，不会存在小白删库的情况下，可以给所有人都分配一个管理账号或者共用一个管理员账号即可。

如果开发人员众多，又比较复杂，则需要仔细的控制每一个用户的权限，一般来说，给普通用户分配公共仓库的查看、上传、读取的权限，不要给编辑和删除的权限。 下面就带大家了解一下权限的详细设置方式：

Nexus 默认就有一个游客账号(anonymous)，在默认状态下拥有浏览所有仓库的权限，即在不登陆的情况下，可以查看所有仓库。

该账号的权限分配十分重要，它意味这赋予所有未登录用户的权限，如果将管理员权限分配给了该账号，就意味着所有未登录用户都可以使用管理员权限，如果没有特殊情况，不要随意修改该账号的默认权限。

如果你不希望未登录用户查看，可以选择取消启用未登录账号，如下：

然而，如果我们希望游客可以查看和使用一部分仓库，另外部分仓库又不希望被未登录用户看到，那么就需要详细进行设置了。

既然要修改权限，就要了解 Nexus 的权限管理方式，首先与权限有关的有如下几种：

它们的关系如下：

注意：

用户是通过持有不同的角色(权限组)来确定自己的权限管理范围的。

角色(权限组)可以由基础权限和其他基础权限组来构成。

上面是 Nexus 支持的权限构成方式，在一般情况下我喜欢按照下面这种方式组织自己的权限。

我把用户分为四类(超级管理员、仓库管理员、普通用户、游客)，并创建了四种类型的角色(权限组)，分别与之对应，这样在添加新用户的时候只需要赋予他对应的角色(权限组)即可。

2.3.1 游客权限配置

创建角色(权限组)

创建游客角色

其他的角色(权限组)也按照该方式进行创建即可，假设我们想把 gcssloop-central 这个仓库作为公开仓库，将这个仓库的查看和读取权限给予游客角色。

赋予游客用户权限

基础的设置方式就如上所示，只是不同的用户角色，拥有不同的权限而已。

2.3.1 普通用户权限配置

2.3.1 管理员权限配置

上面是一些常见的权限分配，比较粗略，如果有需要的话，可划分的更加细致，在创建完角色(Role)后，把对应的角色分配给对应的用户，该用户便可以获得对应的权限，超级管理员的角色(nx-admin)是默认就有的(拥有所有仓库的管理权限，以及修改设置的权限等)，它无需自己配置权限内容，只用分配给超级管理员用户使用即可。

3. 仓库备份

为了保证数据的安全，一定要对仓库数据进行备份，这样在出现意外情况的时候可以快速的恢复仓库状态，将影响降到最低。

3.1 单仓库备份方案

仓库备份其实很简单，Nexus 的所有信息都存储在 sonatype-work 文件夹中，单一仓库需要定时的备份该文件夹，一天至少备份一次以上，在服务器上运行的可以自己弄一些定时脚本来帮助自动化备份。

恢复备份需要先关闭 nexux，让备份目录覆盖当前工作目录，之后重新启动 nexus 即可。

3.2 多仓库同步方案

可以在多个的电脑(服务器)上搭建多个相同版本的仓库，以其中一个为主仓库，定时同步 sonatype-work 文件夹到其他备份仓库。

3.3 多仓库同时上传

在拥有多个仓库的情况下，可以在上传脚本中配置多个仓库的上传方案，这样在发布的时候，分别发布到不同的仓库中，脚本的详细信息见下文。

3.4 多仓库部署方案

我自己使用的是多仓库方案，同时部署多个仓库，这样在其中一个仓库出现问题的时候迅速切换到其他仓库，可以在不影响开发的情况下对该仓库进行修复。

个人建议，直接把三个平台(Windows、Linux、OSX)的对应的同一版本都下载保存下来，这样方便以后部署，防止因为版本不同导致出现问题。

我自己在内网服务器(Winsows Server)上部署了一套系统，公网服务器(Linux)上部署了一套系统，又在自己的个人电脑(OXS)上部署了一套系统，也算是在所有平台上都部署过了，部署过程大致上是相同的，具体可以见上文。

如果是多仓库部署的话，首先要部署并设置好一个仓库，之后部署时直接将设置完成仓库的 sonatype-work 文件夹复制后后续的部署平台上，这样就可以避免重复的设置，所有仓库的设置就可以保证是一致的。

我自己使用的是多个仓库，并绑定了域名解析，这样在一个仓库出现问题的时候，只用将域名暂时解析到正常的仓库即可。

4. 上传脚本

一个基础的上传脚本可以这样写，该上传脚本定义了三种基本行为：

生成 doc 文档(该文档会上传到仓库上)
上传到本机仓库，上传到公网仓库(如果你有更多仓库，同样可以仿照下面的方式配置上传信息)
本地打包源码(本地的项目源码备份)，本地备份建议配合git使用。

// pack-upload.gradle

// 指定编码
tasks.withType(JavaCompile) {
    options.encoding = "UTF-8"
}

// 打包源码
task sourcesJar(type: Jar) {
    from android.sourceSets.main.java.srcDirs
    classifier = 'sources'
}

task javadoc(type: Javadoc) {
    failOnError  false
    source = android.sourceSets.main.java.sourceFiles
    classpath += project.files(android.getBootClasspath().join(File.pathSeparator))
    classpath += configurations.compile
}

// 制作文档(Javadoc)
task javadocJar(type: Jar, dependsOn: javadoc) {
    classifier = 'javadoc'
    from javadoc.destinationDir
}

artifacts {
    archives sourcesJar
    archives javadocJar
}


apply plugin: 'maven'

// 对应的仓库地址
def URL_PUCBLIC = "http://lib.gcssloop.com:8081/repository/gcssloop-central/"
def URL_LOCAL = "http://localhost:8081/repository/gcssloop-central/"

// 上传到公共仓库
task uploadToPublic(type: Upload) {
    group = 'upload'
    configuration = configurations.archives
    uploadDescriptor = true
    repositories{
        mavenDeployer {
            repository(url: URL_PUCBLIC) {
                authentication(userName: USERNAME, password: PASSWORD)
            }
            pom.version = VERSION
            pom.artifactId = ARTIFACT_ID
            pom.groupId = GROUP_ID
        }
    }  
}

// 上传到本机仓库
task uploadToLocal(type: Upload) {
    group = 'upload'
    configuration = configurations.archives
    uploadDescriptor = true
    repositories{
        mavenDeployer {
            repository(url: URL_LOCAL) {
                authentication(userName: USERNAME, password: PASSWORD)
            }
            pom.version = VERSION
            pom.artifactId = ARTIFACT_ID
            pom.groupId = GROUP_ID
        }
    }  
}

// 压缩生成归档文件
task pack(type: Zip) {
    group = 'pack'
    archiveName = rootProject.getRootDir().getName() + "_v" + VERSION + ".zip";
    destinationDir = rootProject.getRootDir().getParentFile();
    from rootProject.getRootDir().getAbsolutePath();
    exclude '**.zip'
    exclude '**.iml'
    exclude '**/**.iml'
    exclude 'build/**'
    exclude '.idea/**'
    exclude '.gradle/**'
    exclude 'gradle/**'
    exclude '**/build/**'
}

上面脚本文件中所需的仓库地址可以从下面这个地方获得：

你可以把这份文件放置到任何地方，项目中、本地的指定位置、甚至是网络上，这样在使用的时候只需要添加一下引用即可。

使用的时候如下(我把该文件放置在了自己电脑的桌面上)，在需要上传的 Library 的 build.gradle 中引用该文件并配置：

// 配置上传信息
ext {
    USERNAME = "GcsSloop"
    PASSWORD = "xxxxxxx"
    GROUP_ID = "com.gcssloop.demo"
    ARTIFACT_ID = "uploader"
    VERSION = "1.0.0"
}

// 引用上传脚本
apply from: "/Users/gcssloop/Desktop/pack-upload.gradle"

在配置完善后同步一下项目，就可以打开 gradle 命令菜单看到多出来了3个命令，双击即可执行对应的命令：

pack：打包项目
uploadToLocal：上传到本机仓库
uploadToPublic：上传到公网仓库

如果一切配置正确的话，等上传成功就可以在对应的仓库中看到上传的文件了。

注意：

1. 如非必要尽量不要去删除已发布的Library，如果发现Library有bug，请修复后更新版本号重新发布。

2. 仓库默认不允许重新发布，若有更新，请修改版本号后再进行发布。

5. 依赖配置

5.1 添加仓库地址

在需要使用该 Library 的项目的根 build.gradle 中配置仓库地址(例如)：

allprojects {
    repositories {
        jcenter()
        maven {
            // 配置用户名和密码
            credentials { username 'GcsSloop' password 'xxxxxx' }
            // 配置仓库地址（获取方式见上文）
            url "http://localhost:8081/repository/gcssloop-central/"
        }
    }
}

5.2 添加具体Library

在需要添加该项目的Module的对应 build.gradle 下添加依赖。

// <包名>:<项目名>:<版本号>，例如：
compile 'com.gcssloop.demo:uploader:1.0.0'

私有仓库的依赖使用方式和公共仓库远程依赖书写方式相同。

6. 后记

在本系列第一篇文章组件化中，我简单的介绍了将业务模块抽取为组件的优点，这里的私有仓库本质上也是为它服务的。

自己开发一个组件非常简单，但是一定要注意它的源码和文档管理，只有把源码的文档管理做好了，才能方便后续人员接手维护，否则单独抽取一个无法维护的组件是毫无意义的。

有人可能会注意到，我在上传脚本中添加了一个 pack 方法，这个方法用于打包源码，也可以说是创建当前工程的一个快照，我一般在开发完成一个小版本后就会打包一次，它会自动打包成为这样的格式 项目名_v1.0.0.zip ，相当于对每一个版本的源码都进行了保存，之后再配合 git 等工具进行源码管理。

也许有人会有疑问，既然用 git 管理了，何必在自己保存每一个版本的源码呢？ 这主要是因为，git 虽然强大，但毕竟还是要自己手动提交的，有时比较懒，就容易漏掉几个小版本，而使用脚本直接双击就自动保存快照了，相比于git会快捷很多，并且，在需要某个特定版本源码的时候，也无需去git找提交记录了，直接把对应版本的zip文件解压一下就可以了。

最后，私有仓库也并非是必须的，但如果你想自己开发维护一些私有组件库的话，非常推荐一试。

雕虫晓技(三) 通用圆角布局全解析

Fri, 29 Dec 2017 00:00:00 +0800

关于作者

GcsSloop，一名 2.5 次元魔法师。
微博 | GitHub | 博客

1. 前言

之前，我在 GitHub 分享了一个开源库：rclayout，这个库的主要目的是快速实现 Android中的圆角需求，例如这样的效果。

分享这个库的时候只是觉得可能有用而已，但没有想到居然有了 800 多个 Star，看来有不少人像我一样，对圆角这一需求比较苦恼。

圆角算是一种比较常见的需求了，最常应用于图片，因此可以找到大量的自定义圆角 ImageView，不仅如此，一些比较流行的图片加载框架也都对圆角进行了支持，像 Fresco 和 Glide 很容易就能实现圆角效果。

除了图片之外，另一种比较常见的就是圆角背景了，例如 TextView 的背景或者 Button 的背景，针对于背景的圆角也很容易实现，一般用图片或者写一个 shape 就行了，例如:

<?xml version="1.0" encoding="utf-8"?>    
<shape xmlns:android="http://schemas.android.com/apk/res/android">      
    <solid android:color="#66CCFF" />      
    <corners android:topLeftRadius="6dp"     
             android:topRightRadius="6dp"      
             android:bottomRightRadius="6dp"     
             android:bottomLeftRadius="6dp"/>      
</shape>   

上面的这些都是很容易实现的常见需求，但也有一种稍微特殊的常见需求，像下面这样：

由多个控件组合而成的条目，包括左上角一个角标、文字、文字背景和图片。

从上图可以看出啦，图片已经是圆角了，可是角标和文字背景依旧是方的，这显然不是我们想要的效果。

我之前对这种组合控件的处理方案是这样的：

角标：让设计重新切成带圆角的图，或者用支持圆角的ImageView进行展示。

文字背景：做一张带圆角的图，或者写一个底部是圆角的 shape。

这样展示是没有问题的，唯一比较麻烦的是改需求的时候，如果需要调整圆角的大小，需要分别调整三个地方：图片的圆角、角标的圆角、以及文字背景的圆角。如果一个地方忘记了调整，那么就会出现圆角无法对齐的情况。

正因如此，才想到开发一个圆角布局，将它们包裹起来，这样在不仅省去了处理角标和文字背景的麻烦，在修改需求的时候也只用修改一个地方就可以了。

2. 圆角布局原理

所谓圆角布局，本质上还是一个方块，只不过是让圆角之外的部分不显示而已，简单来说就是对画布进行裁剪，也可以理解为设置一个遮罩，让目标区域外的内容不显示。

2.1 clipPath

在最初设计的时候，使用了 canvas 中 clipPath 的方法，该方法实现起来简单快速，原理如下：

2.1.1 构造一个带圆角的Path

初始化圆角信息和Path：

// 1. 定义圆角信息 和 path
private float[] radii = new float[8];   // top-left, top-right, bottom-right, bottom-left
private Path mPath;

// 2. 通过自定义属性获取圆角信息(以左上角为例)
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RCRelativeLayout);
mRoundCorner = ta.getDimensionPixelSize(R.styleable.RCRelativeLayout_round_corner, 0);
radii[0] = mRoundCornerTopLeft;
radii[1] = mRoundCornerTopLeft;

// 3. 创建空的Path
mPath = new Path();

在 onSizeChanged 方法中根据 View 大小创建圆角 Path，在这里要注意对 padding 值的处理。

@Override 
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mRectF.left = getPaddingLeft();
    mRectF.top = getPaddingTop();
    mRectF.right = w - getPaddingRight();
    mRectF.bottom = h - getPaddingBottom();
    mPath.addRoundRect(mRectF, radii, Path.Direction.CW);
}

2.1.2 剪裁画布

直接使用 canvas 的 clipPath 方法进行剪裁。

@Override
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
    // 绘制圆角
    canvas.clipPath(mPath);
    return super.drawChild(canvas, child, drawingTime);
}

这样一个圆角布局就实现了。

2.2 setXfermode

由于 clipPath 方法不支持抗锯齿，因此在一些分辨率较低的设备上边缘看起来非常粗糙，所以换了一种实现方案，利用画笔的模式来实现对内容区域的剪裁。

有关于画笔模式可以参考：http://www.gcssloop.com/customview/Color

2.2.1 Paint

创建画笔并设置其模式：

private Paint mPaint;   // 画笔
 mPaint = new Paint();
mPaint.setColor(Color.WHITE);
mPaint.setAntiAlias(true);
// 绘制模式为填充
mPaint.setStyle(Paint.Style.FILL);
// 混合模式为 DST_IN, 即仅显示当前绘制区域和背景区域交集的部分，并仅显示背景内容。
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

2.2.2 绘制

创建带有圆角 Path 的内容不变，只不过这次将绘制部分移动到了 dispatchDraw 里面，其实放在 drawChild 里面也是可以的，只要注意一下绘制顺序即可。

由于画笔模式是 SDT_IN，所以会显示原有内容区域和圆角Path区域交集的部分，并仅显示原有内容

@Override 
protected void dispatchDraw(Canvas canvas) {
    canvas.saveLayer(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), null, Canvas
            .ALL_SAVE_FLAG);
  	// 绘制子控件
    super.dispatchDraw(canvas);
  	// 绘制带有圆角的 Path
    canvas.drawPath(mPath, mPaint);
    canvas.restore();
}

2.3 支持圆形

知道了绘制原理想要支持圆形就很简单了，其实就是将带有圆角矩形的 Path 更换为带有圆形的 Path 即可。

为了支持圆形，我定义了一个 roundAsCircle 属性，只要检测到这个属性，就在 Path 中添加一个圆形，否则添加一个圆角矩形。

在支持圆形的时候有一个坑需要注意一下，就是控件长宽比不一致的情况下，由于是按照最短的边计算的，所以在长宽比不一致的情况下，直接向 Path 添加圆形， Path 是无法填充满画布的，在绘制的时候可能会出现圆形之外依旧有内容被绘制出来，所以这里使用了两个 moveTo 操作来让 Path 填充满画布(下文代码中注释部分)。

@Override 
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    RectF areas = new RectF();
    areas.left = getPaddingLeft();
    areas.top = getPaddingTop();
    areas.right = w - getPaddingRight();
    areas.bottom = h - getPaddingBottom();
    mClipPath.reset();
    if (mRoundAsCircle) {
        float d = areas.width() >= areas.height() ? areas.height() : areas.width();
        float r = d / 2;
        PointF center = new PointF(w / 2, h / 2);
        mClipPath.addCircle(center.x, center.y, r, Path.Direction.CW);
        mClipPath.moveTo(0, 0);  // 通过空操作让Path区域占满画布
        mClipPath.moveTo(w, h);
    } else {
        mClipPath.addRoundRect(areas, radii, Path.Direction.CW);
    }
    Region clip = new Region((int) areas.left, (int) areas.top,
                             (int) areas.right, (int) areas.bottom);
    mAreaRegion.setPath(mClipPath, clip);
}

2.4 支持描边

支持描边就更简单了，就是基础的绘制操作，如下：

@Override 
protected void dispatchDraw(Canvas canvas) {
    canvas.saveLayer(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), null, Canvas
            .ALL_SAVE_FLAG);
    super.dispatchDraw(canvas);
    // 描边
    if (mStrokeWidth > 0) {
        mPaint.setXfermode(null);
        mPaint.setStrokeWidth(mStrokeWidth * 2);
        mPaint.setColor(mStrokeColor);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(mStrokePath, mPaint);
    }
    // 剪裁
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    mPaint.setStrokeWidth(0);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawPath(mClipPath, mPaint);
    canvas.restore();
}

2.5 限定点击区域

上面虽然实现了的圆角、圆形的显示，但是没有被绘制出来的部分依旧是可以被点击的，因此需要限定点击区域，对超出显示区域的部分不进行响应。

这个原理也不复杂，主要是利用事件分发机制和 Region 的 contains 方法。

2.5.1 获取可点击区域

// 定义 Region，即内容区域
private Region mAreaRegion;
mAreaRegion = new Region();

// 根据内容区域 Path 创建 Region，clip 为整个画布大小
Region clip = new Region((int) areas.left, (int) areas.top,
                       (int) areas.right, (int) areas.bottom);
mAreaRegion.setPath(mStrokePath, clip);

2.5.2 对超出区域外的事件不处理

使用 contains 方法判断事件的位置是否在区域内，如果不在区域内，就直接返回 false，表示不处理。

@Override 
public boolean dispatchTouchEvent(MotionEvent ev) {
    if (!mAreaRegion.contains((int) ev.getX(), (int) ev.getY())) {
        return false;
    }
    return super.dispatchTouchEvent(ev);
}

到此为止，有关通用圆角布局的核心内容就结束了。

3. 结语

通用圆角布局的原理并不复杂，而且代码实现起来也非常简单，感兴趣的可以在 Github 上看一下源码，核心代码不过 100 行左右。

RCLayout： https://github.com/GcsSloop/rclayout

关于作者

GcsSloop，一名 2.5 次元魔法师。

雕虫晓技(二) 编码

Fri, 10 Nov 2017 00:00:00 +0800

关于作者

GcsSloop，一名 2.5 次元魔法师。
微博 | GitHub | 博客

前言

对于编程，一般需要先设计，再编码，即针对某一项功能进行详细的分析后，得出具体的技术方案，然后编码进行实现，这是最理想的状态，但是现实不可能这么理想。

在公司的项目中，一般不会有太充裕的时间，专一用来琢磨技术方案，再加上个人能力有限，前期分析很难具体到每一个细节中，那么在这种情况下应该如何编程呢？下面就分享几个自己使用的准则。

一、功能优先

程序员主要工作是写代码，最终目标则是产品，而产品的核心是其中的功能，如果功能没有完成，代码写得再漂亮也没用，所以第一点是功能优先。

由于每个人接触到的知识是非常有限的，不可能像搜索引擎一样什么都知道，所以在面对具体的功能开发时，要优先从自己现有的知识库里面寻找最可靠有效的解决方案，先利用已有的知识设计出大致的框架，然后在不考虑编码复杂度的情况下先完成第一个版本功能的开发，把功能做出来之后，再进行迭代优化，使其逐渐接近完美。

对于功能开发来说，也要注意偏重，用户需要的是内容，而不是一个应用，在初期阶段要注意将内容展示做好，至于其中的一些动画效果和细节处理，在这一阶段都属于次要内容，具体的细节可以等功能基本完善之后慢慢调整。

二、适当测试

测试有黑盒测试和白盒测试，黑盒测试就是把自己当成用户来体验这些功能，看功能是否正常，而白盒测试在Android中通常是指单元测试。

虽然公司有专业的测试人员，但是自己写的代码还是自己最清楚哪里可能出现问题，所以建议在交付给专业测试之前自己先简单的测试一遍，避免一些常见的漏洞。

在这里说明一下有关单元测试的问题，大家都知道单元测试是好的，但是据我观察，有很多程序员基本不写单元测试，那么单元测试到底是不是必须的呢？

个人觉得，是否进行单元测试要依照具体情况而定，不是所有的方法都需要单元测试，例如：读取数据库操作，获取网络数据，这些本身就不包含什么复杂逻辑的内容是不需要测试的，假如数据出现了问题，十有八九是其他地方写入了错误数据，而不是因为读取才出现的，因此这些也就没有必要进行测试了。具体的业务逻辑也不需要单元测试，否则产品一旦修改需求，测试代码也要跟着大动干戈，岂不是自找麻烦。

真正需要测试的是那些基础函数，尤其是具有分支判断的函数，这些函数才是最容易出现问题的地方，写测试代码的时候，重点要进行边界数值测试，以及特殊情况的测试，当然，如果是一些通用的基础组件，个人更喜欢写一个 Demo，在测试的同时就把用法示例也写出来了。

三、代码风格

相信每个人都有自己的编码风格，个人希望在保持自己风格的同时，也能够让别人更容易看懂自己的代码，所以设计了一个固定的结构，即适合编码，又适合阅读。

个人习惯将常量和变量放在最上面，然后是生命周期和应用的核心方法，依次进行排列，最后是外部调用的接口。这样做主要是为了后期查看方便，什么方法在什么位置很容易就能找到，避免了上下来回滚动去寻找一个方法的麻烦。

下面是自己使用的规范，一个大致的例子：

public class GcsSloop {    
    // 对外常量
    public static final String HAHA = "haha";    
    // 对内常量
    private static final int  mVal = -1;    
    // 全局变量
    private int mVar;    
   
    //--- 构造函数(生命周期)与核心功能 ---
    
    public GcsSloop() {        
        this(-1);
    }    
    public GcsSloop(int var) {        
        this.mVar = var;
    }    
    
    // 核心方法，一般均为 private
    private void doSomthing(){
        System.out.println("LALA");
    }
    
    //--- 对外方法或接口 ---
    
    // 对外方法，均为 public
    public void sayHaha(){
        System.out.println("HAHA");
    }
}

这样的编码风格也是我调整了若干次后总结的，规则很简单，也没有太大的束缚，但很实用。

一个类写完之后它的内部逻辑可能很长时间都不会改变，而调用者也不关心它的内部逻辑，所以就将内部逻辑放在中间位置，公开常量放在开头，接口放在结尾，相比于中间，开头和结尾更容易定位，这样在使用的时候最容易寻找。

例如：我之前写了一个类，我知道它的具体作用，但很长之前没有使用了，忘了怎么使用，我就可以打开这个类，直接跳到末尾看一下调用接口就知道怎么使用了，而不用再去看它的具体实现逻辑。

也有人习惯将公开常量和调用接口全部放在最开始的部分，这个就看个人的编码习惯了，只要不是把公开的方法接口混杂到具体内部逻辑中就好。

四、技术选型

最后一个话题是技术选型，有句俗话叫”条条大路通罗马”，在技术上尤其如此，对于同一个业务来说，不同的人进行开发可能会选择不同的技术方案，使用不同的思路。那么具体到我们开发时，应该如何选择方案呢？

个人觉得应该有以下几条原则：

1. 首选自己实践过的

如果是自己实践过的内容，会对这套流程比较熟悉，能快速上手开发，也踩过里面常见的坑，知道如何规避。所以这套是首选方案，可以快速稳定的实现业务。

2. 次选官方推荐或者大家都在用的

如果自己本身对这方面不熟悉，则建议选择官方推荐方案，或者用的人比较多的方案。对于官方推荐来说，有后台撑腰，文档清晰明确，使用起来会少走弯路。而使用人数较多的则说明有很多前人帮忙踩坑，很多坑在没遇到的时候就被填平了，即便遇到了，基本也能找到轻松绕过去的方案。

3. 慎选热门新技术

其实这一点有悖程序员文化，程序员都喜欢新潮的，酷酷的技术，而且使用新技术可以为将来的简历添加上浓墨重彩的一笔，所以很多程序员都喜欢使用新技术。

个人觉得，喜欢新技术没错，任何新技术的兴起，必然是因为它拥有着旧技术所没有的特点，才会受到人们的追捧，但也不要盲目的去使用新技术。对于新技术的出现，我们可以去学习，研究分析它的优缺点，但不要立即在商业项目中使用，因为任何技术都需要一定时间的沉淀才能逐渐完善，一项新技术的出现可能会解决某一方面的痛点，但同时也可能引入其他麻烦，如果使用新技术出现了麻烦，将没有任何可以参考的东西，只能去看源码分析，这将会大大的拖慢项目进度。

对于新技术的出现，个人的观点是，默默学习，持续观望，等沉淀几个月之后再尝试将这项技术应用到实际的项目中。

4. 不选冷门技术

如果不是迫不得已，不要去选择没什么人用的技术方案，这些方案没人使用一定是因为有更好的替代方案，或者是这项技术本身存在缺陷。当然，对于这些缺陷，作者一般不会明确的告诉我们。这些技术方案可能一开始使用起来没问题，但如果遇到问题，就会让人非常头疼，在某些情况下，修复这个问题所花费的时间甚至会超过自己从头再写一遍。所以使用冷门技术之前请先祈祷一下自己不会踩到坑。

结语

以上这些内容都是个人工作这段时间内的感悟，也是根据自身能力，为自己定制的方案，并不适用于所有人，仅供大家参考。如果你有更好的想法，欢迎在公众号给我发消息，共同探讨学习。

关于作者

GcsSloop，一名 2.5 次元魔法师。

雕虫晓技(一) 组件化

Mon, 06 Nov 2017 00:00:00 +0800

关于作者

GcsSloop，一名 2.5 次元魔法师。
微博 | GitHub | 博客

前言

本文是我工作这段时间的部分经验总结，仅从个人的角度谈一下对工作中编程的看法。

今年毕业出来工作，前期需要学习和实践的东西有很多，生活的节奏也在进行调节，因此就没有太多的精力去写文章了，从而导致我的“Android自定义View”系列文章一直处于停更状态。

其实并非没有时间，而是没有太多的精力投入到这上面，对于技术文章来说，如果想要写的通俗易懂，不误导读者，不仅需要对其中运用到的各个技术细节都进行考证，而且要花费大量的精力去梳理文章的脉络，并不是把所有知识点都罗列一遍就可以了，因此即便是一篇简单的文章，想要做好，也需要耗费不少的精力。

如果只是单纯的翻译或者总结一些前人的经验，写出来一篇文章是很容易的，但是我认为这样的文章是没有太大价值的，而且容易传播一些错误的观点，如果因为乱写误导了别人，反而不如不写。

由于出来工作了一段时间，参与的两个项目也都基本结束了，所以特地水一篇文章，来讲一下自己工作的感受，顺便总结一下这段时间收获的经验。

自己学习编程和工作中编程虽然基本是类似的，但也有很多的不同。

自己学的时候可以瞎胡搞，看到什么新东西都拿来玩玩，有大量的时间可以浪费，所以大部分的时间处于偏创造性的方向，总喜欢挑战一些自己没做过的东西，以保持新鲜感和对编程的热情。

但工作就不同了，工作中所需要开发的功能都很确定，因此大部分时间都是在写“比较枯燥”的业务代码，称为搬砖也不为过。因为从本质上来讲，写业务就是把一些现成的代码搬过来，再按照一定的顺序堆叠起来，最终完成这个业务。

尽管工作中大部分时间是在写业务，但写业务也是有不同的，如何在相同的实力下释放出更高的战斗力，让自己负责的业务更加坚固耐用，还是有些小技巧的。今天就和大家分享一个如何四两拨千金的方法。

普通开发流程

下面用一个小故事来引出本文主题(故事纯属虚构)。

小明参与开发了一个项目A，在项目A中有一个功能需要对视频中的音频进行处理，允许实时设置音频的均衡器，小明于是花了三天时间在项目A中开发出了一个模块A，用于处理音频均衡器。

项目A开发了一段时间之后，又来了一个项目B，同样有这个需求，于是小明把之前项目A中的模块复制到项目B中继续开发。

项目B开发了一段时间后发现模块A存在一个Bug，于是在项目B中对这个Bug进行了修复，等项目B告一段落，继续进行项目A开发时，想到了之前模块A中还存在这样一个问题，于是对照着项目B对项目A中对模块进行了修复。

整个流程像下面这样：

由于两个项目都由小明负责，这个问题还是不大的，但是假如项目是多人合作的呢？小明在开发项目B时，项目A交给小刚负责继续开发，小刚也发现了模块A的Bug，也进行了修复，这样当小明继续回到项目A开发时，想要去修复模块A，发现模块A已经被修改了，经过检查对比后发现，小刚使用的修复方案稍有不同，但也管用，于是决定不对A项目进行修改了。

流程变成了下面这样子：

于是，模块A在两个项目中就产生了一点点的不同，随着开发的继续，这些不同会逐渐的放大，项目A中和项目B中的模块会变的完全不同，发现Bug后，手动修复的成本也会大大的增加。最终，对于项目A中发现的问题，在项目A中进行修复后，无法将同样的方案应用于项目B，项目B中发现的Bug修复方案同样也无法应用于项目A，也就是说虽然两个项目中的模块同样用于处理音频均衡器，却拥有着不同的逻辑，无法兼容，并且逐渐变的难以维护。

维护两个相似但不兼容的模块是十分痛苦的，尤其是两个项目需要交替进行维护和开发的时候，很容易将两个模块弄混的，一不小心就可能会引发一些不必要的混乱。

既然如此，那么我们规定一下，谁的模块谁进行负责行吗？由谁进行负责就负责到底，别人不允许随便修改，不就能解决这个问题了吗？

答案是不行的，首先项目有自己的周期，有些项目可能会停滞非常长的时间才继续开发，谁又能记得住修改了哪些东西，其次，公司人员是流动的，可能会有人加入和离开，靠人员来保证自然是不靠谱的。

那么我们这样规定，修改任何一个模块的时候，需要不同项目中相同的模块都进行修改。

这个也是不靠谱的，首先，可能存在新来的同事对以前的项目不熟悉这一情况，其次，可能修改后的模块和之前不兼容，例如修改了某些调用方法，对所有项目都进行更新显然不靠谱，工作量太大了。

组件化开发流程

那么是否有更好的方案呢？

当然是有的，如果在开发项目A的时候就意识到该模块可以被复用，那么在开发之初就应当将模块当作一个组件独立出来，单独进行开发，之后在项目A中引用这个库即可，如果之前没有意识到，在开发项目B的时候意识到了，那么应该立即对项目A中该模块进行重构，将其独立出来，之后让两个项目同时引用同一个库，这样就避免了同时维护两个不兼容库的尴尬境地。

例如下面这样：

其实这个流程相对于之前的流程来说，只不过是将其中的模块独立出来了而已，但是却能带来更多的好处。

1. 避免了不兼容问题： 两个项目同时引用同一个库，自然不会出现分化出两个不兼容版本，难以维护的问题。

2. 修复Bug方便： 如果在其中一个项目中发现了Bug，只需要到库中修复该问题，重新释放一个版本，之后到另一个项目中只需要修改一下版本号即可完成修复，而不是复制代码，手动合并。

3. 更稳定： 假如我想在模块中做一些优化，但是我并不能很确定这些优化不会引发Bug，我可以先释放一个测试版，在项目中进行测试，如果优化导致了一些问题的产生，我只用花几秒钟时间修改版本号就可以退回到稳定版，而不是到版本管理工具中去退回某个提交记录。

4. 节省时间： 相比于手动维护两个版本来说，这样显然更加节省开发时间，例如我因为一个项目的需要，在库中添加了新特性，当另一个项目也需要这些特性时，只需要修改一下版本号即可接入。

5. 快速更新： 即便是一个搁置了很久旧项目，在需要更新的时候，也可以查询一下组件更新记录，快速更新到最稳定的一个兼容版。

不仅如此，随着项目发展，这个库将会变的越来越完善，越来越稳定，后续的项目如果需要这些功能，花费几秒钟添加一下依赖，就能使用一个稳定的库。

组件使用版本号进行控制，通常是分三段 x.y.z (如：1.0.0)，我一般是这样规定的：
内容和接口没有变动，只是修复了Bug，或者内部状态，修改最后一位(如：1.0.1)。
如果调用接口增加了，或者细微调整，修改中间位(如：1.1.0)。
如果进行了大面积重构，接口完全不同了，修改第一位(如：2.0.0)。

下面是我自己的例子，在项目中引用自己的代码库。

当然了，看到这里有不少小伙伴都会比较疑惑，作为公司的代码，有很多内容都是涉及到机密的，拿来开源总是不行的吧，你这样用不会出问题？

首先，能拿来独立作为库的代码一般都是一些通用代码，这部分代码通常是不会涉及到具体业务逻辑的，自然也就不存在什么涉密了。
其次，这些代码并没有在公共的开源库上托管，而是隶属于内部私有服务器，出了公司就无法访问到了，而且它拥有完整的权限管理，如果不给权限，就算公司内部也看不了。

如果想要知道这些是如何做到的，可以Google搜索 “nexus maven 私服搭建”，当然，百度也可以，限于篇幅和搭建方式比较容易，网上又有很多教程，我这里就不过多叙述了。

如果你的团队只有自己一个开发，可以直接将仓库部署到自己的电脑上，如果是多人合作型的，可以部署在内网服务器上。实在没有条件，不喜欢折腾的，也可以将独立仓库打包成aar格式的文件，之后在项目中使用这些文件，尽管用起来稍微麻烦一点，但也是选择之一。

花费一点时间搭建一个私服，所能节省的开发时间是超乎想象的，当然，如果想将项目中部分模块作为组件进行开发，一定要注意做好文档管理，记录好每次更新的内容，方便后期管理。例如我负责的一些模块，不仅在仓库上对文档源码进行了管理，本地也对每个版本的源码做了备份，例如我前段时间开源的 **【pager-layoutmanager】 ** ,在本地是这样的：

结语

如果尝试组件化开发一段时间，积累了大量的基础组件，那么再开始新项目的时候就能更快速的去实现具体的需求，而不用在基础的组件上费功夫了。

关于组件化暂时就说到这里，当然了具体到现实的业务中，还有很多细节和技巧需要注意，不过这些东西还是自己去体会更好，听别人说的再多，终究不如自己实践一下记忆更深刻。

PagerLayoutManager(分页布局)

Sun, 15 Oct 2017 00:00:00 +0800

具有分页功能的 Recyclerview 布局管理器，主打分页，可以替代部分场景下的网格布局，线性布局，以及一些简单的ViewPager，但也有一定的局限性，请选择性使用。

1. 效果预览

2. 支持的特性

网格布局，设置合适的行列数可以模拟线性布局或者ViewPager。
分页效果，支持自动回调页码的变化(总页数和当前页数)。
布局方向，支持横向滚动和垂直滚动。
方向切换，支持切换滚动方向。
支持电视，支持TV上按键翻页。
内存稳定，不会因为一次性添加大量的数据导致内存飙升或者严重卡顿。
使用简单，无侵入性，可以快速的将其他布局替换为该布局，也可以快速的移除该布局。
自动修正，当滚动到第3页，删除数据后内容不足2页，会自动修正当前页面为第2页。

3. 主要文件

名称	作用
/java/PagerGridLayoutManager.java	水平分页网格布局管理器。
/java/PagerGridSnapHelper.java	滚动辅助工具。
/java/PagerConfig.java	Pager配置，用于开关调试日志。

4. 使用方法

4.1 基本用法

4.1.1 基本设置

// 1.水平分页布局管理器
PagerGridLayoutManager layoutManager = new PagerGridLayoutManager(
        2, 3, PagerGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);

// 2.设置滚动辅助工具
PagerGridSnapHelper pageSnapHelper = new PagerGridSnapHelper();
pageSnapHelper.attachToRecyclerView(recyclerView);

注意：
1. 一定要在先设置 PagerGridLayoutManager，之后再设置 PagerGridSnapHelper。
2. 注意名称是 PagerGridSnapHelper 不是 PagerSnapHelper。

4.1.2 设置页面变化监听器

layoutManager.setPageListener(this);    // 设置页面变化监听器

// 当总页数确定时的回调
@Override public void onPageSizeChanged(int pageSize) {
    Log.e("TAG", "总页数 = " + pageSize);
}

// 当页面被选中时的回调（从 0 开始）
@Override public void onPageSelect(int pageIndex) {
    Log.e("TAG", "选中页码 = " + (pageIndex+1));
}

4.1.3 直接滚动

// 滚动到指定条目
public void scrollToPosition(int position);
// 切换页面
public void scrollToPage(int pageIndex);	// 滚动到指定页面
public void prePage();						// 上一页
public void nextPage();						// 下一页

// 使用示例
recyclerView.scrollToPosition(0);
layoutManager.scrollToPage(0);
layoutManager.prePage();
layoutManager.nextPage();

4.1.4 平滑滚动

// 平滑滚动到指定条目
mRecyclerView.smoothScrollToPosition(pos);
// 平滑切换页面
mPagerLyoutManager.smoothScrollToPage(pageIndex);	// 平滑滚动到指定页
mPagerLyoutManager.smoothPrePage();					// 平滑滚动到上一页
mPagerLyoutManager.smoothNextPage();				// 平滑滚动到下一页

// 使用示例
recyclerView.smoothScrollToPosition(0);
layoutManager.smoothScrollToPage(0);
layoutManager.smoothPrePage();
layoutManager.smoothNextPage();

4.2 其他设置

4.2.1 是否在滚动过程中回调页码变化

// 设置是否在滚动过程中回调页码变化
void setChangeSelectInScrolling(boolean changeSelectInScrolling);

// 使用示例
layoutManager.setChangeSelectInScrolling(false);

4.2.2 是否允许连续滚动

默认允许连续滚动。

// 是否允许连续滚动
boolean isAllowContinuousScroll();
// 设置是否允许连续滚动
void setAllowContinuousScroll(boolean allowContinuousScroll);

// 使用示例
layoutManager.isAllowContinuousScroll();
layoutManager.setAllowContinuousScroll(false);

4.2.3 设置滚动方向

注意：滚动过程中不可切换方向，设置无效。

// 设置滚动方向
int setOrientationType(@OrientationType int orientation);

// 使用示例
layoutManager.setOrientationType(PagerGridLayoutManager.HORIZONTAL);

4.2.4 设置 Fling 阀值

// 设置 Fling 阀值
void setFlingThreshold(int flingThreshold);

// 使用示例
PagerConfig.setFlingThreshold(1000);

4.2.5 设置滚动速度

// 设置滚动速度(滚动一英寸所耗费的微秒数，数值越大，速度越慢，默认为 60f)
void setMillisecondsPreInch(float millisecondsPreInch);

// 使用示例
PagerConfig.setMillisecondsPreInch(60f);

4.2.6 打开调试日志

// 打开调试用日志输出，一般情况忽略即可
void setShowLog(boolean showLog);

// 使用示例
PagerConfig.setShowLog(true);

5. 注意事项：

目前存在一个问题，使用的时候请务必给 RecyclerView 设置固定大小或者match_parent，如果不设置默认高度为 0 ，则任何内容都不会显示出来。

6. 添加方式

6.1 添加仓库

在项目的 build.gradle 文件中配置仓库地址。

allprojects {
    repositories {
        jcenter()
        // 私有仓库地址
       maven { url "http://lib.gcssloop.com/repository/gcssloop-central/" }
    }
}

6.2 添加项目依赖

在需要添加依赖的 Module 下添加以下信息，使用方式和普通的远程仓库一样。

implementation 'com.gcssloop.recyclerview:pagerlayoutmanager:2.3.7'

作者简介

作者微博: @GcsSloop

个人网站: http://www.gcssloop.com

更新日志

v2.3.7

完善代码细节，移除冗余逻辑。

v2.3.6

降低最低版本兼容。
完善文档注释，精简项目结构。

v2.3.5

优化代码结构，抽取 PagerGridSmoothScroller。

v2.3.4

修复 padding 问题。
优化计算显示区域的代码逻辑。

v2.3.3

优化代码结构。
移除冗余代码。

v2.3.2

调整平滑滚动对外接口。

// 平滑滚动到上一页
mPagerLyoutManager.smoothPrePage();
// 平滑滚动到下一页
mPagerLyoutManager.smoothNextPage();
// 平滑滚动到指定页
mPagerLyoutManager.smoothScrollToPage(pageIndex);

v2.3.1

优化直接滚动。
修复更新单个条目导致整个界面刷新的情况。

v2.3.0

添加平滑滚动，优化超长距离平滑滚动。

// 平滑滚动到指定条目，通过 RecyclerView 调用
mRecyclerView.smoothScrollToPosition(pos);

// 平滑滚动到上一页
mPagerLyoutManager.smoothPrePage(recyclerView);
// 平滑滚动到下一页
mPagerLyoutManager.smoothNextPage(recyclerView);
// 平滑滚动到指定页
mPagerLyoutManager.smoothScrollToPage(recyclerView, pageIndex);

V2.2.4

优化滚动体验。
新增配置选项：

// 是否允许连续滚动
boolean isAllowContinuousScroll();
// 设置是否允许连续滚动
void setAllowContinuousScroll(boolean allowContinuousScroll);

v2.2.3

优化滚动过程中页面回调逻辑。

v2.2.2

修复除零异常。

v2.2.1

修复直接滚动到指定页面的Bug。
添加设置快速滚动阀值的方法 snapHelper.setFlingThreshold(1000);
修复不设置页面监听器会导致显示不正常的问题。修复行列为1时滚动出现的问题。

v2.2.0(该版本不稳定)

新增方法：

// 滚动到指定条目
public void scrollToPosition(int position);
// 滚动到指定页面
public void scrollToPage(int pageIndex);
// 上一页
public void prePage();
// 下一页
public void nextPage();

v2.1.1

修复使用Glide或者Fresco可能导致布局重复刷新的问题。

(判断RecyclerView.State，如果结构状态没有变化则不重新布局)

v2.1.0

修复从后向前滚动时内存占用变大的问题。

(产生原因时先添加了新的View，最后再回收废弃的View，导致被回收的View一直难以被复用，持续占用内存，正确的应该是先将废弃的View放入回收区，这样新View创建时直接从回收区取View，就避免了回收区堆积大量的废弃View。)

v2.0.0

统一包名(功能没有变化)。

v1.3.1

修复特殊情况下删除条目导致显示不完整的问题。

v1.3.0

支持动态切换滚动方向。

v1.2.2

修复条目Margin问题。

v1.2.1

修复慢速滚动偶尔会停止在两个页面之间的问题。

v1.2.0

修复页面相关的Bug。
慢速滑动超多半个View时自动滚动到下一页。
调整布局逻辑和滚动辅助器逻辑。
移除部分无效方法。
代码结构调整。
支持按键翻页(TV)。

在TV上快速滚动时存在焦点问题：

前置条件：竖向滚动，当下方有可以获取焦点控件。
预期结果：当有内容时向下滚动，当滚动到最后一页时，焦点才能移动到下面控件上。
实际结果：当慢速滚动时符合预期，当快速滚动时有可能在移动到最后一页之前就将焦点移动到下面的控件上。

v1.1.3

修正页面变化回调位置，将回调修正到布局之后。
修正页面数据变化回调逻辑，允许多次回调同一个页面数据。

v1.1.2

修复内容删除完毕时没有页面变化回调问题。

v1.1.1

修复删除完毕最后一页作品，页面显示空白，滑动卡顿的bug。

v1.1.0

beta测试通过。
整理代码结构。

v1.1.0-beta

添加在滚动过程中回调页码变化。

v1.0.1

修复数据过少导致的数组越界异常。

v1.0.0

移除部分日志。
代码结构整理。

v1.0.0-beta1

修复错误回滚问题。例如：本应滚动到第二页，却在滚动结束后回滚到第一页。

v1.0.0-beta

完成基本的分页功能。
完成分页滚动辅助工具。
滑动结束自动锁定到最近页面。
每次滚动仅允许滚动一页，防止连续滚动多页。
低内存占用。
支持水平滚动和垂直分页。
允许开关调试日志。

版权信息

Copyright (c) 2017 GcsSloop

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

RCLayout(圆角布局)

Thu, 05 Oct 2017 00:00:00 +0800

Android 通用圆角布局，快速实现圆角需求。

之前做项目的时候有圆角相关需求，在网上找了很多方案都不够满意，于是自己做了一个，目前已经使用了一段时间，更新了多个版本，我遇到的问题都进行了修复，并且添加了很多方便的可配置属性，以满足不同需求。

【GitHub · 源代码】

效果预览

支持的特性

主要文件

名字	摘要
RCRealtiveLayout	圆角相对布局。
RCImageView	圆角图片。
RCHelper	圆角辅助工具。

1. 基本用法

RCRelativeLayout(Round Corner RelativeLayout)，使用圆角布局包裹需要圆角的内容然后添加自定义属性即可

<com.gcssloop.widget.RCRelativeLayout
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:round_corner="40dp">

  	<!--任意View-->
    <ImageView
        android:scaleType="centerCrop"
        android:src="@drawable/test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#aaffffff"
        android:gravity="center"
        android:layout_alignParentBottom="true"
        android:text="圆角测试"/>

</com.gcssloop.widget.RCRelativeLayout>

2. 配置属性

可以在布局文件中配置的基本属性有五个：

属性名称	摘要	是否必须设置	类型
round_corner	总体圆角半径	否	dp
round_corner_top_left	左上角圆角半径	否	dp
round_corner_top_right	右上角圆角半径	否	dp
round_corner_bottom_left	左下角圆角半径	否	dp
round_corner_bottom_right	右下角圆角半径	否	dp
round_as_circle	是否剪裁为圆形	否	boolean
stroke_width	描边半径	否	dp
stroke_color	描边颜色	否	color
clip_background	剪裁背景	否	boolean

3. 属性简介

3.1 圆角属性

round_as_circle 的权限最高，在默认情况下它的值为false，如果设置这个属性为 true，则会忽略圆角大小的数值，剪裁结果均为圆形。

设置圆角大小的一共有5个属性，一个是全局的圆角大小round_corner，其余四个round_corner_xx_xx是分别对每一个角进行设置，它们之间存在替代关系。

仅设置全局，所有的角都跟随全局。
仅对某些角设置，则只有设置过的角会有圆角效果。
全局和部分都有设置，则有具体设置的角跟随具体设置的数值，没有具体设置的角跟随全局设置。

3.2 描边属性

描边宽度stroke_width默认情况下数值为 0，即不存在描边效果。
描边高度stroke_color默认情况下为白色，允许自定义颜色。

3.3 背景剪裁

RCLayout 默认对自身背景剪裁，但是可以通过设置 clip_background 为 false 让RCLayout 不剪裁自身的背景。

4.添加方法

4.1 添加仓库

在项目的 build.gradle 文件中配置仓库地址。

allprojects {
    repositories {
        jcenter()
        // 私有仓库地址
       maven { url "http://lib.gcssloop.com:8081/repository/gcssloop-central/" }
    }
}

4.2 添加项目依赖

在需要添加依赖的 Module 下添加以下信息，使用方式和普通的远程仓库一样。

implementation 'com.gcssloop.widget:rclayout:1.5.4'

作者简介

作者微博: @GcsSloop

个人网站: http://www.gcssloop.com

更新日志

v1.5.4

提供在 Java 中动态设置属性的方法。

v1.5.3

降低兼容最低版本。
精简项目结构。

v1.5.2

默认不剪裁背景，即 clip-background 默认为 false。
修复剪裁不完全的情况。

v1.5.1

完善布局属性提示。

v1.5.0

添加 RCImageView (属性和 RCRelativeLayout 相同)。
抽取 RCHelper。

v1.4.7

增加 clip_background 属性，控制对 RCLayout 的背景剪裁默认为 true(剪裁)。

v1.4.6

对 RCLayout 背景剪裁 (背景剪裁暂不支持抗锯齿)。

v1.4.5

描边支持半透明。

v1.4.4

优化性能(回收 TypedArray)。

v1.4.3

优化性能(移除在dispathcDraw中创建的对象)。

v1.4.2

尝试修复屏幕像素密度过低时出现边框问题。

v1.4.1

修复圆形状态下Padding值问题。

v1.4.0

限定点击区域为显示区域。

v1.3.0

支持描边。
添加描边宽度，描边颜色两个属性。

v1.2.0

支持圆形。

v1.1.0

更新圆角实现方式。
添加抗锯齿。

v1.0.0

允许对每一个角分别设置半径。
支持padding。

v1.0.0-alpha

测试圆角方案是否可行。
允许统一设置圆角半径。

版权信息

Copyright (c) 2017 GcsSloop

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Encrypt(加密工具包)

Sun, 01 Oct 2017 00:00:00 +0800

Android 加密解密工具包，字符串，byte[]，文件等对象的加密和解密工具集合，包含了多种加密方案，例如：
编码工具(Base64Util)，信息摘要工具(MD5Util、SHAUtil)，对称加密工具(AESUtil、DESUtil)，非对称加密工具(RSAUtil)。

其中所有的工具都经过了测试，如果发现有什么问题，可以到【GitHub · Encrypt】提交Issues。

加密类型	摘要	相关方法
简单加密	换一种编码格式	Base64Util
单向加密	只能加密，不能解密	MD5Util、SHAUtil
对称加密	使用相同的秘钥加密和解密	AESUtil、DESUtil
非对称加密	分公钥和私钥，一个加密，另一个解密	RSAUtil

使用方法

Base64util

方法	摘要
String base64EncodeStr(String str)	编码
String base64DecodedStr(String str)	解码

单元测试：

System.out.println("base64");
// base64 字符串加密解密测试
assertEquals("R2NzU2xvb3DkuK3mloc=\n", Base64Util.base64EncodeStr("GcsSloop中文"));
assertEquals("GcsSloop中文", Base64Util.base64DecodedStr("R2NzU2xvb3DkuK3mloc=\n"));

MD5Util

方法	摘要
String md5(String string)	加密字符串
String md5(String string, String slat)	加密字符串同时加盐
String md5(String string, int times)	多次加密
String md5(File file)	计算文件的md5数值

单元测试：

System.out.println("md5");
// MD5 字符串加密测试
assertEquals("", MD5Util.md5(""));
assertEquals("386d3ff3fa6def1ec307428e885e03a1", MD5Util.md5("GcsSloop中文"));
assertEquals("fd01aa74bb73bbdb094bae28a558c6d1", MD5Util.md5("GcsSloop中文", "salt"));

// MD5 多次加密测试
assertEquals("GcsSloop中文", MD5Util.md5("GcsSloop中文", 0));
assertEquals("386d3ff3fa6def1ec307428e885e03a1", MD5Util.md5("GcsSloop中文", 1));
assertEquals("2d9fdd834c5c852fa2f946b670f3731f", MD5Util.md5("GcsSloop中文", 2));
assertEquals("211dd7a16d5a01df756278cea9a38d53", MD5Util.md5("GcsSloop中文", 3));

// MD5 文件md5测试
File file = new File("./Encrypt/Test/demo" +
                             ".flv");
assertEquals("a4e592e6160e0102e7ecc4ab6117b700", MD5Util.md5(file));

SHAUtil

方法	摘要
String sha(String string, String type)	加密

单元测试：

System.out.println("sha");
// des 字符串加密解密测试
String source = "GcsSloop中文";
assertEquals("b9dd1d754ee3ac16dc584b8fd4655ca581a0637eab8ff25128b0a522372e7233",
             SHAUtil.sha(source, null));
assertEquals("34d44835ce4cc4d7ecf66428e49273bf02f748d7213be24c767c5f4f",
             SHAUtil.sha(source, SHAUtil.SHA224));
assertEquals("b9dd1d754ee3ac16dc584b8fd4655ca581a0637eab8ff25128b0a522372e7233",
             SHAUtil.sha(source, SHAUtil.SHA256));
assertEquals("2e3c27201c21b06b01289ebef09c9c36e752ca6a5b6425ca7b2501b4baaed29876954ca710b7e75c80b7b542df28fde6",
             SHAUtil.sha(source, SHAUtil.SHA384));
assertEquals("bc3f55fcb03272ee166d7804ccba348ffba05ddce08bf3fab719fa2c97c8dc71993fc9524e21b8fee9491aafc0b309ebca797163bca45ece7c3dd73dae3698ee",
             SHAUtil.sha(source, SHAUtil.SHA512));

AESUtil

方法	摘要
String aes(String content, String password, int type)	加密／解密

单元测试：

System.out.println("aes");
// aes 字符串加密解密测试
String source = "GcsSloop中文";
String key = "1234567890123456";
System.out.println("原数据 = " + source);
String aesStr = AESUtil.aes(source, key, Cipher.ENCRYPT_MODE);
System.out.println("加密后 = " + aesStr);
String result = AESUtil.aes(aesStr, key, Cipher.DECRYPT_MODE);
System.out.println("解密后 = " + result);
assertEquals(source, result);

DESUtil

方法	摘要
String des(String content, String password, int type)	加密／解密

单元测试：

System.out.println("des");
// des 字符串加密解密测试
String source = "GcsSloop中文";
String key = "1234567890123456";
System.out.println("原数据 = " + source);
String aesStr = DESUtil.des(source, key, Cipher.ENCRYPT_MODE);
System.out.println("加密后 = " + aesStr);
String result = DESUtil.des(aesStr, key, Cipher.DECRYPT_MODE);
System.out.println("解密后 = " + result);
assertEquals(source, result);

RSAUtil

方法	摘要
Map<String, Object> getKeyPair()	随机获取密钥(公钥和私钥), 客户端公钥加密，服务器私钥解密
String getKey(Map<String, Object> keyMap, boolean isPublicKey)	获取公钥/私钥(true：获取公钥，false：获取私钥)
String sign(byte[] data, String privateKey)	获取数字签名
boolean verify(byte[] data, String publicKey, String sign)	数字签名校验
byte[] rsa(byte[] data, String string, int type)	Rsa加密/解密（一般情况下，公钥加密私钥解密）

单元测试：

System.out.println("rsa");
// des 字符串加密解密测试
byte[] data = "GcsSloop中文".getBytes();

// 密钥与数字签名获取
Map<String, Object> keyMap = RSAUtil.getKeyPair();
String publicKey = RSAUtil.getKey(keyMap, true);
System.out.println("rsa获取公钥： " + publicKey);
String privateKey = RSAUtil.getKey(keyMap, false);
System.out.println("rsa获取私钥： " + privateKey);

// 公钥加密私钥解密
byte[] rsaPublic =
        RSAUtil.rsa(data, publicKey, RSAUtil.RSA_PUBLIC_ENCRYPT);
System.out.println("rsa公钥加密： " + new String(rsaPublic));
System.out.println("rsa私钥解密： " + new String(
        RSAUtil.rsa(rsaPublic, privateKey, RSAUtil.RSA_PRIVATE_DECRYPT)));

// 私钥加密公钥解密
byte[] rsaPrivate =
        RSAUtil.rsa(data, privateKey, RSAUtil.RSA_PRIVATE_ENCRYPT);
System.out.println("rsa私钥加密： " + new String(rsaPrivate));
System.out.println("rsa公钥解密： " + new String(
        RSAUtil.rsa(rsaPrivate, publicKey, RSAUtil.RSA_PUBLIC_DECRYPT)));

// 私钥签名及公钥签名校验
String signStr = RSAUtil.sign(rsaPrivate, privateKey);
System.out.println("rsa数字签名生成： " + signStr);
System.out.println("rsa数字签名校验： " + RSAUtil.verify(rsaPrivate, publicKey, signStr));

添加方法

在你的项目根 build.gradle 中添加上远程仓库：

allprojects {
    repositories {
        jcenter()
        // 就是下面这一行
        maven { url "http://lib.gcssloop.com/repository/gcssloop-central/" }
    }
}

在需要引用的 module 添加具体依赖。

compile 'com.gcssloop.util:encrypt:1.0.0@aar'

版本信息

v1.0.0

添加基本的加密解密工具和辅助工具类。

base
- Base64
- BaseUtils
- CloseUtils
- CryptoProvider
- TextUtils
encode
- Base64Util
oneway
- MD5Util
- SHAUtil
symmetric
- AESUtil
- DESUtil
unsymmetric
- RSAUtil

备注

本工具库中大部分代码参考自一个聚合的加解密工具类但在测试过程中发现部分方法结果不正确，以及部分方法在Android升级过程中进行了修改，所以改进了一部分，特此制作一个工具库，如果发现有什么不准确的地方欢迎提交 Issues。

参考资料

一个聚合的加解密工具类

在线加密解密

Android数据加密之Aes加密

java.security.NoSuchProviderException: no such provider: Crypto

作者简介

作者微博: @GcsSloop

个人网站: http://www.gcssloop.com

版权信息

Copyright (c) 2017 GcsSloop

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

安卓自定义View进阶-手势检测(GestureDetector)

Sun, 09 Jul 2017 00:00:00 +0800

Android 手势检测，主要是 GestureDetector 相关内容的用法和注意事项，本文依旧属于事件处理这一体系，部分内容会涉及到之前文章提及过的知识点，如果你没看过之前的文章，可以到自定义 View 系列来查看这些内容。

在开发 Android 手机应用过程中，可能需要对一些手势作出响应，如：单击、双击、长按、滑动、缩放等。这些都是很常用的手势。就拿最简单的双击来说吧，假如我们需要判断一个控件是否被双击(即在较短的时间内快速的点击两次)，似乎是一个很容易的任务，但仔细考虑起来，要处理的细节问题也有不少，例如：

记录点击次数，为了判断是否被点击超过 1 次，所以必须记录点击次数。
记录点击时间，由于双击事件是较快速的点击两次，像点击一次后，过来几分钟再点击一次肯定不能算是双击事件，所以在记录点击次数的同时也要记录上一次的点击时间，我们可以设置本次点击距离上一次时间超过一定时间(例如：超过100ms)就不识别为双击事件。
点击状态重置，在响应双击事件，或者判断不是双击事件的时候要重置计数器和上一次点击时间。重置既可以在点击的时候判断并进行重新设置，也可以使用定时器等超过一定时间后重置状态。

这样看起来，判断一个双击事件就有这么多麻烦事情，更别其他的手势了，虽然这些看起来都很简单，但设计起来需要考虑的细节情况实在是太多了。

那么有没有一种更好的方法来方便的检测手势呢？当然有啦，因为这些手势很常用，系统早就封装了一些方法给我们用，接下来我们就看看它们是如何使用的。

GestureDetector

GestureDetector 可以使用 MotionEvents 检测各种手势和事件。GestureDetector.OnGestureListener 是一个回调方法，在发生特定的事件时会调用 Listener 中对应的方法回调。这个类只能用于检测触摸事件的 MotionEvent，不能用于轨迹球事件。
(话说轨迹球已经消失多长时间了，估计很多人都没见过轨迹球这种东西)。

如何使用：

创建一个 GestureDetector 实例。

在onTouchEvent（MotionEvent）方法中，确保调用 GestureDetector 实例的 onTouchEvent（MotionEvent）。回调中定义的方法将在事件发生时执行。

如果侦听 onContextClick（MotionEvent），则必须在 View 的 onGenericMotionEvent（MotionEvent）中调用 GestureDetector OnGenericMotionEvent（MotionEvent）。

GestureDetector 本身的方法比较少，使用起来也非常简单，下面让我们先看一下它的简单使用示例，分解开来大概需要三个步骤。

// 1.创建一个监听回调
SimpleOnGestureListener listener = new SimpleOnGestureListener() {
    @Override public boolean onDoubleTap(MotionEvent e) {
        Toast.makeText(MainActivity.this, "双击666", Toast.LENGTH_SHORT).show();
        return super.onDoubleTap(e);
    }
};

// 2.创建一个检测器
final GestureDetector detector = new GestureDetector(this, listener);

// 3.给监听器设置数据源
view.setOnTouchListener(new View.OnTouchListener() {
    @Override public boolean onTouch(View v, MotionEvent event) {
        return detector.onTouchEvent(event);
    }
});

接下来我们先了解一下 GestureDetector 里面都有哪些内容。

1. 构造函数

GestureDetector 一共有 5 种构造函数，但有 2 种被废弃了，1 种是重复的，所以我们只需要关注其中的 2 种构造函数即可，如下：

构造函数
GestureDetector(Context context, GestureDetector.OnGestureListener listener)
GestureDetector(Context context, GestureDetector.OnGestureListener listener, Handler handler)

第 1 种构造函数里面需要传递两个参数，上下文(Context) 和手势监听器(OnGestureListener)，这个很容易理解，就不再过多叙述，上面的例子中使用的就是这一种。

第 2 种构造函数则需要多传递一个 Handler 作为参数，这个有什么作用呢？其实作用也非常简单，这个 Handler 主要是为了给 GestureDetector 提供一个 Looper。

在通常情况下是不需这个 Handler 的，因为它会在内部自动创建一个 Handler 用于处理数据，如果你在主线程中创建 GestureDetector，那么它内部创建的 Handler 会自动获得主线程的 Looper，然而如果你在一个没有创建 Looper 的子线程中创建 GestureDetector 则需要传递一个带有 Looper 的 Handler 给它，否则就会因为无法获取到 Looper 导致创建失败。

第 2 种构造函数使用方式如下(下面是两种在子线程中创建 GestureDetector 的方法)：

// 方式一、在主线程创建 Handler
final Handler handler = new Handler();
new Thread(new Runnable() {
    @Override public void run() {
        final GestureDetector detector = new GestureDetector(MainActivity.this, new
                GestureDetector.SimpleOnGestureListener() , handler);
        // ... 省略其它代码 ...
    }
}).start();

// 方式二、在子线程创建 Handler，并且指定 Looper
new Thread(new Runnable() {
    @Override public void run() {
        final Handler handler = new Handler(Looper.getMainLooper());
        final GestureDetector detector = new GestureDetector(MainActivity.this, new
                GestureDetector.SimpleOnGestureListener() , handler);
        // ... 省略其它代码 ...
    }
}).start();

当然了，使用其它创建 Handler 的方式也是可以的，重点传递的 Handler 一定要有 Looper，敲黑板，重点是 Handler 中的 Looper。假如子线程准备了 Looper 那么可以直接使用第 1 种构造函数进行创建，如下：

new Thread(new Runnable() {
    @Override public void run() {
        Looper.prepare(); // <- 重点在这里
        final GestureDetector detector = new GestureDetector(MainActivity.this, new
                GestureDetector.SimpleOnGestureListener());
        // ... 省略其它代码 ...
    }
}).start();

2.手势监听器

既然是手势检测，自然要在对应的手势出现的时候通知调用者，最合适的自然是事件监听器模式。目前 GestureDetecotr 有四种监听器。

监听器	简介
OnContextClickListener	这个很容易让人联想到ContextMenu，然而它和ContextMenu并没有什么关系，它是在Android6.0(API 23)才添加的一个选项，是用于检测外部设备上的按钮是否按下的，例如蓝牙触控笔上的按钮，一般情况下，忽略即可。
OnDoubleTapListener	双击事件，有三个回调类型：双击(DoubleTap)、单击确认(SingleTapConfirmed) 和双击事件回调(DoubleTapEvent)
OnGestureListener	手势检测，主要有以下类型事件：按下(Down)、一扔(Fling)、长按(LongPress)、滚动(Scroll)、触摸反馈(ShowPress) 和单击抬起(SingleTapUp)
SimpleOnGestureListener	这个是上述三个接口的空实现，一般情况下使用这个比较多，也比较方便。

2.1 OnContextClickListener

由于 OnContextClickListener 主要是用于检测外部设备按钮的，关于它需要注意一点，如果侦听 onContextClick(MotionEvent)，则必须在 View 的 onGenericMotionEvent(MotionEvent)中调用 GestureDetector 的 OnGenericMotionEvent(MotionEvent)。

由于目前我们用到这个监听器的场景并不多，所以也就不展开介绍了，重点关注后面几个监听器。

2.2 OnDoubleTapListener

这个很明显就是用于检测双击事件的，它有三个回调接口，分别是 onDoubleTap、onDoubleTapEvent 和 onSingleTapConfirmed。

2.2.1 onDoubleTap 与 onSingleTapConfirmed

如果你只想监听双击事件，那么只用关注 onDoubleTap 就行了，如果你同时要监听单击事件则需要关注 onSingleTapConfirmed 这个回调函数。

有人可能会有疑问，监听单击事件为什么要使用 onSingleTapConfirmed，使用 OnClickListener 不行吗？从理论上是可行的，但是我并不推荐这样使用，主要有两个原因：
1.它们两个是存在一定冲突的，如果你看过事件分发机制详解就会知道，如果想要两者同时被触发，则 setOnTouchListener 不能消费事件，如果 onTouchListener 消费了事件，就可能导致 OnClick 无法正常触发。
2.需要同时监听单击和双击，则说明单击和双击后响应逻辑不同，然而使用 OnClickListener 会在双击事件发生时触发两次，这显然不是我们想要的结果。而使用 onSingleTapConfirmed 就不用考虑那么多了，你完全可以把它当成单击事件来看待，而且在双击事件发生时，onSingleTapConfirmed 不会被调用，这样就不会引发冲突。

如果你需要同时监听两种点击事件可以这样写：

GestureDetector detector = new GestureDetector(this, new GestureDetector
        .SimpleOnGestureListener() {
    @Override public boolean onSingleTapConfirmed(MotionEvent e) {
        Toast.makeText(MainActivity.this, "单击", Toast.LENGTH_SHORT).show();
        return false;
    }
    @Override public boolean onDoubleTap(MotionEvent e) {
        Toast.makeText(MainActivity.this, "双击", Toast.LENGTH_SHORT).show();
        return false;
    }
});

关于 onSingleTapConfirmed 原理也非常简单，这一个回调函数在单击事件发生后300ms后触发(注意，不是立即触发的)，只有在确定不会有后续的事件后，既当前事件肯定是单击事件才触发 onSingleTapConfirmed，所以在进行点击操作时，onDoubleTap 和 onSingleTapConfirmed 只会有一个被触发，也就不存在冲突了。

当然，如果你对事件分发机制非常了解的话，随便怎么用都行，条条大路通罗马，我这里只是推荐一种最简单而且不容易出错的实现方案。

2.2.2 onDoubleTapEvent

有些细心的小伙伴可能注意到还有一个 onDoubleTapEvent 回调函数，它是干什么的呢？它在双击事件确定发生时会对第二次按下产生的 MotionEvent 信息进行回调。

至于为什么要存在这样的回调，就要涉及到另一个比较细致的问题了，那就是 onDoubleTap 的触发时间，如果你在这些函数被调用时打印一条日志，那么你会看到这样的信息：

GCS-LOG: onDoubleTap
GCS-LOG: onDoubleTapEvent - down
GCS-LOG: onDoubleTapEvent - move
GCS-LOG: onDoubleTapEvent - move
GCS-LOG: onDoubleTapEvent - up

通过观察这些信息你会发现它们的调用顺序非常有趣，首先是 onDoubleTap 被触发，之后依次触发 onDoubleTapEvent 的 down、move、up 等信息，为什么说它们有趣呢？是因为这样的调用顺序会引发两种猜想，第一种猜想是 onDoubleTap 是在第二次手指抬起(up)后触发的，而 onDoubleTapEvent 是一种延时回调。第二种猜想则是 onDoubleTap 在第二次手指按下(dowm)时触发，onDoubleTapEvent 是一种实时回调。

通过测试和观察源码发现第二种猜想是正确的，因为第二次按下手指时，即便不抬起也会触发 onDoubleTap 和 onDoubleTapEvent 的 down，而且源码中逻辑也表明 onDoubleTapEvent 是一种实时回调。

这就引发了另一个问题，双击的触发时间，虽然这是一个细微到很难让人注意到的问题，假如说我们想要在第二次按下抬起后才判定这是一个双击操作，触发后续的内容，则不能使用 onDoubleTap 了，需要使用 onDoubleTapEvent 来进行更细微的控制，如下：

final GestureDetector detector = new GestureDetector(MainActivity.this, new GestureDetector.SimpleOnGestureListener() {
    @Override public boolean onDoubleTap(MotionEvent e) {
        Logger.e("第二次按下时触发");
        return super.onDoubleTap(e);
    }

    @Override public boolean onDoubleTapEvent(MotionEvent e) {
        switch (e.getActionMasked()) {
            case MotionEvent.ACTION_UP:
                Logger.e("第二次抬起时触发");
                break;
        }
        return super.onDoubleTapEvent(e);
    }
});

如果你不需要控制这么细微的话，忽略即可(Logger 是我自己封装的日志库，忽略即可)。

2.3 OnGestureListener

这个是手势检测中较为核心的一个部分了，主要检测以下类型事件：按下(Down)、一扔(Fling)、长按(LongPress)、滚动(Scroll)、触摸反馈(ShowPress) 和单击抬起(SingleTapUp)。

2.3.1 onDown

@Override public boolean onDown(MotionEvent e) {
    return true;
}

看过前面的文章应该知道，down 在事件分发体系中是一个较为特殊的事件，为了保证事件被唯一的 View 消费，哪个 View 消费了 down 事件，后续的内容就会传递给该 View。如果我们想让一个 View 能够接收到事件，有两种做法：

1、让该 View 可以点击，因为可点击状态会默认消费 down 事件。

2、手动消费掉 down 事件。

由于图片、文本等一些控件默认是不可点击的，所以我们要么声明它们的 clickable 为 true，要么在发生 down 事件是返回 true。所以 onDown 在这里的作用就很明显了，就是为了保证让该控件能拥有消费事件的能力，以接受后续的事件。

2.3.2 onFling

Fling 中文直接翻译过来就是一扔、抛、甩，最常见的场景就是在 ListView 或者 RecyclerView 上快速滑动时手指抬起后它还会滚动一段时间才会停止。onFling 就是检测这种手势的。

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float
        velocityY) {
    return super.onFling(e1, e2, velocityX, velocityY);
}

在 onFling 的回调中共有四个参数，分别是：

参数	简介
e1	手指按下时的 Event。
e2	手指抬起时的 Event。
velocityX	在 X 轴上的运动速度(像素／秒)。
velocityY	在 Y 轴上的运动速度(像素／秒)。

我们可以通过 e1 和 e2 获取到手指按下和抬起时的坐标、时间等相关信息，通过 velocityX 和 velocityY 获取到在这段时间内的运动速度，单位是像素／秒(即 1 秒内滑动的像素距离)。

这个我们自己用到的地方比较少，但是也可以帮助我们简单的做出一些有趣的效果，例如下面的这种弹球效果，会根据滑动的力度和方向产生不同的弹跳效果。

其实这种原理非常简单，简化之后如下：

记录 velocityX 和 velocityY 作为初始速度，之后不断让速度衰减，直至为零。
根据速度和当前小球的位置计算一段时间后的位置，并在该位置重新绘制小球。
判断小球边缘是否碰触控件边界，如果碰触了边界则让速度反向。

根据这三条基本的逻辑就可以做出比较像的弹球效果，具体的Demo可以看这里。

2.3.3 onLongPress

这个是检测长按事件的，即手指按下后不抬起，在一段时间后会触发该事件。

@Override 
public void onLongPress(MotionEvent e) {
}

2.3.4 onScroll

onScroll 就是监听滚动事件的，它看起来和 onFling 比较像，不同的是，onSrcoll 后两个参数不是速度，而是滚动的距离。

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float 
        distanceY) {
    return super.onScroll(e1, e2, distanceX, distanceY);
}

参数
e1	手指按下时的Event
e2	手指抬起时的Event
distanceX	在 X 轴上划过的距离
distanceY	在 Y 轴上划过的距离

2.3.5 onShowPress

它是用户按下时的一种回调，主要作用是给用户提供一种视觉反馈，可以在监听到这种事件时可以让控件换一种颜色，或者产生一些变化，告诉用户他的动作已经被识别。

不过这个消息和 onSingleTapConfirmed 类似，也是一种延时回调，延迟时间是 180 ms，假如用户手指按下后立即抬起或者事件立即被拦截，时间没有超过 180 ms的话，这条消息会被 remove 掉，也就不会触发这个回调。

@Override 
public void onShowPress(MotionEvent e) {
}

2.3.6 onSingleTapUp

@Override 
public boolean onSingleTapUp(MotionEvent e) {
    return super.onSingleTapUp(e);
}

这个也很容易理解，就是用户单击抬起时的回调，但是它和上面的 onSingleTapConfirmed 之间有何不同呢？和 onClick 又有何不同呢？

单击事件触发：

GCS: onSingleTapUp
GCS: onClick
GCS: onSingleTapConfirmed

类型	触发次数	摘要
onSingleTapUp	1	单击抬起
onSingleTapConfirmed	1	单击确认
onClick	1	单击事件

双击事件触发：

GCS: onSingleTapUp
GCS: onClick
GCS: onDoubleTap // <- 双击
GCS: onClick

类型	触发次数	摘要
onSingleTapUp	1	在双击的第一次抬起时触发
onSingleTapConfirmed	0	双击发生时不会触发。
onClick	2	在双击事件时触发两次。

可以看出来这三个事件还是有所不同的，根据自己实际需要进行使用即可

2.4 SimpleOnGestureListener

这个里面并没有什么内容，只是对上面三种 Listener 的空实现，在上面的例子中使用的基本都是这监听器。因为它用起来更方便一点。

这主要是 GestureDetector 构造函数的设计问题，以只监听 OnDoubleTapListener 为例，如果想要使用 OnDoubleTapListener 接口则需要这样进行设置：

GestureDetector detector = new GestureDetector(this, new GestureDetector
        .SimpleOnGestureListener());
detector.setOnDoubleTapListener(new GestureDetector.OnDoubleTapListener() {
    @Override public boolean onSingleTapConfirmed(MotionEvent e) {
        Toast.makeText(MainActivity.this, "单击确认", Toast.LENGTH_SHORT).show();
        return false;
    }

    @Override public boolean onDoubleTap(MotionEvent e) {
        Toast.makeText(MainActivity.this, "双击", Toast.LENGTH_SHORT).show();
        return false;
    }

    @Override public boolean onDoubleTapEvent(MotionEvent e) {
        // Toast.makeText(MainActivity.this,"",Toast.LENGTH_SHORT).show();
        return false;
    }
});

既然都已经创建 SimpleOnGestureListener 了，再创建一个 OnDoubleTapListener 显然十分浪费，如果构造函数不使用 SimpleOnGestureListener，而是使用 OnGestureListener 的话，会多出几个无用的空实现，显然很浪费，所以在一般情况下，老老实实的使用 SimpleOnGestureListener 就好了。

3. 相关方法

除了各类监听器之外，与 GestureDetector 相关的方法其实并不多，只有几个，下面来简单介绍一下。

方法	摘要
setIsLongpressEnabled	通过布尔值设置是否允许触发长按事件，true 表示允许，false 表示不允许。
isLongpressEnabled	判断当前是否允许触发长按事件，true 表示允许，false 表示不允许。
onTouchEvent	这个是其中一个重要的方法，在最开始已经演示过使用方式了。
onGenericMotionEvent	这个是在 API 23 之后才添加的内容，主要是为 OnContextClickListener 服务的，暂时不用关注。
setContextClickListener	设置 ContextClickListener 。
setOnDoubleTapListener	设置 OnDoubleTapListener 。

结语

关于手势检测部分的 GestureDetector 相关内容基本就这么多了，其实手势检测还有一个 ScaleGestureDetector 也是为手势检测服务的，限于篇幅，本次就讲这么多吧。

其实手势检测辅助类 GestureDetector 本身并不是很复杂，带上注释等内容才不到1000行，感兴趣的可以自己研究一下实现方式。

About Me

作者微博: @GcsSloop

参考资料

文档 · GestureDetector
源码 · GestureDetector

安卓自定义View进阶-多点触控详解

Mon, 16 Jan 2017 00:00:00 +0800

Android 多点触控详解，在前面的几篇文章中我们大致了解了 Android 中的事件处理流程和一些简单的处理方案，本次带大家了解 Android 多点触控相关的一些知识。

多点触控 ( Multitouch，也称 Multi-touch )，即同时接受屏幕上多个点的人机交互操作，多点触控是从 Android 2.0 开始引入的功能，在 Android 2.2 时对这一部分进行了重新设计。

在本文开始之前，先回顾一下 MotionEvent详解中提到过的内容：

Android 将所有的事件都封装进了 Motionvent 中。
我们可以通过复写 onTouchEvent 或者设置 OnTouchListener 来获取 View 的事件。
多点触控获取事件类型请使用 getActionMasked() 。
追踪事件流请使用 PointId。

多点触控相关的事件：

事件	简介
ACTION_DOWN	第一个手指初次接触到屏幕时触发。
ACTION_MOVE	手指在屏幕上滑动时触发，会多次触发。
ACTION_UP	最后一个手指离开屏幕时触发。
ACTION_POINTER_DOWN	有非主要的手指按下(即按下之前已经有手指在屏幕上)。
ACTION_POINTER_UP	有非主要的手指抬起(即抬起之后仍然有手指在屏幕上)。
以下事件类型不推荐使用	－－－以下事件在 2.2 版本以上被标记为废弃－－－
~~ACTION_POINTER_1_DOWN~~	第 2 个手指按下，已废弃，不推荐使用。
~~ACTION_POINTER_2_DOWN~~	第 3 个手指按下，已废弃，不推荐使用。
~~ACTION_POINTER_3_DOWN~~	第 4 个手指按下，已废弃，不推荐使用。
~~ACTION_POINTER_1_UP~~	第 2 个手指抬起，已废弃，不推荐使用。
~~ACTION_POINTER_2_UP~~	第 3 个手指抬起，已废弃，不推荐使用。
~~ACTION_POINTER_3_UP~~	第 4 个手指抬起，已废弃，不推荐使用。

多点触控相关的方法：

方法	简介
getActionMasked()	与 `getAction()` 类似，多点触控需要使用这个方法获取事件类型。
getActionIndex()	获取该事件是哪个指针(手指)产生的。
getPointerCount()	获取在屏幕上手指的个数。
getPointerId(int pointerIndex)	获取一个指针(手指)的唯一标识符ID，在手指按下和抬起之间ID始终不变。
findPointerIndex(int pointerId)	通过PointerId获取到当前状态下PointIndex，之后通过PointIndex获取其他内容。
getX(int pointerIndex)	获取某一个指针(手指)的X坐标
getY(int pointerIndex)	获取某一个指针(手指)的Y坐标

回顾完毕，开始正文。

一、多点触控相关问题

在引入多点触控之前，事件的类型很少，基本事件类型只有按下(down)、移动(move) 和抬起(up)，即便加上那些特殊的事件类型也只有几种而已，所以我们可以用几个常量来标记这些事件，在使用的时候使用 getAction() 方法来获取具体的事件，之后和这些常量进行对比就行了。

在 Android 2.0 版本的时候，开始引入多点触控技术，由于技术上并不成熟，硬件和驱动也跟不上，多数设备只能支持追踪两三个点而已，因此在设计 API 上采取了一种简单粗暴的方案，添加了几个常量用于多点触控的事件类型的判断。

事件	简介
ACTION_POINTER_1_DOWN	第 2 个手指按下，已废弃，不推荐使用。
ACTION_POINTER_2_DOWN	第 3 个手指按下，已废弃，不推荐使用。
ACTION_POINTER_3_DOWN	第 4 个手指按下，已废弃，不推荐使用。
ACTION_POINTER_1_UP	第 2 个手指抬起，已废弃，不推荐使用。
ACTION_POINTER_2_UP	第 3 个手指抬起，已废弃，不推荐使用。
ACTION_POINTER_3_UP	第 4 个手指抬起，已废弃，不推荐使用。

这些事件类型是用来判断非主要手指(第一个按下的称为主要手指)的按下和抬起，使用起来大概是这样子：

switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:           break;
    case MotionEvent.ACTION_UP:             break;
    case MotionEvent.ACTION_MOVE:           break;
    case MotionEvent.ACTION_POINTER_1_DOWN: break;
    case MotionEvent.ACTION_POINTER_2_DOWN: break;
    case MotionEvent.ACTION_POINTER_3_DOWN: break;
    case MotionEvent.ACTION_POINTER_1_UP:   break;
    case MotionEvent.ACTION_POINTER_2_UP:   break;
    case MotionEvent.ACTION_POINTER_3_UP:   break;
}

看到这里可能会产生以下的一些疑问？

1.为什么没有 ACTION_POINTER_X_MOVE ?

在多指触控中所有的移动事件都是使用 ACTION_MOVE，并没有追踪某一个手指的 move 事件类型，个人猜测主要是因为：很难无歧义的实现单独追踪每一个手指。

要理解这个，首先要明白设备是如何识别多点触控的，设备没有眼睛，不能像我们人一样看到有几个手指(或者触控笔)在屏幕上。
目前大多数 Android 设备都是电容屏，它们感知触摸是利用手指(触控笔)与屏幕接触产生的微小电流变化，之后通过计算这些电流变化来得出具体的触摸位置，在多点触控中，当两个触摸点足够靠近时，设备实际上是无法分清这两个点的。因此当两个触摸点靠近(重合)后再分开，设备很可能就无法正确的追踪两个点了，所以也很难实现无歧义的追踪每一个点。

并且从软件上来说，事件的编号产生和复用也是一个大问题，例如下面的场景：

事件	手指数量	编号变化
一个手指按下(命名为A)	1	A手指的编号为0，id为0
一个手指按下(命名为B)	2	B手指的编号为1，id为1
A手指抬起	1	B手指编号变更为0，id不变为1
一个手指按下(命名为C)	2	C手指编号为0，id为0，B手指编号为1，id为1

注意观察上面编号和id的变化，有两个问题，1、B手指的编号变化了。2、A手指和C手指id是相同的(A手指抬起后，C手指按下替代了A手指)。所以这就引出了一个问题：如果存在 ACTION_POINTER_X_MOVE，那么X应该用什么标志呢？编号会变化，id虽然不会变化，但id会被复用，例如A手指抬起后C手指按下，C手指复用了A手指的id。所以不论使用哪一个都不能保证唯一性。

当然了，解决问题最好的方式就是把问题抛出去，既然从硬件和软件上都不能保证唯一性和不变性，就不做区分了，因此所有的 move 事件都是 ACTION_MOVE, 具体是哪个手指产生的 move 用户可以结合其他事件(按下和抬起)来综合判断。

2.超过4个手指怎么办？

2.0 兼容版，在2.2 之前的设计中，其提供的常量最多能判断四个手指的抬起和落下，当超过四个手指时怎么办呢？

由于在 2.2 版本之前，由于没有 getActionMasked 方法，我们可以自己自己手动进行计算，例如下面这样：

String TAG = "Gcs";

int action = event.getAction() & MotionEvent.ACTION_MASK;
int index = (event.getAction() & MotionEvent.ACTION_POINTER_INDEX_MASK)
        >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;

switch (action) {
    case MotionEvent.ACTION_DOWN:
        Log.e(TAG,"第1个手指按下");
        break;
    case MotionEvent.ACTION_UP:
        Log.e(TAG,"最后1个手指抬起");
        break;
    case MotionEvent.ACTION_POINTER_1_DOWN: // 此时相当于 ACTION_POINTER_DOWN
        Log.e(TAG,"第"+(index+1)+"个手指按下");
        break;
    case MotionEvent.ACTION_POINTER_1_UP:   // 此时相当于 ACTION_POINTER_UP
        Log.e(TAG,"第"+(index+1)+"个手指抬起");
        break;
}

在上面的例子中有几点比较关键：

2.1、action 与 Index 的获得

我们在 MotionEvent详解中了解过，Android中的事件一般用最后8位来表示事件类型，再往前8位来表示Index。

例如多指触控的按下事件，其事件类型是 0x00000005，其Index标志位是 0x00000005，随着更多的手指按下，其中变化的部分是 Index 标志位，最后两位是始终不变的，所以我们只要能将这两个分离开就行了。

取得事件类型(action)

// 获取事件类型
int action = event.getAction() & MotionEvent.ACTION_MASK;

这个非常简单，ACTION_MASK=0x000000ff，与 getAction() 进行按位与操作后保留最后8位内容(十六进制每一个字符转化为二进制是4位)。

例如：
0x00000105 & 0x000000ff = 0x00000005

取得事件索引(index)

// 获取index编号
int index = (event.getAction() & MotionEvent.ACTION_POINTER_INDEX_MASK)
        >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;

ACTION_POINTER_INDEX_MASK = 0x0000ff00
ACTION_POINTER_INDEX_SHIFT = 8
首先让 getAction() 与 ACTION_POINTER_INDEX_MASK 按位与之后，只保留 Index 那8位，之后再右移8位，最终就拿到了 Index 的真实数值。

例如：
0x00000105 & 0x0000ff00 = 0x00000100
0x00000100 » 8 = 0x00000001

2.2、用 ACTION_POINTER_1_DOWN 代替 ACTION_POINTER_DOWN

这是因为在 2.0 版本的时候还没有 ACTION_POINTER_DOWN 的这个常量，但是它们两个点数值是相同的，都是 0x00000005，这个你可以查看官方文档或者源码，甚至你直接写 case 0x00000005 也行，抬起也是同理。

2.3、只考虑兼容 2.2 以上的版本

当然了，如果你不需要兼容 2.0 版本，只需要兼容到 2.2 以上的话就很简单了，像下面这样：

String TAG = "Gcs";

int index = event.getActionIndex();

switch (event.getActionMasked()) {
    case MotionEvent.ACTION_DOWN:
        Log.e(TAG,"第1个手指按下");
        break;
    case MotionEvent.ACTION_UP:
        Log.e(TAG,"最后1个手指抬起");
        break;
    case MotionEvent.ACTION_POINTER_DOWN:
        Log.e(TAG,"第"+(index+1)+"个手指按下");
        break;
    case MotionEvent.ACTION_POINTER_UP:
        Log.e(TAG,"第"+(index+1)+"个手指抬起");
        break;
}

3. index 和 pointId 的变化规则

在 2.2 版本以上，我们可以通过 getActionIndex() 轻松获取到事件的索引(Index)，但是这个事件索引的变化还是有点意思的，Index 变化有以下几个特点：

1、从 0 开始，自动增长。
2、如果之前落下的手指抬起，后面手指的 Index 会随之减小。
3、Index 变化趋向于第一次落下的数值(落下手指时，前面有空缺会优先填补空缺)。
4、对 move 事件无效。

下面我们逐条解释一下具体含义。

3.1、从 0 开始，自动增长。

这一条非常简单，也很容易理解，而且在 MotionEvent详解中讲解 getAction() 与 getActionMasked() 也简单说过。

手指按下	触发事件(数值)
第1个手指按下	ACTION_DOWN (0x00000000)
第2个手指按下	ACTION_POINTER_DOWN (0x00000105)
第3个手指按下	ACTION_POINTER_DOWN (0x00000205)
第4个手指按下	ACTION_POINTER_DOWN (0x00000305)

注意加粗的位置，数值随着手指按下而不断变大。

3.2、如果之前落下的手指抬起，后面手指的 Index 会随之减小。

这个也比较容易理解，像下面这样：

手指按下	触发事件(数值)
第1个手指按下	ACTION_DOWN (0x00000000)
第2个手指按下	ACTION_POINTER_DOWN (0x00000105)
第3个手指按下	ACTION_POINTER_DOWN (0x00000205)
第2个手指抬起	ACTION_POINTER_UP (0x00000106)
第3个手指抬起	ACTION_POINTER_UP (0x00000106)

注意最后两次触发的事件，它的 Index 都是 1，这样也比较容易解释，当原本的第 2 个手指抬起后，屏幕上就只剩下两个手指了，之前的第 3 个手指就变成了第 2 个，于是抬起时触发事件的 Index 为 1，即之前落下的手指抬起，后面手指的 Index 会随之减小。

3.3、Index 变化趋向于第一次落下的数值(落下手指时，前面有空缺会优先填补空缺)。

这个就有点神奇了，通过上一条规则，我们知道，某一个手指的 Index 可能会随着其他手指的抬起而变小，这次我们用 4 个手指测试一下 Index 的变化趋势。

手指按下	触发事件(数值)
第1个手指按下	ACTION_DOWN (0x00000000)
第2个手指按下	ACTION_POINTER_DOWN (0x00000105)
第3个手指按下	ACTION_POINTER_DOWN (0x00000205)
第2个手指抬起	ACTION_POINTER_UP (0x00000106)
~~第3个手指抬起~~	~~ACTION_POINTER_UP~~ ~~(0x00000106)~~
第4个手指按下	ACTION_POINTER_DOWN (0x00000105)
第3个手指抬起	ACTION_POINTER_UP (0x00000206)

这个要和上一个对比这看，重点观察第 3 个手指所触发事件区别，在上一个示例中，随着第 2 个手指的抬起，第 3 个手指变化为第 2(01) 个，所以抬起时触发的是第 2 根手指的抬起事件(删除线部分)。

但是，如果第 2 个手指抬起后，落在屏幕上另外一个手指会怎样？经过测试，发现另外落下的手指会替代之前第 2 个手指的位置，系统判定为 2(01)，而不是顺延下去变成 3(02)，并且原本第3个手指的index变为原来数值(02)，但是如果继续落下其他的手指，数值则会顺延。

即手指抬起时的 Index 会趋向于和按下时相同，虽然在手指数量不足时，Index 会变小，但是当手指变多时，Index 会趋向于保持和按下时一样。

PS：由于程序是从0开始计数的，所以 0 就是 1， 1 就是 2 …

3.4、对 move 事件无效。

这个也比较容易理解，我们所取得的 Index 属性实际上是从事件上分离下来的，但是 move 事件始终为 0x00000002，也就是说，在 move 时不论你移动哪个手指，使用 getActionIndex() 获取到的始终是数值 0。

既然 move 事件无法用事件索引(Index)区别，那么该如何区分 move 是那个手指发出的呢？这就要用到 pointId 了，pointId 和 index 最大的区别就是 pointId 是不变的，始终为第一次落下时生成的数值，不会受到其他手指抬起和落下的影响。

3.5、pointId 与 index 的异同。

相同点	不同点
1. 从 0 开始，自动增长。 2. 落下手指时优先填补空缺(填补之前抬起手指的编号)。	1. Index 会变化，pointId 始终不变。

4. Move 相关事件

4.1 actionIndex 与 pointerIndex

在 move 中无法取得 actionIndex 的，我们需要使用 pointerIndex 来获取更多的信息，例如某个手指的坐标：

getX(int pointerIndex)
getY(int pointerIndex)

但是这个 pointerIndex 又是什么呢？和 actionIndex 有区别么？

实际上这个 pointerIndex 和 actionIndex 区别并不大，两者的数值是相同的，你可以认为 pointerIndex 是特地为 move 事件准备的 actionIndex。

4.2 pointerIndex 与 pointerId

类型	简介
pointerIndex	用于获取具体事件，可能会随着其他手指的抬起和落下而变化
pointerId	用于识别手指，手指按下时产生，手指抬起时回收，期间始终不变

这两个数值使用以下两个方法相互转换。

方法	简介
getPointerId(int pointerIndex)	获取一个指针(手指)的唯一标识符ID，在手指按下和抬起之间ID始终不变。
findPointerIndex(int pointerId)	通过 pointerId 获取到当前状态下 pointIndex，之后通过 pointIndex 获取其他内容。

通常情况下，pointerIndex 和 pointerId 是相同的，但也可能会因为某些手指的抬起而变得不同。

4.3 遍历多点触控

先来一个简单的，遍历出多个手指的 move 事件：

String TAG = "Gcs";
switch (event.getActionMasked()) {
    case MotionEvent.ACTION_MOVE:
        for (int i = 0; i < event.getPointerCount(); i++) {
            Log.i("TAG", "pointerIndex="+i+", pointerId="+event.getPointerId(i));
          	// TODO
        }
}

通过遍历 pointerCount 获取到所有的 pointerIndex，同时通过 pointerIndex 来获取 pointerId，可以通过不同手指抬起和按下后移动来观察 pointerIndex 和 pointerId 的变化。

4.4 在多点触控中追踪单个手指

要实现追踪单个手指还是有些麻烦的，需要同时使用上 actionIndex， pointerId 和 pointerIndex，例如，我们只追踪第2个手指，并画出其位置：

/**
 * 绘制出第二个手指第位置
 */
public class MultiTouchTest extends CustomView {
    String TAG = "Gcs";

    // 用于判断第2个手指是否存在
    boolean haveSecondPoint = false;

    // 记录第2个手指第位置
    PointF point = new PointF(0, 0);

    public MultiTouchTest(Context context) {
        this(context, null);
    }

    public MultiTouchTest(Context context, AttributeSet attrs) {
        super(context, attrs);

        mDeafultPaint.setAntiAlias(true);
        mDeafultPaint.setTextAlign(Paint.Align.CENTER);
        mDeafultPaint.setTextSize(30);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int index = event.getActionIndex();

        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_POINTER_DOWN:
                // 判断是否是第2个手指按下
                if (event.getPointerId(index) == 1){
                    haveSecondPoint = true;
                    point.set(event.getY(), event.getX());
                }
                break;
            case MotionEvent.ACTION_POINTER_UP:
                // 判断抬起的手指是否是第2个
                if (event.getPointerId(index) == 1){
                    haveSecondPoint = false;
                    point.set(0, 0);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (haveSecondPoint) {
                    // 通过 pointerId 来获取 pointerIndex
                    int pointerIndex = event.findPointerIndex(1);
                    // 通过 pointerIndex 来取出对应的坐标
                    point.set(event.getX(pointerIndex), event.getY(pointerIndex));
                }
                break;
        }

        invalidate();   // 刷新

        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();
        canvas.translate(mViewWidth/2, mViewHeight/2);
        canvas.drawText("追踪第2个按下手指的位置", 0, 0, mDeafultPaint);
        canvas.restore();

        // 如果屏幕上有第2个手指则绘制出来其位置
        if (haveSecondPoint) {
            canvas.drawCircle(point.x, point.y, 50, mDeafultPaint);
        }
    }
}

这段代码也非常短，其核心就是通过判断数值为 1 的 pointerId 是否存在，如果存在就在 move 的时候取出其坐标，并绘制出来。

虽然逻辑简单，但个人感觉写起来还是有些麻烦，如果有更简单的方案欢迎告诉我。

二、如何使用多点触控

多点触控应用还是比较广泛的，至少目前大部分的图片查看都需要用到多点触控技术(用于拖动和缩放图片)。

但是在某些看似不需要多触控的地方也需要对多点触控进行判断，只要是多点触控可能引起错误的地方都应该加上多点触控的判断。例如使用到 move 事件的时候，由于 move 事件可能由多个手指同时触发，所以可能会出现同时被多个手指控制的情况，如果不适当的处理，这个 move 就可能由任何一个手指触发。

举一个简单的例子：

如果我们需要一个可以用单指拖动的图片。假如我们不进行多指触控的判断，像下面这样：

没有针对多指触控处理版本：

/**
 * 一个可以拖图片动的 View
 */
public class DragView1 extends CustomView {
    String TAG = "Gcs";

    Bitmap mBitmap;         // 图片
    RectF mBitmapRectF;     // 图片所在区域
    Matrix mBitmapMatrix;   // 控制图片的 matrix

    boolean canDrag = false;
    PointF lastPoint = new PointF(0, 0);

    public DragView1(Context context) {
        this(context, null);
    }

    public DragView1(Context context, AttributeSet attrs) {
        super(context, attrs);

      	// 调整图片大小
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.outWidth = 960/2;
        options.outHeight = 800/2;

        mBitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.drag_test, options);
        mBitmapRectF = new RectF(0,0,mBitmap.getWidth(), mBitmap.getHeight());
        mBitmapMatrix = new Matrix();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                // 判断按下位置是否包含在图片区域内
                if (mBitmapRectF.contains((int)event.getX(), (int)event.getY())){
                    canDrag = true;
                    lastPoint.set(event.getX(), event.getY());
             }
                break;
            case MotionEvent.ACTION_UP:
                canDrag = false;
            case MotionEvent.ACTION_MOVE:
                if (canDrag) {
                    // 移动图片
                    mBitmapMatrix.postTranslate(event.getX() - lastPoint.x, event.getY() - lastPoint.y);
                    // 更新上一次点位置
                    lastPoint.set(event.getX(), event.getY());

                    // 更新图片区域
                    mBitmapRectF = new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight());
                    mBitmapMatrix.mapRect(mBitmapRectF);

                    invalidate();
                }
                break;
        }

        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBitmap, mBitmapMatrix, mDeafultPaint);
    }
}

这个版本非常简单，当然了，如果正常使用(只使用一个手指)的话也不会出问题，但是当使用多个手指，且有抬起和按下的时候就可能出问题，下面用一个典型的场景演示一下：

注意在第二个手指按下，第一个手指抬起时，此时原本的第二个手指会被识别为第一个，所以图片会直接跳动到第二个手指位置。

为了不出现这种情况，我们可以判断一下 pointId 并且只获取第一个手指的数据，这样就能避免这种情况发生了，如下。

针对多指触控处理后版本：

/**
 * 一个可以拖图片动的 View
 */
public class DragView extends CustomView {
    String TAG = "Gcs";

    Bitmap mBitmap;         // 图片
    RectF mBitmapRectF;     // 图片所在区域
    Matrix mBitmapMatrix;   // 控制图片的 matrix

    boolean canDrag = false;
    PointF lastPoint = new PointF(0, 0);

    public DragView(Context context) {
        this(context, null);
    }

    public DragView(Context context, AttributeSet attrs) {
        super(context, attrs);

        BitmapFactory.Options options = new BitmapFactory.Options();
        options.outWidth = 960/2;
        options.outHeight = 800/2;

        mBitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.drag_test, options);
        mBitmapRectF = new RectF(0,0,mBitmap.getWidth(), mBitmap.getHeight());
        mBitmapMatrix = new Matrix();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_POINTER_DOWN:
                // ▼ 判断是否是第一个手指 && 是否包含在图片区域内
                if (event.getPointerId(event.getActionIndex()) == 0 && mBitmapRectF.contains((int)event.getX(), (int)event.getY())){
                    canDrag = true;
                    lastPoint.set(event.getX(), event.getY());
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                // ▼ 判断是否是第一个手指
                if (event.getPointerId(event.getActionIndex()) == 0){
                    canDrag = false;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                // 如果存在第一个手指，且这个手指的落点在图片区域内
                if (canDrag) {
                    // ▼ 注意 getX 和 getY
                    int index = event.findPointerIndex(0);
                    // Log.i(TAG, "index="+index);
                    mBitmapMatrix.postTranslate(event.getX(index)-lastPoint.x, event.getY(index)-lastPoint.y);
                    lastPoint.set(event.getX(index), event.getY(index));

                    mBitmapRectF = new RectF(0,0,mBitmap.getWidth(), mBitmap.getHeight());
                    mBitmapMatrix.mapRect(mBitmapRectF);

                    invalidate();
                }
                break;
        }

        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBitmap, mBitmapMatrix, mDeafultPaint);
    }
}

可以看到，比起上一个版本，只添加了少量代码，就变得更加“智能”了，可以准确识别某一个手指，不会因为手指抬起而认错手指。

重点注意最后，第一个手指抬起之后，图片并没有跳跃到第二个手指的位置。

上面的两个对比示例都精简到了极致，其核心依旧是正确的追踪某一个手指，建议大家自己写一遍体会一下。

我感觉很多人看到这里依旧是不明所以的，一些简单的东西还好弄，但是复杂一些，如同时处理多个手指的数值就有些困难了，假如说你之前没有接触过多点触控的处理，此时让你实现用两个手指来缩放图片还是有些困难的。

因为这不仅要追踪两个手指的位置，还要根据位置变化来计算缩放比例和缩放中心，单单这两个非常简单的数学问题就能难倒一大批人。

当然了，很多麻烦问题都有简单的解决方案，假如说我们真的要实现一个可以用两个或者多个手指缩放的控件，何必要自己算呢，可以尝试一下 Android 自带的解决方案：手势检测(GestureDetector、ScaleGestureDecetor)，不仅能自动帮你计算好缩放比例和缩放中心，而且还可以检测出单击、长按、滑屏等不同的手势，不过这就不是本篇的事情了，以后有时间会写一下有关手势检测的用法(继续挖坑)。

三、总结

前段时间因为各种事情比较忙，这篇文章也没时间去写，所以就一直拖到了现在，期间收到不少读者催更，实在是抱歉了。今后在会尽量保证稳定更新的，争取尽快把自定义View系列这一个大坑填完。 ˊ_>ˋ

关于多点触控，个人认为还算一个比较重要的知识点。尤其是随着 Android 的发展，很多炫酷的交互操作可能会需要用户进行拖拽操作。在进行这类操作的时候进行一下手指的判断还是相当重要的。

本文中需要注意的几个知识点：

如何兼容 2.0 版本的多点触控(目前大部分都不需要兼容 2.0 了吧)。
actionIndex、pointIndex 与 pointId 的区别和用法。
如何在多点触控中正确的追踪一个手指。

About Me

作者微博: @GcsSloop

参考资料

MotionEvent

Markdown实用技巧－编辑器(Typora)

Wed, 07 Dec 2016 00:00:00 +0800

本次的安利对象是一个 Markdown 编辑器，是会长¹见过的最简单，最优雅的编辑器，先来看一下它的界面吧：

它的界面非常简单，有多种主题可选，更重要的是它的预览界面和编辑界面是一体的，而不像其他编辑器那样是左右分开的。

从上面的示例中可以看出，其输入模式支持多种，不论是手动输入语法还是使用快捷键，都非常的流畅，实时看到效果变化，除此之外 Typora 还有很多优点。

Typora 的优点

预览和编辑界面一体。
强大的快捷键。
兼容常见扩展语法。
兼容 HTML (新版进行了完善)。
支持 YAML 格式。
支持公式编辑(LaTeX公式)。
表格和代码块编辑起来非常方便。
支持本地图片相对链接。
支持将本地图片拖进编辑页面。
支持多种导出格式(PDF，HTML，Word，LaTeX 等)。
有多种主题可选。

虽然上面的内容在其他编辑器上也可以见到，但做到这么完善的并不多，想要尝试的小伙伴赶紧来试试吧，相信你也会爱上它的。

点击这里进入 Typora 官网

既然 Typora 这么好，为什么不在一开始就推荐呢，这是因为在 Markdown 系列文章第一篇发布的时候，Typora 还有一些小瑕疵(HTML语法兼容部分)让会长不满意，所以只是放在了推荐首位，在最近更新了新版本之后，这一部分已经修复完善了，基本算是完美了，所以会长我才特地写一篇文章来推荐。

Typora 支持在 WIndows，Linux，和 Mac 上使用，如果你正在使用的是 Mac 的话，那么恭喜你，除了上述的优点，你可以用到一些 Mac 系统才有的福利。

版本回溯功能

这是 Mac 系统提供的一个小功能，使用 Mac 的时候你可能会注意到一个小细节，使用系统文本编辑器进行编辑文本的时候，从来不会提示你保存文本，即便编辑后不点保存立即退出里面的内容也不会丢失。你可能会觉得这不就是一个自动保存功能么，有啥稀奇的？

那么你是否遇到过这一种情况，编辑了半天的内容觉得不太好想放弃保存，继续使用之前的内容，这在Windows上很容易实现，只要编辑的时候没有手动保存，直接点击关闭不保存，再打开的时候就是编辑之前的内容。

然而在 Mac 上自动保存了，如果关闭后再打开，点 Command + Z 也没用了，这不就尴尬了，难道说遇到这种情况只能关闭前狂点 Command + Z 回退？

作为一个有情怀的操作系统，自然不会意识不到这个问题，它提供了更强大的方法，那就是版本回溯，相当于一个自动的 Git 系统，这就厉害了。

Trpora 也用到了这一特性，点击 File > Revert To > Browse All Versions 就能看到了。以我之前发布的一篇文章为例：

上图中左边为当前版本，右边为选中版本，最右侧是时间线，使用这一功能可以将文章回溯到任意时间点，妈妈再也不怕我的文章内容丢失啦，也成功避免了以下这种情况 ▼

由于这一功能是 Mac 系统提供的，所以不仅对纯文本有效，对 iWork 也是有效的，iWork 上面也有版本回溯功能，像 key，numbers，pages 都支持版本回溯，中文版点 文件 > 复原 > 浏览所有版本 即可看到过去保存的数据。

当然了，这只是福利之一。

更便捷的图片插入和上传方式

众所周知，Markdown 插入图片是一个大问题，尤其是在本地编辑的时候，但是这些在遇到 Typora 后就变的越来越简单了。

对于本地图片，我们可以直接拖进来，再也不用记复杂的语法和查图片地址了，没错，只要拖进来就行，Typora 会自动识别图片并进行插入。

不过还有一个问题，我们的很多文章都是要发布的，直接拖进来这种方式在本地看起来没问题，但上传到网站上是读取不到本地图片的，通常解决方案就是先上传到图床上，之后再将链接插入到 Markdown 中，这样发布就没问题了。

但是，当一篇文章需要插入很多图片的时候，一次次的上传，一次次的复制链接，一次次的粘贴，也是很麻烦的，虽然有一些脚本可以通过快捷键进行上传，但终归还是多了一些步骤，很不方便，而且对新手很不友好，更何况很多新手根本不知道图床所谓何物。

这时候就要祭出 Mac 上另一个神器了: iPic (点击此处进行下载)，它是一个专业图床管理工具，貌似出来还没多久，目前免费版只能上传到微博图床，专业版支持大部分图床，专业版一年 30RMB，如果经常使用的话，倒也不算贵。

话说不还是要用图床么？

但 Typora 的方便之处就在于可以和 iPic 无缝结合，纯傻瓜式一键操作，能一次性的将文章中所有本地图片上传到图床上。

首先安装 iPic，运行 iPic，之后点击 Edit > Image Tools > Upload Local Images via iPic 就像下面这样就行了。

如果你觉得这样还是很麻烦的话，还有另外的选项，可以选择插入本地图片的时候自动上传到服务器，当然了，为了保护个人隐私，这一个选项默认是关闭的，首先你要找到首选项，点击 Typora > Preferences 或者快捷键 Command + , 都行，之后打开以下两个选项，其中一个选项是后面用到的。

打开之后继续选择 Edit > Image Tools > When Insert Local Images > Upload Image via iPic 它的意思是当插入本地图片时自动通过 iPic 上传到服务器上。

这种方案虽然方便，但是会长并不推荐大家这么做，主要还是不安全，误操作的话可能会将一些包含个人隐私的照片上传上去。

会长推荐另一种方案，就是 Copy Image File to Folder，操作步骤和上面类似，它的意思是插入本地图片时自动归档到某一个文件夹，在文章编辑完成后在点击上传按钮统一上传，这样有以下几点好处：

安全，不会因为误操作将涉及隐私照片传到服务器上。
相当于自动建立了一个本地图片档案，方便备份保存。
如果图床上的图片丢失，可以从快速从本地备份中找到并恢复。

关于 Typora 的推荐内容暂时就到这里结束啦，更多关于 Typora 的多详情请参阅 Support。关于 Markdown 的更多内容请参见之前的文章:

Markdown实用技巧－快速入门
 Markdown实用技巧－基础语法
 Markdown实用技巧－链接和图片

结语

最后稍微夹带一点个人建议，个人觉得 Typora 除了界面简洁之外，最大的优点就是快捷键方便了，然而，快捷键那么多，要不要专一去记呢？

个人的建议是不要专一去记忆这些快捷键，用到的时候打开菜单看一眼快捷键是什么，之后用快捷键按出来，这样用过几次之后自然就会记住常用的快捷键，而且会记得很牢固，不然每个应用都有快捷键，一个一个的记多麻烦。

本文中涉及到的两个软件下载地址：

Typora
iPic

最后留一个课后作业，关注会长的新浪微博。

About Me

作者微博: @GcsSloop

会长，就是 GcsSloop 我啦，因为创建了一个名为魔法师协会的交流群，所以自称会长，想要加入魔法师协会的魔法师可以加我的微信 GcsSloop，备注加群或者私信我，我会邀请你加入魔法师的大家庭。 ↩

程序员练级指北

Mon, 28 Nov 2016 00:00:00 +0800

之前非常有幸收到脉脉不得语的邀请参加郑州GDG¹ 举办的 DevFest² 活动，并上台分享了一下自己的拙见，回来之后我将自己演讲的内容整理了一下，并分享给大家，希望对一些人有帮助，关于郑州GDG 更多的活动内容，大家可以到 GDGZhengzou 查看。另外，欢迎关注我的 GitHub 和微博。

我在本次活动中的演讲主题是《程序员练级指北》，主要内容如何从零开始，并逐渐成长为一名合格的程序员，里面的内容是基于自身的经历和见解所书写的，并不一定适合所有人，建议选择性采纳。

为了演讲不那么枯燥乏味，我用了很多口语化的描述，并将程序员分了等级，从零装备的新手到钻石级别套装的大佬，其实各个等级之间并没有严格的分界点，只是大致的划分，大家理解便好。另外本文和现场演讲可能稍有差别，下面开始正文。

Hello，大家好，我是 GcsSloop，今天是我第一次在这么多陌生人面前装逼，啊不，演讲，心里很是忐忑，现在我还能感受到自己的心扑通扑通的跳。

我呢，主要学习 Android，爱好装逼，喜欢钱，目前正在向段子手的方向上越走越远。

非常高兴今天能站在这里向大家分享我自己的观点，因为在坐的的技术牛人太多了，作为一个没什么技术实力的新人，不敢在这里班门弄斧讲技术，要不然正讲着哪位大牛突然站起来说我讲的不对，这不就尴尬了么。

由于本人爱好装逼，自然也研究了一些心得，所以我今天分享一下程序员如何在不同阶段正确的装逼。

第一阶段 - 新手村

作为编程的新手，自然是不能在大佬面前装逼的，否则分分钟被吊打。这一阶段我们要先给自己定一个小目标，什么是小目标呢？例如挣他个一百万？这对于我们来说当然是不现实的，作为编程菜鸟，小目标当然是稍微努力一下就能完成的，例如：看完几个新手教程，时间不要太长，两三天能完成的任务量就够了。当然了，光看还不行的，要发在朋友圈，让大家觉得你是一个非常有上进心的人。

为什么要发在朋友圈呢？装逼是一方面，除此之外，过了两天你就会发现，这两天光顾着打游戏了，新手教程居然忘记看了，这时候去看看朋友圈，再看看上面的赞，心里想如果这要是不弄完以后还如何在朋友面前装逼，自己装的逼跪着也要学完。

这一阶段注意两点：

任务周期要短，任务量要小，如果周期太长，例如一个月，到月底发现弄不完了，就会想反正也弄不完了，就这样吧，容易破罐子破摔。
要形成周围的监督机制，如果没人看着，反正也没人知道，那就随便学喽，过不了几天自己就放弃了。

如果按照计划执行了第一阶段的任务，那么经过大约一两个月的时间，新手教程基本上就看完了，相当于集齐了一套新手装备，顺利进入下一阶段。

第二阶段 - 初级套装

初级套装虽然攻击和防御力都很弱，但至少能单挑一些野怪了，有了一定的装逼资本，这时候就要在新手村附近刷一些野怪练级。

既然是刷怪升级，自然要选一个怪物比较集中的地方，最好还要有不同等级的怪物，这样方便刷经验，这个地方是哪里呢？个人觉得最适合的地方就是学校OJ题库，不一定要是自己学校的，大部分学校的OJ题库都是开放的，这里面的题目比较多，难度也分了很多等级，是非常适合新手练习的场所。不熟悉OJ系统的建议搜索了解一下。

这一阶段非常容易卡关，经常发现自己有两点不会，就是这也不会，那也不会。

然而作为编程界的新手，我们遇到的大部分问题肯定已经有大神踩过坑了，在99%的情况下，用百度或者Google搜索题目描述就能得到攻略方式，但不要偷懒直接复制，要自己亲自写一遍代码，这样有助于自己了解不同类型题目的模式。

如果你发现了一道题的答案搜索不到，但是自己解决了，那么恭喜你捡到宝了，说明你遇到了一个稀有的或者新增的怪物，赶紧整理一下攻略过程发博客吧，又能装逼了。

这样过了一段时间你就会发现，这些野怪大部分都很弱，只会几种常见的套路而已，除了最基础的题型外，归纳起来就是：堆、栈、树、表、图。

每一类野怪都有特定的攻略方法，常用的有：枚举，遍历，分治，贪婪，动态，线性，暴力打表以及抖机灵。

我在大一的时候加入了学校的打野攻略组，就是传说中的ACM，在里面待了大约有一年的时间，虽然没拿过大奖项，但好在通过刷题把自己的基础巩固了。

这一阶段反映自己进步的最好标准就是做题量和排行榜，我最高在校内排到前5，两年没有更新的情况下目前依旧在前50之内，不要问我哪个学校的，是我学校的，看一下OJ排行榜自然能认出我，我在排行榜上也叫GcsSloop。

装逼完毕，进入下一阶段。

第三阶段 - 青铜套装

刷野怪时间长了就会发现其实也挺没意思的，不过好在能够练装备，把数据结构知识和一些常见的算法弄明白，熟悉敌人的攻击套路，这样经过一段时间后，装备基本也升级到青铜了，这时候就应该尝试去挑战一下区域小boss了。

什么是挑战区域小boss呢，就是尝试制作一个完整的项目并发布出去，有人使用即可。

挑战小boss可以组团或者单挑，个人虽然喜欢组团，但无奈我们学校这个服务器太弱了，基本找不到合适的队友，尝试了几次组队最终都以失败而告终，无奈只能去单挑。

单挑boss要量力而行，不能找太强的boss，根据我自己的经验，单挑太强的boss会死的很难看，自己曾经有无数个项目胎死腹中或者半路夭折。

选择一个比较弱的boss，例如：发布一个简单的 app 到应用市场，获取到一定的下载量，或者写一个开源库，获得一点 star。

这一阶段锻炼的是项目构建能力，能够完整的构建一个项目并发布出去，有人使用就算成功了。

这样既能带来成就感，又能装逼，发完之后记得告诉身边的人自己有内容发布了，再次装一波。

第四阶段 - 白银套装

单挑完一些区域小boss后，将套装升级为白银，有了一定的装逼资本，此时发现总在朋友圈装逼成就感太差了，这时候可以去论坛、贴吧、社区、微博等地方好好的装一把，让那些装备还没有升级起来的小白看看这套锃亮的白银套装是多么耀眼，不过仍要注意不能太过火，在出来帮助新手解决问题的时候顺便展示一下白银套装的威力就行了，装的太狠容易被大佬发现抓起来吊打，这不就尴尬了么。

顺便说一下，如果从培训机构出来的，正常应该是白银初级，自身有基础加上比较努力可能会达到白银中级，能拿到白银套装说明已经达到了职业程序员最基本的标准。

很多人打到白银就开始迷茫了，去挑战小boss吧太没成就感，那些看起来就很肥美的中级和高级boss基本已经被大公司瓜分了，自己根本无从插手。所以这时候就要考虑加入公司的问题了。

那些比较好的公司，例如：网易、阿里、腾讯等肯定有一堆人挤破头都想进，作为一个刚刚拿到白银套装的人想挤进去不能说没有机会，但肯定很难。但作为拥有白银套装的人，想加入一些小公司倒还算比较容易。

个人建议初期有条件优先选择比较大的公司，因为这些公司资源多，有成熟的体系，可以帮助我们快速的在某一方向上获得长足的发展。

后期则优先选择发展型的小公司，如果是从大公司跳向一个小公司，一般都会担任不错的职位，这可以帮助我们锻炼技术之外的能力，另外一个原因是随着公司成长可以分得一些红利。

加入公司自然要考虑自身和公司的关系。

个人觉得最核心的一点就是不要依附于公司，也不要抱有敌意，最好的办法就是和公司成为利益共同体，在自己为公司创造价值的同时利用公司强大的资源提升自己的能力。

如果太过于依附公司，认为自己努力工作一定能得到相应回报的，根据经济学的假设，人都是自私而理性的，老板亦是如此，所以这类人大部分情况下都不会得到预期的结果。

对公司抱有敌意，认为自己就是打工赚钱的，想偷懒干最少的活，拿最多的钱，因为在偷懒的同时错失了很多发展机会，所以这类人大部分会随着技术的升级而被淘汰掉。

如何与公司成为利益共同体呢？首先要明确自己的目标，自己加入公司是为了提升自己的能力，而不仅仅是来打工赚钱的，想要实现这一目标则是想办法干更多的活，这样老板肯定乐意，而我们通过干更多的活来接触更多的信息，并且把接触到的信息沉淀成为自己的经验积累，对自身发展也是有益的。

当然了，我们也不是傻子，当我们自身产生的价值远远超过公司给我们的薪资并且公司资源已经无法支撑我们继续提升的时候，就该抛弃这家公司跳槽了，这一次跳槽势必能进入一个更好的公司深造，可以利用更庞大的资源来辅助我们发展，接触到更多的信息。在信息时代，信息就是金钱，将信息沉淀成为个人经验并不能第一时间转化为金钱，但是总能在未来的某一时刻爆发出惊人的力量。

第五阶段 - 黄金套装

在白银阶段，就具备了职业程序员的基本素养，但是离出任CTO，迎娶白富美，走上人生巅峰还差的很远呢，想要实现这些目标，首先要拿到黄金套装。

一般来说技术发现有两个方向可走：深度和广度。

我自己使用的是树形型结构，大树的树，一到两门追求深度，做树木主干，其余的最求广度，做树木枝叶。

有些人也称为T型知识结构，不过我觉得树形更佳贴切，因为我的所有周边技能都是围绕主干展开的，并且是可生长(拓展)的。

我的主方向 Android，自学了 C、Java、Python、Web、Photoshop 等相关知识，除了主方向Android之外，其他方向作为辅助方向，仅仅了解了最基础的内容，也就是能够靠着搜索引擎写一些简单小程序的程度。

树型知识架构有很多好处：

不被单一语言束缚，在实际场景中可以选择最合适的语言。
可以跨领域突破，我在研究 Android 2D 绘图逻辑的时候就借鉴了很多 PS 的知识。
预留发展空间大，假设某一天，Android市场饱和了或者前景变差了，我可以快速的从树枝中选择一支比较擅长的发展成为主干，而不用每次都从零开始。

其实我们大部分人都是俗人，是不是黄金套装都无所谓，能赚钱才行，很多人来做技术也是为了赚钱，所以接下来我说的是如何想办法用最小的代价产生最大的价值。想要赚钱首先要明白最基本的商业逻辑，如果我们通过正常的方式从别人那里赚到钱了，说明我们为别人提供了价值，这样别人才愿意付费给我们。

所以我们要想办法用最小的代价为别人提供最大的价值，我写代码之前会多思考，没错，就是学生时代老师经常说的多思考。不过那时候没有人告诉我们该思考什么，因此我自己摸索出来了一套东西。

思考核心目标，我们是为了某一件事情而写程序，并不是因为写程序了所以要完成这件事情。核心目标是完成这件事情，而不是写程序。
思考是否可以偷懒，我是否可以用更简单的方式完成目标，例如不写代码，少写代码。
如果写代码了，是否可以产生附加价值，例如我写这一段代码是否可以抽取成为一个开源库，是否可以将其中的设计思想整理成文共享出去。
如何产生更大的价值，我的开源库或者文章如何才能服务更多人，让更多人了解到我的东西。因为只有服务更多人，才能产生更大的价值，我们也才可能从中拿走一部分利润。

经历过这几步的思考，基本上就已经能将所写的每一段代码的价值潜力都发掘出来，进而用最小的力气服务最多的人。当然了，为了别人服务，只是产生了价值，在通常情况下，这部分价值是无法直接提现的，也就是说仅仅产生了价值但自身并没有收益。

不过非常值得庆幸的是，今年很有可能成为内容付费元年，今年已经出来了很多内容变现工具，我知道的就有，微博长文打赏，简书打赏，知乎live，diycode原创打赏和掘金原创打赏。

另外，最重要的是，随着社会的快速发展，很多人有钱了，开始愿意为自己喜欢的事物打赏，这是一切的基础。所以看到这里你就不想给我打赏一下？让我有动力写出更好的文章！

第六阶段 - 钻石套装

能拿到钻石套装的人在全球范围内都是屈指可数的，这一类人通常是某一领域的开拓者，就是我们所说的 XXX之父。这些开拓者已经将自己的影响力渗透进了社会的各行各业，说他们推动了社会的进步也是可以的，我有生之年不说集齐套装，仅仅能拿一件钻石武器便足以令我心满意足了。

结语

前面啰嗦了这么多，最后告诉大家一个小秘密，如果你想要研究一个人发展的根本，不要直接去问他，因为别人很少会告诉你自己赖以生存的核心技能，他们只会告诉你看起来很光鲜的皮毛，就是所谓的心灵鸡汤，这些听起来很励志，但落实在自己身上通常没什么用，大多数情况下只会给你带来两三天的激情而已。

正确的方法是观察他在做什么事情，以及分析他做这些事情的背后逻辑。如果你能把这些逻辑想清楚了，就把别人真正的核心技能偷过来了。之后根据自身情况一步一步的学着做就行了。

所以说，你们如果你们想了解我在做什么，为什么不考虑关注一下我的新浪微博呢？关注一下又不会吃亏！

作者微博: @GcsSloop

GDG 全称 Google Developer Group，中文意思是 谷歌开发者社区 。 ↩
DevFest 开发者节，今年(2016)的举办时间是 9月1日到 11月30日之间，全球大部分谷歌开发者社区都会举办该活动，一年一次。 ↩

安卓自定义View进阶-特殊控件的事件处理方案

Wed, 16 Nov 2016 00:00:00 +0800

本文带大家了解 Android 特殊形状控件的事件处理方式，主要是利用了 Region 和 Matrix 的一些方法，超级实用的事件处理方案，相信看完本篇之后，任何奇葩控件的事件处理都会变得十分简单。

不得不说，Android 对事件体系封装的非常棒，即便对事件体系不太了解的人，只要简单的调用方法就能使用，而且具有防呆设计，能够保证事件流的完整性和统一性，最大可能性的避免了事件处理的混乱，着实令人佩服。
然而世界上并没有绝对完美的东西，当”事件处理”遇上”自定义View”，一场好戏就开演了。

特殊形状控件

在通常的情况下，自定义 View 直接使用系统的事件体系处理就行，我们也不需要特殊处理，然而当一些特殊的控件出现的时候，麻烦就来了，举个栗子：

这是一个在遥控器上非常常见的按键布局，注意中间上下左右选择的部分，看起来十分简单，然而当你真正准备在手机上实现的时候麻烦就出现了。因为所有的 View 默认都是矩形的，所以事件接收区域也是矩形的，如果直接使用系统提供的 View 来组合出一摸一样的布局也很简单，但点击区域该如何处理？显然有部分点击区域是在控件外面的，并且会产生重叠区域：

红色方框表示 View 的可点击区域。

当我们面对这样比较奇特的控件的时候，有很多处理办法，比较投机的一种就是背景贴一个静态图，按钮做成透明的，设置小一点，放在对应的位置，这样可以保证不会误触，当然了如果想要点击效果可以在按钮按下的时候更新一下背景图，这样虽然也可以，但是这样会导致可点击区域变小，体验效果变差，设计方案变得复杂，而且逻辑也不容易处理，是一种非常糟糕的设计。

当然了，看了我这么多文章的小伙伴应该也猜到接下来要说什么了，没错，就是自定义 View。当我们面对一些奇葩控件的时候，自定义 View 就变成了一种非常好用的处理方案。

相信小伙伴们看过前面的文章之后，对各种图形的绘制已经不成问题了，所以我们直接处理重点问题。

注意：

本文中所有的自定义View 均继承自 CustomView ，这是一个自定义的超类，目的是简化自定义View 部分常用操作，你可以在 ViewSupport 中找到它以及关于它的简介。
⚠️ 警告：测试本文章示例之前请关闭硬件加速。

特殊形状控的点击区域判断

要进行特殊形状的点击判断，要用到一个之前没有使用过的类：Region。

Region 直接翻译的意思是地域，区域。在此处应该是区域的意思。它和 Path 有些类似，但 Path 可以是不封闭图形，而 Region 总是封闭的。可以通过 setPath 方法将 Path 转换为 Region。

本文中我们重点要使用到的是 Region 中的 contains 方法，这个方法可以判断一个点是否包含在该区域内。

接下来是一个简单的示例，判断手指是否是在圆形区域内按下:

代码：

public class RegionClickView extends CustomView {
    Region circleRegion;
    Path circlePath;

    public RegionClickView(Context context) {
        super(context);
        mDeafultPaint.setColor(0xFF4E5268);
        circlePath = new Path();
        circleRegion = new Region();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
      	// ▼在屏幕中间添加一个圆
        circlePath.addCircle(w/2, h/2, 300, Path.Direction.CW);
        // ▼将剪裁边界设置为视图大小
        Region globalRegion = new Region(-w, -h, w, h);
        // ▼将 Path 添加到 Region 中
        circleRegion.setPath(circlePath, globalRegion);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                int x = (int) event.getX();
                int y = (int) event.getY();

                // ▼点击区域判断
                if (circleRegion.contains(x,y)){
                    Toast.makeText(this.getContext(),"圆被点击",Toast.LENGTH_SHORT).show();
                }
                break;
        }
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // ▼注意此处将全局变量转化为局部变量，方便 GC 回收 canvas
        Path circle = circlePath;
        // 绘制圆
        canvas.drawPath(circle,mDeafultPaint);
    }
}

代码中比较重要的内容都用 ▼ 符号标记出来了。

上述代码非常简单，就是创建了个 Path 并在其中添加圆形，之后将 Path 设置到 Region 中，当手指在屏幕上按下的时候判断手指位置是否在 Region 区域内。

画布变换后坐标转换问题

还是本文一开始的例子，绘制一个上下左右选择按键，这个控件是上下左右对称的，熟悉我代码风格的小伙伴都知道，如果遇上这种问题，我肯定是要将坐标系平移到这个控件中心的，这样数据比较好计算，然而进行画布变换操作会产生一个新问题：手指触摸的坐标系和画布坐标系不统一，就可能引起手指触摸位置和绘制位置不统一。

举个栗子：

画布移动后在手指按下位置绘制一个圆，可以看到，直接拿手指触摸位置的坐标来绘制会导致绘制位置不正确，两者坐标是相同的，但是由于坐标系不同，导致实际显示位置不同。

代码：

public class CanvasVonvertTouchTest extends CustomView{
    float down_x = -1;
    float down_y = -1;

    public CanvasVonvertTouchTest(Context context) {
        this(context, null);
    }

    public CanvasVonvertTouchTest(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                down_x = event.getX();
                down_y = event.getY();
                invalidate();
                break;

            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                down_x = down_y = -1;
                invalidate();
                break;
        }

        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        float x = down_x;
        float y = down_y;

        drawTouchCoordinateSpace(canvas);       // 绘制触摸坐标系 灰色
		
      	// ▼注意画布平移
        canvas.translate(mViewWidth/2, mViewHeight/2);  
        
        drawTranslateCoordinateSpace(canvas);	 // 绘制平移后的坐标系，红色

        if (x == -1 && y == -1) return;          // 如果没有就返回

        canvas.drawCircle(x,y,20,mDeafultPaint); // 在触摸位置绘制一个小圆
    }

    /**
     *  绘制触摸坐标系，灰色，为了能够显示出坐标系，将坐标系位置稍微偏移了一点
     */
    private void drawTouchCoordinateSpace(Canvas canvas) {
        canvas.save();
        canvas.translate(10,10);
        CanvasAidUtils.set2DAxisLength(1000, 0, 1400, 0);
        CanvasAidUtils.setLineColor(Color.GRAY);
        CanvasAidUtils.draw2DCoordinateSpace(canvas);
        canvas.restore();
    }

    /**
     * 绘制平移后的坐标系，红色
     */
    private void drawTranslateCoordinateSpace(Canvas canvas) {
        CanvasAidUtils.set2DAxisLength(500, 500, 700, 700);
        CanvasAidUtils.setLineColor(Color.RED);
        CanvasAidUtils.draw2DCoordinateSpace(canvas);
        CanvasAidUtils.draw2DCoordinateSpace(canvas);
    }
}

那么问题来了，我们在之前的文章中讲过，映射不同坐标系的坐标用什么来着？
是 Matrix。

如果看过我之前的文章但没有想起来的说明你们根本没有认真看，全部拖出去糟蹋 5 分钟！
没看过的点 Matrix原理和 Matrix详解。

Matrix 是一个矩阵，主要功能是坐标映射，数值转换。

那么接下来我们就对上面的示例进行简单的改造一下，让触摸位置和实际绘制绘制重合。小白点和黑色的圆没有完全重合是因为系统显示触摸位置的绘制逻辑和我使用的绘制逻辑不太相同导致的。

代码：

注意：比较重要的修改位置用▼标记出来了。

public class CanvasVonvertTouchTest extends CustomView{
    float down_x = -1;
    float down_y = -1;

    public CanvasVonvertTouchTest(Context context) {
        this(context, null);
    }

    public CanvasVonvertTouchTest(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                // ▼ 注意此处使用 getRawX，而不是 getX
                down_x = event.getRawX();
                down_y = event.getRawY();
                invalidate();
                break;

            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                down_x = down_y = -1;
                invalidate();
                break;
        }

        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        float[] pts = {down_x, down_y};

        drawTouchCoordinateSpace(canvas);            // 绘制触摸坐标系，灰色
        // ▼注意画布平移
        canvas.translate(mViewWidth/2, mViewHeight/2);  
        
        drawTranslateCoordinateSpace(canvas);        // 绘制平移后的坐标系，红色
        
        if (pts[0] == -1 && pts[1] == -1) return;    // 如果没有就返回

        // ▼ 获得当前矩阵的逆矩阵
        Matrix invertMatrix = new Matrix();
        canvas.getMatrix().invert(invertMatrix);

        // ▼ 使用 mapPoints 将触摸位置转换为画布坐标
        invertMatrix.mapPoints(pts);

        // 在触摸位置绘制一个小圆
        canvas.drawCircle(pts[0],pts[1],20,mDeafultPaint);
    }

    /**
     *  绘制触摸坐标系，颜色为灰色，为了能够显示出坐标系，将坐标系位置稍微偏移了一点
     */
    private void drawTouchCoordinateSpace(Canvas canvas) {
        canvas.save();
        canvas.translate(10,10);
        CanvasAidUtils.set2DAxisLength(1000, 0, 1400, 0);
        CanvasAidUtils.setLineColor(Color.GRAY);
        CanvasAidUtils.draw2DCoordinateSpace(canvas);
        canvas.restore();
    }

    /**
     * 绘制平移后的坐标系，颜色为红色
     */
    private void drawTranslateCoordinateSpace(Canvas canvas) {
        CanvasAidUtils.set2DAxisLength(500, 500, 700, 700);
        CanvasAidUtils.setLineColor(Color.RED);
        CanvasAidUtils.draw2DCoordinateSpace(canvas);
        CanvasAidUtils.draw2DCoordinateSpace(canvas);
    }
}

其实核心部分就这两点：

// ▼ 注意此处使用 getRawX，而不是 getX
down_x = event.getRawX();
down_y = event.getRawY();

// -------------------------------------

// ▼ 获得当前矩阵的逆矩阵
Matrix invertMatrix = new Matrix();
canvas.getMatrix().invert(invertMatrix);

// ▼ 使用 mapPoints 将触摸位置转换为画布坐标
invertMatrix.mapPoints(pts);

使用全局坐标系
使用逆矩阵的 mapPoints

原理嘛，其实非常简单，我们在画布上正常的绘制，需要将画布坐标系转换为全局坐标系后才能真正的绘制内容。所以我们反着来，将获得到的全局坐标系坐标使用当前画布的逆矩阵转化一下，就转化为当前画布的坐标系坐标了，如果对 Matrix原理和 Matrix详解理解了，即便我不说你们也肯定会想到这个方案的。

仿遥控器按钮代码示例

在解决了上述两大难题之后，相信不论形状如何奇葩的自定义控件，基本上都难不倒大家了，最后用一个简单的示例作为结尾，还是文章开头所举的例子，核心内容就是上面讲的两个东西。

代码：

public class RemoteControlMenu extends CustomView {
    Path up_p, down_p, left_p, right_p, center_p;
    Region up, down, left, right, center;

    Matrix mMapMatrix = null;

    int CENTER = 0;
    int UP = 1;
    int RIGHT = 2;
    int DOWN = 3;
    int LEFT = 4;
    int touchFlag = -1;
    int currentFlag = -1;

    MenuListener mListener = null;

    int mDefauColor = 0xFF4E5268;
    int mTouchedColor = 0xFFDF9C81;


    public RemoteControlMenu(Context context) {
        this(context, null);
    }

    public RemoteControlMenu(Context context, AttributeSet attrs) {
        super(context, attrs);

        up_p = new Path();
        down_p = new Path();
        left_p = new Path();
        right_p = new Path();
        center_p = new Path();

        up = new Region();
        down = new Region();
        left = new Region();
        right = new Region();
        center = new Region();

        mDeafultPaint.setColor(mDefauColor);
      	mDeafultPaint.setAntiAlias(true);

        mMapMatrix = new Matrix();

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mMapMatrix.reset();
		
      	// 注意这个区域的大小
        Region globalRegion = new Region(-w, -h, w, h);
        int minWidth = w > h ? h : w;
        minWidth *= 0.8;

        int br = minWidth / 2;
        RectF bigCircle = new RectF(-br, -br, br, br);

        int sr = minWidth / 4;
        RectF smallCircle = new RectF(-sr, -sr, sr, sr);

        float bigSweepAngle = 84;
        float smallSweepAngle = -80;

        // 根据视图大小，初始化 Path 和 Region
        center_p.addCircle(0, 0, 0.2f * minWidth, Path.Direction.CW);
        center.setPath(center_p, globalRegion);

        right_p.addArc(bigCircle, -40, bigSweepAngle);
        right_p.arcTo(smallCircle, 40, smallSweepAngle);
        right_p.close();
        right.setPath(right_p, globalRegion);

        down_p.addArc(bigCircle, 50, bigSweepAngle);
        down_p.arcTo(smallCircle, 130, smallSweepAngle);
        down_p.close();
        down.setPath(down_p, globalRegion);

        left_p.addArc(bigCircle, 140, bigSweepAngle);
        left_p.arcTo(smallCircle, 220, smallSweepAngle);
        left_p.close();
        left.setPath(left_p, globalRegion);

        up_p.addArc(bigCircle, 230, bigSweepAngle);
        up_p.arcTo(smallCircle, 310, smallSweepAngle);
        up_p.close();
        up.setPath(up_p, globalRegion);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float[] pts = new float[2];
        pts[0] = event.getRawX();
        pts[1] = event.getRawY();
        mMapMatrix.mapPoints(pts);

        int x = (int) pts[0];
        int y = (int) pts[1];

        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                touchFlag = getTouchedPath(x, y);
                currentFlag = touchFlag;
                break;
            case MotionEvent.ACTION_MOVE:
                currentFlag = getTouchedPath(x, y);
                break;
            case MotionEvent.ACTION_UP:
                currentFlag = getTouchedPath(x, y);
            	// 如果手指按下区域和抬起区域相同且不为空，则判断点击事件
                if (currentFlag == touchFlag && currentFlag != -1 && mListener != null) {
                    if (currentFlag == CENTER) {
                        mListener.onCenterCliched();
                    } else if (currentFlag == UP) {
                        mListener.onUpCliched();
                    } else if (currentFlag == RIGHT) {
                        mListener.onRightCliched();
                    } else if (currentFlag == DOWN) {
                        mListener.onDownCliched();
                    } else if (currentFlag == LEFT) {
                        mListener.onLeftCliched();
                    }
                }
                touchFlag = currentFlag = -1;
                break;
            case MotionEvent.ACTION_CANCEL:
                touchFlag = currentFlag = -1;
                break;
        }

        invalidate();
        return true;
    }

  	// 获取当前触摸点在哪个区域
    int getTouchedPath(int x, int y) {
        if (center.contains(x, y)) {
            return 0;
        } else if (up.contains(x, y)) {
            return 1;
        } else if (right.contains(x, y)) {
            return 2;
        } else if (down.contains(x, y)) {
            return 3;
        } else if (left.contains(x, y)) {
            return 4;
        }
        return -1;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(mViewWidth / 2, mViewHeight / 2);

        // 获取测量矩阵(逆矩阵)
        if (mMapMatrix.isIdentity()) {
            canvas.getMatrix().invert(mMapMatrix);
        }

      	// 绘制默认颜色
        canvas.drawPath(center_p, mDeafultPaint);
        canvas.drawPath(up_p, mDeafultPaint);
        canvas.drawPath(right_p, mDeafultPaint);
        canvas.drawPath(down_p, mDeafultPaint);
        canvas.drawPath(left_p, mDeafultPaint);

      	// 绘制触摸区域颜色
        mDeafultPaint.setColor(mTouchedColor);
        if (currentFlag == CENTER) {
            canvas.drawPath(center_p, mDeafultPaint);
        } else if (currentFlag == UP) {
            canvas.drawPath(up_p, mDeafultPaint);
        } else if (currentFlag == RIGHT) {
            canvas.drawPath(right_p, mDeafultPaint);
        } else if (currentFlag == DOWN) {
            canvas.drawPath(down_p, mDeafultPaint);
        } else if (currentFlag == LEFT) {
            canvas.drawPath(left_p, mDeafultPaint);
        }
        mDeafultPaint.setColor(mDefauColor);
    }

    public void setListener(MenuListener listener) {
        mListener = listener;
    }

   	// 点击事件监听器
    public interface MenuListener {
        void onCenterCliched();

        void onUpCliched();

        void onRightCliched();

        void onDownCliched();

        void onLeftCliched();
    }
}

运行效果:

当手指在某一区域活动时，该区域会高亮显示，如果注册了监听器，点击某一区域会触发监听器回调。

关于硬件加速的问题

硬件加速是个好东西，但是处理不好会引起诸多问题，博主为了怕麻烦我一直关闭硬件加速。

然而硬件加速在 Android 4.0 以上是默认开启的，这就导致了有好几位魔法师反馈测试结果和我的测试结果不同，我来简单说明一下硬件加速干了什么事情，以及这些文章中的锅是如何产生的，应该由谁来背。

我在 Matrix 原理中说过 Matrix 的作用： Matrix作用就是坐标映射。
其核心功能就是将单个 View 的坐标系转化为屏幕(物理)坐标系，虽然转换一次费不了多少时间，但是当执行动画效果等需要大量快速重绘的情况下，耗费的时间就需要考量一下了，于是乎，硬件加速干了一件非常精明的事情，把所有画布坐标系都设置为屏幕(物理)坐标系，之后在 View 绘制区域设置一个遮罩，保证绘制内容不会超过 View 自身的大小，这样就直接跳过坐标转换过程，可以节省坐标系之间数值转换耗费的时间。因此导致了以下问题：

开启硬件加速情况下 event.getX() 和不开启情况下 event.getRawX() 等价，获取到的是屏幕(物理)坐标 (本文的锅)。
开启硬件加速情况下 event.getRawX() 数值是一个错误数值，因为本身就是全局的坐标又叠加了一次 View 的偏移量，所以肯定是不正确的 (本文的锅)。
从 Canvas 获取到的 Matrix 是全局的，默认情况下 x,y 偏移量始终为0，因此你不能从这里拿到当前 View 的偏移量 ( Matrix系列文章中的锅 )。
由于其使用的是遮罩来控制绘制区域，所以如果重绘 path 时，如果 path 区域变大，但没有执行单步操作会导致 path 绘制不完整或者看起来比较奇怪 (Path系列文章中的锅)。

很显然，这个硬件加速有点6，制造了各种锅想让我来背，然而智慧的我早已看穿一切，默默的把硬件加速关闭了，因为我不知道它还有多少锅没亮出来。

这里顺便挖个坑，等我搞明白硬件加速扔锅的逻辑之后，专门写一篇硬件加速的文章，把硬件加速的锅全埋进去，再也不背这口大黑锅了。
(╯°Д°）╯︵ ┻━┻

个人建议：

APP全局关闭硬件加速。
针对动画较多的 Activity 或者 View 单独开启硬件加速。
如果应用要兼容到 3.0 以下，不要使用硬件加速的特性，或者进行兼容处理。
如果自定义View 出现与绘图相关的异常，请务必检查一下硬件加速。
如果想关掉硬件加速看这里： Android如何关闭硬件加速。

总结

本文虽然代码比较多，但核心概念非常简单，主要涉及以下两点：

Region 的区域检测。
Matrix 的坐标映射。

这两个知识点都不是很难，然而灵活运用起来却是非常强大的，如果有对 Matrix 不了解的小伙伴，推荐去看我之前的文章，里面有关于Matrix的详细介绍，

由于个人水平有限，文章中可能会出现错误，如果你觉得哪一部分有错误，或者发现了错别字等内容，欢迎在评论区告诉我，另外，据说关注作者微博不仅能第一时间收到新文章消息，还能变帅哦。

About Me

作者微博: @GcsSloop

Markdown实用技巧－链接和图片

Tue, 08 Nov 2016 00:00:00 +0800

Sloop 喝过半杯咖啡，涨红的脸色渐渐复了原，旁人便又问道，“ Sloop，你当真会写文章么？” Sloop 看着问他的人，显出不屑置辩的神气。他们便接着说道，“你怎的连半个赞也捞不到呢？” Sloop 立刻显出颓唐不安模样，脸上笼上了一层灰色，嘴里说些话；这回可是全是技术名词之类，一些不懂了。在这时候，众人也都哄笑起来：办公室内外充满了快活的空气。

在这些时候，我可以附和着笑，老板是决不责备的。而且老板见了 Sloop，也每每这样问他，引人发笑。Sloop 自己知道不能和他们谈天，便只好向实习生说话。有一回对我说道，“你会用 Markdown 么？” 我略略点一点头。他说，“会用 Markdown，……我便考你一考。Markdown 的链接，你是怎样写的？” 我想，码农一样的人，也配考我么？便回过脸去，不再理会。Sloop 等了许久，很恳切的说道，“不能写罢？……我教给你，记着！这些写法应该记着。将来做程序员的时候，写文档要用。”我暗想我和程序员的等级还很远呢，而且我们这里的程序员也从不写文档；又好笑，又不耐烦，懒懒的答他道，“谁要你教，不是一对方括号后面跟一对圆括号么？” Sloop 显出极高兴的样子，将两个指头的长指甲敲着电脑，点头说，“对呀对呀！……链接有4样基本写法，你知道么？” 我愈不耐烦了，努着嘴走远。Sloop 刚想打开编辑器，给我演示，见我毫不热心，便又叹一口气，显出极惋惜的样子。

前言

本文是适用于对 Markdown 有一定了解的魔法师，以帮助他们挖掘更多关于 Markdown 的可能性，例如：链接的不同类型以及使用方式，如何在新标签页打开链接，如何控制图片大小等，对 Markdown 还不了解的魔法师请参考 Markdown快速入门和 Markdown基础语法。

注意：以下的部分语法不属于标准语法，存在不兼容的问题，不能保证所有平台都能够使用。对于非标准语法(拓展语法)我会进行标注说明。

行内式链接:

博客地址: [GcsSloop](http://www.gcssloop.com)  
博客地址: [GcsSloop](http://www.gcssloop.com "GcsSloop的博客")

博客地址: GcsSloop
博客地址: GcsSloop

参考式链接:

[GcsSloop的博客][gcssloop]

[gcssloop]: http://www.gcssloop.com
// 或者
[gcssloop]: http://www.gcssloop.com "点击访问GcsSloop的博客"

GcsSloop的博客

为什么要使用参考式呢？
在写文章的时候很可能会在文章不同的地方引用同一篇文章，使用参考式可以少写一点字符。
更重要的是，参考文章的链接可能会改变，如果将参考链接统一写在文末的话，改起来会更容易。

自动链接:

<http://www.gcssloop.com>

http://www.gcssloop.com

相对链接:

如果你的内容是发布在 GitHub 或者自己的个人网站上，那么相对链接是一个很好用的东西，例如引用本站的一张图片可以这样写:

![头像](/assets/siteinfo/avatar.jpg)

相对链接优点:

线下预览和线上效果相同，不受网络影响。
避免了分别上传图片导致的麻烦。
GitHub复制仓库更方便，改仓库名字不会导致资源链接失效。

相对链接缺点:

不适用于需要在多平台发布的文章。
某些本地编辑器不支持读取相对链接。

图片链接:

图片链接其实就是把图片和链接嵌套在一起:

顺便为 DiyCode 打一个小广告，欢迎更多小伙伴的加入。

[![](http://gcsblog.oss-cn-shanghai.aliyuncs.com/blog/2019-04-29-072738.jpg?gcssloop)](http://gcsblog.oss-cn-shanghai.aliyuncs.com/blog/2019-04-29-072739.jpg?gcssloop)

注意：从这里开始往下的部分，属于拓展语法，可能存在某些平台(编辑器)无法识别的问题，请亲自测试后再使用。

在新标签页打开:

Markdown 的默认链接方式都是在当前标签页打开的，这就会导致打开链接之后原始页面被覆盖掉，如果想要让链接在新标签页打开可以在后面添加上 {:target="_blank"} 或者使用 HTML 语法。

[GcsSloop](http://www.gcssloop.com){:target="_blank"}

[GcsSloop的博客][gcssloop]{:target="_blank"}

<http://www.gcssloop.com>{:target="_blank"}

<a href="http://www.gcssloop.com/info/about" target="_blank">关于GcsSloop</a>

GcsSloop
GcsSloop的博客
 http://www.gcssloop.com
关于GcsSloop

注意: 部分平台可能不识别 {:target="_blank"} 标签。

注释(脚注):

注释一般用于解释一些专业名词或者难以理解的内容，由于注释的解释部分一般放在文末，所以又称为脚注:

GcsSloop[^1]是一个超级魔法师[^2] 。

[^1]: GcsSloop：非著名程序员。  
[^2]: 魔法师：会魔法的人类

GcsSloop¹是一个超级魔法师² 。

注意：脚注不论在何处定义，最终都是显示在文末。部分平台不识别该语法。

控制图片大小

使用 {:width="300" height="100"} 或者 HTML 格式可以控制图片显示大小，图片有宽度(width)和高度(height)两个属性，如果只指定了一个，另一个会按照比例缩放。

![](http://gcsblog.oss-cn-shanghai.aliyuncs.com/blog/2019-04-29-072743.jpg?gcssloop){:width="300"}

<img src="http://ww1.sinaimg.cn/large/005Xtdi2jw1f9k7b8a6vmj312w0rg143.jpg" width="300"/>

右键，新标签页打开图片，你会发现原图其实挺大的。
注意: 部分平台可能不识别 {:width="300" height="100"} 标签。

总结:

Markdown 存在很多的变种，对其语法进行了不同程度的拓展，使其更加的强大，但是使用拓展语法之前请三思。个人建议如下：

如果文章(文档)只在单一平台发布，使用任何该平台支持的拓展语法都没问题。
如果文章(文档)需要在多个平台发布，尽量使用标准语法，使用拓展语法之前请注意测试平台兼容性。
图片尽量使用图床管理，而且要进行本地备份。

About Me

作者微博: @GcsSloop

参考链接：

Markdown－基础语法
 Markdown语法:在新窗口新标签页中打开

注释:

GcsSloop：非著名程序员。 ↩
魔法师：会魔法的人类 ↩

安卓自定义View进阶-MotionEvent详解

Wed, 02 Nov 2016 00:00:00 +0800

Android MotionEvent 详解，之前用了两篇文章事件分发机制原理和事件分发机制详解来讲解事件分发，而作为事件分发主角之一的 MotionEvent 并没有过多的说明，本文就带大家了解 MotionEvent 的相关内容，简要介绍触摸事件，主要包括单点触控、多点触控、鼠标事件以及 getAction() 和 getActionMasked() 的区别。

Android 将所有的输入事件都放在了 MotionEvent 中，随着安卓的不断发展壮大，MotionEvent 也开始变得越来越复杂，下面是我自己整理的 MotionEvent 大事记:

版本号	更新内容
Android 1.0 (API 1 )	支持单点触控和轨迹球的事件。
Android 1.6 (API 4 )	支持手势。
Android 2.0 (API 5 )	支持多点触控。
Android 3.1 (API 12)	支持触控笔，鼠标，键盘，操纵杆，游戏控制器等输入工具。

以上仅仅是简要的说明几次比较大的变动，细小的修复和更新不计其数，此处就不一一列出了，反正也没人关心这些东西。
MotionEvent 负责集中处理所有类型设备的输入事件，但是由于某些设备使用的几率较小本文会忽略讲解，或者简要讲解，例如：
1、轨迹球只出现在最早的设备上，现代的设备上已经见不到了，本文不再叙述。
2、触控笔和手指处理流程基本相同，不再多说。
3、鼠标在手机上使用概率也比较小，会在文末简要介绍。

单点触控

单点触控就非常简单啦，入门的工程师都会用，上一篇文章也简要介绍过，主要涉及以下几个事件:

事件	简介
ACTION_DOWN	手指初次接触到屏幕时触发。
ACTION_MOVE	手指在屏幕上滑动时触发，会多次触发。
ACTION_UP	手指离开屏幕时触发。
ACTION_CANCEL	事件被上层拦截时触发。
ACTION_OUTSIDE	手指不在控件区域时触发。

和以下的几个方法:

方法	简介
getAction()	获取事件类型。
getX()	获得触摸点在当前 View 的 X 轴坐标。
getY()	获得触摸点在当前 View 的 Y 轴坐标。
getRawX()	获得触摸点在整个屏幕的 X 轴坐标。
getRawY()	获得触摸点在整个屏幕的 Y 轴坐标。

关于 get 和 getRaw 的区别可以参考这一篇文章安卓自定义View基础-坐标系

单点触控一次简单的交互流程是这样的:

手指落下(ACTION_DOWN) －> 多次移动(ACTION_MOVE) －> 离开(ACTION_UP)

本次事例中 ACTION_MOVE 有多次触发。

如果仅仅是单击(手指按下再抬起)，不会触发 ACTION_MOVE。

针对单点触控的事件处理一般是这样写的:

@Override
public boolean onTouchEvent(MotionEvent event) {
    // ▼ 注意这里使用的是 getAction()，先埋一个小尾巴。
    switch (event.getAction()){
        case MotionEvent.ACTION_DOWN:
        	// 手指按下
            break;
        case MotionEvent.ACTION_MOVE:
            // 手指移动
            break;
        case MotionEvent.ACTION_UP:
            // 手指抬起
            break;
        case MotionEvent.ACTION_CANCEL:
            // 事件被拦截 
            break;
        case MotionEvent.ACTION_OUTSIDE:
            // 超出区域 
            break;
    }
    return super.onTouchEvent(event);
}

相信小伙伴对此已经非常熟悉了，经常使用的东西，我也不啰嗦了。

但其中有两个比较特殊的事件: ACTION_CANCEL 和 ACTION_OUTSIDE 。
为什么说特殊呢，因为它们是由程序触发而产生的，而且触发条件也非常特殊，通常情况下即便不处理这两个事件也没有什么问题。接下来我们就扒一扒它们的真面目:

ACTION_CANCEL

ACTION_CANCEL 的触发条件是事件被上层拦截，然而我们在事件分发机制原理一文中了解到当事件被上层 View 拦截的时候，ChildView 是收不到任何事件的，ChildView 收不到任何事件，自然也不会收到 ACTION_CANCEL 了，所以说这个 ACTION_CANCEL 的正确触发条件并不是这样，那么是什么呢？

事实上，只有上层 View 回收事件处理权的时候，ChildView 才会收到一个 ACTION_CANCEL 事件。

这样说可能不太容易理解，咱举个例子?

例如：上层 View 是一个 RecyclerView，它收到了一个 ACTION_DOWN 事件，由于这个可能是点击事件，所以它先传递给对应 ItemView，询问 ItemView 是否需要这个事件，然而接下来又传递过来了一个 ACTION_MOVE 事件，且移动的方向和 RecyclerView 的可滑动方向一致，所以 RecyclerView 判断这个事件是滚动事件，于是要收回事件处理权，这时候对应的 ItemView 会收到一个 ACTION_CANCEL ，并且不会再收到后续事件。

通俗一点？

RecyclerView：儿砸，这里有一个 ACTION_DOWN 你看你要不要。
ItemView ：好嘞，我看看。
RecyclerView：噫？居然是移动事件ACTION_MOVE，我要滚起来了，儿砸，我可能要把你送去你姑父家(缓存区)了，在这之前给你一个 ACTION_CANCEL，你要收好啊。
ItemView ：……

这是实际开发中最有可能见到 ACTION_CANCEL 的场景了。

ACTION_OUTSIDE

ACTION_OUTSIDE的触发条件更加奇葩，从字面上看，outside 意思不就是超出区域么？然而不论你如何滑动超出控件区域都不会触发 ACTION_OUTSIDE 这个事件。相信很多魔法师都对此很是疑惑，说好的超出区域呢？

实际上这个事件根本就不是在这里用的，看官方解释(装一下逼)：

A movement has happened outside of the normal bounds of the UI element. This does not provide a full gesture, but only the initial location of the movement/touch.

一个触摸事件已经发生了UI元素的正常范围之外。因此不再提供完整的手势，只提供运动/触摸的初始位置。

我们知道，正常情况下，如果初始点击位置在该视图区域之外，该视图根本不可能会收到事件，然而，万事万物都不是绝对的，肯定还有一些特殊情况，你可曾还记得点击 Dialog 区域外关闭吗？Dialog 就是一个特殊的视图(没有占满屏幕大小的窗口)，能够接收到视图区域外的事件(虽然在通常情况下你根本用不到这个事件)，除了 Dialog 之外，你最可能看到这个事件的场景是悬浮窗，当然啦，想要接收到视图之外的事件需要一些特殊的设置。

设置视图的 WindowManager 布局参数的 flags为FLAG_WATCH_OUTSIDE_TOUCH，这样点击事件发生在这个视图之外时，该视图就可以接收到一个 ACTION_OUTSIDE 事件。

参见StackOverflow：How to dismiss the dialog with click on outside of the dialog?

由于这个事件用到的几率比较小，此处就不展开叙述了，以后用到的时候再详细讲解。

多点触控

Android 在 2.0 版本的时候开始支持多点触控，一旦出现了多点触控，很多东西就突然之间变得麻烦起来了，首先要解决的问题就是 多个手指同时按在屏幕上，会产生很多的事件，这些事件该如何区分呢？

为了区分这些事件，工程师们用了一个很简单的办法－－编号，当手指第一次按下时产生一个唯一的号码，手指抬起或者事件被拦截就回收编号，就这么简单。

第一次按下的手指特殊处理作为主指针，之后按下的手指作为辅助指针，然后随之衍生出来了以下事件(注意增加的事件和事件简介的变化)：

事件	简介
ACTION_DOWN	第一个手指初次接触到屏幕时触发。
ACTION_MOVE	手指在屏幕上滑动时触发，会多次触发。
ACTION_UP	最后一个手指离开屏幕时触发。
ACTION_POINTER_DOWN	有非主要的手指按下(即按下之前已经有手指在屏幕上)。
ACTION_POINTER_UP	有非主要的手指抬起(即抬起之后仍然有手指在屏幕上)。
以下事件类型不推荐使用	－－－－－－－－－－－－－－－－－－
~~ACTION_POINTER_1_DOWN~~	第 2 个手指按下，已废弃，不推荐使用。
~~ACTION_POINTER_2_DOWN~~	第 3 个手指按下，已废弃，不推荐使用。
~~ACTION_POINTER_3_DOWN~~	第 4 个手指按下，已废弃，不推荐使用。
~~ACTION_POINTER_1_UP~~	第 2 个手指抬起，已废弃，不推荐使用。
~~ACTION_POINTER_2_UP~~	第 3 个手指抬起，已废弃，不推荐使用。
~~ACTION_POINTER_3_UP~~	第 4 个手指抬起，已废弃，不推荐使用。

和以下方法：

方法	简介
getActionMasked()	与 `getAction()` 类似，多点触控必须使用这个方法获取事件类型。
getActionIndex()	获取该事件是哪个指针(手指)产生的。
getPointerCount()	获取在屏幕上手指的个数。
getPointerId(int pointerIndex)	获取一个指针(手指)的唯一标识符ID，在手指按下和抬起之间ID始终不变。
findPointerIndex(int pointerId)	通过PointerId获取到当前状态下PointIndex，之后通过PointIndex获取其他内容。
getX(int pointerIndex)	获取某一个指针(手指)的X坐标
getY(int pointerIndex)	获取某一个指针(手指)的Y坐标

由于多点触控部分涉及内容比较多，也很复杂，我准备单独用一篇文章进行详细叙述，所以这里只叙述一些基础的内容作为铺垫：

getAction() 与 getActionMasked()

当多个手指在屏幕上按下的时候，会产生大量的事件，如何在获取事件类型的同时区分这些事件就是一个大问题了。

一般来说我们可以通过为事件添加一个int类型的index属性来区分，但是我们知道谷歌工程师是有洁癖的(在自定义View分类与流程的onMeasure中已经见识过了)，为了添加一个通常数值不会超过10的index属性就浪费一个int大小的空间简直是不能忍受的，于是工程师们将这个index属性和事件类型直接合并了。

int类型共32位(0x00000000)，他们用最低8位(0x000000ff)表示事件类型，再往前的8位(0x0000ff00)表示事件编号，以手指按下为例讲解数值是如何合成的:

ACTION_DOWN 的默认数值为 (0x00000000)
ACTION_POINTER_DOWN 的默认数值为 (0x00000005)

手指按下	触发事件(数值)
第1个手指按下	ACTION_DOWN (0x00000000)
第2个手指按下	ACTION_POINTER_DOWN (0x00000105)
第3个手指按下	ACTION_POINTER_DOWN (0x00000205)
第4个手指按下	ACTION_POINTER_DOWN (0x00000305)

注意：
上面表格中用粗体标示出的数值，可以看到随着按下手指数量的增加，这个数值也是一直变化的，进而导致我们使用 getAction() 获取到的数值无法与标准的事件类型进行对比，为了解决这个问题，他们创建了一个 getActionMasked() 方法，这个方法可以清除index数值，让其变成一个标准的事件类型。
1、多点触控时必须使用 getActionMasked() 来获取事件类型。
2、单点触控时由于事件数值不变，使用 getAction() 和 getActionMasked() 两个方法都可以。
3、使用 getActionIndex() 可以获取到这个index数值。不过请注意，getActionIndex() 只在 down 和 up 时有效，move 时是无效的。

目前来说获取事件类型使用 getActionMasked() 就行了，但是如果一定要编译时兼容古董版本的话，可以考虑使用这样的写法:

final int action = (Build.VERSION.SDK_INT >= Build.VERSION_CODES.FROYO)
                ? event.getActionMasked()
                : event.getAction();
switch (action){
    case MotionEvent.ACTION_DOWN:
        // TODO
        break;
}

PointId

虽然前面刚刚说了一个 actionIndex，可以使用 getActionIndex() 获得，但通过 actionIndex 字面意思知道，这个只表示事件的序号，而且根据其说明文档解释，这个 ActionIndex 只有在手指按下(down)和抬起(up)时是有用的，在移动(move)时是没有用的，事件追踪非常重要的一环就是移动(move)，然而它却没卵用，这也太不实在了 (￣Д￣)ﾉ

郑重声明：追踪事件流，请认准 PointId，这是唯一官方指定标准，不要相信 ActionIndex 那个小婊砸。

PointId 在手指按下时产生，手指抬起或者事件被取消后消失，是一个事件流程中唯一不变的标识，可以在手指按下时通过 getPointerId(int pointerIndex) 获得。 (参数中的 pointerIndex 就是 actionIndex)

关于事件流的追踪等问题在讲解多点触控时再详细讲解。

历史数据(批处理)

由于我们的设备非常灵敏，手指稍微移动一下就会产生一个移动事件，所以移动事件会产生的特别频繁，为了提高效率，系统会将近期的多个移动事件(move)按照事件发生的顺序进行排序打包放在同一个 MotionEvent 中，与之对应的产生了以下方法：

事件	简介
getHistorySize()	获取历史事件集合大小
getHistoricalX(int pos)	获取第pos个历史事件x坐标 (pos < getHistorySize())
getHistoricalY(int pos)	获取第pos个历史事件y坐标 (pos < getHistorySize())
getHistoricalX (int pin, int pos)	获取第pin个手指的第pos个历史事件x坐标 (pin < getPointerCount(), pos < getHistorySize() )
getHistoricalY (int pin, int pos)	获取第pin个手指的第pos个历史事件y坐标 (pin < getPointerCount(), pos < getHistorySize() )

注意：

pin 全称是 pointerIndex，表示第几个手指，此处为了节省空间使用了缩写。
历史数据只有 ACTION_MOVE 事件。
历史数据单点触控和多点触控均可以用。

下面是官方文档给出的一个简单使用示例：

void printSamples(MotionEvent ev) {
     final int historySize = ev.getHistorySize();
     final int pointerCount = ev.getPointerCount();
     for (int h = 0; h < historySize; h++) {
         System.out.printf("At time %d:", ev.getHistoricalEventTime(h));
         for (int p = 0; p < pointerCount; p++) {
             System.out.printf("  pointer %d: (%f,%f)",
                 ev.getPointerId(p), ev.getHistoricalX(p, h), ev.getHistoricalY(p, h));
         }
     }
     System.out.printf("At time %d:", ev.getEventTime());
     for (int p = 0; p < pointerCount; p++) {
         System.out.printf("  pointer %d: (%f,%f)",
             ev.getPointerId(p), ev.getX(p), ev.getY(p));
     }
}

获取事件发生的时间

获取事件发生的时间。

方法	简介
getDownTime()	获取手指按下时的时间。
getEventTime()	获取当前事件发生的时间。
getHistoricalEventTime(int pos)	获取历史事件发生的时间。

pos 表示历史数据中的第几个数据。( pos < getHistorySize() )

返回值类型为 long，单位是毫秒。

获取压力(接触面积大小)

MotionEvent支持获取某些输入设备(手指或触控笔)的与屏幕的接触面积和压力大小，主要有以下方法：

描述中使用了手指，触控笔也是一样的。

方法	简介
getSize ()	获取第1个手指与屏幕接触面积的大小
getSize (int pin)	获取第pin个手指与屏幕接触面积的大小
getHistoricalSize (int pos)	获取历史数据中第1个手指在第pos次事件中的接触面积
getHistoricalSize (int pin, int pos)	获取历史数据中第pin个手指在第pos次事件中的接触面积
getPressure ()	获取第一个手指的压力大小
getPressure (int pin)	获取第pin个手指的压力大小
getHistoricalPressure (int pos)	获取历史数据中第1个手指在第pos次事件中的压力大小
getHistoricalPressure (int pin, int pos)	获取历史数据中第pin个手指在第pos次事件中的压力大小

pin 全称是 pointerIndex，表示第几个手指。(pin < getPointerCount() )

pos 表示历史数据中的第几个数据。( pos < getHistorySize() )

注意：

1、获取接触面积大小和获取压力大小是需要硬件支持的。
2、非常不幸的是大部分设备所使用的电容屏不支持压力检测，但能够大致检测出接触面积。
3、大部分设备的 getPressure() 是使用接触面积来模拟的。
4、由于某些未知的原因(可能系统版本和硬件问题)，某些设备不支持该方法。

我用不同的设备对这两个方法进行了测试，然而不同设备测试出来的结果不相同，之后经过我多方查证，发现是系统问题，有的设备上只有 getSize() 能用，有的设备上只有 getPressure() 能用，而有的则两个都不能用。

由于获取接触面积和获取压力大小受系统和硬件影响，使用的时候一定要进行数据检测，以防因为设备问题而导致程序出错。

鼠标事件

由于触控笔事件和手指事件处理流程大致相同，所以就不讲解了，这里讲解一下与鼠标相关的几个事件：

事件	简介
ACTION_HOVER_ENTER	指针移入到窗口或者View区域，但没有按下。
ACTION_HOVER_MOVE	指针在窗口或者View区域移动，但没有按下。
ACTION_HOVER_EXIT	指针移出到窗口或者View区域，但没有按下。
ACTION_SCROLL	滚轮滚动，可以触发水平滚动(AXIS_HSCROLL)或者垂直滚动(AXIS_VSCROLL)

注意：

1、这些事件类型是安卓4.0 (API 14) 才添加的。
2、使用 ` getActionMasked()` 获得这些事件类型。
3、这些事件不会传递到 onTouchEvent(MotionEvent) 而是传递到 onGenericMotionEvent(MotionEvent) 。

输入设备类型判断

输入设备类型判断也是安卓4.0 (API 14) 才添加的，主要包括以下几种设备：

设备类型	简介
TOOL_TYPE_ERASER	橡皮擦
TOOL_TYPE_FINGER	手指
TOOL_TYPE_MOUSE	鼠标
TOOL_TYPE_STYLUS	手写笔
TOOL_TYPE_UNKNOWN	未知类型

使用 getToolType(int pointerIndex) 来获取对应的输入设备类型，pointIndex可以为0，但必须小于 getPointerCount()。

总结

虽然本文标题是 MotionEvent 详解，但由于 MotionEvent 实在太庞大了，本文只能涉及一些比较常用的内容，某些不太常用的内容就在以后用到的时候再详细介绍吧，像游戏手柄等输入设备由于我暂时不做游戏开发，也没有过多了解，所以就不介绍给大家啦。

参考资料

MotionEvent
Android MotionEvent详解

About Me

作者微博: @GcsSloop

Markdown实用技巧－基础语法

Tue, 25 Oct 2016 00:00:00 +0800

本文为 Markdown实用技巧 系列的基础文章，并没有不可描述的内容 (⊙ω⊙)

为保证语法兼容性，本文只介绍基础语法，扩展语法等其它内容，会在后续的文章中单独介绍。
注意：所有的标记符号均使用英文，中文无效。

标题

Markdown 支持多种标题格式。

利用 = (等号)和 -(减号)可以定义一级标题和二级标题，(任何数量的 = 和 - 都有效果) ：

Markdown	预览
一级标题 ====	一级标题
二级标题 ----	二级标题

通过在行首插入 1 到 6 个 # ，来定义对应的 1 到 6 阶标题，个人推荐使用这种，例如：

Markdown	预览
# 一级标题	一级标题
## 二级标题	二级标题
### 三级标题	三级标题
#### 四级标题	四级标题
##### 五级标题	五级标题
###### 六级标题	六级标题

段落和换行

在 Markdown 中段落由一行或者多行文本组成，相邻的两行文字会被视为同一段落，如果存在空行则被视为不同段落( Markdown 对空行的定义是看起来是空行就是空行，即使空行中存在 空格 TAB 回车 等不可见字符，同样会被视为空行)。

Markdown支持段内换行，如果你想进行段落内换行可以在上一行结尾插入两个以上的空格后再回车。

Markdown

预览

第一行
相邻被视为同一段落。

第一行相邻被视为同一段落。

第一行[空格][空格]
上一行结尾存在两个空格，段内换行

第一行
上一行结尾存在两个空格，段内换行。

第一行

两行之间存在空行，视为不同段落。

第一行

两行之间存在空行，视为不同段落。

强调

删除线的 ~ 符号一般位于键盘左上角位置。

Markdown	预览
倾斜	倾斜
粗体	粗体
~~删除线~~	~~删除线~~
> 引用	引用

链接和图片

为了规避某些平台的防盗链机制，图片推荐使用图床，否则在不同平台上发布需要重新上传很麻烦的，图床最好选大平台的图床，一时半会不会倒闭的那种，个人目前主要用的是微博图床 Chrome插件－微博图床以及 Alfred脚本－微博图床

Markdown	预览
[GcsSloop](http://www.gcssloop.com)	GcsSloop
![GcsSloop Blog](http://gcsblog.oss-cn-shanghai.aliyuncs.com/blog/2019-04-29-072758.jpg?gcssloop)

列表

无序列表前面可以用 * + - 等，结果是相同的。
有序列表的数字即便不按照顺序排列，结果仍是有序的。

Markdown	预览
* 项目 * 项目 * 项目 * 子项目 * 子项目 * 项目	项目项目项目子项目子项目项目
1. 项目 2. 项目 3. 项目 1. 子项目</span> 2. 子项目 4. 项目	项目项目项目子项目子项目项目

下划线和特殊符号

由于 Markdown 使用一些特殊符号进行标记，当我们想要在文档中使用这些特殊符号并防止被 Markdown 转换的时候，可以使用 \ (转义符) 将这些特殊符号进行转义。

Markdown	预览
在一行中用三个以上的星号、减号、下划线来建立一个分隔线 ---
可以利用反斜杠(转义字符)来插入一些在语法中有特殊意义的符号 \Hi\	Hi

代码

1.行内代码

行内代码可以使用反引号来标记(反引号一般位于键盘左上角，要用英文):

一句话 `行内代码` 一句话。

预览:

一句话 行内代码 一句话。

2.多行代码

多行代码使用 3 个反引号来标记(反引号一般位于键盘左上角，要用英文) ，在第一个 ｀｀｀ 后面可以跟语言类型，没有语言类型可以省略不写:

​``` java
// 我是注释
int a = 5;
​```

预览:

// 我是注释
int a = 5;

表格

扩展的 Markdown 支持手写表格，格式也非常简单，第二行分割线部分可以使用 : 来控制内容状态。
注意，Markdown 标准(原生)语法中没有表格支持，但现在多数平台已经支持了该语法，如 GitHub，CSDN，简书等均支持，所以写在这里:

Markdown：

| 默认  |   靠右 |  居中  | 靠左   |
| ---- |  ---: | :--:  | :---  |
| 内容  |   内容 |  内容  | 内容   |
| 内容  |   内容 |  条目  | 内容   |

预览：

默认	靠右	居中	靠左
内容	内容	内容	内容
内容	内容	条目	内容

发现宝藏？

参考资料

Markdown－语法说明

About Me

作者微博: @GcsSloop

Markdown实用技巧－快速入门

Mon, 24 Oct 2016 00:00:00 +0800

本文为 Markdown实用技巧 系列的基础文章，并没有不可描述的内容 (⊙ω⊙)

自从接触了 Markdown 之后，就一直用 Markdown 作为自己的主要书写工具，不论是平时做一些简单的纪录，还是用来写博客，写文档都是非常方便。你现在看到的这篇文章就是用 Markdown 进行书写的。

我最早因为 GitHub 而了解到 Markdown，当时支持 Markdown 的平台并不多，现在很多平台都已经开始支持 Markdown了，不论是老牌的 CSDN 还是比较新的简书、掘金、DiyCode 等都支持使用Markdown进行写作，借此趋势，赶紧向还不了解 Markdown 的魔法师强势安利一波。

如果你已经开始使用 Markdown了，那么本文作用对你可以能并不大，请看后续文章。

什么是 Markdown ?

Markdown 是一种轻量级标记语言，创始人为約翰·格魯伯（John Gruber）。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档”。

相比于 HTML (~~How To Make Love~~ 大雾)， Markdown 更加精简，更加注重内容，其主要宗旨是「易读易写」 一般 Markdown 最终都是要转换为 HTML 的，可用于书写博客或者网页，但借助某些工具，可以讲 Markdown 转换为 pdf，word，Latex 等其他常见的文件格式。

为什么选择 Markdown ?

选择 Markdown 但理由只有一个：方便，节省时间!

至于为什么这样说，请看下面内容：

语法简洁，没有任何编程基础的人十几分钟语言即可入门。
注重内容，专注于内容编写，不再因为格式拍版而苦恼 (word格式刷工具哭晕在厕所)。
易阅读性，即便是没有经过转换的 Markdown 文件，大部分文字内容仍可阅读。
易编辑性，任何文本编辑器都能编辑 Markdown 文件。
跨平台性，任何平台均能打开 Markdown 文件，由于是纯文本文件，不存在格式兼容的问题。
导出方便，支持导出为 HTML，PDF，Word(.docx)，LaTex 等常见格式(需要工具支持)。

在 Windows 上编写的文档，非常方便的就能在 Mac 上继续编辑，方便数据迁移，降低沟通成本。

Markdown 存在的问题

前面吹嘘了 Markdown 的那么多优点，下面就说一下其中的不足：

图片问题，很多人都觉得 Markdown 文件插入图片麻烦，还要自己上传找链接。
语法兼容，基础语法是兼容的，但不同工具(平台)的扩展语法不兼容(由于没有统一标准)。
细节控制，Markdown只提供最基础的格式，其显示样式主要由CSS控制，很难针对性的控制部分内容。

以上应该是 Markdown 最常见的一些麻烦，不过不必担心，后续文章会教大家来如何解决这些问题，取其精华，去其糟粕，让 Markdown 运用得心应手。

Markdown 编辑器推荐

俗话说，工欲善其事，必先利其器，虽然 Markdown 用任何文本编辑器都能打开编辑，但仍需要专业工具进行转化，常见 Markdown 编辑器我基本上都尝试用过，在此简单推荐几种，大家找适合自己的就行。

仅推荐本地编辑器，在线编辑器根据需要自己选择，很多平台都已经支持直接用 Markdown 进行编辑了。

编辑器	支持平台	支持导出格式
Typora 正在开发，界面简洁，对 HTML 语法支持较弱，支持导出文件类型较多(个人目前正在使用的编辑器)。	Mac、 Windows、 Linux	HTML、 Word(.docx)、 PDF、 LaTex 等
EME 正在开发，界面简洁，对 HTML 语法支持友好，支持导出文件类型较少。	Mac、 Windows、 Linux	仅 PDF
Mou 停止开发，界面简洁，对 HTML 语法支持友好，但支持导出文件类型较少。	Mac	HTML、 PDF
Macdown 正在开发，相当于Mou的开源增强版，对 HTML 语法支持友好，但支持导出文件类型较少。	Mac	HTML、 PDF
Sublime Text 神兵利器，需要安装插件才能使用，相对比较麻烦，适合高级魔法师。	Mac、 Windows、 Linux	多种格式(插件)
Atom 神兵利器，支持多种常见的编程语言，如果仅仅是为了写 Markdown 不推荐安装。	Mac、 Windows、 Linux	HTML、 PDF(插件)

快速入门

本文是为了帮助还不了解 Markdown 的魔法师有一个简单的认知，所以快速入门只说最基本的一些内容。

标题

通过在行首插入 1 到 6 个 # ，来定义对应的 1 到 6 阶标题：

Markdown	预览
# 一级标题	一级标题
## 二级标题	二级标题
### 三级标题	三级标题

分段

Markdown

预览

第一行
相邻被视为同一段落。

第一行相邻被视为同一段落。

第一行

两行之间存在空行，视为不同段落。

第一行

两行之间存在空行，视为不同段落。

链接和图片

Markdown	预览
[GcsSloop](http://www.gcssloop.com)	GcsSloop
![GcsSloop Blog](http://gcsblog.oss-cn-shanghai.aliyuncs.com/blog/2019-04-29-072747.jpg?gcssloop)

知道了上面这些内容就已经算是入门了，可以用 Markdown 进行快乐的写作，如果想了解更多语法相关内容，请看下一篇 Markdown实用技巧－基础语法

发现宝藏？

参考资料

Markdown－基础语法

About Me

作者微博: @GcsSloop

安卓自定义View进阶-事件分发机制详解

Fri, 14 Oct 2016 00:00:00 +0800

Android 事件分发机制详解，在上一篇文章事件分发机制原理中简要分析了一下事件分发机制的原理，原理是十分简单的，一句话就能总结：责任链模式，事件层层传递，直到被消费。 虽然原理简单，但是随着 Android 不断的发展，实际运用场景也越来越复杂，所以想要彻底玩转事件分发机制还需要一定技巧，本篇事件分发机制详解将带大家了解 …

你以为我接下来要讲源码？
我就不按套路，所有的源码都是为了适应具体的应用场景而写的，只要能够理解运用场景，理解源码也就十分简单了。所以本篇的核心问题是：正确理解在实际场景中事件分发机制的作用。 会涉及到源码，但不是主角。

注意：本文中所有源码分析部分均基于 API23(Android 6.0) 版本，由于安卓系统源码改变很多，可能与之前版本有所不同，但基本流程都是一致的。

常见事件

既然是事件分发，总要有事件才能分发吧，所以我们先了解一下常见的几种事件。

根据面向对象思想，事件被封装成 MotionEvent 对象，由于本篇重点不在于此，所以只会涉及到几个与手指触摸相关的常见事件:

事件	简介
ACTION_DOWN	手指初次接触到屏幕时触发。
ACTION_MOVE	手指在屏幕上滑动时触发，会会多次触发。
ACTION_UP	手指离开屏幕时触发。
ACTION_CANCEL	事件被上层拦截时触发。

对于单指触控来说，一次简单的交互流程是这样的:

手指落下(ACTION_DOWN) －> 移动(ACTION_MOVE) －> 离开(ACTION_UP)

本次事例中 ACTION_MOVE 有多次触发。

如果仅仅是单击(手指按下再抬起)，不会触发 ACTION_MOVE。

事件分发、拦截与消费

关于这一部分内容，上一篇文章事件分发机制原理已经将流程整理的比较清楚了，本文会深入细节来研究这些内容。之所以分开讲，是为了防止大家被细节所迷惑而忽略了整体逻辑。

√ 表示有该方法。

X 表示没有该方法。

类型	相关方法	ViewGroup	View
事件分发	dispatchTouchEvent	√	√
事件拦截	onInterceptTouchEvent	√	X
事件消费	onTouchEvent	√	√

View 相关

dispatchTouchEvent 是事件分发机制中的核心，所有的事件调度都归它管。不过我细看表格， ViewGroup 有 dispatchTouchEvent 也就算了，毕竟人家有一堆 ChildView 需要管理，但为啥 View 也有？这就引出了我们的第一个疑问。

Q: 为什么 View 会有 dispatchTouchEvent ?

A: 我们知道 View 可以注册很多事件监听器，例如：单击事件(onClick)、长按事件(onLongClick)、触摸事件(onTouch)，并且View自身也有 onTouchEvent 方法，那么问题来了，这么多与事件相关的方法应该由谁管理？毋庸置疑就是 dispatchTouchEvent，所以 View 也会有事件分发。

相信看到这里很多小伙伴会产生第二个疑问，View 有这么多事件监听器，到底哪个先执行？

Q: 与 View 事件相关的各个方法调用顺序是怎样的？

A: 如果不去看源码，想一下让自己设计会怎样？

单击事件(onClickListener) 需要两个两个事件(ACTION_DOWN 和 ACTION_UP )才能触发，如果先分配给onClick判断，等它判断完，用户手指已经离开屏幕，黄花菜都凉了，定然造成 View 无法响应其他事件，应该最后调用。(最后)
长按事件(onLongClickListener) 同理，也是需要长时间等待才能出结果，肯定不能排到前面，但因为不需要ACTION_UP，应该排在 onClick 前面。(onLongClickListener > onClickListener)
触摸事件(onTouchListener) 如果用户注册了触摸事件，说明用户要自己处理触摸事件了，这个应该排在最前面。(最前)
View自身处理(onTouchEvent) 提供了一种默认的处理方式，如果用户已经处理好了，也就不需要了，所以应该排在 onTouchListener 后面。(onTouchListener > onTouchEvent)

所以事件的调度顺序应该是 onTouchListener > onTouchEvent > onLongClickListener > onClickListener。

下面我们来看一下实际测试结果:

手指按下，不移动，稍等片刻再抬起。

[Listener ]: onTouchListener      ACTION_DOWN
[GcsView  ]: onTouchEvent         ACTION_DOWN
[Listener ]: onLongClickListener  
[Listener ]: onTouchListener      ACTION_UP
[GcsView  ]: onTouchEvent         ACTION_UP
[Listener ]: onClickListener      

可以看到，测试结果也支持我们猜测的结论，因为长按 onLongClickListener 不需要 ACTION_UP 所以会在 ACTION_DOWN 之后就触发。

接下来就看一下源码是怎么设计的(省略了大量无关代码)：

public boolean dispatchTouchEvent(MotionEvent event) {
    ...
    boolean result = false;	// result 为返回值，主要作用是告诉调用者事件是否已经被消费。
    if (onFilterTouchEventForSecurity(event)) {
        ListenerInfo li = mListenerInfo;
        /** 
         * 如果设置了OnTouchListener，并且当前 View 可点击，就调用监听器的 onTouch 方法，
         * 如果 onTouch 方法返回值为 true，就设置 result 为 true。
         */
        if (li != null && li.mOnTouchListener != null
                && (mViewFlags & ENABLED_MASK) == ENABLED
                && li.mOnTouchListener.onTouch(this, event)) {
            result = true;
        }
      
        /** 
         * 如果 result 为 false，则调用自身的 onTouchEvent。
         * 如果 onTouchEvent 返回值为 true，则设置 result 为 true。
         */
        if (!result && onTouchEvent(event)) {
            result = true;
        }
    }
    ...
    return result;
}

如果觉得源码还是太长，那么用伪代码实现应当是这样的(省略若干安全判断)，简单粗暴:

public boolean dispatchTouchEvent(MotionEvent event) {
  if (mOnTouchListener.onTouch(this, event)) {
      return true;
  } else if (onTouchEvent(event)) {
      return true;
  }
  return false;
}

正当你沉迷在源码的”精妙”逻辑的时候，你可能没发现有两个东西失踪了，等回过神来，定睛一看，哎呦妈呀，OnClick 和 OnLongClick 去哪里了？

不要担心，OnClick 和 OnLongClick 的具体调用位置在 onTouchEvent 中，看源码(同样省略大量无关代码):

public boolean onTouchEvent(MotionEvent event) {
    ...
    final int action = event.getAction();
  	// 检查各种 clickable
    if (((viewFlags & CLICKABLE) == CLICKABLE ||
            (viewFlags & LONG_CLICKABLE) == LONG_CLICKABLE) ||
            (viewFlags & CONTEXT_CLICKABLE) == CONTEXT_CLICKABLE) {
        switch (action) {
            case MotionEvent.ACTION_UP:
                ...
                removeLongPressCallback();  // 移除长按
                ...
                performClick();             // 检查单击
                ...
                break;
            case MotionEvent.ACTION_DOWN:
                ...
                checkForLongClick(0);       // 检测长按
                ...
                break;
            ...
        }
        return true;                        // ◀︎表示事件被消费
    }
    return false;
}

注意了，第一个重点要出现了(敲黑板)!

注意上面代码中存在一个 return true; 并且是只要 View 可点击就返回 true，就表示事件被消费了。

举个栗子: I have a RelativeLayout，I have a View，Ugh，RelativeLayout - View
<RelativeLayout
    android:background="#CCC"
    android:id="@+id/layout"
    android:onClick="myClick"
    android:layout_width="200dp"
    android:layout_height="200dp">
    <View
        android:clickable="true"
        android:layout_width="200dp"
        android:layout_height="200dp" />
</RelativeLayout>
现在你有了一个 RelativeLayout - View 你开开心心的为 RelativeLayout 设置了一个点击事件myClick，然而你会发现不论怎么点都不会接收到信息，仔细一看，发现内部的 View 有一个属性 android:clickable="true" 正是这个看似不起眼的属性把事件给消费掉了，由此我们可以得出如下结论:
1. 不论 View 自身是否注册点击事件，只要 View 是可点击的就会消费事件。
2. 事件是否被消费由返回值决定，true 表示消费，false 表示不消费，与是否使用了事件无关。

关于 View 的事件分发先说这么多，下面我们来看一下 ViewGroup 的事件分发。

ViewGroup 相关

ViewGroup(通常是各种Layout) 的事件分发相对来说就要麻烦一些，因为 ViewGroup 不仅要考虑自身，还要考虑各种 ChildView，一旦处理不好就容易引起各种事件冲突，正所谓养儿方知父母难啊。

VIewGroup 的事件分发流程又是如何的呢？

上一篇文章事件分发机制原理中我们了解到事件是通过ViewGroup一层一层传递的，最终传递给 View，ViewGroup 要比它的 ChildView 先拿到事件，并且有权决定是否告诉要告诉 ChildView。在默认的情况下 ViewGroup 事件分发流程是这样的。

1.判断自身是否需要(询问 onInterceptTouchEvent 是否拦截)，如果需要，调用自己的 onTouchEvent。
2.自身不需要或者不确定，则询问 ChildView ，一般来说是调用手指触摸位置的 ChildView。
3.如果子 ChildView 不需要则调用自身的 onTouchEvent。

用伪代码应该是这样的:

public boolean dispatchTouchEvent(MotionEvent ev) {
    boolean result = false;             // 默认状态为没有消费过

    if (!onInterceptTouchEvent(ev)) {   // 如果没有拦截交给子View
        result = child.dispatchTouchEvent(ev);
    }

    if (!result) {                      // 如果事件没有被消费,询问自身onTouchEvent
        result = onTouchEvent(ev);
    }

    return result;
}

有人看到这里可能会有疑问，我看过源码，ViewGroup 的 dispatchTouchEvent 可有二百多行呢，你弄这几行就想忽悠我，别以为我读书少。

当然了，上述源码是不完善的，还有很多问题是没有解决的，例如:

1. ViewGroup 中可能有多个 ChildView，如何判断应该分配给哪一个？

这个很容易，就是把所有的 ChildView 遍历一遍，如果手指触摸的点在 ChildView 区域内就分发给这个View。

2. 当该点的 ChildView 有重叠时应该如何分配？

当 ChildView 重叠时，一般会分配给显示在最上面的 ChildView。
如何判断哪个是显示在最上面的呢？后面加载的一般会覆盖掉之前的，所以显示在最上面的是最后加载的。

如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_main"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    tools:context="com.gcssloop.viewtest.MainActivity">
    <View
        android:id="@+id/view1"
        android:background="#E4A07B"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
    <View
        android:id="@+id/view2"
        android:layout_margin="100dp"
        android:background="#BDDA66"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
</RelativeLayout>

当手指点击有重叠区域时，分如下几种情况:

只有 View1 可点击时，事件将会分配给 View1，即使被 View2 遮挡，这一部分仍是 View1 的可点击区域。
只有 View2 可点击时，事件将会分配给 View2。
View1 和 View2 均可点击时，事件会分配给后加载的 View2，View2 将事件消费掉，View1接收不到事件。

注意:

上面说的是可点击，可点击包括很多种情况，只要你给View注册了 onClickListener、onLongClickListener、OnContextClickListener 其中的任何一个监听器或者设置了 android:clickable=”true” 就代表这个 View 是可点击的。
另外，某些 View 默认就是可点击的，例如，Button，CheckBox 等。
给 View 注册 OnTouchListener 不会影响 View 的可点击状态。即使给 View 注册 OnTouchListener ，只要不返回 true 就不会消费事件。

3. ViewGroup 和 ChildView 同时注册了事件监听器(onClick等)，哪个会执行?

事件优先给 ChildView，会被 ChildView消费掉，ViewGroup 不会响应。

4. 所有事件都应该被同一 View 消费

在上面的例子中我们分析后可以了解到，同一次点击事件只能被一个 View 消费，这是为什呢？主要是为了防止事件响应混乱，如果再一次完整的事件中分别将不同的事件分配给了不同的 View 容易造成事件响应混乱。

View 中 onClick 事件需要同时接收到 ACTION_DOWN 和 ACTION_UP 才能触发，如果分配给了不同的 View，那么 onClick 将无法被正确触发。

安卓为了保证所有的事件都是被一个 View 消费的，对第一次的事件( ACTION_DOWN )进行了特殊判断，View 只有消费了 ACTION_DOWN 事件，才能接收到后续的事件(可点击控件会默认消费所有事件)，并且会将后续所有事件传递过来，不会再传递给其他 View，除非上层 View 进行了拦截。
如果上层 View 拦截了当前正在处理的事件，会收到一个 ACTION_CANCEL，表示当前事件已经结束，后续事件不会再传递过来。

源码:

其实如果能够理解上面的内容，不看源码也能非常顺利的使用事件分发，但源码中能挖掘出更多的内容。

public boolean dispatchTouchEvent(MotionEvent ev) {
  	// 调试用
    if (mInputEventConsistencyVerifier != null) {
        mInputEventConsistencyVerifier.onTouchEvent(ev, 1);
    }

  	// 判断事件是否是针对可访问的焦点视图(很晚才添加的内容，个人猜测和屏幕辅助相关，方便盲人等使用设备)
    if (ev.isTargetAccessibilityFocus() && isAccessibilityFocusedViewOrHost()) {
        ev.setTargetAccessibilityFocus(false);
    }

    boolean handled = false;
    if (onFilterTouchEventForSecurity(ev)) {
        final int action = ev.getAction();
        final int actionMasked = action & MotionEvent.ACTION_MASK;

        // 处理第一次ACTION_DOWN.
        if (actionMasked == MotionEvent.ACTION_DOWN) {
            // 清除之前所有的状态
            cancelAndClearTouchTargets(ev);
            resetTouchState();
        }

        // 检查是否需要拦截.
        final boolean intercepted;
        if (actionMasked == MotionEvent.ACTION_DOWN || mFirstTouchTarget != null) {
            final boolean disallowIntercept = (mGroupFlags & FLAG_DISALLOW_INTERCEPT) != 0;
            if (!disallowIntercept) {
                intercepted = onInterceptTouchEvent(ev);	// 询问是否拦截
                ev.setAction(action); 						// 恢复操作，防止被更改
            } else {
                intercepted = false;
            }
        } else {
          	// 没有目标来处理该事件，而且也不是一个新的事件事件(ACTION_DOWN), 进行拦截。
            intercepted = true;
        }

      	// 判断事件是否是针对可访问的焦点视图
        if (intercepted || mFirstTouchTarget != null) {
            ev.setTargetAccessibilityFocus(false);
        }

        // 检查事件是否被取消(ACTION_CANCEL).
        final boolean canceled = resetCancelNextUpFlag(this)
                || actionMasked == MotionEvent.ACTION_CANCEL;

        final boolean split = (mGroupFlags & FLAG_SPLIT_MOTION_EVENTS) != 0;
        TouchTarget newTouchTarget = null;
        boolean alreadyDispatchedToNewTouchTarget = false;
      	
      	// 如果没有取消也没有被拦截	(进入事件分发)
        if (!canceled && !intercepted) {

            // 如果事件是针对可访问性焦点视图，我们将其提供给具有可访问性焦点的视图。
          	// 如果它不处理它，我们清除该标志并像往常一样将事件分派给所有的 ChildView。 
            // 我们检测并避免保持这种状态，因为这些事非常罕见。
            View childWithAccessibilityFocus = ev.isTargetAccessibilityFocus()
                    ? findChildWithAccessibilityFocus() : null;

            if (actionMasked == MotionEvent.ACTION_DOWN
                    || (split && actionMasked == MotionEvent.ACTION_POINTER_DOWN)
                    || actionMasked == MotionEvent.ACTION_HOVER_MOVE) {
                final int actionIndex = ev.getActionIndex();
                final int idBitsToAssign = split ? 1 << ev.getPointerId(actionIndex)
                        : TouchTarget.ALL_POINTER_IDS;

                // 清除此指针ID的早期触摸目标，防止不同步。
                removePointersFromTouchTargets(idBitsToAssign);

                final int childrenCount = mChildrenCount;
                if (newTouchTarget == null && childrenCount != 0) {
                    final float x = ev.getX(actionIndex);	// 获取触摸位置坐标
                    final float y = ev.getY(actionIndex);
                    // 查找可以接受事件的 ChildView
                    final ArrayList<View> preorderedList = buildOrderedChildList();
                    final boolean customOrder = preorderedList == null
                            && isChildrenDrawingOrderEnabled();
                    final View[] children = mChildren;
                  	// ▼注意，从最后向前扫描
                    for (int i = childrenCount - 1; i >= 0; i--) {
                        final int childIndex = customOrder
                                ? getChildDrawingOrder(childrenCount, i) : i;
                        final View child = (preorderedList == null)
                                ? children[childIndex] : preorderedList.get(childIndex);

                        // 如果有一个视图具有可访问性焦点，我们希望它首先获取事件，
                      	// 如果不处理，我们将执行正常的分派。 
                      	// 尽管这可能会分发两次，但它能保证在给定的时间内更安全的执行。
                        if (childWithAccessibilityFocus != null) {
                            if (childWithAccessibilityFocus != child) {
                                continue;
                            }
                            childWithAccessibilityFocus = null;
                            i = childrenCount - 1;
                        }

                      	// 检查View是否允许接受事件(即处于显示状态(VISIBLE)或者正在播放动画)
                      	// 检查触摸位置是否在View区域内
                        if (!canViewReceivePointerEvents(child)
                                || !isTransformedTouchPointInView(x, y, child, null)) {
                            ev.setTargetAccessibilityFocus(false);
                            continue;
                        }

                      	// getTouchTarget 中判断了 child 是否包含在 mFirstTouchTarget 中
                      	// 如果有返回 target，如果没有返回 null 
                        newTouchTarget = getTouchTarget(child);
                        if (newTouchTarget != null) {
                            // ChildView 已经准备好接受在其区域内的事件。
                            newTouchTarget.pointerIdBits |= idBitsToAssign;
                            break;	// ◀︎已经找到目标View，跳出循环
                        }

                        resetCancelNextUpFlag(child);
                        if (dispatchTransformedTouchEvent(ev, false, child, idBitsToAssign)) {
                            mLastTouchDownTime = ev.getDownTime();
                            if (preorderedList != null) {
                                for (int j = 0; j < childrenCount; j++) {
                                    if (children[childIndex] == mChildren[j]) {
                                        mLastTouchDownIndex = j;
                                        break;
                                    }
                                }
                            } else {
                                mLastTouchDownIndex = childIndex;
                            }
                            mLastTouchDownX = ev.getX();
                            mLastTouchDownY = ev.getY();
                            newTouchTarget = addTouchTarget(child, idBitsToAssign);
                            alreadyDispatchedToNewTouchTarget = true;
                            break;
                        }
                      
                        ev.setTargetAccessibilityFocus(false);
                    }
                    if (preorderedList != null) preorderedList.clear();
                }

                if (newTouchTarget == null && mFirstTouchTarget != null) {
                    // 没有找到 ChildView 接收事件
                    newTouchTarget = mFirstTouchTarget;
                    while (newTouchTarget.next != null) {
                        newTouchTarget = newTouchTarget.next;
                    }
                    newTouchTarget.pointerIdBits |= idBitsToAssign;
                }
            }
        }

        // 分发 TouchTarget
        if (mFirstTouchTarget == null) {
            // 没有 TouchTarget，将当前 ViewGroup 当作普通的 View 处理。
            handled = dispatchTransformedTouchEvent(ev, canceled, null,
                    TouchTarget.ALL_POINTER_IDS);
        } else {
            // 分发TouchTarget，如果我们已经分发过，则避免分配给新的目标。 
          	// 如有必要，取消分发。
            TouchTarget predecessor = null;
            TouchTarget target = mFirstTouchTarget;
            while (target != null) {
                final TouchTarget next = target.next;
                if (alreadyDispatchedToNewTouchTarget && target == newTouchTarget) {
                    handled = true;
                } else {
                    final boolean cancelChild = resetCancelNextUpFlag(target.child)
                            || intercepted;
                    if (dispatchTransformedTouchEvent(ev, cancelChild,
                            target.child, target.pointerIdBits)) {
                        handled = true;
                    }
                    if (cancelChild) {
                        if (predecessor == null) {
                            mFirstTouchTarget = next;
                        } else {
                            predecessor.next = next;
                        }
                        target.recycle();
                        target = next;
                        continue;
                    }
                }
                predecessor = target;
                target = next;
            }
        }

        // 如果需要，更新指针的触摸目标列表或取消。
        if (canceled
                || actionMasked == MotionEvent.ACTION_UP
                || actionMasked == MotionEvent.ACTION_HOVER_MOVE) {
            resetTouchState();
        } else if (split && actionMasked == MotionEvent.ACTION_POINTER_UP) {
            final int actionIndex = ev.getActionIndex();
            final int idBitsToRemove = 1 << ev.getPointerId(actionIndex);
            removePointersFromTouchTargets(idBitsToRemove);
        }
    }

    if (!handled && mInputEventConsistencyVerifier != null) {
        mInputEventConsistencyVerifier.onUnhandledEvent(ev, 1);
    }
    return handled;
}

核心要点

事件分发原理: 责任链模式，事件层层传递，直到被消费。
View 的 dispatchTouchEvent 主要用于调度自身的监听器和 onTouchEvent。
View的事件的调度顺序是 onTouchListener > onTouchEvent > onLongClickListener > onClickListener 。
不论 View 自身是否注册点击事件，只要 View 是可点击的就会消费事件。
事件是否被消费由返回值决定，true 表示消费，false 表示不消费，与是否使用了事件无关。
ViewGroup 中可能有多个 ChildView 时，将事件分配给包含点击位置的 ChildView。
ViewGroup 和 ChildView 同时注册了事件监听器(onClick等)，由 ChildView 消费。
一次触摸流程中产生事件应被同一 View 消费，全部接收或者全部拒绝。
只要接受 ACTION_DOWN 就意味着接受所有的事件，拒绝 ACTION_DOWN 则不会收到后续内容。
如果当前正在处理的事件被上层 View 拦截，会收到一个 ACTION_CANCEL，后续事件不会再传递过来。

总结

本文啰嗦了这么多内容，但真正需要注意的就是核心要点中的几个概念，只要能正确理解这些概念，相信理解事件分发机制将再也不是难题。

最后，个人推荐阅读源码的方法，先尝试用自己的角度去分析，建立概念，然后看源码进行验证、对比，如果发现自己建立的概念有问题，就尝试修正自己的概念，这样比较容易理解原作者的意图，也不容易被众多的代码所迷惑。

就像 ViewGroup 中的 dispatchTouchEvent 内容非常多，主要是为了应对实际的场景，里面有很多安全判断，处理多指触控等内容，这些如果不先建立概念就去看源码很容易被这些细节问题所迷惑。

参考资料

View
ViewGroup.java
Android Touch事件分发详解
 基于源码来了解Android的事件分发机制

About Me

作者微博: @GcsSloop

让脚本说话"厉害了我的哥"

Mon, 10 Oct 2016 00:00:00 +0800

前段时间发现 Mac 上一个有趣的方法可以让系统说话。例如在终端输入：

say "厉害了我的哥"

于是把我自己经常使用的图片压缩脚本升了一下级，人工(智能)语音提示，开启装逼新时代!

本次升级进行了平台安全判断，不会影响其它平台用户的正常使用。
在 Mac 上，它说话同时输出信息，在其他平台上只会输出信息。

语音提示默认开启，可以关闭语音提示，将源码中voice设置为 False 即关闭语音提示。

voice = False 	# 是否语音提示

想要调教输出内容的自己进源文件修改吧，代码量不到一百行，短小精悍，纯种 Python，优雅简洁。相信对大家来说，调教一下也不是什么难事。

点击此处下载脚本(右键 -> 另存为)

使用方法

注意：这是我的图片压缩脚本使用方法，不需要的可以关闭了。

一.配置环境

Python: 保证电脑中存在 Python 环境，(如果是Mac，则自带的有Python环境)。

Tinify: 导入Tinify

  pip install --upgrade tinify

二.申请 API key

点击此处申请 API key

一个 key 每个月可以免费压缩500张图片，可以申请多个 key。

三.配置脚本并运行

点击此处下载脚本(右键 -> 另存为)

下载完该脚本后，你需要简单编辑一下该脚本，将申请到到API key 填写进去。

tinify.key = "你申请到的API key"

之后你可以将该脚本放入到需要压缩的图片的文件夹下，然后在命令行(终端)中进入到该文件夹，执行如下命令即可:

python tinypng.py

生成的文件会存入当前目录下一个名为tiny的文件夹中。

运行示例及大小对比(有图有真相):

四.支持参数

在 v1.0.1 版本中进行了参数支持，详情见下表:

参数	参数类型	摘要	示例
无参		压缩当前文件夹下所有图片文件	`tinypng.py`
`－f`	图像文件	压缩指定的单个文件	`tinypng.py -f /User/GcsSloop/demo.jpg`
`－d`	文件夹	压缩指定文件夹下所有图片文件	`tinypng.py -d /User/GcsSloop/DemoDir`
`-w`	整型数字	压缩后图片的宽度，不指定则宽度不变	`tinypng.py -w 300`

参数优先级:

  －f > －d > 无参

如果指定了 －f 则只会压缩指定文件，即使后续跟了 －d 也不会压缩指定的文件夹

 －w 无冲突，均可使用

－w 用于指定压缩后图片的宽度(width)高度自适应缩放，所以均可使用，(选项没有先后顺序)示例如下:

tinypng.py －w 300                              // 压缩当前目录所有图片文件，压缩后文件跨度为300

tinypng.py －w 300 -f /User/GcsSloop/demo.jpg   // 指定压缩一个文件，压缩后文件宽度为300

五.辅助优化

这一步不是必要的步骤，只是帮助你优化一些内容:

任意位置启动(适用于 Linux 和 OS X 平台):

如果你觉得每次都需要复制 tinypng.py 文件到需要压缩到目录太麻烦，可以将该脚本存储到一个文件夹中，之后将该文件夹添加进环境变量，就能在任意位置执行该脚本了,(仅适用于 Linux 和 OS X 平台) 使用命令直接是文件名，前面无需加python,如:

tinypng.py

如果使用直接使用文件名无法执行，则说明文件没有可执行权限，使用如下命令添加可执行权限:

chmod +x tinypng.py

Mac 配置环境变量

从当前目录启动(适用于 OS X 平台):

如果从命令行中进入到某个目录比较麻烦，所以在 Mac 上你可以使用 XtraFinder 插件来给你的右键添加一个从当前目录启动选项，直接在当前目录下启动终端，添加方式在 XtraFinder 到偏好设置里面。

当然了，你也可以直接用 tinypng.py -d 目录 的形式直接指定压缩某个文件夹下的所有图片文件，非图片文件不会受到影响。

点击这里查看Finder增强插件到安装方法

更多关于脚本的详情戳这里
Tinypng官网

About

据说关注作者微博，不仅能第一时间收到新文章发布信息，还能变帅哦!

作者微博: @GcsSloop

安卓自定义View进阶-事件分发机制原理

Wed, 28 Sep 2016 00:00:00 +0800

之前讲解了很多与View绘图相关的知识，你可以在安卓自定义View教程目录中查看到这些文章，如果你理解了这些文章，那么至少2D绘图部分不是难题了，大部分的需求都能满足，但是关于View还有很多知识点，例如: 让绘图更加炫酷的Paint，让View动起来的动画，与用户交互的触控事件 等一系列内容。本次就带大家简单的了解一下与交互息息相关的东西－事件分发原理。

本次魔法小火车的终点站是事件分发，请各位魔法师带好装备，准备登车启程。

注意：本文中所有源码分析部分均基于 API23(Android 6.0) 版本，由于安卓系统源码改变很多，可能与之前版本有所不同，但基本流程都是一致的。

为什么要有事件分发机制？

安卓上面的View是树形结构的，View可能会重叠在一起，当我们点击的地方有多个View都可以响应的时候，这个点击事件应该给谁呢？为了解决这一个问题，就有了事件分发机制。

如下图，View是一层一层嵌套的，当手指点击 View1 的时候，下面的ViewGroupA、 RootView 等也是能够响应的，为了确定到底应该是哪个View处理这次点击事件，就需要事件分发机制来帮忙。

View的结构:

我们的View是树形结构的，在上一个问题中实例View的结构大致如下:

layout文件:

<com.gcssloop.touchevent.test.RootView
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="300dp"
	android:background="#4E5268"
	android:layout_margin="20dp"
	tools:context="com.gcssloop.touchevent.MainActivity">

	<com.gcssloop.touchevent.test.ViewGroupA
		android:background="#95C3FA"
		android:layout_width="200dp"
		android:layout_height="200dp">

		<com.gcssloop.touchevent.test.View1
			android:background="#BDDA66"
			android:layout_width="130dp"
			android:layout_height="130dp"/>

	</com.gcssloop.touchevent.test.ViewGroupA>

	<com.gcssloop.touchevent.test.View2
		android:layout_alignParentRight="true"
		android:background="#BDDA66"
		android:layout_width="80dp"
		android:layout_height="80dp"/>

</com.gcssloop.touchevent.test.RootView>

View结构:

可以看到在上面的View结构中莫名多出来的两个东西，PhoneWindow 和 DecorView ，这两个我们并没有在Layout文件中定义过，但是为什么会存在呢？

仔细观察上面的 layout 文件，你会发现一个问题，我在 layout 文件中的最顶层 View(Group) 的大小并不是填满父窗体的，留下了大量的空白区域，由于我们的手机屏幕不能透明，所以这些空白区域肯定要显示一些东西，那么应该显示什么呢？

有过安卓开发经验的都知道，屏幕上没有View遮挡的部分会显示主题的颜色。不仅如此，最上面的一个标题栏也没有在 layout 文件中，这个标题栏又是显示在哪里的呢？

你没有猜错，这个主题颜色和标题栏等内容就是显示在DecorView中的。

现在知道 DecorView 是干什么的了，那么PhoneWindow 又有什么作用？

要了解 PhoneWindow 是干啥的，首先要了解啥是 Window ，看官方说明：

Abstract base class for a top-level window look and behavior policy. An instance of this class should be used as the top-level view added to the window manager. It provides standard UI policies such as a background, title area, default key processing, etc.

简单来说，Window是一个抽象类，是所有视图的最顶层容器，视图的外观和行为都归他管，不论是背景显示，标题栏还是事件处理都是他管理的范畴，它其实就像是View界的太上皇(虽然能管的事情看似很多，但是没实权，因为抽象类不能直接使用)。

而 PhoneWindow 作为 Window 的唯一亲儿子(唯一实现类)，自然就是 View 界的皇帝了，PhoneWindow 的权利可是非常大大，不过对于我们来说用处并不大，因为皇帝平时都是躲在深宫里面的，虽然偶尔用特殊方法能见上一面，但想要完全指挥 PhoneWindow 为你工作是很困难的。

而上面说的 DecorView 是 PhoneWindow 的一个内部类，其职位相当于小太监，就是跟在 PhoneWindow 身边专业为 PhoneWindow 服务的，除了自己要干活之外，也负责消息的传递，PhoneWindow 的指示通过 DecorView 传递给下面的 View，而下面 View 的信息也通过 DecorView 回传给 PhoneWindow。

事件分发、拦截与消费

下表省略了 PhoneWidow 和 DecorView。

√ 表示有该方法。

X 表示没有该方法。

类型	相关方法	Activity	ViewGroup	View
事件分发	dispatchTouchEvent	√	√	√
事件拦截	onInterceptTouchEvent	X	√	X
事件消费	onTouchEvent	√	√	√

这个三个方法均有一个 boolean(布尔) 类型的返回值，通过返回 true 和 false 来控制事件传递的流程。

PS: 从上表可以看到 Activity 和 View 都是没有事件拦截的，这是因为：

Activity 作为原始的事件分发者，如果 Activity 拦截了事件会导致整个屏幕都无法响应事件，这肯定不是我们想要的效果。

View最为事件传递的最末端，要么消费掉事件，要么不处理进行回传，根本没必要进行事件拦截。

事件分发流程

前面我们了解到了我们的View是树形结构的，基于这样的结构，我们的事件可以进行有序的分发。

事件收集之后最先传递给 Activity，然后依次向下传递，大致如下：

Activity －> PhoneWindow －> DecorView －> ViewGroup －> ... －> View

这样的事件分发机制逻辑非常清晰，可是，你是否注意到一个问题？如果最后分发到View，如果这个View也没有处理事件怎么办，就这样让事件浪费掉？

当然不会啦，如果没有任何View消费掉事件，那么这个事件会按照反方向回传，最终传回给Activity，如果最后 Activity 也没有处理，本次事件才会被抛弃:

Activity <－ PhoneWindow <－ DecorView <－ ViewGroup <－ ... <－ View

看到这里，我不禁微微一皱眉，这个东西咋看起来那么熟悉呢？再仔细一看，这不就是一个非常经典的责任链模式吗， 如果我能处理就拦截下来自己干，如果自己不能处理或者不确定就交给责任链中下一个对象。

这种设计是非常精巧的，上层View既可以直接拦截该事件，自己处理，也可以先询问(分发给)子View，如果子View需要就交给子View处理，如果子View不需要还能继续交给上层View处理。既保证了事件的有序性，又非常的灵活。在我第一次将这个逻辑弄清楚的时候，看着这样精妙的设计，简直想欢呼庆贺一下。

其实关于事件传递机制，吴小龙的 Android事件传递机制分析一文中的比喻非常有趣，本文也会借鉴一些其中的内容。

先确定几个角色：

Activity －公司大老板

RootView －项目经理

ViewGroupA －技术小组长

View1 －码农小王(公司里唯一的码农)

View2 －跑龙套的路人甲，无视即可

PS：由于 PhoneWindow 和 DecorView 我们无法直接操作，以下所有示例均省略了 PhoneWindow 和 DecorView。

1.点击 View1 区域但没有任何 View 消费事件

当手指在 View1 区域点击了一下之后，如果所有View都不消耗事件，你就能看到一个完整的事件分发流程，大致如下：

红色箭头方向表示事件分发方向。

绿色箭头方向表示事件回传方向。

注意: 上图显示分发流程仅仅是一个示意流程，并不代表实际情况，如果按照实际情况绘制，会导致流程图非常复杂和混乱，在纠结了好久之后做了一个艰难的决定，采用这样一个简化后的流程。

上面的流程中存在部分不合理内容，请大家选择性接受。

事件返回时 dispatchTouchEvent 直接指向了父View的 onTouchEvent 这一部分是不合理的，实际上它仅仅是给了父View的 dispatchTouchEvent 一个 false 返回值，父View根据返回值来调用自身的 onTouchEvent。

ViewGroup 是根据 onInterceptTouchEvent 的返回值来确定是调用子View的 dispatchTouchEvent 还是自身的 onTouchEvent，并没有将调用交给 onInterceptTouchEvent。

ViewGroup 的事件分发机制伪代码如下，可以看出调用的顺序。
public boolean dispatchTouchEvent(MotionEvent ev) {
    boolean result = false;             // 默认状态为没有消费过

    if (!onInterceptTouchEvent(ev)) {   // 如果没有拦截交给子View
        result = child.dispatchTouchEvent(ev);
    }

    if (!result) {                      // 如果事件没有被消费,询问自身onTouchEvent
        result = onTouchEvent(ev);
    }

    return result;
}

测试:

情景：老板: 我看公司最近业务不咋地，准备发展一下电商业务，下周之前做个淘宝出来试试怎么样。

事件顺序，老板(MainActivity)要做淘宝，这个事件通过各个部门(ViewGroup)一层一层的往下传，传到最底层的时候，码农小王(View1)发现做不了，于是消息又一层一层的回传到老板那里。

可以看到整个事件传递路线非常有序。从Activity开始，最后回传给Activity结束(由于我们无法操作Phone Window和DecorView，所以没有它们的信息)。

MainActivity [老板]: dispatchTouchEvent     经理,我准备发展一下电商业务,下周之前做一个淘宝出来.
RootView     [经理]: dispatchTouchEvent     呼叫技术部,老板要做淘宝,下周上线.
RootView     [经理]: onInterceptTouchEvent  (老板可能疯了,但又不是我做.)
ViewGroupA   [组长]: dispatchTouchEvent     老板要做淘宝,下周上线?
ViewGroupA   [组长]: onInterceptTouchEvent  (看着不太靠谱,先问问小王怎么看)
View1        [码农]: dispatchTouchEvent     做淘宝???
View1        [码农]: onTouchEvent           这个真心做不了啊.
ViewGroupA   [组长]: onTouchEvent           小王说做不了.
RootView     [经理]: onTouchEvent           报告老板, 技术部说做不了.
MainActivity [老板]: onTouchEvent           这么简单都做不了,你们都是干啥的(愤怒).

2.点击 View1 区域且事件被 View1 消费

如果事件被View1消费掉了则事件会回传告诉上层View这个事件已经被我解决了，上层View就无需再响应了。

注意：这张图中的事件回传路径才是正确的路径。

测试:

情景：老板: 我觉得咱们这个app按钮不好看，做的有光泽一点，要让人有一种想点的欲望。

事件顺序，老板(MainActivity)要做改界面，这个事件通过各个部门(ViewGroup)一层一层的往下传，传到最底层的时候，码农小王(View1)就在按钮上添加了一道光(为啥是小王呢？因为公司没有设计师)。

可以看出，事件一旦被消费就意味着消息传递的结束，上层View知道了事件已经被消费掉，就不再处理了。

MainActivity [老板]: dispatchTouchEvent     把按钮做的好看一点,要有光泽,给人一种点击的欲望.
RootView     [经理]: dispatchTouchEvent     技术部,老板说按钮不好看,要加一道光.
RootView     [经理]: onInterceptTouchEvent  
ViewGroupA   [组长]: dispatchTouchEvent     给按钮加上一道光.
ViewGroupA   [组长]: onInterceptTouchEvent  
View1        [码农]: dispatchTouchEvent     加一道光.
View1        [码农]: onTouchEvent           做好了.

加一道光：

3.点击 View1 区域但事件被 ViewGroupA 拦截

上层的View有权拦截事件，不传递给下层View，例如 ListView 滑动的时候，就不会将事件传递给下层的子 View。

注意：可以看到，如果上层拦截了事件，下层View将接收不到事件信息。

测试：

情景：老板: 报告一下项目进度。

事件顺序，老板(MainActivity)要知道项目进度，这个事件通过各个部门(ViewGroup)一层一层的往下传，传到技术组组长(ViewGroupA)的时候，组长(ViewGroupA)上报任务即可。无需告知码农小王(View1)。

MainActivity [老板]: dispatchTouchEvent     现在项目做到什么程度了?
RootView     [经理]: dispatchTouchEvent     技术部,你们的app快做完了么?
RootView     [经理]: onInterceptTouchEvent  
ViewGroupA   [组长]: dispatchTouchEvent     项目进度?
ViewGroupA   [组长]: onInterceptTouchEvent  
ViewGroupA   [组长]: onTouchEvent           正在测试,明天就测试完了

其他情况

事件分发机制设计到到情形非常多，这里就不一一列举了，记住以下几条原则就行了。

1.如果事件被消费，就意味着事件信息传递终止。
2.如果事件一直没有被消费，最后会传给Activity，如果Activity也不需要就被抛弃。
3.判断事件是否被消费是根据返回值，而不是根据你是否使用了事件。

文中测试用的源码下载

总结

View的事件分发机制实际上就是一个非常经典的责任链模式，如果你了解责任链模式，那么事件分发对你来说并不是什么难题，如果你不了解责任链模式，刚好借此机会学习一下啦。

责任链模式：

当有多个对象均可以处理同一请求的时候，将这些对象串联成一条链，并沿着这条链传递改请求，直到有对象处理它为止。

Android 中事件分发机制原理虽然非常简单，但由于实际场景非常复杂，一旦具体到某个场景中变得很麻烦，而本文仅仅是带你简单的了解一下事件分发机制，更详细的内容和具体的一些特殊情形处理会在后续文章中进行讲解。

参考资料

Activity
PhoneWindow
ViewGroup
View
Android事件传递机制分析
 Android ViewGroup/View 事件分发机制详解
 Android事件分发机制完全解析，带你从源码的角度彻底理解(上)
Android事件分发机制完全解析，带你从源码的角度彻底理解(下)
更简单的学习Android事件分发
《安卓开发艺术探索》

About Me

作者微博: @GcsSloop

程序员不可不知的版权协议

Tue, 20 Sep 2016 00:00:00 +0800

前一段时间知乎上关于版权问题的讨论有不少，例如这个新浪微博上的「知乎大神」是谁？涉嫌侵权吗？, 而且最近喜马拉雅FM也因为背景音乐版权问题导致很多栏目被下架和推迟更新，而我作为一个喜欢分享的魔法师，也遇到过一些版权相关方面的问题，刚好借此机会向大家科普一下开源协议和知识共享协议。

开源协议

相信很多小伙伴在开发的时候都默认遵循 不重复造轮子(偷懒) 这一原则，只要有了思路就马上在GitHub搜索一下，看看是否有人已经做了，如果已经有做好的，自然就不客气啦，拿过来修改一下就能用，不由得心中暗喜，又省了好多时间能用来把妹(LOL)。然而你可能没注意到，在诸多的开源代码中存在一些陷阱(约束)，就是开源协议，下面就带大家了解一下开源协议。

为什么要添加开源协议?

首先是对作者的保护，防止知识成果被恶意利用。

开源协议中一般都包含免责声明(禁止代码的作者承担代码使用后的风险及产生的后果)，比如你开源了一个破解智能锁的代码，如果有人利用这个去盗窃导致他人损失，你是无需承担责任的。

其次是对使用者的保护，方便使用者。

使用者一看就知道自己允许进行哪些操作，不允许进行哪些操作。
未添加协议的代码默认是作者保留所有权利的(对此不同国家的法律可能稍微存在区别)，这就像一颗定时炸弹，如果你在项目中使用了这一份没有协议的代码，原作者只要能证明你未经许可使用了他的代码，是能够起诉你的。

如何选择合适的开源协议?

由于开源协议种类众多，作为普通人很难搞懂它们之间的区别，即便是常见的协议大家也不完全知道协议的内容，那么如何快速的选择一款适合自己的协议呢？如果你是一个怕麻烦的人，下面的建议或许对你有有帮助。

目前使用最多的是MIT协议，而我(GcsSloop)常用的则是 Apache License 2.0 协议，因为这样可以帮助我知道有哪些开源项目使用了我的内容，以及进行了何种修改，有利于我改进自己项目。

之所以采用这个协议，而不使用 GNU GPLv3 ，是因为 GNU GPLv3 使用者必须按照相同的协议开源，而 Apache License 2.0 相对比较宽松，你可以私用，也可以闭源，但是如果开源项目使用到的时候，只需要放置一下版权声明以及修改声明即可。

选择一个开源软件协议

上面介绍的三种协议是最常用的几种，如果你想选择更多的开源协议可以到 选择一个开源软件协议 查看，这个网站是GitHub创建的，我做了一些微小的翻译工作，原网址 Choose an open source license 如果你觉得我的那些部分翻译不准确可以到 ChooseLicense.github.io 来给我提建议，如果直接提交 Pull Request 就更好了。

注意：不论你采用何种协议，一旦你在一些平台上发布你的内容，你就默认接受了该平台的协议，这一点尤其需要注意，例如GitHub上，默认允许他人查看和fork你的开源项目。

知识共享协议

知识共享协议也属于版权协议的一种，常用于数据、多媒体、网站、文章等内容，是作者保障自己权益的一道屏障。

知识共享协议(Creative Commons，也称为CC协议) 有很多版本，不过需要注意的是，知识共享协议不适用于开源软件。

注意：虽然你可以采用知识共享协议来保护你的内容，但是一旦你在某些平台上发布你的内容，你就默认接受了该平台的协议，这一点尤其需要注意。

下面我们来看两个例子，仅看知识产权部分的：

百度的知识产权声明:

知乎的知识产权声明:

对比一下，你在百度上发表的任何东西，不论是百度知道，百度文库或者是贴吧，百度自动拥有版权，可以随意使用这些内容，而在知乎上的回答，文章等则是作者拥有版权，知乎拥有使用权，当然了，前提是你为原创作者。

选择一个知识共享协议

你可以到 creativecommons.org 为自己选择一个合适的知识共享协议。

我的文章、原创图片等其他非代码内容一般会采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议。你在我的 AndroidNote 和我的个人网站底部均可以看到声明。

这在知识共享协议里面算是比较严苛的一个协议了，它允许所有人在非商业用途下免费转载我的文章，但必须：

保持原文，不作修改。
明确署名，即至少注明 作者：GcsSloop 字样以及文章的原始链接，且不得使用 rel="nofollow" 标记。
商业用途可以联系本人，需要征得本人同意。

下面解释一下我为什么要采用这一个协议：

禁止商用

这个毋庸置疑，为了保证自身的利益，写一篇文章需要经过选材，制作图片，书写，排版，排查错误等诸多步骤，其中每一步都凝聚了作者大量的心血，如果被别人一声不吭拿去为自己赚钱了，作者岂不是要哭晕在厕所。

保持原文

之前又一个文章中因为一个公式问题引起了一些混乱，那篇文章中本身公式是正确的，可能是因为书写方式问题，导致一些小伙伴错认为是有误的，而且有小伙伴在fork我的仓库后修改了文章中的公式，之后有小伙伴讨论这个公式的问题，因为担心小伙伴看到的是错误版本，在这个问题上浪费了很多时间。所以我的文章转载均要求保持原文，如果你觉得我的文章中有错误的地方，可以到评论区或者其他地方告诉我。

明确署名

保持署名和原始链接可以保证其他人能找到原文的作者，如果文章出现了问题，能够反馈给原作者，以保证文章内容正确，不误导以后阅读的人。

关于参考链接

我们人类之所以发展这么快，是因为有前人的努力，我们都是站在巨人肩膀上的人，书写文章也不例外，有很多需要借鉴他人的地方，如果借鉴了他人的想法或者成果，建议在文末加上参考链接。除了能够帮助读者更好理解知识的来源外，也可以顺便给这些人带来一些名气。

我书写参考链接的规则一般是这样的，我借鉴了他人的想法，成果，或者一部分成果，我都会在文末添加上文章地址。

有时候有小伙伴会反馈说，我的文章和我参考链接里面的文章有些地方存在冲突，这是因为我并没有把原文中这一部分作为参考。如果一些文章的理论本身就是错误的，但思路是正确的，或者部分内容是正确的，我使用了这些内容，同样会将其加入我的参考链接中。

关于抄袭和洗文(洗稿)

抄袭（英语：plagiarism），亦称作剽窃，根据教育部国语辞典定义[1]，为抄录他人作品以为己作。对于原著未经或基本未经修改的抄录，这是一种侵犯著作权的行为。(引用自维基百科)

抄袭属于一种比较低级的方式，更高级一点的一般称为洗文或者洗稿，常见洗稿有以下的方式:

第一种是打乱排版排版，然后用近似的语句来表达原文的内容。

第二种是按照原作者类似的风格来书写一件类似的事情，对其中对内容稍作修改。

第三种主要针对不允许转载的文章，先抄袭到某某论坛或者不知名网站然后转载一下标注为某某论坛(网站)，轻松抹去原作者信息。

这类洗稿文章是让原作者很头疼的东西，有些新司机技术不纯熟，一眼就能看出是洗稿，而有些老司机，洗出来的文章很难辨识，也很难维权。但如果你有时间和抄袭者正面刚的话，还是有很大机会能得到正义的支持的，毕竟群众的眼睛都是雪亮的，不过这对自身又有什么意义呢？浪费大量时间而且没有任何回报。

正是因为抄袭成本低而维权成本高，才导致了目前存在大量抄袭的内容，百度搜索结果尤其明显，很多排名靠前的技术文章都不是作者原文，而是被一些大平台转载(抄袭)过去的。相比之下Google就好很多了，而且举报抄袭处理速度也很快。

以我之前发过的一篇文章为例:

在Google搜索结果中第一条就是我的原文地址，而在百度搜索结果第一条则是转载(抄袭)的文章，我从未在该平台投稿过该文章，这篇转载(抄袭)文章虽然在文末给出了原文地址，但非超链接形式，没有作者署名，该网站也投放有广告，因为本文产生的广告收益不会给作者一分钱，这实际上已经严重违反了我的知识共享协议。

你问我为啥不举报？

主要是因为这篇转载还算良心，至少排版不乱，能够帮助到一些初学者，如果是肆意篡改原文链接，排版混乱，而且插入大量广告，严重影响观看效果的，我一定见一个举报一个。

结语

为自己选择一个合适的开源协议或者知识共享协议，虽然大部分时间并没有什么用，但至少能在一定程度上保护自身的权益。

最后个人建议多用Google，远离百度。

安卓自定义View进阶-Matrix Camera

Wed, 14 Sep 2016 00:00:00 +0800

本篇依旧属于Matrix，主要讲解Camera，Android下有很多相机应用，其中的美颜相机更是不少，不过今天这个Camera可不是我们平时拍照的那个相机，而是graphic包下的Camera，专业给View拍照的相机，不过既然是相机，作用都是类似的，主要是将3D的内容拍扁变成2D的内容。

众所周知，我们的手机屏幕是一个2D的平面，所以也没办法直接显示3D的信息，因此我们看到的所有3D效果都是3D在2D平面的投影而已，而本文中的Camera主要作用就是这个，将3D信息转换为2D平面上的投影，实际上这个类更像是一个操作Matrix的工具类，使用Camera和Matrix可以在不使用OpenGL的情况下制作出简单的3D效果。

⚠️ 警告：测试本文章示例之前请关闭硬件加速。

Camera常用方法表

方法类别	相关API	简介
基本方法	save、restore	保存、回滚
常用方法	getMatrix、applyToCanvas	获取Matrix、应用到画布
平移	translate	位移
旋转	rotat (API 12)、rotateX、rotateY、rotateZ	各种旋转
相机位置	setLocation (API 12)、getLocationX (API 16)、getLocationY (API 16)、getLocationZ (API 16)	设置与获取相机位置

Camera的方法并不是特别多，很多内容与之前的讲解的Canvas和Matrix类似，不过又稍有不同，之前的画布操作和Matrix主要是作用于2D空间，而Camera则主要作用于3D空间。

基础概念

在具体讲解方法之前，先补充几个基础概念，以便于后面理解。

3D坐标系

我们Camera使用的3维坐标系是左手坐标系，即左手手臂指向x轴正方向，四指弯曲指向y轴正方向，此时展开大拇指指向的方向是z轴正方向。

至于为什么要用左手坐标系呢？~~大概是因为赶工的时候右手不方便比划吧，大雾。~~实际上不同平台上使用的坐标系也有不同，有的是左手，有的是右手，貌似并没有统一的标准，只需要记住 Android 平台上面使用的是左手坐标系即可。

2D 和 3D 坐标是通过Matrix关联起来的，所以你可以认为两者是同一个坐标系，但又有差别，重点就是y轴方向不同。

坐标系	2D坐标系	3D坐标系
原点默认位置	左上角	左上角
X 轴默认方向	右	右
Y 轴默认方向	下	上
Z 轴默认方向	无	垂直屏幕向内

3D坐标系在屏幕中各个坐标轴默认方向展示:

注意y轴默认方向是向上，而2D则是向下，另外本图不代表3D坐标系实际位置。

三维投影

三维投影是将三维空间中的点映射到二维平面上的方法。由于目前绝大多数图形数据的显示方式仍是二维的，因此三维投影的应用相当广泛，尤其是在计算机图形学，工程学和工程制图中。

三维投影一般有两种，正交投影 和 透视投影。

正交投影就是我们数学上学过的 “正视图、正视图、侧视图、俯视图” 这些东西。

透视投影则更像拍照片，符合近大远小的关系，有立体感，我们此处使用的就是透视投影。

摄像机

如果你学过Unity，那么你对摄像机这一个概念应该会有比较透彻的理解。在一个虚拟的3D的立体空间中，由于我们无法直接用眼睛去观察这一个空间，所以要借助摄像机采集信息，制成2D影像供我们观察。简单来说，摄像机就是我们观察虚拟3D空间的眼睛。

Android 上面观察View的摄像机默认位置在屏幕左上角，而且是距屏幕有一段距离的，假设灰色部分是手机屏幕，白色是上面的一个View，摄像机位置看起来大致就是下面这样子的(为了更好的展示摄像机的位置，做了一个空间转换效果的动图)。

摄像机的位置默认是 (0, 0, -576)。其中 -576＝ -8 x 72，虽然官方文档说距离屏幕的距离是 -8, 但经过测试实际距离是 -576 像素，当距离为 -10 的时候，实际距离为 -720 像素。我使用了3款手机测试，屏幕大小和像素密度均不同，但结果都是一样的。

这个魔数可以在 Android 底层的图像引擎 Skia 中找到。在 Skia 中，Camera 的位置单位是英寸，英寸和像素的换算单位在 Skia 中被固定为 72 像素，而 Android 中把这个换算单位照搬了过来。

基本方法

基本方法就有两个save 和restore，主要作用为保存当前状态和恢复到上一次保存的状态，通常成对使用，常用格式如下:

camera.save();		// 保存状态
... 			// 具体操作
camera.retore();	// 回滚状态

常用方法

这两个方法是Camera中最基础也是最常用的方法。

getMatrix

void getMatrix (Matrix matrix)

计算当前状态下矩阵对应的状态，并将计算后的矩阵赋值给参数matrix。

applyToCanvas

void applyToCanvas (Canvas canvas)

计算当前状态下单矩阵对应的状态，并将计算后的矩阵应用到指定的canvas上。

平移

声明：以下示例中 Matrix 的平移均使用 postTranslate 来演示，实际情况中使用set、pre 或 post 需要视情况而定。

void translate (float x, float y, float z)

和2D平移类似，只不过是多出来了一个维度，从只能在2D平面上平移到在3D空间内平移，不过，此处仍有几个要点需要重点对待。

沿x轴平移

camera.translate(x, 0, 0);

matrix.postTranslate(x, 0);

两者x轴同向，所以 Camera 和 Matrix 在沿x轴平移上是一致的。

结论:

一致是指平移方向和平移距离一致，在默认情况下，上面两种均可以让坐标系向右移动x个单位。

沿y轴平移

这个就有点意思了，两个坐标系相互关联，但是两者的y轴方向是相反的，很容易把人搞迷糊。你可以这么玩:

Camera camera = new Camera();
camera.translate(0, 100, 0);    // camera - 沿y轴正方向平移100像素

Matrix matrix = new Matrix();
camera.getMatrix(matrix);
matrix.postTranslate(0,100);    // matrix - 沿y轴正方向平移100像素

Log.i(TAG, "Matrix: "+matrix.toShortString());

在上面这种写法，虽然用了5行代码，但是效果却和 Matrix matrix = new Matrix(); 一样，结果都是单位矩阵。而且看起来貌似没有啥问题，毕竟两次平移都是正向100。(~~如果遇见不懂技术的领导嫌你写代码量少，你可以这样多写几遍，反正一般人是看不出问题的。~~)

Matrix: [1.0, 0.0, 0.0][0.0, 1.0, 0.0][0.0, 0.0, 1.0]

结论:

由于两者y轴相反，所以 camera.translate(0, -y, 0); 与 matrix.postTranslate(0, y);平移方向和距离一致，在默认情况下，这两种方法均可以让坐标系向下移动y个单位。

沿z轴平移

这个不仅有趣，还容易蒙逼，上面两种情况再怎么闹腾也只是在2D平面上，而z轴的出现则让其有了空间感。

当View和摄像机在同一条直线上时: 此时沿z轴平移相当于缩放的效果，缩放中心为摄像机所在(x, y)坐标，当View接近摄像机时，看起来会变大，远离摄像机时，看起来会变小，近大远小。

当View和摄像机不在同一条直线上时: 当View远离摄像机的时候，View在缩小的同时也在不断接近摄像机在屏幕投影位置(通常情况下为Z轴，在平面上表现为接近坐标原点)。相反，当View接近摄像机的时候，View在放大的同时会远离摄像机在屏幕投影位置。

我知道，这样说你们肯定是蒙逼的，话说为啥远离摄像机的时候会接近摄像机在屏幕投影位置(´･_･`)，肯定觉得我在逗你们玩，完全是前后矛盾，逻辑都不通，不过这个在这里的确是不矛盾的，因为远离是在3D空间里的情况，而接近只是在2D空间的投影，看下图。

假设大矩形是手机屏幕，白色小矩形是View，摄像机位于屏幕左上角，请注意上面View与摄像机的距离以及下方View的大小以及距离左上角(摄像机在屏幕投影位置)的距离。

至于为什么会这样，因为我们人眼视觉就是这样的，当我们看向远方的时候，视线最终都会消失在视平线上，如果你站在两条平行线中间，看起来它们会在远方(视平线上)相交，虽然在3D空间上两者距离不变，但在2D投影上却是越来越接近，如下图(图片来自网络):

结论:

关于3D效果的平移说起来比较麻烦，但你可以自己实际的体验一下，毕竟我们是生活在3D空间的，拿一张纸片来模拟View，用眼睛当做摄像机，在眼前来回移动纸片，多试几次大致就明白是怎么回事了。

平移	重点内容
x轴	2D 和 3D 相同。
y轴	2D 和 3D 相反。
z轴	近大远小、视线相交。

旋转

旋转是Camera制作3D效果的核心，不过它制作出来的并不能算是真正的3D，而是伪3D，因为View是没有厚度的。

// (API 12) 可以控制View同时绕x，y，z轴旋转，可以由下面几种方法复合而来。
void rotate (float x, float y, float z);

// 控制View绕单个坐标轴旋转
void rotateX (float deg);
void rotateY (float deg);
void rotateZ (float deg);

这个东西瞎扯理论也不好理解，直接上图:

以上三张图分别为，绕x轴，y轴，z轴旋转的情况，至于为什么没有显示z轴，是因为z轴是垂直于手机屏幕的，在屏幕上的投影就是一个点。

关于旋转，有以下几点需要注意:

旋转中心

旋转中心默认是坐标原点，对于图片来说就是左上角位置。

我们都知道，在2D中，不论是旋转，错切还是缩放都是能够指定操作中心点位置的，但是在3D中却没有默认的方法，如果我们想要让图片围绕中心点旋转怎么办? 这就要使用到我们在Matrix原理提到过的方法:

Matrix temp = new Matrix();		// 临时Matrix变量
this.getMatrix(temp);			// 获取Matrix
temp.preTranslate(-centerX, -centerY);	// 使用pre将旋转中心移动到和Camera位置相同。
temp.postTranslate(centerX, centerY);	// 使用post将图片(View)移动到原来的位置

官方示例-Rotate3dAnimation

说到3D旋转，最经典的应该就是ApiDemo里面的 Rotate3dAnimation 了，见过不少博文都是根据Rotate3dAnimation修改的效果，这是一个非常经典的例子，鉴于代码也不长，就贴在这里和大家一起品鉴一下。

public class Rotate3dAnimation extends Animation {
    private final float mFromDegrees;
    private final float mToDegrees;
    private final float mCenterX;
    private final float mCenterY;
    private final float mDepthZ;
    private final boolean mReverse;
    private Camera mCamera;
    /**
     * 创建一个绕y轴旋转的3D动画效果，旋转过程中具有深度调节，可以指定旋转中心。
     * 
     * @param fromDegrees	起始时角度
     * @param toDegrees 	结束时角度
     * @param centerX 		旋转中心x坐标
     * @param centerY 		旋转中心y坐标
     * @param depthZ		最远到达的z轴坐标
     * @param reverse 		true 表示由从0到depthZ，false相反
     */
    public Rotate3dAnimation(float fromDegrees, float toDegrees,
            float centerX, float centerY, float depthZ, boolean reverse) {
        mFromDegrees = fromDegrees;
        mToDegrees = toDegrees;
        mCenterX = centerX;
        mCenterY = centerY;
        mDepthZ = depthZ;
        mReverse = reverse;
    }
    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        mCamera = new Camera();
    }
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        final float fromDegrees = mFromDegrees;
        float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);
        final float centerX = mCenterX;
        final float centerY = mCenterY;
        final Camera camera = mCamera;
        final Matrix matrix = t.getMatrix();
        camera.save();
      
      	// 调节深度
        if (mReverse) {
            camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
        } else {
            camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
        }
      
      	// 绕y轴旋转
        camera.rotateY(degrees);
      
        camera.getMatrix(matrix);
        camera.restore();
      	
      	// 调节中心点
        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);
    }
}

可以看到，短短的几十行代码就完成了，而核心代码(有注释部分)仅仅几行而已，简洁易懂。不过呢，这一份代码依旧是一份未完成的代码(不然怎么叫ApiDemo呢?)，并且很多人不知道怎么修改。

不知诸位在使用的时候可否发现了一个问题，同一份代码在不同手机上显示效果也是不同的，在像素密度较低的手机上，旋转效果比较正常，但是在像素密度较高的手机上显示效果则会很夸张，具体会怎样的，下面就来看一下具体效果。

可以看到，图片不仅因为形变失真，而且在中间一段因为形变过大导致图片无法显示，当然了，单个手机失真，你可以用depthZ忽悠过去，当 depthZ 设置的数值比较大大时候，图像在翻转同时会远离摄像头，距离比较远，失真就不会显得很严重，但这仍掩盖不了在不同手机上显示效果不同。

如何解决这一问题呢？

想要解决其实也不难，只要修改两个数值就可以了，这两个数值就是在Matrix中一直被众多开发者忽略的 MPERSP_0 和 MPERSP_1

下面是修改后的代码(重点部分都已经标注出来了):

public class Rotate3dAnimation extends Animation {
    private final float mFromDegrees;
    private final float mToDegrees;
    private final float mCenterX;
    private final float mCenterY;
    private final float mDepthZ;
    private final boolean mReverse;
    private Camera mCamera;
    float scale = 1;    // <------- 像素密度

    /**
     * 创建一个绕y轴旋转的3D动画效果，旋转过程中具有深度调节，可以指定旋转中心。
     * @param context     <------- 添加上下文,为获取像素密度准备
     * @param fromDegrees 起始时角度
     * @param toDegrees   结束时角度
     * @param centerX     旋转中心x坐标
     * @param centerY     旋转中心y坐标
     * @param depthZ      最远到达的z轴坐标
     * @param reverse     true 表示由从0到depthZ，false相反
     */
    public Rotate3dAnimation(Context context, float fromDegrees, float toDegrees,
                             float centerX, float centerY, float depthZ, boolean reverse) {
        mFromDegrees = fromDegrees;
        mToDegrees = toDegrees;
        mCenterX = centerX;
        mCenterY = centerY;
        mDepthZ = depthZ;
        mReverse = reverse;

        // 获取手机像素密度 （即dp与px的比例）
        scale = context.getResources().getDisplayMetrics().density;
    }

    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        mCamera = new Camera();
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        final float fromDegrees = mFromDegrees;
        float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);
        final float centerX = mCenterX;
        final float centerY = mCenterY;
        final Camera camera = mCamera;
        final Matrix matrix = t.getMatrix();
        camera.save();

        // 调节深度
        if (mReverse) {
            camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
        } else {
            camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
        }

        // 绕y轴旋转
        camera.rotateY(degrees);

        camera.getMatrix(matrix);
        camera.restore();

        // 修正失真，主要修改 MPERSP_0 和 MPERSP_1
        float[] mValues = new float[9];
        matrix.getValues(mValues);			    //获取数值
        mValues[6] = mValues[6]/scale;			//数值修正
      	mValues[7] = mValues[7]/scale;			//数值修正
        matrix.setValues(mValues);			    //重新赋值

        // 调节中心点
        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);
    }
}

修改后效果：

上下对比差别还是很大的，顺便附上测试代码吧，layout文件就不写了，随便放一个ImageView就行了。

setContentView(R.layout.activity_test_camera_rotate2);
ImageView view = (ImageView) findViewById(R.id.img);
assert view != null;
view.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 计算中心点（这里是使用view的中心作为旋转的中心点）
        final float centerX = v.getWidth() / 2.0f;
        final float centerY = v.getHeight() / 2.0f;

        //括号内参数分别为（上下文，开始角度，结束角度，x轴中心点，y轴中心点，深度，是否扭曲）
        final Rotate3dAnimation rotation = new Rotate3dAnimation(MainActivity.this, 0, 180, centerX, centerY, 0f, true, 2);

        rotation.setDuration(3000);                         //设置动画时长
        rotation.setFillAfter(true);                        //保持旋转后效果
        rotation.setInterpolator(new LinearInterpolator());	//设置插值器
        v.startAnimation(rotation);
    }
});

相机位置

我们可以使用translate和rotate来控制拍摄对象，也可以移动相机自身的位置，不过这些方法并不常用(看添加时间就知道啦)。

void setLocation (float x, float y, float z); // (API 12) 设置相机位置，默认位置是(0, 0, -8)

float getLocationX ();	// (API 16) 获取相机位置的x坐标，下同
float getLocationY ();
float getLocationZ ();

我们知道近大远小，而物体之间的距离是相对的，让物体远离相机和让相机远离物体结果是一样的，实际上设置相机位置基本可以使用translate替代。

虽然设置相机位置用处并不大，但还是要提几点注意事项:

相机和View的z轴距离不能为0

这个比较容易理解，当你把一个物体和相机放在同一个位置的时候，相机是拍摄不到这个物体的，正如你拿一张卡片放在手机侧面，摄像头是拍摄不到的。

虚拟相机前后均可以拍摄

当View不断接近摄像机并越过摄像机位置时，仍能看到View，并且View大小会随着距离摄像机的位置越来越远而逐渐变小，你可以理解为它有前置摄像头和后置摄像头。

摄像机右移等于View左移

View的状态只取决于View和摄像机之间的相对位置，不过由于单位不同，摄像机平移一个单位等于View平移72个像素。下面两段代码是等价的:

Camera camera = new Camera();
camera.setLocation(1,0,-8);		// 摄像机默认位置是(0, 0, -8)
Matrix matrix = new Matrix();
camera.getMatrix(matrix);
Log.e(TAG, "location: "+matrix.toShortString() );

Camera camera2 = new Camera();
camera2.translate(-72,0,0);
Matrix matrix2 = new Matrix();
camera2.getMatrix(matrix2);
Log.e(TAG, "translate: "+matrix2.toShortString() );

结果:

location: [1.0, 0.0, -72.0][0.0, 1.0, 0.0][0.0, 0.0, 1.0]
translate: [1.0, 0.0, -72.0][0.0, 1.0, 0.0][0.0, 0.0, 1.0

要点

View显示状态取决于View和摄像机之间的相对位置
View和相机的Z轴距离不能为0

小技巧:关于摄像机和View的位置，你可以打开手机后置摄像头，拿一张卡片来回的转动平移或者移动手机位置，观察卡片在屏幕上的变化，

总结

本篇主要讲解了关于Camera和Matrix的一些基础知识，Camera运用得当的话是能够制造出很多炫酷的效果的，我这里算是抛砖引玉，推荐一些比较炫酷的控件。

FlipShare

从零开始打造一个Android 3D立体旋转容器

参考资料

Camera
FlipShare
从零开始打造一个Android 3D立体旋转容器

About Me

作者微博: @GcsSloop

用JitPack发布开源库时附加文档和源码

Fri, 09 Sep 2016 00:00:00 +0800

很早之前写过一篇用JitPack发布Android开源库的文章，有小伙伴反馈说发布到JitPack上的开源库没有文档注释，使用起来很不方便，这是我的失误，上一篇文章只是讲解了如何使用JitPack发布开源库，最终发布的只有arr(即编译好的动态链接库)，不仅没有文档注释(Javadoc)，也没有源码(sources)，本次就教大家如何在发布同时添加上注释和源码。

由于JitPack本身就是一个自定义Maven仓库，所以与上传Maven的配置方式基本一样。

配置项目的 build.gradle

项目的 build.gradle 配置和上一篇一样，没有变化。

buildscript { 
  dependencies {
    // 重点就是下面这一行(上面两行是为了定位这一行的添加位置)
    classpath 'com.github.dcendents:android-maven-gradle-plugin:1.3' 

配置 Library 的 build.gradle

完整示例(重点内容已经用注释标出):

apply plugin: 'com.android.library'
apply plugin: 'com.github.dcendents.android-maven' // 添加这个

group='com.github.GcsSloop'	// 指定group，com.github.<用户名>

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"

    defaultConfig {
        minSdkVersion 7
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
}

//---------------------------------------------

// 指定编码
tasks.withType(JavaCompile) {
    options.encoding = "UTF-8"
}

// 打包源码
task sourcesJar(type: Jar) {
    from android.sourceSets.main.java.srcDirs
    classifier = 'sources'
}

task javadoc(type: Javadoc) {
    failOnError  false
    source = android.sourceSets.main.java.sourceFiles
    classpath += project.files(android.getBootClasspath().join(File.pathSeparator))
    classpath += configurations.compile
}

// 制作文档(Javadoc)
task javadocJar(type: Jar, dependsOn: javadoc) {
    classifier = 'javadoc'
    from javadoc.destinationDir
}

artifacts {
    archives sourcesJar
    archives javadocJar
}

发布参照上一篇文章：使用JitPack发布开源库

查看在线文档

如果你在JitPack配置了文档和源码支持，在引用同时就包含了源码和文档，不仅如此，你也可以在线查看。

查看地址是: https://jitpack.io/com/github/USER/REPO/VERSION/javadoc/

例如我的一个开源库：https://jitpack.io/com/github/GcsSloop/ViewSupport/v1.2.2/javadoc/

在线API文档样式：

安卓自定义View进阶-Matrix详解

Tue, 30 Aug 2016 00:00:00 +0800

这应该是目前最详细的一篇讲解Matrix的中文文章了，在上一篇文章Matrix原理中，我们对Matrix做了一个简单的了解，偏向理论，在本文中则会详细的讲解Matrix的具体用法，以及与Matrix相关的一些实用技巧。

⚠️ 警告：测试本文章示例之前请关闭硬件加速。

Matrix方法表

按照惯例，先放方法表做概览。

方法类别	相关API	摘要
基本方法	equals hashCode toString toShortString	比较、获取哈希值、转换为字符串
数值操作	set reset setValues getValues	设置、重置、设置数值、获取数值
数值计算	mapPoints mapRadius mapRect mapVectors	计算变换后的数值
设置(set)	setConcat setRotate setScale setSkew setTranslate	设置变换
前乘(pre)	preConcat preRotate preScale preSkew preTranslate	前乘变换
后乘(post)	postConcat postRotate postScale postSkew postTranslate	后乘变换
特殊方法	setPolyToPoly setRectToRect rectStaysRect setSinCos	一些特殊操作
矩阵相关	invert isAffine(API21) isIdentity	求逆矩阵、是否为仿射矩阵、是否为单位矩阵 …

Matrix方法详解

构造方法

构造方法没有在上面表格中列出。

无参构造

Matrix ()

创建一个全新的Matrix，使用格式如下：

Matrix matrix = new Matrix();

通过这种方式创建出来的并不是一个数值全部为空的矩阵，而是一个单位矩阵,如下:

有参构造

Matrix (Matrix src)

这种方法则需要一个已经存在的矩阵作为参数，使用格式如下:

Matrix matrix = new Matrix(src);

创建一个Matrix，并对src深拷贝(理解为新的matrix和src是两个对象，但内部数值相同即可)。

基本方法

基本方法内容比较简单，在此处简要介绍一下。

1.equals

比较两个Matrix的数值是否相同。

2.hashCode

获取Matrix的哈希值。

3.toString

将Matrix转换为字符串: Matrix{[1.0, 0.0, 0.0][0.0, 1.0, 0.0][0.0, 0.0, 1.0]}

4.toShortString

将Matrix转换为短字符串: [1.0, 0.0, 0.0][0.0, 1.0, 0.0][0.0, 0.0, 1.0]

数值操作

数值操作这一组方法可以帮助我们直接控制Matrix里面的数值。

1.set

void set (Matrix src)

没有返回值，有一个参数，作用是将参数Matrix的数值复制到当前Matrix中。如果参数为空，则重置当前Matrix，相当于reset()。

2.reset

void reset ()

重置当前Matrix(将当前Matrix重置为单位矩阵)。

3.setValues

void setValues (float[] values)

setValues的参数是浮点型的一维数组，长度需要大于9，拷贝数组中的前9位数值赋值给当前Matrix。

4.getValues

void getValues (float[] values)

很显然，getValues和setValues是一对方法，参数也是浮点型的一维数组，长度需要大于9，将Matrix中的数值拷贝进参数的前9位中。

数值计算

1.mapPoints

void mapPoints (float[] pts)

void mapPoints (float[] dst, float[] src)

void mapPoints (float[] dst, int dstIndex,float[] src, int srcIndex, int pointCount)

计算一组点基于当前Matrix变换后的位置，(由于是计算点，所以参数中的float数组长度一般都是偶数的,若为奇数，则最后一个数值不参与计算)。

它有三个重载方法:

(1) void mapPoints (float[] pts) 方法仅有一个参数，pts数组作为参数传递原始数值，计算结果仍存放在pts中。

示例:

// 初始数据为三个点 (0, 0) (80, 100) (400, 300) 
float[] pts = new float[]{0, 0, 80, 100, 400, 300};

// 构造一个matrix，x坐标缩放0.5
Matrix matrix = new Matrix();
matrix.setScale(0.5f, 1f);

// 输出pts计算之前数据
Log.i(TAG, "before: "+ Arrays.toString(pts));

// 调用map方法计算
matrix.mapPoints(pts);

// 输出pts计算之后数据
Log.i(TAG, "after : "+ Arrays.toString(pts));

结果:

before: [0.0, 0.0, 80.0, 100.0, 400.0, 300.0]
after : [0.0, 0.0, 40.0, 100.0, 200.0, 300.0]

(2) void mapPoints (float[] dst, float[] src) ，src作为参数传递原始数值，计算结果存放在dst中，src不变。

如果原始数据需要保留则一般使用这种方法。

示例:

// 初始数据为三个点 (0, 0) (80, 100) (400, 300)
float[] src = new float[]{0, 0, 80, 100, 400, 300};
float[] dst = new float[6];

// 构造一个matrix，x坐标缩放0.5
Matrix matrix = new Matrix();
matrix.setScale(0.5f, 1f);

// 输出计算之前数据
Log.i(TAG, "before: src="+ Arrays.toString(src));
Log.i(TAG, "before: dst="+ Arrays.toString(dst));

// 调用map方法计算
matrix.mapPoints(dst,src);

// 输出计算之后数据
Log.i(TAG, "after : src="+ Arrays.toString(src));
Log.i(TAG, "after : dst="+ Arrays.toString(dst));

结果:

before: src=[0.0, 0.0, 80.0, 100.0, 400.0, 300.0]
before: dst=[0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
after : src=[0.0, 0.0, 80.0, 100.0, 400.0, 300.0]
after : dst=[0.0, 0.0, 40.0, 100.0, 200.0, 300.0]

(3) void mapPoints (float[] dst, int dstIndex,float[] src, int srcIndex, int pointCount) 可以指定只计算一部分数值。

参数	摘要
dst	目标数据
dstIndex	目标数据存储位置起始下标
src	源数据
srcIndex	源数据存储位置起始下标
pointCount	计算的点个数

示例:

将第二、三个点计算后存储进dst最开始位置。

// 初始数据为三个点 (0, 0) (80, 100) (400, 300)
float[] src = new float[]{0, 0, 80, 100, 400, 300};
float[] dst = new float[6];

// 构造一个matrix，x坐标缩放0.5
Matrix matrix = new Matrix();
matrix.setScale(0.5f, 1f);

// 输出计算之前数据
Log.i(TAG, "before: src="+ Arrays.toString(src));
Log.i(TAG, "before: dst="+ Arrays.toString(dst));

// 调用map方法计算(最后一个2表示两个点，即四个数值,并非两个数值)
matrix.mapPoints(dst, 0, src, 2, 2);

// 输出计算之后数据
Log.i(TAG, "after : src="+ Arrays.toString(src));
Log.i(TAG, "after : dst="+ Arrays.toString(dst));

结果:

before: src=[0.0, 0.0, 80.0, 100.0, 400.0, 300.0]
before: dst=[0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
after : src=[0.0, 0.0, 80.0, 100.0, 400.0, 300.0]
after : dst=[40.0, 100.0, 200.0, 300.0, 0.0, 0.0]

2.mapRadius

float mapRadius (float radius)

测量半径，由于圆可能会因为画布变换变成椭圆，所以此处测量的是平均半径。

示例:

float radius = 100;
float result = 0;

// 构造一个matrix，x坐标缩放0.5
Matrix matrix = new Matrix();
matrix.setScale(0.5f, 1f);

Log.i(TAG, "mapRadius: "+radius);

result = matrix.mapRadius(radius);

Log.i(TAG, "mapRadius: "+result);

结果:

mapRadius: 100.0
mapRadius: 70.71068

3.mapRect

boolean mapRect (RectF rect)

boolean mapRect (RectF dst, RectF src)

测量矩形变换后位置。

(1) boolean mapRect (RectF rect) 测量rect并将测量结果放入rect中，返回值是判断矩形经过变换后是否仍为矩形。

示例：

RectF rect = new RectF(400, 400, 1000, 800);

// 构造一个matrix
Matrix matrix = new Matrix();
matrix.setScale(0.5f, 1f);
matrix.postSkew(1,0);

Log.i(TAG, "mapRadius: "+rect.toString());

boolean result = matrix.mapRect(rect);

Log.i(TAG, "mapRadius: "+rect.toString());
Log.e(TAG, "isRect: "+ result);

结果：

mapRadius: RectF(400.0, 400.0, 1000.0, 800.0)
mapRadius: RectF(600.0, 400.0, 1300.0, 800.0)
isRect: false

由于使用了错切，所以返回结果为false。

(2) boolean mapRect (RectF dst, RectF src) 测量src并将测量结果放入dst中，返回值是判断矩形经过变换后是否仍为矩形,和之前没有什么太大区别，此处就不啰嗦了。

4.mapVectors

测量向量。

void mapVectors (float[] vecs)

void mapVectors (float[] dst, float[] src)

void mapVectors (float[] dst, int dstIndex, float[] src, int srcIndex, int vectorCount)

mapVectors 与 mapPoints 基本上是相同的，可以直接参照上面的mapPoints使用方法。

而两者唯一的区别就是mapVectors不会受到位移的影响，这符合向量的定律，如果你不了解的话，请找到以前教过你的老师然后把学费要回来。

区别:

float[] src = new float[]{1000, 800};
float[] dst = new float[2];

// 构造一个matrix
Matrix matrix = new Matrix();
matrix.setScale(0.5f, 1f);
matrix.postTranslate(100,100);

// 计算向量, 不受位移影响
matrix.mapVectors(dst, src);
Log.i(TAG, "mapVectors: "+Arrays.toString(dst));

// 计算点
matrix.mapPoints(dst, src);
Log.i(TAG, "mapPoints: "+Arrays.toString(dst));

结果:

mapVectors: [500.0, 800.0]
mapPoints: [600.0, 900.0]

set、pre 与 post

对于四种基本变换平移(translate)、缩放(scale)、旋转(rotate)、错切(skew) 它们每一种都三种操作方法，分别为设置(set)、前乘(pre) 和后乘 (post)。而它们的基础是Concat，通过先构造出特殊矩阵然后用原始矩阵Concat特殊矩阵，达到变换的结果。

关于四种基本变换的知识和三种对应操作的区别，详细可以参考 Canvas之画布操作和 Matrix原理这两篇文章的内容。

由于之前的文章已经详细的讲解过了它们的原理与用法，所以此处就简要的介绍一下:

方法	简介
set	设置，会覆盖掉之前的数值，导致之前的操作失效。
pre	前乘，相当于矩阵的右乘， `M' = M * S` (S指为特殊矩阵)
post	后乘，相当于矩阵的左乘，`M' = S * M` （S指为特殊矩阵）

Matrix 相关的重要知识：

1.一开始从Canvas中获取到到Matrix并不是初始矩阵，而是经过偏移后到矩阵，且偏移距离就是距离屏幕左上角的位置。
这个可以用于判定View在屏幕上的绝对位置，View可以根据所处位置做出调整。
2.构造Matrix时使用的是矩阵乘法，前乘(pre)与后乘(post)结果差别很大。
这个直接参见上一篇文章 Matrix原理即可。
3.受矩阵乘法影响，后面的执行的操作可能会影响到之前的操作。
使用时需要注意构造顺序。

特殊方法

这一类方法看似不起眼，但拿来稍微加工一下就可能制作意想不到的效果。

1.setPolyToPoly

boolean setPolyToPoly (
        float[] src,    // 原始数组 src [x,y]，存储内容为一组点
        int srcIndex,   // 原始数组开始位置
        float[] dst,    // 目标数组 dst [x,y]，存储内容为一组点
        int dstIndex,   // 目标数组开始位置
        int pointCount) // 测控点的数量 取值范围是: 0到4

Poly全称是Polygon，多边形的意思，了解了意思大致就能知道这个方法是做什么用的了，应该与PS中自由变换中的扭曲有点类似。

从参数我们可以了解到setPolyToPoly最多可以支持4个点，这四个点通常为图形的四个角，可以通过这四个角将视图从矩形变换成其他形状。

简单示例:

public class MatrixSetPolyToPolyTest extends View {

    private Bitmap mBitmap;             // 要绘制的图片
    private Matrix mPolyMatrix;         // 测试setPolyToPoly用的Matrix

    public MatrixSetPolyToPolyTest(Context context) {
        super(context);

        initBitmapAndMatrix();
    }

    private void initBitmapAndMatrix() {
        mBitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.poly_test);

        mPolyMatrix = new Matrix();


        float[] src = {0, 0,                                    // 左上
                mBitmap.getWidth(), 0,                          // 右上
                mBitmap.getWidth(), mBitmap.getHeight(),        // 右下
                0, mBitmap.getHeight()};                        // 左下

        float[] dst = {0, 0,                                    // 左上
                mBitmap.getWidth(), 400,                        // 右上
                mBitmap.getWidth(), mBitmap.getHeight() - 200,  // 右下
                0, mBitmap.getHeight()};                        // 左下

        // 核心要点
        mPolyMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1); // src.length >> 1 为位移运算 相当于处以2

        // 此处为了更好的显示对图片进行了等比缩放和平移(图片本身有点大)
        mPolyMatrix.postScale(0.26f, 0.26f);
        mPolyMatrix.postTranslate(0,200);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 根据Matrix绘制一个变换后的图片
        canvas.drawBitmap(mBitmap, mPolyMatrix, null);
    }
}

文章发出后有小伙伴在GitHub上提出疑问，说此处讲解到并不清楚，尤其是最后的一个参数，所以特此补充一下内容。

我们知道pointCount支持点的个数为0到4个，四个一般指图形的四个角，属于最常用的一种情形，但前面几种是什么情况呢？

发布此文的时候之所以没有讲解0到3的情况，是因为前面的几种情况在实际开发中很少会出现， ~~才不是因为偷懒呢，哼。~~

pointCount	摘要
0	相当于`reset`
1	相当于`translate`
2	可以进行缩放、旋转、平移变换
3	可以进行缩放、旋转、平移、错切变换
4	可以进行缩放、旋转、平移、错切以及任何形变

从上表我们可以观察出一个规律, 随着pointCount数值增大setPolyToPoly的可以操作性也越来越强，这不是废话么，可调整点数多了能干的事情自然也多了。

只列一个表格就算交代完毕了显得诚意不足，为了彰显诚意，接下来详细的讲解一下。

为什么说前面几种情况在实际开发中很少出现?

作为开发人员，写出来的代码出了要让机器”看懂”，没有歧义之外，最重要的还是让人看懂，以方便后期的维护修改，从上边的表格中可以看出，前面的几种种情况都可以有更直观的替代方法，只有四个参数的情况下的特殊形变是没有替代方法的。

测控点选取位置?

测控点可以选择任何你认为方便的位置，只要src与dst一一对应即可。不过为了方便，通常会选择一些特殊的点：图形的四个角，边线的中心点以及图形的中心点等。不过有一点需要注意，测控点选取都应当是不重复的(src与dst均是如此)，如果选取了重复的点会直接导致测量失效，这也意味着，你不允许将一个方形(四个点)映射为三角形(四个点，但其中两个位置重叠)，但可以接近于三角形。。

作用范围?

作用范围当然是设置了Matrix的全部区域，如果你将这个Matrix赋值给了Canvas，它的作用范围就是整个画布，如果你赋值给了Bitmap，它的作用范围就是整张图片。

接下来用示例演示一下，所有示例的src均为图片大小，dst根据手势变化。

pointCount为0

pointCount为0和reset是等价的，而不是保持matrix不变，在最底层的实现中可以看到这样的代码：

if (0 == count) {
    this->reset();
    return true;
}

pointCount为1

pointCount为0和translate是等价的，在最底层的实现中可以看到这样的代码：

if (1 == count) {
    this->setTranslate(dst[0].fX - src[0].fX, dst[0].fY - src[0].fY);
    return true;
}

平移的距离是dst - src.

当测控点为1的时候，由于你只有一个点可以控制，所以你只能拖拽着它在2D平面上滑动。

pointCount为2

当pointCount为2的时候，可以做缩放、平移和旋转。

pointCount为3

当pointCount为3的时候，可以做缩放、平移、旋转和错切。

pointCount为4

当pointCount为4的时候，你可以将图像拉伸为任意四边形。

上面已经用图例比较详细的展示了不同操控点个数的情况，如果你依旧存在疑问，可以获取代码自己试一下。

点击此处查看setPolyToPoly测试代码

2.setRectToRect

boolean setRectToRect (RectF src,           // 源区域
                RectF dst,                  // 目标区域
                Matrix.ScaleToFit stf)      // 缩放适配模式

简单来说就是将源矩形的内容填充到目标矩形中，然而在大多数的情况下，源矩形和目标矩形的长宽比是不一致的，到底该如何填充呢，这个填充的模式就由第三个参数 stf 来确定。

ScaleToFit 是一个枚举类型，共包含了四种模式:

模式	摘要
CENTER	居中，对src等比例缩放，将其居中放置在dst中。
START	顶部，对src等比例缩放，将其放置在dst的左上角。
END	底部，对src等比例缩放，将其放置在dst的右下角。
FILL	充满，拉伸src的宽和高，使其完全填充满dst。

下面我们看一下不同宽高比的src与dst在不同模式下是怎样的。

假设灰色部分是dst，橙色部分是src，由于是测试不同宽高比，示例中让dst保持不变，看两种宽高比的src在不同模式下填充的位置。

src(原始状态)
CENTER
START
END
FILL

下面用代码演示一下居中的示例:

public class MatrixSetRectToRectTest extends View {

    private static final String TAG = "MatrixSetRectToRectTest";

    private int mViewWidth, mViewHeight;

    private Bitmap mBitmap;             // 要绘制的图片
    private Matrix mRectMatrix;         // 测试etRectToRect用的Matrix

    public MatrixSetRectToRectTest(Context context) {
        super(context);

        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.rect_test);
        mRectMatrix = new Matrix();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mViewWidth = w;
        mViewHeight = h;

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        RectF src= new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight() );
        RectF dst = new RectF(0, 0, mViewWidth, mViewHeight );

        // 核心要点
        mRectMatrix.setRectToRect(src,dst, Matrix.ScaleToFit.CENTER);

        // 根据Matrix绘制一个变换后的图片
        canvas.drawBitmap(mBitmap, mRectMatrix, new Paint());
    }
}

3.rectStaysRect

判断矩形经过变换后是否仍为矩形，假如Matrix进行了平移、缩放则画布仅仅是位置和大小改变，矩形变换后仍然为矩形，但Matrix进行了非90度倍数的旋转或者错切，则矩形变换后就不再是矩形了，这个很好理解，不过多赘述，顺便说一下，前面的mapRect方法的返回值就是根据rectStaysRect来判断的。

4.setSinCos

设置sinCos值，这个是控制Matrix旋转的，由于Matrix已经封装好了Rotate方法，所以这个并不常用，在此仅作概述。

// 方法一
void setSinCos (float sinValue,     // 旋转角度的sin值
                float cosValue)     // 旋转角度的cos值

// 方法二
void setSinCos (float sinValue,     // 旋转角度的sin值
                float cosValue,     // 旋转角度的cos值
                float px,           // 中心位置x坐标
                float py)           // 中心位置y坐标

简单测试:

Matrix matrix = new Matrix();
// 旋转90度
// sin90=1
// cos90=0
matrix.setSinCos(1f, 0f);

Log.i(TAG, "setSinCos:"+matrix.toShortString());

// 重置
matrix.reset();

// 旋转90度
matrix.setRotate(90);

Log.i(TAG, "setRotate:"+matrix.toShortString());

结果:

setSinCos:[0.0, -1.0, 0.0][1.0, 0.0, 0.0][0.0, 0.0, 1.0]
setRotate:[0.0, -1.0, 0.0][1.0, 0.0, 0.0][0.0, 0.0, 1.0]

矩阵相关

矩阵相关的函数就属于哪一种非常靠近底层的东西了，大部分开发者很少直接接触这些东西，想要弄明白这个可以回去请教你们的线性代数老师，这里也仅作概述。

方法	摘要
invert	求矩阵的逆矩阵
isAffine	判断当前矩阵是否为仿射矩阵，API21(5.0)才添加的方法。
isIdentity	判断当前矩阵是否为单位矩阵。

1.invert

求矩阵的逆矩阵，简而言之就是计算与之前相反的矩阵，如果之前是平移200px，则求的矩阵为反向平移200px，如果之前是缩小到0.5f，则结果是放大到2倍。

boolean invert (Matrix inverse)

简单测试:

Matrix matrix = new Matrix();
Matrix invert = new Matrix();
matrix.setTranslate(200,500);

Log.e(TAG, "before - matrix "+matrix.toShortString() );

Boolean result = matrix.invert(invert);

Log.e(TAG, "after  - result "+result );
Log.e(TAG, "after  - matrix "+matrix.toShortString() );
Log.e(TAG, "after  - invert "+invert.toShortString() );

结果：

before - matrix [1.0, 0.0, 200.0][0.0, 1.0, 500.0][0.0, 0.0, 1.0]
after  - result true
after  - matrix [1.0, 0.0, 200.0][0.0, 1.0, 500.0][0.0, 0.0, 1.0]
after  - invert [1.0, 0.0, -200.0][0.0, 1.0, -500.0][0.0, 0.0, 1.0]

2.isAffine

判断矩阵是否是仿射矩阵, 貌似并没有太大卵用，因为你无论如何操作结果始终都为true。

这是为什么呢？因为迄今为止我们使用的所有变换都是仿射变换，那变换出来的矩阵自然是仿射矩阵喽。

判断是否是仿射矩阵最重要的一点就是，直线是否仍为直线，简单想一下就知道，不论平移，旋转，错切，缩放，直线变换后最终仍为直线，要想让isAffine的结果变为false，除非你能把直线掰弯，我目前还没有找到能够掰弯的方法，所以我仍是直男(就算找到了，我依旧是直男)。

简单测试:

Matrix matrix = new Matrix();
Log.i(TAG,"isAffine="+matrix.isAffine());

matrix.postTranslate(200,0);
matrix.postScale(0.5f, 1);
matrix.postSkew(0,1);
matrix.postRotate(56);

Log.i(TAG,"isAffine="+matrix.isAffine());

结果:

isAffine=true
isAffine=true

3.isIdentity

判断是否为单位矩阵，什么是单位矩阵呢，就是文章一开始的那个:

新创建的Matrix和重置后的Matrix都是单位矩阵，不过，只要随意操作一步，就不在是单位矩阵了。

简单测试：

Matrix matrix = new Matrix();
Log.i(TAG,"isIdentity="+matrix.isIdentity());

matrix.postTranslate(200,0);

Log.i(TAG,"isIdentity="+matrix.isIdentity());

结果：

isIdentity=true
isIdentity=false

Matrix实用技巧

通过前面的代码和示例，我们已经了解了Matrix大部分方法是如何使用的，这些基本的原理和方法通过组合可能会创造出神奇的东西，网上有很多教程讲Bitmap利用Matrix变换来制作镜像倒影等，这都属于Matrix的基本应用，我就不在赘述了，下面我简要介绍几种然并卵的小技巧，更多的大家可以开启自己的脑洞来发挥。

1.获取View在屏幕上的绝对位置

在之前的文章Matrix原理中我们提到过Matrix最根本的作用就是坐标映射，将View的相对坐标映射为屏幕的绝对坐标，也提到过我们在onDraw函数的canvas中获取到到Matrix并不是单位矩阵，结合这两点，聪明的你肯定想到了我们可以从canvas的Matrix入手取得View在屏幕上的绝对位置。

不过，这也仅仅是一个然并卵的小技巧而已，使用getLocationOnScreen同样可以获取View在屏幕的位置，但如果你是想让下一任接盘侠弄不明白你在做什么或者是被同事打死的话，尽管这么做。

简单示例:

@Override
protected void onDraw(Canvas canvas) {
    float[] values = new float[9];
    int[] location1 = new int[2];

    Matrix matrix = canvas.getMatrix();
    matrix.getValues(values);

    location1[0] = (int) values[2];
    location1[1] = (int) values[5];
    Log.i(TAG, "location1 = " + Arrays.toString(location1));

    int[] location2 = new int[2];
    this.getLocationOnScreen(location2);
    Log.i(TAG, "location2 = " + Arrays.toString(location2));
}

结果:

location1 = [0, 243]
location2 = [0, 243]

2.利用setPolyToPoly制造3D效果

这个全凭大家想象力啦，不过我搜了一下还真搜到了好东西，之前鸿洋大大发过一篇博文详细讲解了利用setPolyToPoly制造的折叠效果布局，大家直接到他的博客去看吧，我就不写了。

图片引用自鸿洋大大的博客，稍作了一下处理。

博文链接:

Android FoldingLayout 折叠布局原理及实现（一）

Android FoldingLayout 折叠布局原理及实现（二）

总结

本篇基本讲解了Matrix相关的所有方法，应该是目前对Matrix讲解最全面的一篇中文文章了，建议配合上一篇Matrix原理食用效果更佳。

由于本人水平有限，可能出于误解或者笔误难免出错，如果发现有问题或者对文中内容存在疑问欢迎在下面评论区告诉我，请对问题描述尽量详细，以帮助我可以快速找到问题根源。

About

本系列相关文章

作者微博: GcsSloop

参考资料

Matrix
Matrix.ScaleToFit
Android中图像变换Matrix的原理、代码验证和应用
 Understanding Affine Transformations With Matrix Mathematics

ArrayList与LinkedList遍历性能比较

Sun, 21 Aug 2016 00:00:00 +0800

用实例测试ArrayList与LinkedList遍历性能。

结构差别:

我们常用的List有两种，ArrayList和LinkedList，虽然两者都是LIst，但由于内部存储结构的不同，使用不同的遍历方法性能却是千差万别的。

List	存储结构	特点
ArrayList	数组结构	可以根据下标直接取值。
LinkedList	链表结构	如果需要寻找某一个下标的数值必须从头遍历。

常见做法:

我们在遍历List的时候可能会这样做(从C语言上带来的习惯):

public void loopList(List<Integer> lists) {
    for (int i=0; i< lists.size(); i++) {
        Integer integer = lists.get(i);
        // TODO 处理数据
    }
}

这种做法很直观，乍一看并没有什么问题，但是仔细分析一下就能知道，在这种情况下使用ArrayList与LinkedList性能是完全不同的。

List	循环时间复杂度	get(i)时间复杂度	总时间复杂度
ArrayList	O(n)	O(1)	O(n)
LinkedList	O(n)	O(n)	O(n²)

从时间复杂度上两者就直接差了一个数量级，可能这样说不明显，为了直观的表示，下面用代码测试处理10000条数据效率:

性能测试:

创建数据:

ArrayList<Integer> arrayList = new ArrayList<>();
LinkedList<Integer> linkedList = new LinkedList<>();
for (int i=0; i<10000; i++){
    arrayList.add(i);
    linkedList.add(i);
}

测试For循环用时:

long startTime1=System.currentTimeMillis();   //获取开始时间
loopList(arrayList);
iteratorList(arrayList);
long endTime1=System.currentTimeMillis(); //获取结束时间
Log.i("Time", "For-ArrayList： "+(endTime1-startTime1)+"ms");

long startTime2=System.currentTimeMillis();   //获取开始时间
loopList(linkedList);
long endTime2=System.currentTimeMillis(); //获取结束时间
Log.i("Time", "For-LinkedList："+(endTime2-startTime2)+"ms");

结果:

com.gcssloop.alltest I/Time: For-ArrayList： 20ms
com.gcssloop.alltest I/Time: For-LinkedList：648ms

可以看到，仅仅处理10000条数据两者所需时间简直不能比较，当数据量越来越大的时候，LinkedList必然会耗费更多时间。

处理办法:

我们在Java中有迭代器(Iterator) 以及 ForEach 循环，可以用它们来替代掉这个原始的 for 循环。

迭代器(Iterator):

public void iteratorList(List<Integer> lists){
    Iterator<Integer> it = lists.iterator();
    while (it.hasNext()){
        Integer integer = it.next();
        // TODO 处理数据
    }
}

测试代码与上面类似，就省略了。

结果:

com.gcssloop.alltest I/Time: Iterator-ArrayList： 4ms
com.gcssloop.alltest I/Time: Iterator-LinkedList：6ms

可以看到，两者最终耗费时间差不多而且均有大幅度提升。

ForEach循环:

public void foreachList(List<Integer> lists){
    for (Integer i : lists) {
        // TODO 处理数据
    }
}

性能:

com.gcssloop.alltest I/Time: ForEach-ArrayList： 5ms
com.gcssloop.alltest I/Time: ForEach-LinkedList：5ms

由于 ForEach 循环底层使用的也是迭代器，所以和迭代器性能类似。

总结:

推荐使用迭代器(Iterator) 和 ForEach 遍历 List，不要使用传统的 For 循环。

以下是测试处理10000条数据性能:

数值仅供参考，与运行环境相关，每次测试结果都可能稍有差别。

迭代方式	ArrayList	LinkedList
For循环	20ms	648ms
Iterator	4ms	6ms
for-each循环	5ms	5ms

About Me

作者微博: @GcsSloop

安卓自定义View进阶-Matrix原理

Wed, 03 Aug 2016 00:00:00 +0800

本文内容偏向理论，和画布操作有重叠的部分，本文会让你更加深入的了解其中的原理。

本篇的主角Matrix，是一个一直在后台默默工作的劳动模范，虽然我们所有看到View背后都有着Matrix的功劳，但我们却很少见到它，本篇我们就看看它是何方神圣吧。

由于Google已经对这一部分已经做了很好的封装，所以跳过本部分对实际开发影响并不会太大，不想深究的粗略浏览即可，下一篇中将会详细讲解Matrix的具体用法和技巧。

⚠️ 警告：测试本文章示例之前请关闭硬件加速。

Matrix简介

Matrix是一个矩阵，主要功能是坐标映射，数值转换。

它看起来大概是下面这样:

Matrix作用就是坐标映射，那么为什么需要Matrix呢? 举一个简单的例子:

我的的手机屏幕作为物理设备，其物理坐标系是从左上角开始的，但我们在开发的时候通常不会使用这一坐标系，而是使用内容区的坐标系。

以下图为例，我们的内容区和屏幕坐标系还相差一个通知栏加一个标题栏的距离，所以两者是不重合的，我们在内容区的坐标系中的内容最终绘制的时候肯定要转换为实际的物理坐标系来绘制，Matrix在此处的作用就是转换这些数值。

假设通知栏高度为20像素，导航栏高度为40像素,那么我们在内容区的(0，0)位置绘制一个点，最终就要转化为在实际坐标系中的(0，60)位置绘制一个点。

以上是仅作为一个简单的示例，实际上不论2D还是3D，我们要将图形显示在屏幕上，都离不开Matrix，所以说Matrix是一个在背后辛勤工作的劳模。

Matrix特点

作用范围更广，Matrix在View，图片，动画效果等各个方面均有运用，相比与之前讲解等画布操作应用范围更广。
更加灵活，画布操作是对Matrix的封装，Matrix作为更接近底层的东西，必然要比画布操作更加灵活。
封装很好，Matrix本身对各个方法就做了很好的封装，让开发者可以很方便的操作Matrix。
难以深入理解，很难理解中各个数值的意义，以及操作规律，如果不了解矩阵，也很难理解前乘，后乘。

常见误解

1.认为Matrix最下面的一行的三个参数(MPERSP_0、MPERSP_1、MPERSP_2)没有什么太大的作用，在这里只是为了凑数。

实际上最后一行参数在3D变换中有着至关重要的作用，这一点会在后面中Camera一文中详细介绍。

2.最后一个参数MPERSP_2被解释为scale

的确，更改MPERSP_2的值能够达到类似缩放的效果，但这是因为齐次坐标的缘故，并非这个参数的实际功能。

Matrix基本原理

Matrix 是一个矩阵，最根本的作用就是坐标转换，下面我们就看看几种常见变换的原理:

我们所用到的变换均属于仿射变换，仿射变换是线性变换(缩放，旋转，错切) 和平移变换(平移) 的复合，由于这些概念对于我们作用并不大，此处不过多介绍，有兴趣可自行了解。

基本变换有4种: 平移(translate)、缩放(scale)、旋转(rotate) 和错切(skew)。

下面我们看一下四种变换都是由哪些参数控制的。

从上图可以看到最后三个参数是控制透视的，这三个参数主要在3D效果中运用，通常为(0, 0, 1)，不在本篇讨论范围内，暂不过多叙述，会在之后对文章中详述其作用。

由于我们以下大部分的计算都是基于矩阵乘法规则，如果你已经把线性代数还给了老师，请参考一下这里: 维基百科-矩阵乘法

1.缩放(Scale)

用矩阵表示:

你可能注意到了，我们坐标多了一个1，这是使用了齐次坐标系的缘故，在数学中我们的点和向量都是这样表示的(x, y)，两者看起来一样，计算机无法区分，为此让计算机也可以区分它们，增加了一个标志位，增加之后看起来是这样:

(x, y, 1) - 点
(x, y, 0) - 向量

另外，齐次坐标具有等比的性质，(2,3,1)、(4,6,2)…(2N,3N,N)表示的均是(2,3)这一个点。(将MPERSP_2解释为scale这一误解就源于此)。

图例：

2.错切(Skew)

错切存在两种特殊错切，水平错切(平行X轴)和垂直错切(平行Y轴)。

水平错切

用矩阵表示:

图例:

垂直错切

用矩阵表示:

图例:

复合错切

水平错切和垂直错切的复合。

用矩阵表示:

图例:

3.旋转(Rotate)

假定一个点 A(x₀, y₀) ,距离原点距离为 r, 与水平轴夹角为 α 度, 绕原点旋转 θ 度, 旋转后为点 B(x, y) 如下:

用矩阵表示:

图例:

4.平移(Translate)

此处也是使用齐次坐标的优点体现之一，实际上前面的三个操作使用 2x2 的矩阵也能满足需求，但是使用 2x2 的矩阵，无法将平移操作加入其中，而将坐标扩展为齐次坐标后，将矩阵扩展为 3x3 就可以将算法统一，四种算法均可以使用矩阵乘法完成。

用矩阵表示:

图例:

Matrix复合原理

其实Matrix的多种复合操作都是使用矩阵乘法实现的，从原理上理解很简单，但是，使用矩阵乘法也有其弱点，后面的操作可能会影响到前面到操作，所以在构造Matrix时顺序很重要。

我们常用的四大变换操作，每一种操作在Matrix均有三类,前乘(pre)，后乘(post)和设置(set)，可以参见文末对Matrix方法表，由于矩阵乘法不满足交换律，所以前乘(pre)，后乘(post)和设置(set)的区别还是很大的。

前乘(pre)

前乘相当于矩阵的右乘：

这表示一个矩阵与一个特殊矩阵前乘后构造出结果矩阵。

后乘(post)

后乘相当于矩阵的左乘：

这表示一个矩阵与一个特殊矩阵后乘后构造出结果矩阵。

设置(set)

设置使用的不是矩阵乘法，而是直接覆盖掉原来的数值，所以，使用设置可能会导致之前的操作失效。

组合

关于 Matrix 的文章终有一个问题，就是 pre 和 post 这一部分的理论非常别扭，国内大多数文章都是这样的，看起来貌似是对的但很难理解，部分内容违背直觉。

我由于也受到了这些文章的影响，自然而然的继承了这一理论，直到在评论区有一位小伙伴提出了一个问题，才让我重新审视了这一部分的内容，并进行了一定反思。

经过良久的思考之后，我决定抛弃国内大部分文章的那套理论和结论，只用严谨的数学逻辑和程序逻辑来阐述这一部分的理论，也许仍有疏漏，如有发现请指正。

首先澄清两个错误结论，记住，是错误结论，错误结论，错误结论。

错误结论一：pre 是顺序执行，post 是逆序执行。

这个结论很具有迷惑性，因为这个结论并非是完全错误的，你很容易就能证明这个结论，例如下面这样：

// 第一段 pre  顺序执行，先平移(T)后旋转(R)
Matrix matrix = new Matrix();
matrix.preTranslate(pivotX,pivotY);
matrix.preRotate(angle);
Log.e("Matrix", matrix.toShortString());

// 第二段 post 逆序执行，先平移(T)后旋转(R)
Matrix matrix = new Matrix();
matrix.postRotate(angle);
matrix.postTranslate(pivotX,pivotY)
Log.e("Matrix", matrix.toShortString());

这两段代码最终结果是等价的，于是轻松证得这个结论的正确性，但事实真是这样么？

首先，从数学角度分析，pre 和 post 就是右乘或者左乘的区别，其次，它们不可能实际影响运算顺序(程序执行顺序)。以上这两段代码等价也仅仅是因为最终化简公式一样而已。

设原始矩阵为 M，平移为 T ，旋转为 R ，单位矩阵为 I ，最终结果为 M’

矩阵乘法不满足交换律，即 A*B ≠ B*A

矩阵乘法满足结合律，即 (A*B)*C = A*(B*C)

矩阵与单位矩阵相乘结果不变，即 A * I = A

由于上面例子中原始矩阵(M)是一个单位矩阵(I)，所以可得：

// 第一段 pre
M' = (M*T)*R = I*T*R = T*R

// 第二段 post
M' = T*(R*M) = T*R*I = T*R

由于两者最终的化简公式是相同的，所以两者是等价的，但是，这结论不具备普适性。

即原始矩阵不为单位矩阵的时候，两者无法化简为相同的公式，结果自然也会不同。另外，执行顺序就是程序书写顺序，不存在所谓的正序逆序。

错误结论二：pre 是先执行，而 post 是后执行。

这一条结论比上一条更离谱。

之所以产生这个错误完全是因为写文章的人懂英语。

pre  ：先，和 before 相似。
post ：后，和 after  相似。

所以就得出了 pre 先执行，而 post 后执行这一说法，但从严谨的数学和程序角度来分析，完全是不可能的，还是上面所说的，pre 和 post 不能影响程序执行顺序，而程序每执行一条语句都会得出一个确定的结果，所以，它根本不能控制先后执行，属于完全扯淡型。

如果非要用这套理论强行解释的话，反而看起来像是 post 先执行，例如：

matrix.preRotate(angle);
matrix.postTranslate(pivotX,pivotY);

同样化简公式：

// 矩阵乘法满足结合律
M‘ = T*(M*R) = T*M*R = (T*M)*R

从实际上来说，由于矩阵乘法满足结合律，所以不论你说是靠右先执行还是靠左先执行，从结果上来说都没有错。

之前基于这条错误的结论我进行了一次错误的证明：

(这段内容注定要成为我写作历程中不可抹灭的耻辱，既然是公开文章，就应该对读者负责，虽然我在发表每一篇文章之前都竭力的求证其中的问题，各种细节，避免出现这种错误，但终究还是留下了这样一段内容，在此我诚挚的向我所有的读者道歉。)

关注我的读者请尽量看我在个人博客和 GitHub 发布的版本，这两个平台都在博文修复计划之内，有任何错误或者纰漏，都会首先修复这两个平台的文章。另外，所有进行修复过的文章都会在我的微博 @GcsSloop 重新发布说明，关注我的微博可以第一时间得到博文更新或者修复的消息。

以下是错误证明：

在实际操作中，我们每一步操作都会得出准确的计算结果，但是为什么还会用存在先后的说法? 难道真的能够用pre和post影响计算顺序? 实则不然，下面我们用一个例子说明:
Matrix matrix = new Matrix();
matrix.postScale(0.5f, 0.8f);
matrix.preTranslate(1000, 1000);
Log.e(TAG, "MatrixTest" + matrix.toShortString());
在上面的操作中，如果按照正常的思路，先缩放，后平移，缩放操作执行在前，不会影响到后续的平移操作，但是执行结果却发现平移距离变成了(500， 800)。

在上面例子中，计算顺序是没有问题的，先计算的缩放，然后计算的平移，而缩放影响到平移则是因为前一步缩放后的结果矩阵右乘了平移矩阵，这是符合矩阵乘法的运算规律的，也就是说缩放操作虽然在前却影响到了平移操作，相当于先执行了平移操作，然后执行的缩放操作，因此才有pre操作会先执行，而post操作会后执行这一说法。

上面的论证是完全错误的，因为可以轻松举出反例：
Matrix matrix = new Matrix();
matrix.preScale(0.5f, 0.8f);
matrix.preTranslate(1000, 1000);
Log.e(TAG, "MatrixTest" + matrix.toShortString());
反例中，虽然将 postScale 改为了 preScale ，但两者结果是完全相同的，所以先后论根本就是错误的。

他们结果相同是因为最终化简公式是相同的，都是 S*T

之所以平移距离是 MTRANS_X = 500，MTRANS_Y = 800，那是因为执行 Translate 之前 Matrix 已经具有了一个缩放比例。在右乘的时候影响到了具体的数值计算，可以用矩阵乘法计算一下。

最终结果为：

当 T*S 的时候，缩放比例则不会影响到 MTRANS_X 和 MTRANS_Y ，具体可以使用矩阵乘法自己计算一遍。

如何理解和使用 pre 和 post ？

不要去管什么先后论，顺序论，就按照最基本的矩阵乘法理解。

pre  : 右乘， M‘ = M*A
post : 左乘， M’ = A*M

那么如何使用？

正确使用方式就是先构造正常的 Matrix 乘法顺序，之后根据情况使用 pre 和 post 来把这个顺序实现。

还是用一个最简单的例子理解，假设需要围绕某一点旋转。

可以用这个方法 xxxRotate(angle, pivotX, pivotY) ,由于我们这里需要组合构造一个 Matrix，所以不直接使用这个方法。

首先，有两条基本定理：

所有的操作(旋转、平移、缩放、错切)默认都是以坐标原点为基准点的。
之前操作的坐标系状态会保留，并且影响到后续状态。

基于这两条基本定理，我们可以推算出要基于某一个点进行旋转需要如下步骤：

先将坐标系原点移动到指定位置，使用平移 T
对坐标系进行旋转，使用旋转 S (围绕原点旋转)
再将坐标系平移回原来位置，使用平移 -T

具体公式如下：

M 为原始矩阵，是一个单位矩阵， M‘ 为结果矩阵， T 为平移， R为旋转

M' = M*T*R*-T = T*R*-T

按照公式写出来的伪代码如下：

Matrix matrix = new Matrix();
matrix.preTranslate(pivotX,pivotY);
matrix.preRotate(angle);
matrix.preTranslate(-pivotX, -pivotY);

围绕某一点操作可以拓展为通用情况，即：

Matrix matrix = new Matrix();
matrix.preTranslate(pivotX,pivotY);
// 各种操作，旋转，缩放，错切等，可以执行多次。
matrix.preTranslate(-pivotX, -pivotY);

公式为：

M' = M*T* ... *-T = T* ... *-T

但是这种方式，两个调整中心的平移函数就拉的太开了，所以通常采用这种写法：

Matrix matrix = new Matrix();
// 各种操作，旋转，缩放，错切等，可以执行多次。
matrix.postTranslate(pivotX,pivotY);
matrix.preTranslate(-pivotX, -pivotY);

这样公式为：

M' = T*M* ... *-T = T* ... *-T

可以看到最终化简结果是相同的。

所以说，pre 和 post 就是用来调整乘法顺序的，正常情况下应当正向进行构建出乘法顺序公式，之后根据实际情况调整书写即可。

在构造 Matrix 时，个人建议尽量使用一种乘法，前乘或者后乘，这样操作顺序容易确定，出现问题也比较容易排查。当然，由于矩阵乘法不满足交换律，前乘和后乘的结果是不同的，使用时应结合具体情景分析使用。

下面我们用不同对方式来构造一个相同的矩阵:

注意:

1.由于矩阵乘法不满足交换律，请保证使用初始矩阵(Initial Matrix)，否则可能导致运算结果不同。
2.注意构造顺序，顺序是会影响结果的。
3.Initial Matrix是指new出来的新矩阵，或者reset后的矩阵，是一个单位矩阵。

1.仅用pre：

// 使用pre， M' = M*T*S = T*S
Matrix m ＝ new Matrix();
m.reset();
m.preTranslate(tx, ty); 
m.preScale(sx, sy);

用矩阵表示:

2.仅用post:

// 使用post， M‘ = T*S*M = T*S
Matrix m ＝ new Matrix();
m.reset();
m.postScale(sx, sy);  //，越靠前越先执行。
m.postTranslate(tx, ty);

用矩阵表示:

3.混合:

// 混合 M‘ = T*M*S = T*S
Matrix m ＝ new Matrix();
m.reset();
m.preScale(sx, sy);  
m.postTranslate(tx, ty);

或:

// 混合 M‘ = T*M*S = T*S
Matrix m ＝ new Matrix();
m.reset();
m.postTranslate(tx, ty);
m.preScale(sx, sy);  

由于此处只有两步操作，且指定了先后，所以代码上交换并不会影响结果。

用矩阵表示:

注意: 由于矩阵乘法不满足交换律，请保证初始矩阵为单位矩阵，如果初始矩阵不为单位矩阵，则导致运算结果不同。

上面虽然用了很多不同的写法，但最终的化简公式是一样的，这些不同的写法，都是根据同一个公式反向推算出来的。

Matrix方法表

这个方法表，暂时放到这里让大家看看，方法的使用讲解放在下一篇文章中。

方法类别	相关API	摘要
基本方法	equals hashCode toString toShortString	比较、获取哈希值、转换为字符串
数值操作	set reset setValues getValues	设置、重置、设置数值、获取数值
数值计算	mapPoints mapRadius mapRect mapVectors	计算变换后的数值
设置(set)	setConcat setRotate setScale setSkew setTranslate	设置变换
前乘(pre)	preConcat preRotate preScale preSkew preTranslate	前乘变换
后乘(post)	postConcat postRotate postScale postSkew postTranslate	后乘变换
特殊方法	setPolyToPoly setRectToRect rectStaysRect setSinCos	一些特殊操作
矩阵相关	invert isAffine isIdentity	求逆矩阵、是否为仿射矩阵、是否为单位矩阵 …

总结

对于Matrix重在理解，理解了其中的原理之后用起来将会更加得心应手。

学完了本篇之后，推荐配合鸿洋大大的视频课程打造个性的图片预览与多点触控食用，定然能够让你对Matrix对理解更上一层楼。

About

本系列相关文章

作者微博: GcsSloop

参考资料

Matrix
Android中图像变换Matrix的原理、代码验证和应用
 Android中关于矩阵（Matrix）前乘后乘的一些认识
 维基百科-仿射变换
 维基百科-齐次坐标
 维基百科-线性映射
 齐次坐标系入门级思考
 仿射变换与齐次坐标

安卓自定义View进阶-PathMeasure

Thu, 02 Jun 2016 00:00:00 +0800

可以看到，在经过 Path之基本操作 Path之贝塞尔曲线和 Path之完结篇后， Path中各类方法基本上都讲完了，表格中还没有讲解到到方法就是矩阵变换了，难道本篇终于要讲矩阵了？非也，矩阵这一部分仍在后面单独讲解，本篇主要讲解 PathMeasure 这个类与 Path 的一些使用技巧。

PS：不要问我为什么不讲 PathEffect，因为这个方法在后面的Paint系列中。

先放一个图镇楼，省的下面无聊的内容把你们都吓跑了Σ(￣。￣ﾉ)ﾉ

Path & PathMeasure

顾名思义，PathMeasure是一个用来测量Path的类，主要有以下方法:

构造方法

方法名	释义
PathMeasure()	创建一个空的PathMeasure
PathMeasure(Path path, boolean forceClosed)	创建 PathMeasure 并关联一个指定的Path(Path需要已经创建完成)。

公共方法

返回值	方法名	释义
void	setPath(Path path, boolean forceClosed)	关联一个Path
boolean	isClosed()	是否闭合
float	getLength()	获取Path的长度
boolean	nextContour()	跳转到下一个轮廓
boolean	getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)	截取片段
boolean	getPosTan(float distance, float[] pos, float[] tan)	获取指定长度的位置坐标及该点切线值
boolean	getMatrix(float distance, Matrix matrix, int flags)	获取指定长度的位置坐标及该点Matrix

PathMeasure的方法也不多，接下来我们就逐一的讲解一下。

1.构造函数

构造函数有两个。

无参构造函数：

  PathMeasure ()

用这个构造函数可创建一个空的 PathMeasure，但是使用之前需要先调用 setPath 方法来与 Path 进行关联。被关联的 Path 必须是已经创建好的，如果关联之后 Path 内容进行了更改，则需要使用 setPath 方法重新关联。

有参构造函数：

  PathMeasure (Path path, boolean forceClosed)

用这个构造函数是创建一个 PathMeasure 并关联一个 Path，其实和创建一个空的 PathMeasure 后调用 setPath 进行关联效果是一样的，同样，被关联的 Path 也必须是已经创建好的，如果关联之后 Path 内容进行了更改，则需要使用 setPath 方法重新关联。

该方法有两个参数，第一个参数自然就是被关联的 Path 了，第二个参数是用来确保 Path 闭合，如果设置为 true，则不论之前Path是否闭合，都会自动闭合该 Path(如果Path可以闭合的话)。

在这里有两点需要明确:

不论 forceClosed 设置为何种状态(true 或者 false)，都不会影响原有Path的状态，即 Path 与 PathMeasure 关联之后，之前的的 Path 不会有任何改变。

forceClosed 的设置状态可能会影响测量结果，如果 Path 未闭合但在与 PathMeasure 关联的时候设置 forceClosed 为 true 时，测量结果可能会比 Path 实际长度稍长一点，获取到到是该 Path 闭合时的状态。

下面我们用一个例子来验证一下：

canvas.translate(mViewWidth/2,mViewHeight/2);

Path path = new Path();

path.lineTo(0,200);
path.lineTo(200,200);
path.lineTo(200,0);

PathMeasure measure1 = new PathMeasure(path,false);
PathMeasure measure2 = new PathMeasure(path,true);

Log.e("TAG", "forceClosed=false---->"+measure1.getLength());
Log.e("TAG", "forceClosed=true----->"+measure2.getLength());

canvas.drawPath(path,mDeafultPaint);

log如下:

com.gcssloop.canvas E/TAG: forceClosed=false---->600.0
com.gcssloop.canvas E/TAG: forceClosed=true----->800.0

绘制在界面上的效果如下:

我们所创建的 Path 实际上是一个边长为 200 的正方形的三条边，通过上面的示例就能验证以上两个问题。

1.我们将 Path 与两个的 PathMeasure 进行关联，并给 forceClosed 设置了不同的状态，之后绘制再绘制出来的 Path 没有任何变化，所以与 Path 与 PathMeasure进行关联并不会影响 Path 状态。

2.我们可以看到，设置 forceClosed 为 true 的方法比设置为 false 的方法测量出来的长度要长一点，这是由于 Path 没有闭合的缘故，多出来的距离正是 Path 最后一个点与最开始一个点之间点距离。forceClosed 为 false 测量的是当前 Path 状态的长度， forceClosed 为 true，则不论Path是否闭合测量的都是 Path 的闭合长度。

2.setPath、 isClosed 和 getLength

这三个方法都如字面意思一样，非常简单，这里就简单是叙述一下，不再过多讲解。

setPath 是 PathMeasure 与 Path 关联的重要方法，效果和构造函数中两个参数的作用是一样的。

isClosed 用于判断 Path 是否闭合，但是如果你在关联 Path 的时候设置 forceClosed 为 true 的话，这个方法的返回值则一定为true。

getLength 用于获取 Path 的总长度，在之前的测试中已经用过了。

3.getSegment

getSegment 用于获取Path的一个片段，方法如下：

boolean getSegment (float startD, float stopD, Path dst, boolean startWithMoveTo)

方法各个参数释义：

参数	作用	备注
返回值(boolean)	判断截取是否成功	true 表示截取成功，结果存入dst中，false 截取失败，不会改变dst中内容
startD	开始截取位置距离 Path 起点的长度	取值范围: 0 <= startD < stopD <= Path总长度
stopD	结束截取位置距离 Path 起点的长度	取值范围: 0 <= startD < stopD <= Path总长度
dst	截取的 Path 将会添加到 dst 中	注意: 是添加，而不是替换
startWithMoveTo	起始点是否使用 moveTo	用于保证截取的 Path 第一个点位置不变

如果 startD、stopD 的数值不在取值范围 [0, getLength] 内，或者 startD == stopD 则返回值为 false，不会改变 dst 内容。

如果在安卓4.4或者之前的版本，在默认开启硬件加速的情况下，更改 dst 的内容后可能绘制会出现问题，请关闭硬件加速或者给 dst 添加一个单个操作，例如: dst.rLineTo(0, 0)

我们先看看这个方法如何使用：

我们创建了一个 Path，并在其中添加了一个矩形，现在我们想截取矩形中的一部分，就是下图中红色的部分。

矩形边长400dp，起始点在左上角，顺时针

代码:

canvas.translate(mViewWidth / 2, mViewHeight / 2);          // 平移坐标系

Path path = new Path();                                     // 创建Path并添加了一个矩形
path.addRect(-200, -200, 200, 200, Path.Direction.CW);

Path dst = new Path();                                      // 创建用于存储截取后内容的 Path

PathMeasure measure = new PathMeasure(path, false);         // 将 Path 与 PathMeasure 关联

// 截取一部分存入dst中，并使用 moveTo 保持截取得到的 Path 第一个点的位置不变
measure.getSegment(200, 600, dst, true);                    

canvas.drawPath(dst, mDeafultPaint);                        // 绘制 dst

结果如下：

从上图可以看到我们成功到将需要到片段截取了出来，然而当 dst 中有内容时会怎样呢？

canvas.translate(mViewWidth / 2, mViewHeight / 2);          // 平移坐标系

Path path = new Path();                                     // 创建Path并添加了一个矩形
path.addRect(-200, -200, 200, 200, Path.Direction.CW);

Path dst = new Path();                                      // 创建用于存储截取后内容的 Path
dst.lineTo(-300, -300);                                     // <--- 在 dst 中添加一条线段

PathMeasure measure = new PathMeasure(path, false);         // 将 Path 与 PathMeasure 关联

measure.getSegment(200, 600, dst, true);                   // 截取一部分 并使用 moveTo 保持截取得到的 Path 第一个点的位置不变

canvas.drawPath(dst, mDeafultPaint);                        // 绘制 Path

结果如下:

从上面的示例可以看到 dst 中的线段保留了下来，可以得到结论：被截取的 Path 片段会添加到 dst 中，而不是替换 dst 中到内容。

前面两个例子中 startWithMoveTo 均为 true，如果设置为false会怎样呢?

canvas.translate(mViewWidth / 2, mViewHeight / 2);          // 平移坐标系

Path path = new Path();                                     // 创建Path并添加了一个矩形
path.addRect(-200, -200, 200, 200, Path.Direction.CW);

Path dst = new Path();                                      // 创建用于存储截取后内容的 Path
dst.lineTo(-300, -300);                                     // 在 dst 中添加一条线段

PathMeasure measure = new PathMeasure(path, false);         // 将 Path 与 PathMeasure 关联

measure.getSegment(200, 600, dst, false);                   // <--- 截取一部分 不使用 startMoveTo, 保持 dst 的连续性

canvas.drawPath(dst, mDeafultPaint);                        // 绘制 Path

结果如下：

从该示例我们又可以得到一条结论：如果 startWithMoveTo 为 true, 则被截取出来到Path片段保持原状，如果 startWithMoveTo 为 false，则会将截取出来的 Path 片段的起始点移动到 dst 的最后一个点，以保证 dst 的连续性。

从而我们可以用以下规则来判断 startWithMoveTo 的取值：

取值	主要功用
true	保证截取得到的 Path 片段不会发生形变
false	保证存储截取片段的 Path(dst) 的连续性

4.nextContour

我们知道 Path 可以由多条曲线构成，但不论是 getLength , getSegment 或者是其它方法，都只会在其中第一条线段上运行，而这个 nextContour 就是用于跳转到下一条曲线到方法，如果跳转成功，则返回 true，如果跳转失败，则返回 false。

如下，我们创建了一个 Path 并使其中包含了两个闭合的曲线，内部的边长是200，外面的边长是400，现在我们使用 PathMeasure 分别测量两条曲线的总长度。

代码：

canvas.translate(mViewWidth / 2, mViewHeight / 2);      // 平移坐标系

Path path = new Path();

path.addRect(-100, -100, 100, 100, Path.Direction.CW);  // 添加小矩形
path.addRect(-200, -200, 200, 200, Path.Direction.CW);  // 添加大矩形

canvas.drawPath(path,mDeafultPaint);                    // 绘制 Path

PathMeasure measure = new PathMeasure(path, false);     // 将Path与PathMeasure关联

float len1 = measure.getLength();                       // 获得第一条路径的长度

measure.nextContour();                                  // 跳转到下一条路径

float len2 = measure.getLength();                       // 获得第二条路径的长度

Log.i("LEN","len1="+len1);                              // 输出两条路径的长度
Log.i("LEN","len2="+len2);

log输出结果:

com.gcssloop.canvas I/LEN: len1=800.0
com.gcssloop.canvas I/LEN: len2=1600.0

通过测试，我们可以得到以下内容：

1.曲线的顺序与 Path 中添加的顺序有关。
2.getLength 获取到到是当前一条曲线分长度，而不是整个 Path 的长度。
3.getLength 等方法是针对当前的曲线(其它方法请自行验证)。

5.getPosTan

这个方法是用于得到路径上某一长度的位置以及该位置的正切值：

boolean getPosTan (float distance, float[] pos, float[] tan)

方法各个参数释义：

参数	作用	备注
返回值(boolean)	判断获取是否成功	true表示成功，数据会存入 pos 和 tan 中， false 表示失败，pos 和 tan 不会改变
distance	距离 Path 起点的长度	取值范围: 0 <= distance <= getLength
pos	该点的坐标值	当前点在画布上的位置，有两个数值，分别为x，y坐标。
tan	该点的正切值	当前点在曲线上的方向，使用 Math.atan2(tan[1], tan[0]) 获取到正切角的弧度值。

这个方法也不难理解，除了其中 tan 这个东东，这个东西是干什么的呢？

tan 是用来判断 Path 上趋势的，即在这个位置上曲线的走向，请看下图示例，注意箭头的方向:

点击这里下载箭头图片

可以看到上图中箭头在沿着 Path 运动时，方向始终与 Path 走向保持一致，保持方向主要就是依靠 tan 。

下面我们来看看代码是如何实现的，首先我们需要定义几个必要的变量:

private float currentValue = 0;     // 用于纪录当前的位置,取值范围[0,1]映射Path的整个长度

private float[] pos;                // 当前点的实际位置
private float[] tan;                // 当前点的tangent值,用于计算图片所需旋转的角度
private Bitmap mBitmap;             // 箭头图片
private Matrix mMatrix;             // 矩阵,用于对图片进行一些操作

初始化这些变量(在构造函数中调用这个方法):

private void init(Context context) {
    pos = new float[2];
    tan = new float[2];
    BitmapFactory.Options options = new BitmapFactory.Options();
    options.inSampleSize = 2;       // 缩放图片
    mBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.arrow, options);
    mMatrix = new Matrix();
}

具体绘制:

canvas.translate(mViewWidth / 2, mViewHeight / 2);      // 平移坐标系

Path path = new Path();                                 // 创建 Path

path.addCircle(0, 0, 200, Path.Direction.CW);           // 添加一个圆形

PathMeasure measure = new PathMeasure(path, false);     // 创建 PathMeasure

currentValue += 0.005;                                  // 计算当前的位置在总长度上的比例[0,1]
if (currentValue >= 1) {
  currentValue = 0;
}

measure.getPosTan(measure.getLength() * currentValue, pos, tan);        // 获取当前位置的坐标以及趋势

mMatrix.reset();                                                        // 重置Matrix
float degrees = (float) (Math.atan2(tan[1], tan[0]) * 180.0 / Math.PI); // 计算图片旋转角度

mMatrix.postRotate(degrees, mBitmap.getWidth() / 2, mBitmap.getHeight() / 2);   // 旋转图片
mMatrix.postTranslate(pos[0] - mBitmap.getWidth() / 2, pos[1] - mBitmap.getHeight() / 2);   // 将图片绘制中心调整到与当前点重合

canvas.drawPath(path, mDeafultPaint);                                   // 绘制 Path
canvas.drawBitmap(mBitmap, mMatrix, mDeafultPaint);                     // 绘制箭头

invalidate();                                                           // 重绘页面

核心要点:

1.通过 tan 得值计算出图片旋转的角度，tan 是 tangent 的缩写，即中学中常见的正切，其中tan[0]是邻边边长，tan[1]是对边边长，而Math中 atan2 方法是根据正切是数值计算出该角度的大小,得到的单位是弧度(取值范围是 -pi 到 pi)，所以上面又将弧度转为了角度。

2.通过 Matrix 来设置图片对旋转角度和位移，这里使用的方法与前面讲解过对 canvas操作有些类似，对于 Matrix 会在后面专一进行讲解，敬请期待。

3.页面刷新，页面刷新此处是在 onDraw 里面调用了 invalidate 方法来保持界面不断刷新，但并不提倡这么做，正确对做法应该是使用线程或者 ValueAnimator 来控制界面的刷新，关于控制页面刷新这一部分会在后续的动画部分详细讲解，同样敬请期待。

关于tan这个参数有很多魔法师不理解，特此拉出来详述一下，tan 在数学中被称为正切，在直角三角形中，一个锐角的正切定义为它的对边(Opposite side)与邻边(Adjacent side)的比值(来自维基百科)：

我们此处用 tan 来描述 Path 上某一点的切线方向，主要用了两个数值 tan[0] 和 tan[1] 来描述这个切线的方向(切线方向与x轴夹角) ，看上面公式可知 tan 既可以用 对边／邻边 来表述，也可以用 sin／cos 来表述，此处用两种理解方式均可以(注意下面等价关系):

tan[0] = cos = 邻边(单位圆x坐标)
tan[1] = sin = 对边(单位圆y坐标)

以 sin／cos理解:

在圆上最右侧点的切线方向向下(动图中小飞机朝向和切线朝向一致)，切线角度为90度.
sin90 = 1，cos90 = 0
tan[0] = cos = 0
tan[1] = sin = 1

以 对边／邻边 理解(单位圆上坐标):

按照这种理解方式需要借助一个单位圆，单位圆上任意一点到圆心到距离均为 1，以下图30度为例：

tan30 = 对边／邻边 = AB／OA = B点y坐标／B点x坐标

另外根据单位圆性质同样可以证得:
sin30 = 对边／斜边 = AB／OB = AB = B点y坐标 (单位圆边上任意一点距离圆心距离均为1，故OB = 1)
cos30 = 邻边／斜边 = OA／OB = OA = B点x坐标

化为通用公式即为:
sin = 该角度在单位圆上对应点的y坐标
cos = 该角度在单位圆上对应点的x坐标

即 tan = sin／cos = y／x
tan[0] = x
tan[1] = y

另外注意，这个单位圆与小飞机路径没有半毛钱关系，例如上一个例子中的90度切线，不要在单位圆上找对应位置，要找对应角度的位置，90度对应的位置是(0，1)，所以:
tan[0] = x = 0
tan[1] = y = 1

其实绕来绕去全是等价的 (╯°Д°)╯︵ ┻━┻

PS: 使用 Math.atan2(tan[1], tan[0]) 将 tan 转化为角(单位为弧度)的时候要注意参数顺序。

6.getMatrix

这个方法是用于得到路径上某一长度的位置以及该位置的正切值的矩阵：

boolean getMatrix (float distance, Matrix matrix, int flags)

方法各个参数释义：

参数	作用	备注
返回值(boolean)	判断获取是否成功	true表示成功，数据会存入matrix中，false 失败，matrix内容不会改变
distance	距离 Path 起点的长度	取值范围: 0 <= distance <= getLength
matrix	根据 falgs 封装好的matrix	会根据 flags 的设置而存入不同的内容
flags	规定哪些内容会存入到matrix中	可选择 POSITION_MATRIX_FLAG(位置) ANGENT_MATRIX_FLAG(正切)

其实这个方法就相当于我们在前一个例子中封装 matrix 的过程由 getMatrix 替我们做了，我们可以直接得到一个封装好到 matrix，岂不快哉。

但是我们看到最后到 flags 选项可以选择 位置 或者 正切 ,如果我们两个选项都想选择怎么办？

如果两个选项都想选择，可以将两个选项之间用 | 连接起来，如下：

measure.getMatrix(distance, matrix, PathMeasure.TANGENT_MATRIX_FLAG | PathMeasure.POSITION_MATRIX_FLAG);

我们可以将上面都例子中 getPosTan 替换为 getMatrix，看看是不是会显得简单很多:

具体绘制:

Path path = new Path();                                 // 创建 Path

path.addCircle(0, 0, 200, Path.Direction.CW);           // 添加一个圆形

PathMeasure measure = new PathMeasure(path, false);     // 创建 PathMeasure

currentValue += 0.005;                                  // 计算当前的位置在总长度上的比例[0,1]
if (currentValue >= 1) {
    currentValue = 0;
}

// 获取当前位置的坐标以及趋势的矩阵
measure.getMatrix(measure.getLength() * currentValue, mMatrix, PathMeasure.TANGENT_MATRIX_FLAG | PathMeasure.POSITION_MATRIX_FLAG);

mMatrix.preTranslate(-mBitmap.getWidth() / 2, -mBitmap.getHeight() / 2);   // <-- 将图片绘制中心调整到与当前点重合(注意:此处是前乘pre)

canvas.drawPath(path, mDeafultPaint);                                   // 绘制 Path
canvas.drawBitmap(mBitmap, mMatrix, mDeafultPaint);                     // 绘制箭头

invalidate();                                                           // 重绘页面

由于此处代码运行结果与上面一样，便不再贴图片了，请参照上面一个示例的效果图。

可以看到使用 getMatrix 方法的确可以节省一些代码，不过这里依旧需要注意一些内容:

1.对 matrix 的操作必须要在 getMatrix 之后进行，否则会被 getMatrix 重置而导致无效。

2.矩阵对旋转角度默认为图片的左上角，我们此处需要使用 preTranslate 调整为图片中心。

3.pre(矩阵前乘) 与 post(矩阵后乘) 的区别，此处请等待后续的文章或者自行搜索。

Path & SVG

我们知道，用Path可以创建出各种个样的图形，但如果图形过于复杂时，用代码写就不现实了，不仅麻烦，而且容易出错，所以在绘制复杂的图形时我们一般是将 SVG 图像转换为 Path。

你说什么是 SVG?

SVG 是一种矢量图，内部用的是 xml 格式化存储方式存储这操作和数据，你完全可以将 SVG 看作是 Path 的各项操作简化书写后的存储格式。

Path 和 SVG 结合通常能诞生出一些奇妙的东西，如下:

该图片来自这个开源库 ->PathView
SVG 转 Path 的解析可以用这个库 -> AndroidSVG

限于篇幅以及本人精力，这一部分就暂不详解了，感兴趣的可以直接看源码，或者搜索一些相关的解析文章。

Path使用技巧

话说本篇文章的名字不是叫玩出花样么？怎么只见前面啰啰嗦嗦的扯了一大堆不明所以的东西，花样在哪里？

前面的内容虽然啰嗦繁杂，但却是重中之重的基础，如果在修仙界，这叫根基，而下面讲述的内容的是招式，有了根基才能演化出千变万化的招式，而没有根基只学招式则是徒有其表，只能学一样会一样，很难适应千变万化的需求。

先放一个效果图，然后分析一下实现过程:

这是一个搜索的动效图，通过分析可以得到它应该有四种状态，分别如下:

状态	概述
初始状态	初始状态，没有任何动效，只显示一个搜索标志 🔍
准备搜索	放大镜图标逐渐变化为一个点
正在搜索	围绕这一个圆环运动，并且线段长度会周期性变化
准备结束	从一个点逐渐变化成为放大镜图标

这些状态是有序转换的，转换流程以及转换条件如下：

其中 正在搜索 这个状态持续时间长度是不确定的，在没有搜索完成前，应该一直处于搜索状态。

简单的分析了其大致的流程之后，就到了制作的重点:对细节对把握。

Path 划分

为了制作对方便，此处整个动效用了两个 Path，一个是中间对放大镜，另一个则是外侧的圆环,将两者全部画出来是这样子的。

其中 Path 的走向要把握好，如下(只是一个放大镜，并不是♂):

其中圆形上面的点可以用 PathMeasure 测量，无需计算。

动画状态与时间关联

此处使用的是 ValueAnimator，它可以将一段时间映射到一段数值上，随着时间变化不断的更新数值，并且可以使用插值器开控制数值变化规律(此处使用的是默认插值器)。

PS: 本来不想提前暴露这个的，准备偷偷留到动画部分(｡-_-｡) 但实在是没有优雅的替代方案了。

具体绘制

绘制部分是根据当前状态以及从 ValueAnimator 获得的数值来截取 Path 中合适的部分绘制出来。

最终效果

源码

上面的内容是为了帮助大家从把控全局流程以及理解某些细节的设计思路，而更多的内容都藏在代码中，代码总体也不算长，感兴趣的可以自己敲一遍。

戳这里查看源码

PS: 本代码仅作为示例使用，还有诸多不足，如自定义属性，视图大小，点击事件，监听回调等，并不适合直接使用，有需要的可以自行补足相关内容。

总结

本文中虽然后面的内容看起来比较高大上一点，但前面”啰嗦”的废话才是真正的干货，把前面的东西学会了，后面的各种效果都能信手拈来，如果只研究后面的东西，则是取其形，而难以会其意。

PS: 由于本人水平有限，某些地方可能存在误解或不准确，如果你对此有疑问可以提交Issues进行反馈。

About

本系列相关文章

作者微博: GcsSloop

参考资料

PathMeasure
AndroidSVG
android-pathview
android Path 和 PathMeasure 进阶

安卓自定义View进阶-Path之完结篇

Mon, 02 May 2016 00:00:00 +0800

经历过前两篇 Path之基本操作和 Path之贝塞尔曲线的讲解，本篇终于进入Path的收尾篇，本篇结束后Path的大部分相关方法都已经讲解完了，但Path还有一些更有意思的玩法，应该会在后续的文章中出现。

一.Path常用方法表

为了兼容性(偷懒) 本表格中去除了在API21(即安卓版本5.0)以上才添加的方法。忍不住吐槽一下，为啥看起来有些顺手就能写的重载方法要等到API21才添加上啊。宝宝此刻内心也是崩溃的。

作用	相关方法	备注
移动起点	moveTo	移动下一次操作的起点位置
设置终点	setLastPoint	重置当前path中最后一个点位置，如果在绘制之前调用，效果和moveTo相同
连接直线	lineTo	添加上一个点到当前点之间的直线到Path
闭合路径	close	连接第一个点连接到最后一个点，形成一个闭合区域
添加内容	addRect, addRoundRect, addOval, addCircle, addPath, addArc, arcTo	添加(矩形，圆角矩形，椭圆，圆，路径，圆弧) 到当前Path (注意addArc和arcTo的区别)
是否为空	isEmpty	判断Path是否为空
是否为矩形	isRect	判断path是否是一个矩形
替换路径	set	用新的路径替换到当前路径所有内容
偏移路径	offset	对当前路径之前的操作进行偏移(不会影响之后的操作)
贝塞尔曲线	quadTo, cubicTo	分别为二次和三次贝塞尔曲线的方法
rXxx方法	rMoveTo, rLineTo, rQuadTo, rCubicTo	不带r的方法是基于原点的坐标系(偏移量)， rXxx方法是基于当前点坐标系(偏移量)
填充模式	setFillType, getFillType, isInverseFillType, toggleInverseFillType	设置,获取,判断和切换填充模式
提示方法	incReserve	提示Path还有多少个点等待加入(这个方法貌似会让Path优化存储结构)
布尔操作(API19)	op	对两个Path进行布尔运算(即取交集、并集等操作)
计算边界	computeBounds	计算Path的边界
重置路径	reset, rewind	清除Path中的内容 reset不保留内部数据结构，但会保留FillType. rewind会保留内部的数据结构，但不保留FillType
矩阵操作	transform	矩阵变换

二、Path方法详解

rXxx方法

此类方法可以看到和前面的一些方法看起来很像，只是在前面多了一个r，那么这个rXxx和前面的一些方法有什么区别呢？

rXxx方法的坐标使用的是相对位置(基于当前点的位移)，而之前方法的坐标是绝对位置(基于当前坐标系的坐标)。

举个例子:

Path path = new Path();

path.moveTo(100,100);
path.lineTo(100,200);

canvas.drawPath(path,mDeafultPaint);

在这个例子中，先移动点到坐标(100，100)处，之后再连接 点(100，100) 到 (100，200) 之间点直线,非常简单，画出来就是一条竖直的线，那接下来看下一个例子：

Path path = new Path();

path.moveTo(100,100);
path.rLineTo(100,200);

canvas.drawPath(path,mDeafultPaint);

这个例子中，将 lineTo 换成了 rLineTo 可以看到在屏幕上原本是竖直的线变成了倾斜的线。这是因为最终我们连接的是 (100,100) 和 (200, 300) 之间的线段。

在使用rLineTo之前，当前点的位置在 (100,100) ，使用了 rLineTo(100,200) 之后，下一个点的位置是在当前点的基础上加上偏移量得到的，即 (100+100, 100+200) 这个位置，故最终结果如上所示。

PS: 此处仅以 rLineTo 为例，只要理解 “绝对坐标” 和 “相对坐标” 的区别，其他方法类比即可。

填充模式

我们在之前的文章中了解到，Paint有三种样式，“描边” “填充” 以及 “描边加填充”，我们这里所了解到就是在Paint设置为后两种样式时不同的填充模式对图形渲染效果的影响。

我们要给一个图形内部填充颜色，首先需要分清哪一部分是外部，哪一部分是内部，机器不像我们人那么聪明，机器是如何判断内外呢？

机器判断图形内外，一般有以下两种方法：

PS：此处所有的图形均为封闭图形，不包括图形不封闭这种情况。

方法	判定条件	解释
奇偶规则	奇数表示在图形内，偶数表示在图形外	从任意位置p作一条射线，若与该射线相交的图形边的数目为奇数，则p是图形内部点，否则是外部点。
非零环绕数规则	若环绕数为0表示在图形外，非零表示在图形内	首先使图形的边变为矢量。将环绕数初始化为零。再从任意位置p作一条射线。当从p点沿射线方向移动时，对在每个方向上穿过射线的边计数，每当图形的边从右到左穿过射线时，环绕数加1，从左到右时，环绕数减1。处理完图形的所有相关边之后，若环绕数为非零，则p为内部点，否则，p是外部点。

接下来我们先了解一下两种判断方法是如何工作的。

奇偶规则(Even-Odd Rule)

这一个比较简单，也容易理解，直接用一个简单示例来说明。

在上图中有一个四边形，我们选取了三个点来判断这些点是否在图形内部。

P1: 从P1发出一条射线，发现图形与该射线相交边数为0，偶数，故P1点在图形外部。
P2: 从P2发出一条射线，发现图形与该射线相交边数为1，奇数，故P2点在图形内部。
P3: 从P3发出一条射线，发现图形与该射线相交边数为2，偶数，故P3点在图形外部。

非零环绕数规则(Non-Zero Winding Number Rule)

非零环绕数规则相对来说比较难以理解一点。

我们在之前的文章 Path之基本操作中我们了解到，在给Path中添加图形时需要指定图形的添加方式，是用顺时针还是逆时针，另外我们不论是使用lineTo，quadTo，cubicTo还是其他连接线的方法，都是从一个点连接到另一个点，换言之，Path中任何线段都是有方向性的，这也是使用非零环绕数规则的基础。

我们依旧用一个简单的例子来说明非零环绕数规则的用法:

PS: 注意图形中线段的方向性!

P1: 从P1点发出一条射线，沿射线防线移动，并没有与边相交点部分，环绕数为0，故P1在图形外边。
P2: 从P2点发出一条射线，沿射线方向移动，与图形点左侧边相交，该边从左到右穿过穿过射线，环绕数－1，最终环绕数为－1，故P2在图形内部。
P3: 从P3点发出一条射线，沿射线方向移动，在第一个交点处，底边从右到左穿过射线，环绕数＋1，在第二个交点处，右侧边从左到右穿过射线，环绕数－1，最终环绕数为0，故P3在图形外部。

通常，这两种方法的判断结果是相同的，但也存在两种方法判断结果不同的情况，如下面这种情况：

注意图形线段的方向，就不详细解释了，用上面的方法进行判断即可。

自相交图形

自相交图形定义：多边形在平面内除顶点外还有其他公共点。

简单的提一下自相交图形，了解概念即可，下图就是一个简单的自相交图形：

Android中的填充模式

Android中的填充模式有四种，是封装在Path中的一个枚举。

模式	简介
EVEN_ODD	奇偶规则
INVERSE_EVEN_ODD	反奇偶规则
WINDING	非零环绕数规则
INVERSE_WINDING	反非零环绕数规则

我们可以看到上面有四种模式，分成两对，例如 “奇偶规则” 与 “反奇偶规则” 是一对，它们之间有什么关系呢？

Inverse 和含义是“相反，对立”，说明反奇偶规则刚好与奇偶规则相反，例如对于一个矩形而言，使用奇偶规则会填充矩形内部，而使用反奇偶规则会填充矩形外部，这个会在后面示例中代码展示两者对区别。

Android与填充模式相关的方法

这些都是Path中的方法。

方法	作用
setFillType	设置填充规则
getFillType	获取当前填充规则
isInverseFillType	判断是否是反向(INVERSE)规则
toggleInverseFillType	切换填充规则(即原有规则与反向规则之间相互切换)

示例演示：

本演示着重于帮助理解填充模式中的一些难点和易混淆的问题，对于一些比较简单的问题，读者可自行验证，本文中不会过多赘述。

奇偶规则与反奇偶规则

mDeafultPaint.setStyle(Paint.Style.FILL);                   // 设置画布模式为填充

canvas.translate(mViewWidth / 2, mViewHeight / 2);          // 移动画布(坐标系)

Path path = new Path();                                     // 创建Path

//path.setFillType(Path.FillType.EVEN_ODD);                   // 设置Path填充模式为 奇偶规则
path.setFillType(Path.FillType.INVERSE_EVEN_ODD);            // 反奇偶规则

path.addRect(-200,-200,200,200, Path.Direction.CW);         // 给Path中添加一个矩形

下面两张图片分别是在奇偶规则于反奇偶规则的情况下绘制的结果，可以看出其填充的区域刚好相反：

PS: 白色为背景色，黑色为填充色。

图形边的方向对非零奇偶环绕数规则填充结果的影响

我们之前讨论过给Path添加图形时顺时针与逆时针的作用，除了上次讲述的方便记录外，就是本文所涉及的另外一个重要作用了: “作为非零环绕数规则的判断依据。”

通过前面我们已经大致了解了在图形边的方向会如何影响到填充效果，我们这里验证一下:

mDeafultPaint.setStyle(Paint.Style.FILL);                   // 设置画笔模式为填充

canvas.translate(mViewWidth / 2, mViewHeight / 2);          // 移动画布(坐系)

Path path = new Path();                                     // 创建Path

// 添加小正方形 (通过这两行代码来控制小正方形边的方向,从而演示不同的效果)
// path.addRect(-200, -200, 200, 200, Path.Direction.CW);
path.addRect(-200, -200, 200, 200, Path.Direction.CCW);

// 添加大正方形
path.addRect(-400, -400, 400, 400, Path.Direction.CCW);

path.setFillType(Path.FillType.WINDING);                    // 设置Path填充模式为非零环绕规则

canvas.drawPath(path, mDeafultPaint);                       // 绘制Path

布尔操作(API19)

布尔操作与我们中学所学的集合操作非常像，只要知道集合操作中等交集，并集，差集等操作，那么理解布尔操作也是很容易的。

布尔操作是两个Path之间的运算，主要作用是用一些简单的图形通过一些规则合成一些相对比较复杂，或难以直接得到的图形。

如太极中的阴阳鱼，如果用贝塞尔曲线制作的话，可能需要六段贝塞尔曲线才行，而在这里我们可以用四个Path通过布尔运算得到，而且会相对来说更容易理解一点。

canvas.translate(mViewWidth / 2, mViewHeight / 2);

Path path1 = new Path();
Path path2 = new Path();
Path path3 = new Path();
Path path4 = new Path();

path1.addCircle(0, 0, 200, Path.Direction.CW);
path2.addRect(0, -200, 200, 200, Path.Direction.CW);
path3.addCircle(0, -100, 100, Path.Direction.CW);
path4.addCircle(0, 100, 100, Path.Direction.CCW);


path1.op(path2, Path.Op.DIFFERENCE);
path1.op(path3, Path.Op.UNION);
path1.op(path4, Path.Op.DIFFERENCE);

canvas.drawPath(path1, mDeafultPaint);

前面演示了布尔运算的作用，接下来我们了解一下布尔运算的核心:布尔逻辑。

Path的布尔运算有五种逻辑，如下:

逻辑名称	类比	说明
DIFFERENCE	差集	Path1中减去Path2后剩下的部分
REVERSE_DIFFERENCE	差集	Path2中减去Path1后剩下的部分
INTERSECT	交集	Path1与Path2相交的部分
UNION	并集	包含全部Path1和Path2
XOR	异或	包含Path1与Path2但不包括两者相交的部分

布尔运算方法

通过前面到理论知识铺垫，相信大家对布尔运算已经有了基本的认识和理解，下面我们用代码演示一下布尔运算:

在Path中的布尔运算有两个方法

boolean op (Path path, Path.Op op)
boolean op (Path path1, Path path2, Path.Op op)

两个方法中的返回值用于判断布尔运算是否成功，它们使用方法如下:

// 对 path1 和 path2 执行布尔运算，运算方式由第二个参数指定，运算结果存入到path1中。
path1.op(path2, Path.Op.DIFFERENCE);

// 对 path1 和 path2 执行布尔运算，运算方式由第三个参数指定，运算结果存入到path3中。
path3.op(path1, path2, Path.Op.DIFFERENCE)

布尔运算示例

代码：

int x = 80;
int r = 100;

canvas.translate(250,0);

Path path1 = new Path();
Path path2 = new Path();
Path pathOpResult = new Path();

path1.addCircle(-x, 0, r, Path.Direction.CW);
path2.addCircle(x, 0, r, Path.Direction.CW);

pathOpResult.op(path1,path2, Path.Op.DIFFERENCE);
canvas.translate(0, 200);
canvas.drawText("DIFFERENCE", 240,0,mDeafultPaint);
canvas.drawPath(pathOpResult,mDeafultPaint);

pathOpResult.op(path1,path2, Path.Op.REVERSE_DIFFERENCE);
canvas.translate(0, 300);
canvas.drawText("REVERSE_DIFFERENCE", 240,0,mDeafultPaint);
canvas.drawPath(pathOpResult,mDeafultPaint);

pathOpResult.op(path1,path2, Path.Op.INTERSECT);
canvas.translate(0, 300);
canvas.drawText("INTERSECT", 240,0,mDeafultPaint);
canvas.drawPath(pathOpResult,mDeafultPaint);

pathOpResult.op(path1,path2, Path.Op.UNION);
canvas.translate(0, 300);
canvas.drawText("UNION", 240,0,mDeafultPaint);
canvas.drawPath(pathOpResult,mDeafultPaint);

pathOpResult.op(path1,path2, Path.Op.XOR);
canvas.translate(0, 300);
canvas.drawText("XOR", 240,0,mDeafultPaint);
canvas.drawPath(pathOpResult,mDeafultPaint);

计算边界

这个方法主要作用是计算Path所占用的空间以及所在位置,方法如下：

void computeBounds (RectF bounds, boolean exact)

它有两个参数：

参数	作用
bounds	测量结果会放入这个矩形
exact	是否精确测量，目前这一个参数作用已经废弃，一般写true即可。

关于exact如有疑问可参见Google官方的提交记录Path.computeBounds()

计算边界示例

计算path边界的一个简单示例.

代码：

// 移动canvas,mViewWidth与mViewHeight在 onSizeChanged 方法中获得
canvas.translate(mViewWidth/2,mViewHeight/2);

RectF rect1 = new RectF();              // 存放测量结果的矩形

Path path = new Path();                 // 创建Path并添加一些内容
path.lineTo(100,-50);
path.lineTo(100,50);
path.close();
path.addCircle(-100,0,100, Path.Direction.CW);

path.computeBounds(rect1,true);         // 测量Path

canvas.drawPath(path,mDeafultPaint);    // 绘制Path

mDeafultPaint.setStyle(Paint.Style.STROKE);
mDeafultPaint.setColor(Color.RED);
canvas.drawRect(rect1,mDeafultPaint);   // 绘制边界

重置路径

重置Path有两个方法，分别是reset和rewind，两者区别主要有一下两点：

方法	是否保留FillType设置	是否保留原有数据结构
reset	是	否
rewind	否	是

这个两个方法应该何时选择呢？

选择权重: FillType > 数据结构

因为“FillType”影响的是显示效果，而“数据结构”影响的是重建速度。

总结

Path中常用的方法到此已经结束，希望能够帮助大家加深对Path对理解运用，让大家能够用Path愉快的玩耍。(￣▽￣)

(,,• ₃ •,,)

PS: 由于本人水平有限，某些地方可能存在误解或不准确，如果你对此有疑问可以提交Issues进行反馈。

About

本系列相关文章

作者微博: GcsSloop

参考资料

Path
维基百科－Nonzero-rule
android绘图之Path总结
 布尔逻辑
 GoogleCode－Path.computeBounds()
Path.reset vs Path.rewind

安卓自定义View进阶-Path之贝塞尔曲线

Fri, 29 Apr 2016 00:00:00 +0800

在上一篇文章Path之基本操作中我们了解了Path的基本使用方法，本次了解Path中非常非常非常重要的内容-贝塞尔曲线。

一.Path常用方法表

为了兼容性(偷懒) 本表格中去除了在API21(即安卓版本5.0)以上才添加的方法。忍不住吐槽一下，为啥看起来有些顺手就能写的重载方法要等到API21才添加上啊。宝宝此刻内心也是崩溃的。

作用	相关方法	备注
移动起点	moveTo	移动下一次操作的起点位置
设置终点	setLastPoint	重置当前path中最后一个点位置，如果在绘制之前调用，效果和moveTo相同
连接直线	lineTo	添加上一个点到当前点之间的直线到Path
闭合路径	close	连接第一个点连接到最后一个点，形成一个闭合区域
添加内容	addRect, addRoundRect, addOval, addCircle, addPath, addArc, arcTo	添加(矩形，圆角矩形，椭圆，圆，路径，圆弧) 到当前Path (注意addArc和arcTo的区别)
是否为空	isEmpty	判断Path是否为空
是否为矩形	isRect	判断path是否是一个矩形
替换路径	set	用新的路径替换到当前路径所有内容
偏移路径	offset	对当前路径之前的操作进行偏移(不会影响之后的操作)
贝塞尔曲线	quadTo, cubicTo	分别为二次和三次贝塞尔曲线的方法
rXxx方法	rMoveTo, rLineTo, rQuadTo, rCubicTo	不带r的方法是基于原点的坐标系(偏移量)， rXxx方法是基于当前点坐标系(偏移量)
填充模式	setFillType, getFillType, isInverseFillType, toggleInverseFillType	设置,获取,判断和切换填充模式
提示方法	incReserve	提示Path还有多少个点等待加入(这个方法貌似会让Path优化存储结构)
布尔操作(API19)	op	对两个Path进行布尔运算(即取交集、并集等操作)
计算边界	computeBounds	计算Path的边界
重置路径	reset, rewind	清除Path中的内容 reset不保留内部数据结构，但会保留FillType. rewind会保留内部的数据结构，但不保留FillType
矩阵操作	transform	矩阵变换

二.Path详解

上一次除了一些常用函数之外，讲解的基本上都是直线，本次需要了解其中的曲线部分,说到曲线，就不得不提大名鼎鼎的贝塞尔曲线。它的发明者是下面这个人(法国数学家PierreBézier)。

贝塞尔曲线能干什么？

贝塞尔曲线的运用是十分广泛的，可以说贝塞尔曲线奠定了计算机绘图的基础(因为它可以将任何复杂的图形用精确的数学语言进行描述)，在你不经意间就已经使用过它了。

你会使用Photoshop的话，你可能会注意到里面有一个钢笔工具，这个钢笔工具核心就是贝塞尔曲线。

你说你不会PS？没关系，你如果看过前面的文章或者用过2D绘图，肯定绘制过圆，圆弧，圆角矩形等这些东西。这里面的圆弧部分全部都是贝塞尔曲线的运用。

贝塞尔曲线作用十分广泛，简单举几个的栗子:

QQ小红点拖拽效果
一些炫酷的下拉刷新控件
阅读软件的翻书效果
一些平滑的折线图的制作
很多炫酷的动画效果

如何轻松入门贝塞尔曲线？

虽然贝塞尔曲线用途非常广泛，然而目前貌似并没有适合的中文教程，能够搜索出来Android关于贝塞尔曲线的中文文章基本可以分为以下几种：

科普型(只是让人了解贝塞尔，并没有实质性的内容)
装逼型(摆出来一大堆公式，引用一堆英文原文)
基础型(仅仅是讲解贝塞尔曲线的两个函数用法)
实战型(根据实例讲解其中贝塞尔曲线的运用)

以上几种类型中比较有用的就是基础型和实战型，但两者各有不足，本文会综合两者内容，从零开始学习贝塞尔曲线。

第一步.理解贝塞尔曲线的原理

此处理解贝塞尔曲线并非是学会公式的推导过程(推倒(ﾉ*･ω･)ﾉ)，而是要了解贝塞尔曲线是如何生成的。
贝塞尔曲线是用一系列点来控制曲线状态的，我将这些点简单分为两类：

类型	作用
数据点	确定曲线的起始和结束位置
控制点	确定曲线的弯曲程度

此处暂时仅作了解概念，接下来就会讲解其中详细的含义。

一阶曲线原理：

一阶曲线是没有控制点的，仅有两个数据点(A 和 B)，最终效果一个线段。

上图表示的是一阶曲线生成过程中的某一个阶段，动态过程可以参照下图(本文中贝塞尔曲线相关的动态演示图片来自维基百科)。

PS：一阶曲线其实就是前面讲解过的lineTo。

二阶曲线原理：

二阶曲线由两个数据点(A 和 C)，一个控制点(B)来描述曲线状态，大致如下：

上图中红色曲线部分就是传说中的二阶贝塞尔曲线，那么这条红色曲线是如何生成的呢？接下来我们就以其中的一个状态分析一下：

连接AB BC，并在AB上取点D，BC上取点E，使其满足条件：

连接DE，取点F，使得:

这样获取到的点F就是贝塞尔曲线上的一个点，动态过程如下：

PS: 二阶曲线对应的方法是quadTo

三阶曲线原理：

三阶曲线由两个数据点(A 和 D)，两个控制点(B 和 C)来描述曲线状态，如下：

三阶曲线计算过程与二阶类似，具体可以见下图动态效果：

PS: 三阶曲线对应的方法是cubicTo

贝塞尔曲线速查表

强烈推荐点击这里练习贝塞尔曲线，可以加深对贝塞尔曲线的理解程度。

第二步.了解贝塞尔曲线相关函数使用方法

一阶曲线：

一阶曲线是一条线段，非常简单，可以参见上一篇文章Path之基本操作，此处就不详细讲解了。

二阶曲线：

通过上面对二阶曲线的简单了解，我们知道二阶曲线是由两个数据点，一个控制点构成，接下来我们就用一个实例来演示二阶曲线是如何运用的。

首先，两个数据点是控制贝塞尔曲线开始和结束的位置，比较容易理解，而控制点则是控制贝塞尔的弯曲状态，相对来说比较难以理解，所以本示例重点在于理解贝塞尔曲线弯曲状态与控制点的关系，废话不多说，先上效果图：

为了更加容易看出控制点与曲线弯曲程度的关系，上图中绘制出了辅助点和辅助线，从上面的动态图可以看出，贝塞尔曲线在动态变化过程中有类似于橡皮筋一样的弹性效果，因此在制作一些弹性效果的时候很常用。

主要代码如下：

public class Bezier extends View {

    private Paint mPaint;
    private int centerX, centerY;

    private PointF start, end, control;

    public Bessel1(Context context) {
        super(context);
        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(8);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(60);

        start = new PointF(0,0);
        end = new PointF(0,0);
        control = new PointF(0,0);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w/2;
        centerY = h/2;

        // 初始化数据点和控制点的位置
        start.x = centerX-200;
        start.y = centerY;
        end.x = centerX+200;
        end.y = centerY;
        control.x = centerX;
        control.y = centerY-100;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 根据触摸位置更新控制点，并提示重绘
        control.x = event.getX();
        control.y = event.getY();
        invalidate();
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制数据点和控制点
        mPaint.setColor(Color.GRAY);
        mPaint.setStrokeWidth(20);
        canvas.drawPoint(start.x,start.y,mPaint);
        canvas.drawPoint(end.x,end.y,mPaint);
        canvas.drawPoint(control.x,control.y,mPaint);

        // 绘制辅助线
        mPaint.setStrokeWidth(4);
        canvas.drawLine(start.x,start.y,control.x,control.y,mPaint);
        canvas.drawLine(end.x,end.y,control.x,control.y,mPaint);

        // 绘制贝塞尔曲线
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(8);

        Path path = new Path();

        path.moveTo(start.x,start.y);
        path.quadTo(control.x,control.y,end.x,end.y);

        canvas.drawPath(path, mPaint);
    }
}

三阶曲线：

三阶曲线由两个数据点和两个控制点来控制曲线状态。

代码:

public class Bezier2 extends View {

    private Paint mPaint;
    private int centerX, centerY;

    private PointF start, end, control1, control2;
    private boolean mode = true;

    public Bezier2(Context context) {
        this(context, null);

    }

    public Bezier2(Context context, AttributeSet attrs) {
        super(context, attrs);

        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(8);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(60);

        start = new PointF(0, 0);
        end = new PointF(0, 0);
        control1 = new PointF(0, 0);
        control2 = new PointF(0, 0);
    }

    public void setMode(boolean mode) {
        this.mode = mode;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w / 2;
        centerY = h / 2;

        // 初始化数据点和控制点的位置
        start.x = centerX - 200;
        start.y = centerY;
        end.x = centerX + 200;
        end.y = centerY;
        control1.x = centerX;
        control1.y = centerY - 100;
        control2.x = centerX;
        control2.y = centerY - 100;

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 根据触摸位置更新控制点，并提示重绘
        if (mode) {
            control1.x = event.getX();
            control1.y = event.getY();
        } else {
            control2.x = event.getX();
            control2.y = event.getY();
        }
        invalidate();
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //drawCoordinateSystem(canvas);

        // 绘制数据点和控制点
        mPaint.setColor(Color.GRAY);
        mPaint.setStrokeWidth(20);
        canvas.drawPoint(start.x, start.y, mPaint);
        canvas.drawPoint(end.x, end.y, mPaint);
        canvas.drawPoint(control1.x, control1.y, mPaint);
        canvas.drawPoint(control2.x, control2.y, mPaint);

        // 绘制辅助线
        mPaint.setStrokeWidth(4);
        canvas.drawLine(start.x, start.y, control1.x, control1.y, mPaint);
        canvas.drawLine(control1.x, control1.y,control2.x, control2.y, mPaint);
        canvas.drawLine(control2.x, control2.y,end.x, end.y, mPaint);

        // 绘制贝塞尔曲线
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(8);

        Path path = new Path();

        path.moveTo(start.x, start.y);
        path.cubicTo(control1.x, control1.y, control2.x,control2.y, end.x, end.y);

        canvas.drawPath(path, mPaint);
    }
}

三阶曲线相比于二阶曲线可以制作更加复杂的形状，但是对于高阶的曲线，用低阶的曲线组合也可达到相同的效果，就是传说中的降阶。因此我们对贝塞尔曲线的封装方法一般最高只到三阶曲线。

降阶与升阶

类型	释义	变化
降阶	在保持曲线形状与方向不变的情况下，减少控制点数量，即降低曲线阶数	方法变得简单，数据点变多，控制点可能减少，灵活性变弱
升阶	在保持曲线形状与方向不变的情况下，增加控制点数量，即升高曲线阶数	方法更加复杂，数据点不变，控制点增加，灵活性变强

第三步.贝塞尔曲线使用实例

在制作这个实例之前，首先要明确一个内容，就是在什么情况下需要使用贝塞尔曲线？

需要绘制不规则图形时？当然不是！目前来说，我觉得使用贝塞尔曲线主要有以下几个方面(仅个人拙见，可能存在错误，欢迎指正)

序号	内容	用例
1	事先不知道曲线状态，需要实时计算时	天气预报气温变化的平滑折线图
2	显示状态会根据用户操作改变时	QQ小红点，仿真翻书效果
3	一些比较复杂的运动状态(配合PathMeasure使用)	复杂运动状态的动画效果

至于只需要一个静态的曲线图形的情况，用图片岂不是更好，大量的计算会很不划算。

如果是显示SVG矢量图的话，已经有相关的解析工具了(内部依旧运用的有贝塞尔曲线)，不需要手动计算。

贝塞尔曲线的主要优点是可以实时控制曲线状态，并可以通过改变控制点的状态实时让曲线进行平滑的状态变化。

接下来我们就用一个简单的示例让一个圆渐变成为心形：

效果图：

思路分析：

我们最终的需要的效果是将一个圆转变成一个心形，通过分析可知，圆可以由四段三阶贝塞尔曲线组合而成，如下：

心形也可以由四段的三阶的贝塞尔曲线组成，如下：

两者的差别仅仅在于数据点和控制点位置不同，因此只需要调整数据点和控制点的位置，就能将圆形变为心形。

核心难点：

1.如何得到数据点和控制点的位置？

关于使用绘制圆形的数据点与控制点早就已经有人详细的计算好了，可以参考stackoverflow的一个回答How to create circle with Bézier curves?其中的数据只需要拿来用即可。

而对于心形的数据点和控制点，可以由圆形的部分数据点和控制点平移后得到，具体参数可以自己慢慢调整到一个满意的效果。

2.如何达到渐变效果？

渐变其实就是每次对数据点和控制点稍微移动一点，然后重绘界面，在短时间多次的调整数据点与控制点，使其逐渐接近目标值，通过不断的重绘界面达到一种渐变的效果。过程可以参照下图动态效果：

代码：

public class Bezier3 extends View {
    private static final float C = 0.551915024494f;     // 一个常量，用来计算绘制圆形贝塞尔曲线控制点的位置

    private Paint mPaint;
    private int mCenterX, mCenterY;

    private PointF mCenter = new PointF(0,0);
    private float mCircleRadius = 200;                  // 圆的半径
    private float mDifference = mCircleRadius*C;        // 圆形的控制点与数据点的差值

    private float[] mData = new float[8];               // 顺时针记录绘制圆形的四个数据点
    private float[] mCtrl = new float[16];              // 顺时针记录绘制圆形的八个控制点

    private float mDuration = 1000;                     // 变化总时长
    private float mCurrent = 0;                         // 当前已进行时长
    private float mCount = 100;                         // 将时长总共划分多少份
    private float mPiece = mDuration/mCount;            // 每一份的时长


    public Bezier3(Context context) {
        this(context, null);

    }

    public Bezier3(Context context, AttributeSet attrs) {
        super(context, attrs);

        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(8);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(60);


        // 初始化数据点

        mData[0] = 0;
        mData[1] = mCircleRadius;

        mData[2] = mCircleRadius;
        mData[3] = 0;

        mData[4] = 0;
        mData[5] = -mCircleRadius;

        mData[6] = -mCircleRadius;
        mData[7] = 0;

        // 初始化控制点

        mCtrl[0]  = mData[0]+mDifference;
        mCtrl[1]  = mData[1];

        mCtrl[2]  = mData[2];
        mCtrl[3]  = mData[3]+mDifference;

        mCtrl[4]  = mData[2];
        mCtrl[5]  = mData[3]-mDifference;

        mCtrl[6]  = mData[4]+mDifference;
        mCtrl[7]  = mData[5];

        mCtrl[8]  = mData[4]-mDifference;
        mCtrl[9]  = mData[5];

        mCtrl[10] = mData[6];
        mCtrl[11] = mData[7]-mDifference;

        mCtrl[12] = mData[6];
        mCtrl[13] = mData[7]+mDifference;

        mCtrl[14] = mData[0]-mDifference;
        mCtrl[15] = mData[1];
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mCenterX = w / 2;
        mCenterY = h / 2;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
         drawCoordinateSystem(canvas);       // 绘制坐标系

        canvas.translate(mCenterX, mCenterY); // 将坐标系移动到画布中央
        canvas.scale(1,-1);                 // 翻转Y轴

        drawAuxiliaryLine(canvas);


        // 绘制贝塞尔曲线
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(8);

        Path path = new Path();
        path.moveTo(mData[0],mData[1]);

        path.cubicTo(mCtrl[0],  mCtrl[1],  mCtrl[2],  mCtrl[3],     mData[2], mData[3]);
        path.cubicTo(mCtrl[4],  mCtrl[5],  mCtrl[6],  mCtrl[7],     mData[4], mData[5]);
        path.cubicTo(mCtrl[8],  mCtrl[9],  mCtrl[10], mCtrl[11],    mData[6], mData[7]);
        path.cubicTo(mCtrl[12], mCtrl[13], mCtrl[14], mCtrl[15],    mData[0], mData[1]);

        canvas.drawPath(path, mPaint);

        mCurrent += mPiece;
        if (mCurrent < mDuration){

            mData[1] -= 120/mCount;
            mCtrl[7] += 80/mCount;
            mCtrl[9] += 80/mCount;

            mCtrl[4] -= 20/mCount;
            mCtrl[10] += 20/mCount;

            postInvalidateDelayed((long) mPiece);
        }
    }

    // 绘制辅助线
    private void drawAuxiliaryLine(Canvas canvas) {
        // 绘制数据点和控制点
        mPaint.setColor(Color.GRAY);
        mPaint.setStrokeWidth(20);

        for (int i=0; i<8; i+=2){
            canvas.drawPoint(mData[i],mData[i+1], mPaint);
        }

        for (int i=0; i<16; i+=2){
            canvas.drawPoint(mCtrl[i], mCtrl[i+1], mPaint);
        }


        // 绘制辅助线
        mPaint.setStrokeWidth(4);

        for (int i=2, j=2; i<8; i+=2, j+=4){
            canvas.drawLine(mData[i],mData[i+1],mCtrl[j],mCtrl[j+1],mPaint);
            canvas.drawLine(mData[i],mData[i+1],mCtrl[j+2],mCtrl[j+3],mPaint);
        }
        canvas.drawLine(mData[0],mData[1],mCtrl[0],mCtrl[1],mPaint);
        canvas.drawLine(mData[0],mData[1],mCtrl[14],mCtrl[15],mPaint);
    }

    // 绘制坐标系
    private void drawCoordinateSystem(Canvas canvas) {
        canvas.save();                      // 绘制做坐标系

        canvas.translate(mCenterX, mCenterY); // 将坐标系移动到画布中央
        canvas.scale(1,-1);                 // 翻转Y轴

        Paint fuzhuPaint = new Paint();
        fuzhuPaint.setColor(Color.RED);
        fuzhuPaint.setStrokeWidth(5);
        fuzhuPaint.setStyle(Paint.Style.STROKE);

        canvas.drawLine(0, -2000, 0, 2000, fuzhuPaint);
        canvas.drawLine(-2000, 0, 2000, 0, fuzhuPaint);

        canvas.restore();
    }
}

三.总结

其实关于贝塞尔曲线最重要的是核心理解贝塞尔曲线的生成方式，只有理解了贝塞尔曲线的生成方式，才能更好的运用贝塞尔曲线。在上一篇末尾说本篇可能涉及一点图形渲染问题，不幸的是，本篇没有了，请期待下一篇(可能会在下一篇中出现o(￣︶￣)o)，下一篇依旧Path相关内容，教给大家一些更好玩的东西。

解锁新的境界之【绘制一个弹性的圆】：

(,,• ₃ •,,)

PS: 由于本人水平有限，某些地方可能存在误解或不准确，如果你对此有疑问可以提交Issues进行反馈。

About

本系列相关文章

作者微博: GcsSloop

参考资料

Path
Canvas
贝塞尔曲线扫盲
 贝塞尔曲线-维基百科
 How to create circle with Bézier curves?
三次贝塞尔曲线练习之弹性的圆

使用JitPack发布Android开源库

Sun, 20 Mar 2016 00:00:00 +0800

自从谷歌宣布不支持Eclipse之后，大批Android程序猿情愿或者不情愿的迁移到了AndroidStudio，从此过上了使用Gradle构建程序的”优越”生活。

关于Gradle的坑，就不吐槽了，我怕一会儿控制不住情绪。今天我们就谈一下Gradle的优越性。

说到Gradle的优越性，其中有一点比较明显的就是依赖开源库更加方便了，基本上一两行代码就能搞定。免去了还要手动下载自己配置的痛苦。

然而，这也仅仅是对使用者而言，而对于发布这些开源库的人就苦逼了,主要是上传太痛苦。

目前来说，比较常见的 Android 开源库托管地址有以下几类:

类型	吐槽
Maven Central	发布过程繁杂冗长，每次发布成功都应该感谢一下上苍的厚爱。
jCenter	jCenter貌似稍微简单一点，但也不是省油的灯。
自定义仓库	一般的猿猿玩不起，企业内部可能会见到。

在这些托管地址上面发布过项目的都应该能理解其中的痛苦，不说了，让我哭会儿(我就是那个每次发布都折腾半天的“bug狂魔”，从未一次发布就成功过)。

然而，现在福音来了，JitPack可以帮助你简单快速的发布开源库。

在正式讲解之前我们先了解一下JitPack

JitPack是什么？

JitPack是一个自定义的Maven仓库。

JitPack安全吗？

个人还是比较安全的，毕竟开源库都是给大家用的，源码都能分享出来，如果你是担心它在里面插入恶意代码的话，在AndroidStudio的 External Libraies里面能够看到反编译的依赖库的源码，可以查看一下。

JitPack好处都有啥！说对我就给他用(金坷垃，雾)

省时间，省时间，省时间，省下的时间都够你修复好几个bug了。

简单的了解了JitPack之后，开始本篇的正文。

如何在JitPack上发布你的Library

首先，假设大家已经具备了以下条件：

序号	条件
1	会使用GitHub，能提交项目到GitHub上
2	使用AndroidStudio，且Gradle版本在2.4以上

在具备了这些条件之后，正式开始发布一个项目(以我的一个工具仓库Sutil为例)。

第 1 步: 新建一个Project

在AndroidStudio中新建一个Project用于发布项目，新建完成之后结果是这样子:

第 2 步: 在这个Project中添加一个Library

添加的这个Library就是我要发布的仓库，Library的名字无所谓,可以随便起(我这里就叫library)。添加完成之后是这样子：

图中的几个标注

序号	解释
1	新添加的Library
2	Library的build.gradle
3	Library的plugin

其中library的plugin是下面这样子：

apply plugin: 'com.android.library'

第 3 步: 给你的项目添加配置(重点)

你需要对你的项目简单的配置一下:

在你项目的根节点的 build.gradle(图示1) 中添加如下代码:

buildscript { 
  dependencies {
    // 重点就是下面这一行(上面两行是为了定位这一行的添加位置)
    classpath 'com.github.dcendents:android-maven-gradle-plugin:1.3' 

插件版本可以去官网查看，尽量使用最新版本，在AndroidStudio 2.2 之后插件要使用 1.4.1 以上的版本。

classpath 'com.github.dcendents:android-maven-gradle-plugin:1.4.1'

完整示例

在你要发布的library的 build.gradle(图示2) 中添加如下代码：

 apply plugin: 'com.github.dcendents.android-maven'  

 group='com.github.YourUsername'

完整示例

第 4 步: 提交项目到GitHub仓库

这一步就不多啰嗦了，不论你是用命令行还是客户端都可以。

为了提交更加快速，你可以删除无用的文件(文件夹),至于需要保留哪些文件你可以参考官方给出的示例仓库

第 5 步: Release你的仓库或者给你的仓库打一个Tag(重点)

1.点击图示进入Release界面

2.创建一个Release或Tag

3.填写基本信息

4.完成

第 6 步: 将你的仓库地址提交到JitPack(重点)

1.将你的仓库地址提交到JitPack

JitPack地址戳这里

序号	解释
1	粘贴你的仓库地址
2	点击这里查看
3	版本号
4	点击这里提交该版本
5	提交完成后自动生成的日志

2.JitPack自动生成的配置信息

在上传完成之后，JitPack会自动生成引用该仓库的配置信息，如下：

以上就是教程的全部内容，各位小伙伴可以回去愉快的发布自己的开源库了。

JitPack地址

安卓自定义View进阶-Path之基本操作

Wed, 02 Mar 2016 00:00:00 +0800

在上一篇Canvas之图片文字中我们了解了如何使用Canvas中绘制图片文字，结合前几篇文章，Canvas的基本操作已经差不多完结了，然而Canvas不仅仅具有这些基本的操作，还可以更加炫酷，本次会了解到path(路径)这个Canvas中的神器，有了这个神器，就能创造出更多炫(zhuang)酷(B)的东东了。

一.Path常用方法表

为了兼容性(偷懒) 本表格中去除了部分API21(即安卓版本5.0)以上才添加的方法。

作用	相关方法	备注
移动起点	moveTo	移动下一次操作的起点位置
设置终点	setLastPoint	重置当前path中最后一个点位置，如果在绘制之前调用，效果和moveTo相同
连接直线	lineTo	添加上一个点到当前点之间的直线到Path
闭合路径	close	连接第一个点连接到最后一个点，形成一个闭合区域
添加内容	addRect, addRoundRect, addOval, addCircle, addPath, addArc, arcTo	添加(矩形，圆角矩形，椭圆，圆，路径，圆弧) 到当前Path (注意addArc和arcTo的区别)
是否为空	isEmpty	判断Path是否为空
是否为矩形	isRect	判断path是否是一个矩形
替换路径	set	用新的路径替换到当前路径所有内容
偏移路径	offset	对当前路径之前的操作进行偏移(不会影响之后的操作)
贝塞尔曲线	quadTo, cubicTo	分别为二次和三次贝塞尔曲线的方法
rXxx方法	rMoveTo, rLineTo, rQuadTo, rCubicTo	不带r的方法是基于原点的坐标系(偏移量)， rXxx方法是基于当前点坐标系(偏移量)
填充模式	setFillType, getFillType, isInverseFillType, toggleInverseFillType	设置,获取,判断和切换填充模式
提示方法	incReserve	提示Path还有多少个点等待加入(这个方法貌似会让Path优化存储结构)
布尔操作(API19)	op	对两个Path进行布尔运算(即取交集、并集等操作)
计算边界	computeBounds	计算Path的边界
重置路径	reset, rewind	清除Path中的内容 reset不保留内部数据结构，但会保留FillType. rewind会保留内部的数据结构，但不保留FillType
矩阵操作	transform	矩阵变换

二.Path详解

请关闭硬件加速，以免引起不必要的问题！
请关闭硬件加速，以免引起不必要的问题！
请关闭硬件加速，以免引起不必要的问题！

在AndroidMainfest文件中application节点下添上 android:hardwareAccelerated=”false”以关闭整个应用的硬件加速。
更多请参考这里：Android的硬件加速及可能导致的问题

Path作用

本次特地开了一篇详细讲解Path，为什么要单独摘出来呢，这是因为Path在2D绘图中是一个很重要的东西。

在前面我们讲解的所有绘制都是简单图形(如矩形圆圆弧等)，而对于那些复杂一点的图形则没法去绘制(如绘制一个心形正多边形五角星等)，而使用Path不仅能够绘制简单图形，也可以绘制这些比较复杂的图形。另外，根据路径绘制文本和剪裁画布都会用到Path。

关于Path的作用先简单地说这么多，具体的我们接下来慢慢研究。

Path含义

官方介绍：

The Path class encapsulates compound (multiple contour) geometric paths consisting of straight line segments, quadratic curves, and cubic curves. It can be drawn with canvas.drawPath(path, paint), either filled or stroked (based on the paint’s Style), or it can be used for clipping or to draw text on a path.

嗯，没错依旧是拿来装逼的，如果你看不懂的话，不用担心，其实并没有什么卵用。

通俗解释(sloop个人版)：

Path封装了由直线和曲线(二次，三次贝塞尔曲线)构成的几何路径。你能用Canvas中的drawPath来把这条路径画出来(同样支持Paint的不同绘制模式)，也可以用于剪裁画布和根据路径绘制文字。我们有时会用Path来描述一个图像的轮廓，所以也会称为轮廓线(轮廓线仅是Path的一种使用方法，两者并不等价)

另外路径有开放和封闭的区别。

图像	名称	备注
	封闭路径	首尾相接形成了一个封闭区域
	开放路径	没有首尾相接形成封闭区域

这个是我随便画的，仅为展示一下区别，请无视我灵魂画师一般的绘图水准。

与Path相关的还有一些比较神奇的概念，不过暂且不说，等接下来需要用到的时候再详细说明。

Path使用方法详解

前面扯了一大堆概念性的东西。接下来就开始实战了，请诸位看官准备好瓜子、花生、爆米花，坐下来慢慢观看。

第1组: moveTo、 setLastPoint、 lineTo 和 close

由于Path的有些知识点无法单独来讲，所以本次采取了一次讲一组方法。

按照惯例，先创建画笔：

Paint mPaint = new Paint();             // 创建画笔
mPaint.setColor(Color.BLACK);           // 画笔颜色 - 黑色
mPaint.setStyle(Paint.Style.STROKE);    // 填充模式 - 描边
mPaint.setStrokeWidth(10);              // 边框宽度 - 10

lineTo：

方法预览：

public void lineTo (float x, float y)

首先讲解的的LineTo，为啥先讲解这个呢？

是因为moveTo、 setLastPoint、 close都无法直接看到效果，借助有具现化效果的lineTo才能让这些方法现出原形。

lineTo很简单，只有一个方法，作用也很容易理解，line嘛，顾名思义就是一条线。

俗话(数学书上)说，两点确定一条直线，但是看参数明显只给了一个点的坐标吧(这不按常理出牌啊)。

再仔细一看，这个lineTo除了line外还有一个to呢，to翻译过来就是“至”，到某个地方的意思，lineTo难道是指从某个点到参数坐标点之间连一条线？

没错，你猜对了，但是这某个点又是哪里呢？

前面我们提到过Path可以用来描述一个图像的轮廓，图像的轮廓通常都是用一条线构成的，所以这里的某个点就是上次操作结束的点，如果没有进行过操作则默认点为坐标原点。

那么我们就来试一下：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心(宽高数据在onSizeChanged中获取)

Path path = new Path();                     // 创建Path

path.lineTo(200, 200);                      // lineTo
path.lineTo(200,0);

canvas.drawPath(path, mPaint);              // 绘制Path

在示例中我们调用了两次lineTo，第一次由于之前没有过操作，所以默认点就是坐标原点O，结果就是坐标原点O到A(200,200)之间连直线(用蓝色圈1标注)。

第二次lineTo的时候，由于上次的结束位置是A(200,200),所以就是A(200,200)到B(200,0)之间的连线(用蓝色圈2标注)。

moveTo 和 setLastPoint：

方法预览：

// moveTo
public void moveTo (float x, float y)

// setLastPoint
public void setLastPoint (float dx, float dy)

这两个方法虽然在作用上有相似之处，但实际上却是完全不同的两个东东，具体参照下表：

方法名	简介	是否影响之前的操作	是否影响之后操作
moveTo	移动下一次操作的起点位置	否	是
setLastPoint	设置之前操作的最后一个点位置	是	是

废话不多说，直接上代码：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心

Path path = new Path();                     // 创建Path

path.lineTo(200, 200);                      // lineTo

path.moveTo(200,100);                       // moveTo

path.lineTo(200,0);                         // lineTo

canvas.drawPath(path, mPaint);              // 绘制Path

这个和上面演示lineTo的方法类似，只不过在两个lineTo之间添加了一个moveTo。

moveTo只改变下次操作的起点，在执行完第一次LineTo的时候，本来的默认点位置是A(200,200),但是moveTo将其改变成为了C(200,100),所以在第二次调用lineTo的时候就是连接C(200,100) 到 B(200,0) 之间的直线(用蓝色圈2标注)。

下面是setLastPoint的示例：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心

Path path = new Path();                     // 创建Path

path.lineTo(200, 200);                      // lineTo

path.setLastPoint(200,100);                 // setLastPoint

path.lineTo(200,0);                         // lineTo

canvas.drawPath(path, mPaint);              // 绘制Path

setLastPoint是重置上一次操作的最后一个点，在执行完第一次的lineTo的时候，最后一个点是A(200,200),而setLastPoint更改最后一个点为C(200,100),所以在实际执行的时候，第一次的lineTo就不是从原点O到A(200,200)的连线了，而变成了从原点O到C(200,100)之间的连线了。

在执行完第一次lineTo和setLastPoint后，最后一个点的位置是C(200,100),所以在第二次调用lineTo的时候就是C(200,100) 到 B(200,0) 之间的连线(用蓝色圈2标注)。

close

方法预览：

public void close ()

close方法用于连接当前最后一个点和最初的一个点(如果两个点不重合的话)，最终形成一个封闭的图形。

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心

Path path = new Path();                     // 创建Path

path.lineTo(200, 200);                      // lineTo

path.lineTo(200,0);                         // lineTo

path.close();                               // close

canvas.drawPath(path, mPaint);              // 绘制Path

很明显，两个lineTo分别代表第1和第2条线，而close在此处的作用就算连接了B(200,0)点和原点O之间的第3条线，使之形成一个封闭的图形。

注意：close的作用是封闭路径，与连接当前最后一个点和第一个点并不等价。如果连接了最后一个点和第一个点仍然无法形成封闭图形，则close什么也不做。

第2组: addXxx与arcTo

这次内容主要是在Path中添加基本图形，重点区分addArc与arcTo。

第一类(基本形状)

方法预览：

// 第一类(基本形状)

// 圆形
public void addCircle (float x, float y, float radius, Path.Direction dir)
// 椭圆
public void addOval (RectF oval, Path.Direction dir)
// 矩形
public void addRect (float left, float top, float right, float bottom, Path.Direction dir)
public void addRect (RectF rect, Path.Direction dir)
// 圆角矩形
public void addRoundRect (RectF rect, float[] radii, Path.Direction dir)
public void addRoundRect (RectF rect, float rx, float ry, Path.Direction dir)

这一类就是在path中添加一个基本形状，基本形状部分和前面所讲的绘制基本形状并无太大差别，详情参考Canvas之绘制图形, 本次只将其中不同的部分摘出来详细讲解一下。

仔细观察一下第一类是方法，无一例外，在最后都有一个 Path.Direction，这是一个什么神奇的东东？

Direction的意思是方向，趋势。点进去看一下会发现Direction是一个枚举(Enum)类型，里面只有两个枚举常量，如下：

类型	解释	翻译
CW	clockwise	顺时针
CCW	counter-clockwise	逆时针

瞬间懵逼，我只是想添加一个基本的形状啊，搞什么顺时针和逆时针, (╯‵□′)╯︵┻━┻

稍安勿躁，┬─┬ ノ( ‘ - ‘ノ) {摆好摆好）既然存在肯定是有用的，先偷偷剧透一下这个顺时针和逆时针的作用。

序号	作用
1	在添加图形时确定闭合顺序(各个点的记录顺序)
2	对图形的渲染结果有影响(是判断图形渲染的重要条件)

这个先剧透这么多，至于对闭合顺序有啥影响，图形的渲染等问题等请慢慢看下去

咱们先研究确定闭合顺序的问题，添加一个矩形试试看：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心

Path path = new Path();

path.addRect(-200,-200,200,200, Path.Direction.CW);

canvas.drawPath(path,mPaint);

将上面代码的CW改为CCW再运行一次。接下来就是见证奇迹的时刻，两次运行结果一模一样，有木有很神奇！

(╯°Д°)╯︵ ┻━┻(再TM掀一次) 坑人也不带这样的啊，一毛一样要它干嘛。

其实啊，这个东东是自带隐身技能的，想要让它现出原形，就要用到咱们刚刚学到的setLastPoint(重置当前最后一个点的位置)。

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心

Path path = new Path();

path.addRect(-200,-200,200,200, Path.Direction.CW);

path.setLastPoint(-300,300);                // <-- 重置最后一个点的位置

canvas.drawPath(path,mPaint);

可以明显看到，图形发生了奇怪的变化。为何会如此呢？

我们先分析一下，绘制一个矩形(仅绘制边线)，实际上只需要进行四次lineTo操作就行了，也就是说，只需要知道4个点的坐标，然后使用moveTo到第一个点，之后依次lineTo就行了(从上面的测试可以看出，在实际绘制中也确实是这么干的)。

可是为什么要这么做呢？确定一个矩形最少需要两个点(对角线的两个点)，根据这两个点的坐标直接算出四条边然后画出来不就行了，干嘛还要先计算出四个点坐标，之后再连直线呢？

这个就要涉及一些path的存储问题了，前面在path中的定义中说过，Path是封装了由直线和曲线(二次，三次贝塞尔曲线)构成的几何路径。其中曲线部分用的是贝塞尔曲线，稍后再讲。然而除了曲线部分就只剩下直线了，对于直线的存储最简单的就是记录坐标点，然后直接连接各个点就行了。虽然记录矩形只需要两个点，但是如果只用两个点来记录一个矩形的话，就要额外增加一个标志位来记录这是一个矩形，显然对于存储和解析都是很不划算的事情，将矩形转换为直线，为的就是存储记录方便。

扯了这么多，该回归正题了，就是我们的顺时针和逆时针在这里是干啥的？

图形在实际记录中就是记录各个的点，对于一个图形来说肯定有多个点，既然有这么多的点，肯定就需要一个先后顺序，这里顺时针和逆时针就是用来确定记录这些点的顺序的。

对于上面这个矩形来说，我们采用的是顺时针(CW)，所以记录的点的顺序就是 A -> B -> C -> D. 最后一个点就是D，我们这里使用setLastPoint改变最后一个点的位置实际上是改变了D的位置。

理解了上面的原理之后，设想如果我们将顺时针改为逆时针(CCW)，则记录点的顺序应该就是 A -> D -> C -> B, 再使用setLastPoint则改变的是B的位置，我们试试看结果和我们的猜想是否一致：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心

Path path = new Path();

path.addRect(-200,-200,200,200, Path.Direction.CCW);

path.setLastPoint(-300,300);                // <-- 重置最后一个点的位置

canvas.drawPath(path,mPaint);

通过验证发现，发现结果和我们猜想的一样，但是还有一个潜藏的问题不晓得大家可否注意到。我们用两个点的坐标确定了一个矩形，矩形起始点(A)就是我们指定的第一个点的坐标。

需要注意的是，交换坐标点的顺序可能就会影响到某些绘制内容哦，例如上面的例子，你可以尝试交换两个坐标点，或者指定另外两个点来作为参数，虽然指定的是同一个矩形，但实际绘制出来是不同的哦。

参数中点的顺序很重要！
参数中点的顺序很重要！
参数中点的顺序很重要！

重要的话说三遍，本次是用矩形作为例子的，其他的几个图形基本上都包含了曲线，详情参见后续的贝塞尔曲线部分。

关于顺时针和逆时针对图形填充结果的影响请参考 Path之完结篇，虽然只讲了一个Path，但也是内容颇多，放进一篇中就太长了，请见谅。

第二类(Path)

方法预览：

// 第二类(Path)
// path
public void addPath (Path src)
public void addPath (Path src, float dx, float dy)
public void addPath (Path src, Matrix matrix)

这个相对比较简单，也很容易理解，就是将两个Path合并成为一个。

第三个方法是将src添加到当前path之前先使用Matrix进行变换。

第二个方法比第一个方法多出来的两个参数是将src进行了位移之后再添加进当前path中。

示例：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴

Path path = new Path();
Path src = new Path();

path.addRect(-200,-200,200,200, Path.Direction.CW);
src.addCircle(0,0,100, Path.Direction.CW);

path.addPath(src,0,200);

mPaint.setColor(Color.BLACK);           // 绘制合并后的路径
canvas.drawPath(path,mPaint);

首先我们新建地方两个Path(矩形和圆形)中心都是坐标原点，我们在将包含圆形的path添加到包含矩形的path之前将其进行移动了一段距离，最终绘制出来的效果就如上面所示。

第三类(addArc与arcTo)

方法预览：

// 第三类(addArc与arcTo)

// addArc
public void addArc (RectF oval, float startAngle, float sweepAngle)
// arcTo
public void arcTo (RectF oval, float startAngle, float sweepAngle)
public void arcTo (RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo)

参数表：

参数	摘要
oval	圆弧的外切矩形。
startAngle	开始角度
sweepAngle	扫过角度(-360 <= sweepAngle <360)
forceMoveTo	是否强制使用MoveTo

PS: sweepAngle取值范围是 [-360, 360)，不包括360，当 >= 360 或者 < -360 时将不会绘制任何内容，对于360，你可以用一个接近的值替代，例如: 359.99。

从名字就可以看出，这两个方法都是与圆弧相关的，作用都是添加一个圆弧到path中，但既然存在两个方法，两者之间肯定是有区别的：

名称	作用	区别
addArc	添加一个圆弧到path	直接添加一个圆弧到path中
arcTo	添加一个圆弧到path	添加一个圆弧到path，如果圆弧的起点和上次最后一个坐标点不相同，就连接两个点

可以看到addArc有1个方法(实际上是两个的，但另一个重载方法是API21添加的), 而arcTo有2个方法，其中一个最后多了一个布尔类型的变量forceMoveTo。

forceMoveTo是什么作用呢？

这个变量意思为“是否强制使用moveTo”，也就是说，是否使用moveTo将变量移动到圆弧的起点位移，也就意味着：

forceMoveTo	含义	等价方法
true	将最后一个点移动到圆弧起点，即不连接最后一个点与圆弧起点	public void addArc (RectF oval, float startAngle, float sweepAngle)
false	不移动，而是连接最后一个点与圆弧起点	public void arcTo (RectF oval, float startAngle, float sweepAngle)

示例(addArc)：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴

Path path = new Path();
path.lineTo(100,100);

RectF oval = new RectF(0,0,300,300);

path.addArc(oval,0,270);
// path.arcTo(oval,0,270,true);             // <-- 和上面一句作用等价

canvas.drawPath(path,mPaint);

示例(arcTo)：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴

Path path = new Path();
path.lineTo(100,100);

RectF oval = new RectF(0,0,300,300);

path.arcTo(oval,0,270);
// path.arcTo(oval,0,270,false);             // <-- 和上面一句作用等价

canvas.drawPath(path,mPaint);

从上面两张运行效果图可以清晰的看出来两者的区别，我就不再废话了。

第3组：isEmpty、 isRect、isConvex、 set 和 offset

这一组比较简单，稍微说一下就可以了。

isEmpty

方法预览：

public boolean isEmpty ()

判断path中是否包含内容。

Path path = new Path();
Log.e("1",path.isEmpty()+"");

path.lineTo(100,100);
Log.e("2",path.isEmpty()+"");

log输出结果:

com.sloop.canvas E/1: true
com.sloop.canvas E/2: false

isRect

方法预览：

public boolean isRect (RectF rect)

判断path是否是一个矩形，如果是一个矩形的话，会将矩形的信息存放进参数rect中。

path.lineTo(0,400);
path.lineTo(400,400);
path.lineTo(400,0);
path.lineTo(0,0);

RectF rect = new RectF();
boolean b = path.isRect(rect);
Log.e("Rect","isRect:"+b+"| left:"+rect.left+"| top:"+rect.top+"| right:"+rect.right+"| bottom:"+rect.bottom);

log 输出结果:

com.sloop.canvas E/Rect: isRect:true| left:0.0| top:0.0| right:400.0| bottom:400.0

set

方法预览：

public void set (Path src)

将新的path赋值到现有path。

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴

Path path = new Path();                     // path添加一个矩形
path.addRect(-200,-200,200,200, Path.Direction.CW);

Path src = new Path();                      // src添加一个圆
src.addCircle(0,0,100, Path.Direction.CW);

path.set(src);                              // 大致相当于 path = src;

canvas.drawPath(path,mPaint);

offset

方法预览：

public void offset (float dx, float dy)
public void offset (float dx, float dy, Path dst)

这个的作用也很简单，就是对path进行一段平移，它和Canvas中的translate作用很像，但Canvas作用于整个画布，而path的offset只作用于当前path。

但是第二个方法最后怎么会有一个path作为参数？

其实第二个方法中最后的参数dst是存储平移后的path的。

dst状态	效果
dst不为空	将当前path平移后的状态存入dst中，不会影响当前path
dst为空(null)	平移将作用于当前path，相当于第一种方法

示例：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴

Path path = new Path();                     // path中添加一个圆形(圆心在坐标原点)
path.addCircle(0,0,100, Path.Direction.CW);

Path dst = new Path();                      // dst中添加一个矩形
dst.addRect(-200,-200,200,200, Path.Direction.CW);

path.offset(300,0,dst);                     // 平移

canvas.drawPath(path,mPaint);               // 绘制path

mPaint.setColor(Color.BLUE);                // 更改画笔颜色

canvas.drawPath(dst,mPaint);                // 绘制dst

从运行效果图可以看出，虽然我们在dst中添加了一个矩形，但是并没有表现出来，所以，当dst中存在内容时，dst中原有的内容会被清空，而存放平移后的path。

三.总结

本想一篇把path写完，但是万万没想到居然扯了这么多。本篇中讲解的是直线部分和一些常用方法，下一篇将着重讲解贝塞尔曲线和自相交图形渲染等相关问题，敬请期待哦。

学完本篇之后又解锁了新的境界，可以看看这位大神的文章 Android雷达图(蜘蛛网图)绘制

这个精小干练，非常适合新手练习使用，帮助大家更好的熟悉path的使用。

(,,• ₃ •,,)

PS: 由于本人水平有限，某些地方可能存在误解或不准确，如果你对此有疑问可以提交Issues进行反馈。

About

本系列相关文章

作者微博: GcsSloop

参考资料

Path
Canvas
android绘图之Path总结

安卓自定义View进阶-Canvas之图片文字

Fri, 12 Feb 2016 00:00:00 +0800

在上一篇文章Canvas之画布操作中我们了解了画布的一些基本操作方法，本次了解一些绘制图片文字相关的内容。如果你对前几篇文章讲述的内容熟练掌握的话，那么恭喜你，本篇结束之后，大部分的自定义View已经难不倒你了，当然了，这并不是终点，接下来还会有更加炫酷的技能。

一.Canvas的常用操作速查表

操作类型	相关API	备注
绘制颜色	drawColor, drawRGB, drawARGB	使用单一颜色填充整个画布
绘制基本形状	drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc	依次为点、线、矩形、圆角矩形、椭圆、圆、圆弧
绘制图片	drawBitmap, drawPicture	绘制位图和图片
绘制文本	drawText, drawPosText, drawTextOnPath	依次为绘制文字、绘制文字时指定每个文字位置、根据路径绘制文字
绘制路径	drawPath	绘制路径，绘制贝塞尔曲线时也需要用到该函数
顶点操作	drawVertices, drawBitmapMesh	通过对顶点操作可以使图像形变，drawVertices直接对画布作用、 drawBitmapMesh只对绘制的Bitmap作用
画布剪裁	clipPath, clipRect	设置画布的显示区域
画布快照	save, restore, saveLayerXxx, restoreToCount, getSaveCount	依次为保存当前状态、回滚到上一次保存的状态、保存图层状态、回滚到指定状态、获取保存次数
画布变换	translate, scale, rotate, skew	依次为位移、缩放、旋转、错切
Matrix(矩阵)	getMatrix, setMatrix, concat	实际上画布的位移，缩放等操作的都是图像矩阵Matrix，只不过Matrix比较难以理解和使用，故封装了一些常用的方法。

二.Canvas基本操作详解

1.绘制图片

绘制有两种方法，drawPicture(矢量图) 和 drawBitmap(位图),接下来我们一一了解。

(1)drawPicture

使用Picture前请关闭硬件加速，以免引起不必要的问题！
使用Picture前请关闭硬件加速，以免引起不必要的问题！
使用Picture前请关闭硬件加速，以免引起不必要的问题！

在AndroidMenifest文件中application节点下添上 android:hardwareAccelerated=”false”以关闭整个应用的硬件加速。
更多请参考这里：Android的硬件加速及可能导致的问题

关于drawPicture一开始还是挺让人费解的，不过嘛，我们接下来慢慢研究一下它的用途。

既然是drawPicture就要了解一下什么是Picture。顾名思义，Picture的意思是图片。

不过嘛，我觉得这么用图片这个名词解释Picture是不合适的，为何这么说？请看其官方文档对Picture的解释：

A Picture records drawing calls (via the canvas returned by beginRecording) and can then play them back into Canvas (via draw(Canvas) or drawPicture(Picture)).For most content (e.g. text, lines, rectangles), drawing a sequence from a picture can be faster than the equivalent API calls, since the picture performs its playback without incurring any method-call overhead.

好吧，我知道很多人对这段鸟语是看不懂的，至于为什么要放在这里，仅仅是为了显得更加专业(偷笑)。

下面我就对这段不明觉厉的鸟语用通俗的话翻译一下:

某一天小萌想在朋友面前显摆一下，于是在单杠上来了一个后空翻,动作姿势请参照下图：

朋友都说恩，很不错。想再看一遍 (〃ω〃)。ヽ(〃∀〃)ﾉ。⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

于是小萌又来了一遍，如是几次之后，小萌累的吐血三升。

于是小萌机智的想，我何不能用手机将我是飒爽英姿录下来呢，直接保存成为后空翻.avi 下次想显摆的时候直接拿出手机，点一下播放就行了，省时省力。

小萌被自己的机智深深的折服了，然后Picture就诞生啦。(╯‵□′)╯︵┻━┻掀桌，坑爹呢，这剧情跳跃也忒大了吧。

好吧，言归正传，这次我们了解的Picture和上文中的录像功能是类似的，只不过我们Picture录的是Canvas中绘制的内容。

我们把Canvas绘制点，线，矩形等诸多操作用Picture录制下来，下次需要的时候拿来就能用，使用Picture相比于再次调用绘图API，开销是比较小的，也就是说对于重复的操作可以更加省时省力。

PS：你可以把Picture看作是一个录制Canvas操作的录像机。

了解了Picture的概念之后，我们再了解一下Picture的相关方法。

相关方法	简介
public int getWidth ()	获取宽度
public int getHeight ()	获取高度
public Canvas beginRecording (int width, int height)	开始录制 (返回一个Canvas，在Canvas中所有的绘制都会存储在Picture中)
public void endRecording ()	结束录制
public void draw (Canvas canvas)	将Picture中内容绘制到Canvas中
public static Picture createFromStream (InputStream stream)	(已废弃)通过输入流创建一个Picture
public void writeToStream (OutputStream stream)	(已废弃)将Picture中内容写出到输出流中

上面表格中基本上已经列出了Picture的所有方法，其中getWidth和getHeight没什么好说的，最后两个已经废弃也自然就不用关注了，排除了这些方法之后，只剩三个方法了，接下来我们就比较详细的了解一下：

很明显，beginRecording 和 endRecording 是成对使用的，一个开始录制，一个是结束录制，两者之间的操作将会存储在Picture中。

使用示例：

准备工作:

录制内容，即将一些Canvas操作用Picture存储起来，录制的内容是不会直接显示在屏幕上的，只是存储起来了而已。

// 1.创建Picture
private Picture mPicture = new Picture();

---------------------------------------------------------------

// 2.录制内容方法
private void recording() {
    // 开始录制 (接收返回值Canvas)
    Canvas canvas = mPicture.beginRecording(500, 500);
    // 创建一个画笔
    Paint paint = new Paint();
    paint.setColor(Color.BLUE);
    paint.setStyle(Paint.Style.FILL);

    // 在Canvas中具体操作
    // 位移
    canvas.translate(250,250);
    // 绘制一个圆
    canvas.drawCircle(0,0,100,paint);

    mPicture.endRecording();
}

---------------------------------------------------------------

// 3.在使用前调用(我在构造函数中调用了)
  public Canvas3(Context context, AttributeSet attrs) {
    super(context, attrs);
    
    recording();    // 调用录制
}

具体使用:

Picture虽然方法就那么几个，但是具体使用起来还是分很多情况的，由于录制的内容不会直接显示，就像存储的视频不点击播放不会自动播放一样，同样，想要将Picture中的内容显示出来就需要手动调用播放(绘制)，将Picture中的内容绘制出来可以有以下几种方法：

序号	简介
1	使用Picture提供的draw方法绘制。
2	使用Canvas提供的drawPicture方法绘制。
3	将Picture包装成为PictureDrawable，使用PictureDrawable的draw方法绘制。

以上几种方法主要区别：

主要区别	分类	简介
是否对Canvas有影响	1有影响 2,3不影响	此处指绘制完成后是否会影响Canvas的状态(Matrix clip等)
可操作性强弱	1可操作性较弱 2,3可操作性较强	此处的可操作性可以简单理解为对绘制结果可控程度。

几种方法简介和主要区别基本就这么多了，接下来对于各种使用方法一一详细介绍：

1.使用Picture提供的draw方法绘制:

// 将Picture中的内容绘制在Canvas上
mPicture.draw(canvas);  

PS：这种方法在比较低版本的系统上绘制后可能会影响Canvas状态，所以这种方法一般不会使用。

2.使用Canvas提供的drawPicture方法绘制

drawPicture有三种方法：

public void drawPicture (Picture picture)

public void drawPicture (Picture picture, Rect dst)

public void drawPicture (Picture picture, RectF dst)

和使用Picture的draw方法不同，Canvas的drawPicture不会影响Canvas状态。

简单示例:

canvas.drawPicture(mPicture,new RectF(0,0,mPicture.getWidth(),200));

PS:对照上一张图片，可以比较明显的看出，绘制的内容根据选区进行了缩放。

3.将Picture包装成为PictureDrawable，使用PictureDrawable的draw方法绘制。

// 包装成为Drawable
PictureDrawable drawable = new PictureDrawable(mPicture);
// 设置绘制区域 -- 注意此处所绘制的实际内容不会缩放
drawable.setBounds(0,0,250,mPicture.getHeight());
// 绘制
drawable.draw(canvas);

PS:此处setBounds是设置在画布上的绘制区域，并非根据该区域进行缩放，也不是剪裁Picture，每次都从Picture的左上角开始绘制。

注意：在使用Picture之前请关闭硬件加速，以免引起不必要的问题，如何关闭请参考这里： Android的硬件加速及可能导致的问题

(2)drawBitmap

其实一开始知道要讲Bitmap我是拒绝的，为什么呢？因为Bitmap就是很多问题的根源啊有木有，Bitmap可能导致内存不足，内存泄露，ListView中的复用混乱等诸多问题。想完美的掌控Bitmap还真不是一件容易的事情。限于篇幅本文对于Bitmap不会过多的展开，只讲解一些常用的功能。

既然要绘制Bitmap，就要先获取一个Bitmap，那么如何获取呢？

获取Bitmap方式:

序号	获取方式	备注
1	通过Bitmap创建	复制一个已有的Bitmap(新Bitmap状态和原有的一致) 或者创建一个空白的Bitmap(内容可改变)
2	通过BitmapDrawable获取	从资源文件内存卡网络等地方获取一张图片并转换为内容不可变的Bitmap
3	通过BitmapFactory获取	从资源文件内存卡网络等地方获取一张图片并转换为内容不可变的Bitmap

通常来说，我们绘制Bitmap都是读取已有的图片转换为Bitmap绘制到Canvas上。
很明显，第1种方式不能满足我们的要求，暂时排除。
第2种方式虽然也可满足我们的要求，但是我不推荐使用这种方式，至于为什么在后续详细讲解Drawable的时候会说明,暂时排除。
第3种方法我们会比较详细的说明一下如何从各个位置获取图片。

通过BitmapFactory从不同位置获取Bitmap:

资源文件(drawable/mipmap/raw):

Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(),R.raw.bitmap);

资源文件(assets):

Bitmap bitmap=null;
try {
    InputStream is = mContext.getAssets().open("bitmap.png");
    bitmap = BitmapFactory.decodeStream(is);
    is.close();
} catch (IOException e) {
    e.printStackTrace();
}

内存卡文件:

Bitmap bitmap = BitmapFactory.decodeFile("/sdcard/bitmap.png");

网络文件:

// 此处省略了获取网络输入流的代码
Bitmap bitmap = BitmapFactory.decodeStream(is);
is.close();

既然已经获得到了Bitmap，那么就开始本文的重点了，将Bitmap绘制到画布上。

绘制Bitmap：

依照惯例先预览一下drawBitmap的常用方法：

// 第一种
public void drawBitmap (Bitmap bitmap, Matrix matrix, Paint paint)

// 第二种
public void drawBitmap (Bitmap bitmap, float left, float top, Paint paint)

// 第三种
public void drawBitmap (Bitmap bitmap, Rect src, Rect dst, Paint paint)
public void drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint)

第一种方法中后两个参数(matrix, paint)是在绘制的时候对图片进行一些改变，如果只是需要将图片内容绘制出来只需要如下操作就可以了：

PS:图片左上角位置默认为坐标原点。

canvas.drawBitmap(bitmap,new Matrix(),new Paint());

关于Matrix和Paint暂时略过吧，一展开又是啰啰嗦嗦一大段，反正挖坑已经是常态了，大家应该也习惯了(PAP).

第二种方法就是在绘制时指定了图片左上角的坐标(距离坐标原点的距离)：

注意：此处指定的是与坐标原点的距离，并非是与屏幕顶部和左侧的距离, 虽然默认状态下两者是重合的，但是也请注意分别两者的不同。

canvas.drawBitmap(bitmap,200,500,new Paint());

第三种方法比较有意思，上面多了两个矩形区域(src,dst),这两个矩形选区是干什么用的？

名称	作用
Rect src	指定绘制图片的区域
Rect dst 或RectF dst	指定图片在屏幕上显示(绘制)的区域

示例：

// 将画布坐标系移动到画布中央
canvas.translate(mWidth/2,mHeight/2);

// 指定图片绘制区域(左上角的四分之一)
Rect src = new Rect(0,0,bitmap.getWidth()/2,bitmap.getHeight()/2);

// 指定图片在屏幕上显示的区域
Rect dst = new Rect(0,0,200,400);

// 绘制图片
canvas.drawBitmap(bitmap,src,dst,null);

详解：

上面是以绘制该图为例，用src指定了图片绘制部分的区域，即下图中红色方框标注的区域。

然后用dst指定了绘制在屏幕上的绘制，即下图中蓝色方框标注的区域，图片宽高会根据指定的区域自动进行缩放。

从上面可知，第三种方法可以绘制图片的一部分到画布上，这有什么用呢？

如果你看过某些游戏的资源文件，你可能会看到如下的图片(图片来自网络)：

用一张图片包含了大量的素材，在绘制的时候每次只截取一部分进行绘制，这样可以大大的减少素材数量，而且素材管理起来也很方便。

然而这和我们有什么关系呢？我们又不做游戏开发。

确实，我们不做游戏开发，但是在某些时候我们需要制作一些炫酷的效果，这些效果因为太复杂了用代码很难实现或者渲染效率不高。这时候很多人就会想起帧动画，将动画分解成一张一张的图片然后使用帧动画制作出来，这种实现方式的确比较简单，但是一个动画效果的图片有十几到几十张，一个应用里面来几个这样炫酷的动画效果就会导致资源文件出现一大堆，想找其中的某一张资源图片简直就是灾难啊有木有。但是把同一个动画效果的所有资源图片整理到一张图片上，会大大的减少资源文件数量，方便管理，妈妈再也不怕我找不到资源文件了，同时也节省了图片文件头、文件结束块以及调色板等占用的空间。

下面是利用drawBitmap第三种方法制作的一个简单示例：

资源文件如下：

最终效果如下：

源码如下：

PS:由于是示例代码，做的很粗糙，仅作为学习示例，不建议在任何实际项目中使用。

点击此处查看源码

2.绘制文字

依旧预览一下相关常用方法：

// 第一类
public void drawText (String text, float x, float y, Paint paint)
public void drawText (String text, int start, int end, float x, float y, Paint paint)
public void drawText (CharSequence text, int start, int end, float x, float y, Paint paint)
public void drawText (char[] text, int index, int count, float x, float y, Paint paint)

// 第二类
public void drawPosText (String text, float[] pos, Paint paint)
public void drawPosText (char[] text, int index, int count, float[] pos, Paint paint)

// 第三类
public void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)
public void drawTextOnPath (char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

PS 其中的CharSequence和String的区别可以到这里看看. ->戳这里<-

绘制文字部分大致可以分为三类：

第一类只能指定文本基线位置(基线x默认在字符串左侧，基线y默认在字符串下方)。
第二类可以分别指定每个文字的位置。
第三类是指定一个路径，根据路径绘制文字。

通过上面常用方法的参数也可看出，绘制文字也是需要画笔的，而且文字的大小,颜色,字体,对齐方式都是由画笔控制的。

不过嘛这里仅简单介绍几种常用方法(反正挖坑多了也不怕)，具体在讲解Paint时再详细讲解。

Paint文本相关常用方法表

标题	相关方法	备注
色彩	setColor setARGB setAlpha	设置颜色，透明度
大小	setTextSize	设置文本字体大小
字体	setTypeface	设置或清除字体样式
样式	setStyle	填充(FILL),描边(STROKE),填充加描边(FILL_AND_STROKE)
对齐	setTextAlign	左对齐(LEFT),居中对齐(CENTER),右对齐(RIGHT)
测量	measureText	测量文本大小(注意，请在设置完文本各项参数后调用)

为了绘制文本，我们先创建一个文本画笔：

Paint textPaint = new Paint();          // 创建画笔
textPaint.setColor(Color.BLACK);        // 设置颜色
textPaint.setStyle(Paint.Style.FILL);   // 设置样式
textPaint.setTextSize(50);              // 设置字体大小

第一类(drawText)

第一类可以指定文本开始的位置，可以截取文本中部分内容进行绘制。

其中x，y两个参数是指定文本绘制两个基线,示例：

// 文本(要绘制的内容)
String str = "ABCDEFG";

// 参数分别为 (文本 基线x 基线y 画笔)
canvas.drawText(str,200,500,textPaint);

PS: 图中字符串下方的红线是基线y，基线x未在图中画出。

当然啦，除了能指定绘制文本的起始位置，还能只取出文本中的一部分内容进行绘制。

截取文本中的一部分，对于String和CharSequence来说只指定字符串下标start和end位置(注意：0<= start < end < str.length())

以上一个例子使用的字符串为例，它的下标是这样的(等一下，我为啥要说这个，算了，不管了，就这样吧。

(๑•́ ₃ •̀๑)

字符	A	B	C	D	E	F	G
下标	0	1	2	3	4	5	6

假设我我们指定star为1，end为3，那么最终截取的字符串就是”BC”。

一般来说，使用start和end指定的区间是前闭后开的，即包含start指定的下标，而不包含end指定的下标，故[1,3)最后获取到的下标只有下标1 和下标2 的字符，就是”BC”.

示例：

// 文本(要绘制的内容)
String str = "ABCDEFG";

// 参数分别为 (字符串 开始截取位置 结束截取位置 基线x 基线y 画笔)
canvas.drawText(str,1,3,200,500,textPaint);

另外，对于字符数组char[]我们截取字符串使用起始位置(index)和长度(count)来确定。

同样，我们指定index为1，count为3，那么最终截取到的字符串是”BCD”.

其实就是从下标位置为1处向后数3位就是截取到的字符串，示例：

// 字符数组(要绘制的内容)
char[] chars = "ABCDEFG".toCharArray();

// 参数为 (字符数组 起始坐标 截取长度 基线x 基线y 画笔)
canvas.drawText(chars,1,3,200,500,textPaint);

第二类(drawPosText)

通过和第一类比较，我们可以发现，第二类中没有指定x，y坐标的参数，而是出现了这样一个参数float[] pos。

好吧，这个名为pos的浮点型数组就是指定坐标的，至于为啥要用数组嘛，因为这家伙野心比较大，想给每个字符都指定一个位置。

示例：

String str = "SLOOP";

canvas.drawPosText(str,new float[]{
      100,100,    // 第一个字符位置
      200,200,    // 第二个字符位置
      300,300,    // ...
      400,400,
      500,500
},textPaint);

不过嘛，虽然虽然这个方法也比较容易理解，但是关于这个方法我个人是不推荐使用的，因为坑比较多，主要有一下几点：

序号	反对理由
1	必须指定所有字符位置，否则直接crash掉，反人类设计
2	性能不佳，在大量使用的时候可能导致卡顿
3	不支持emoji等特殊字符，不支持字形组合与分解

关于第二类的第二种方法：

public void drawPosText (char[] text, int index, int count, float[] pos, Paint paint)

和上面一样，就是从字符数组中切出来一段进行绘制，相信以诸位看官的聪明才智一眼就看出来了，我这里就不多说了，真的不是我偷懒啊(ˉ▽￣～) ~~

第三类(drawTextOnPath)

第三类要用到path这个大杀器，作为一个厉害角色怎么能这么轻易露脸呢，先保持一下神秘感，也就是说，下回再和大家见面喽。

三.总结

学会了图片和文字绘制，对于大部分自定义View都能制作了，可以去看看这位大神制作的作品，尝试模仿一下一个绚丽的loading动效分析与实现！

(,,• ₃ •,,)

PS: 由于本人英文水平有限，某些地方可能存在误解或词语翻译不准确，如果你对此有疑问可以提交Issues进行反馈。

About

本系列相关文章

作者微博: GcsSloop

参考资料

Canvas
Bitmap
Paint
Android ApiDemo 笔记（一）Content与Graphics

安卓自定义View进阶-Canvas之画布操作

Thu, 28 Jan 2016 00:00:00 +0800

上一篇Canvas之绘制基本图形中我们了解了如何使用Canvas绘制基本图形，本次了解一些基本的画布操作。

本来想把画布操作放到后面部分的，但是发现很多图形绘制都离不开画布操作，于是先讲解一下画布的基本操作方法。

一.Canvas的常用操作速查表

操作类型	相关API	备注
绘制颜色	drawColor, drawRGB, drawARGB	使用单一颜色填充整个画布
绘制基本形状	drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc	依次为点、线、矩形、圆角矩形、椭圆、圆、圆弧
绘制图片	drawBitmap, drawPicture	绘制位图和图片
绘制文本	drawText, drawPosText, drawTextOnPath	依次为绘制文字、绘制文字时指定每个文字位置、根据路径绘制文字
绘制路径	drawPath	绘制路径，绘制贝塞尔曲线时也需要用到该函数
顶点操作	drawVertices, drawBitmapMesh	通过对顶点操作可以使图像形变，drawVertices直接对画布作用、 drawBitmapMesh只对绘制的Bitmap作用
画布剪裁	clipPath, clipRect	设置画布的显示区域
画布快照	save, restore, saveLayerXxx, restoreToCount, getSaveCount	依次为保存当前状态、回滚到上一次保存的状态、保存图层状态、回滚到指定状态、获取保存次数
画布变换	translate, scale, rotate, skew	依次为位移、缩放、旋转、错切
Matrix(矩阵)	getMatrix, setMatrix, concat	实际上画布的位移，缩放等操作的都是图像矩阵Matrix，只不过Matrix比较难以理解和使用，故封装了一些常用的方法。

二.Canvas基本操作

1.画布操作

为什么要有画布操作？

画布操作可以帮助我们用更加容易理解的方式制作图形。

例如：从坐标原点为起点，绘制一个长度为20dp，与水平线夹角为30度的线段怎么做？

按照我们通常的想法(被常年训练出来的数学思维)，就是先使用三角函数计算出线段结束点的坐标，然后调用drawLine即可。

然而这是否是被固有思维禁锢了？

假设我们先绘制一个长度为20dp的水平线，然后将这条水平线旋转30度，则最终看起来效果是相同的，而且不用进行三角函数计算，这样是否更加简单了一点呢？

合理的使用画布操作可以帮助你用更容易理解的方式创作你想要的效果，这也是画布操作存在的原因。

PS: 所有的画布操作都只影响后续的绘制，对之前已经绘制过的内容没有影响。

⑴位移(translate)

translate是坐标系的移动，可以为图形绘制选择一个合适的坐标系。 请注意，位移是基于当前位置移动，而不是每次基于屏幕左上角的(0,0)点移动，如下：

// 省略了创建画笔的代码

// 在坐标原点绘制一个黑色圆形
mPaint.setColor(Color.BLACK);
canvas.translate(200,200);
canvas.drawCircle(0,0,100,mPaint);

// 在坐标原点绘制一个蓝色圆形
mPaint.setColor(Color.BLUE);
canvas.translate(200,200);
canvas.drawCircle(0,0,100,mPaint);

我们首先将坐标系移动一段距离绘制一个圆形，之后再移动一段距离绘制一个圆形，两次移动是可叠加的。

⑵缩放(scale)

缩放提供了两个方法，如下：

public void scale (float sx, float sy)

public final void scale (float sx, float sy, float px, float py)

这两个方法中前两个参数是相同的分别为x轴和y轴的缩放比例。而第二种方法比前一种多了两个参数，用来控制缩放中心位置的。

缩放比例(sx,sy)取值范围详解：

取值范围(n)	说明
(-∞, -1)	先根据缩放中心放大n倍，再根据中心轴进行翻转
-1	根据缩放中心轴进行翻转
(-1, 0)	先根据缩放中心缩小到n，再根据中心轴进行翻转
0	不会显示，若sx为0，则宽度为0，不会显示，sy同理
(0, 1)	根据缩放中心缩小到n
1	没有变化
(1, +∞)	根据缩放中心放大n倍

如果在缩放时稍微注意一下就会发现缩放的中心默认为坐标原点,而缩放中心轴就是坐标轴，如下：

// 将坐标系原点移动到画布正中心
canvas.translate(mWidth / 2, mHeight / 2);

RectF rect = new RectF(0,-400,400,0);   // 矩形区域

mPaint.setColor(Color.BLACK);           // 绘制黑色矩形
canvas.drawRect(rect,mPaint);

canvas.scale(0.5f,0.5f);                // 画布缩放

mPaint.setColor(Color.BLUE);            // 绘制蓝色矩形
canvas.drawRect(rect,mPaint);

(为了更加直观，我添加了一个坐标系，可以比较明显的看出，缩放中心就是坐标原点)

接下来我们使用第二种方法让缩放中心位置稍微改变一下，如下：

// 将坐标系原点移动到画布正中心
canvas.translate(mWidth / 2, mHeight / 2);

RectF rect = new RectF(0,-400,400,0);   // 矩形区域

mPaint.setColor(Color.BLACK);           // 绘制黑色矩形
canvas.drawRect(rect,mPaint);

canvas.scale(0.5f,0.5f,200,0);          // 画布缩放  <-- 缩放中心向右偏移了200个单位

mPaint.setColor(Color.BLUE);            // 绘制蓝色矩形
canvas.drawRect(rect,mPaint);

(图中用箭头指示的就是缩放中心。)

前面两个示例缩放的数值都是正数，按照表格中的说明，当缩放比例为负数的时候会根据缩放中心轴进行翻转，下面我们就来实验一下：

// 将坐标系原点移动到画布正中心
canvas.translate(mWidth / 2, mHeight / 2);

RectF rect = new RectF(0,-400,400,0);   // 矩形区域

mPaint.setColor(Color.BLACK);           // 绘制黑色矩形
canvas.drawRect(rect,mPaint);


canvas.scale(-0.5f,-0.5f);          // 画布缩放

mPaint.setColor(Color.BLUE);            // 绘制蓝色矩形
canvas.drawRect(rect,mPaint);

为了效果明显，这次我不仅添加了坐标系而且对矩形中几个重要的点进行了标注，具有相同字母标注的点是一一对应的。

由于本次未对缩放中心进行偏移，所有默认的缩放中心就是坐标原点，中心轴就是x轴和y轴。

本次缩放可以看做是先根据缩放中心(坐标原点)缩放到原来的0.5倍，然后分别按照x轴和y轴进行翻转。

// 将坐标系原点移动到画布正中心
canvas.translate(mWidth / 2, mHeight / 2);

RectF rect = new RectF(0,-400,400,0);   // 矩形区域

mPaint.setColor(Color.BLACK);           // 绘制黑色矩形
canvas.drawRect(rect,mPaint);

canvas.scale(-0.5f,-0.5f,200,0);          // 画布缩放  <-- 缩放中心向右偏移了200个单位

mPaint.setColor(Color.BLUE);            // 绘制蓝色矩形
canvas.drawRect(rect,mPaint);

添加了这么多的辅助内容，希望大家能够看懂。

本次对缩放中心点y轴坐标进行了偏移，故中心轴也向右偏移了。

PS:和位移(translate)一样，缩放也是可以叠加的。

canvas.scale(0.5f,0.5f);
canvas.scale(0.5f,0.1f);

调用两次缩放则 x轴实际缩放为0.5x0.5=0.25 y轴实际缩放为0.5x0.1=0.05

下面我们利用这一特性制作一个有趣的图形。

注意设置画笔模式为描边(STROKE)

// 将坐标系原点移动到画布正中心
canvas.translate(mWidth / 2, mHeight / 2);

RectF rect = new RectF(-400,-400,400,400);   // 矩形区域

for (int i=0; i<=20; i++)
{
	canvas.scale(0.9f,0.9f);
	canvas.drawRect(rect,mPaint);
}

⑶旋转(rotate)

旋转提供了两种方法：

public void rotate (float degrees)

public final void rotate (float degrees, float px, float py)

和缩放一样，第二种方法多出来的两个参数依旧是控制旋转中心点的。

默认的旋转中心依旧是坐标原点：

// 将坐标系原点移动到画布正中心
canvas.translate(mWidth / 2, mHeight / 2);

RectF rect = new RectF(0,-400,400,0);   // 矩形区域

mPaint.setColor(Color.BLACK);           // 绘制黑色矩形
canvas.drawRect(rect,mPaint);

canvas.rotate(180);                     // 旋转180度 <-- 默认旋转中心为原点

mPaint.setColor(Color.BLUE);            // 绘制蓝色矩形
canvas.drawRect(rect,mPaint);

改变旋转中心位置：

// 将坐标系原点移动到画布正中心
canvas.translate(mWidth / 2, mHeight / 2);

RectF rect = new RectF(0,-400,400,0);   // 矩形区域

mPaint.setColor(Color.BLACK);           // 绘制黑色矩形
canvas.drawRect(rect,mPaint);

canvas.rotate(180,200,0);               // 旋转180度 <-- 旋转中心向右偏移200个单位

mPaint.setColor(Color.BLUE);            // 绘制蓝色矩形
canvas.drawRect(rect,mPaint);

好吧，旋转也是可叠加的

canvas.rotate(180);
canvas.rotate(20);

调用两次旋转，则实际的旋转角度为180+20=200度。

为了演示这一个效果，我做了一个不明觉厉的东西：

// 将坐标系原点移动到画布正中心
canvas.translate(mWidth / 2, mHeight / 2);

canvas.drawCircle(0,0,400,mPaint);          // 绘制两个圆形
canvas.drawCircle(0,0,380,mPaint);

for (int i=0; i<=360; i+=10){               // 绘制圆形之间的连接线
   canvas.drawLine(0,380,0,400,mPaint);
   canvas.rotate(10);
}

⑷错切(skew)

skew这里翻译为错切，错切是特殊类型的线性变换。

错切只提供了一种方法：

public void skew (float sx, float sy)

参数含义：
float sx:将画布在x方向上倾斜相应的角度，sx倾斜角度的tan值，
float sy:将画布在y轴方向上倾斜相应的角度，sy为倾斜角度的tan值.

变换后:

X = x + sx * y
Y = sy * x + y

示例：

// 将坐标系原点移动到画布正中心
canvas.translate(mWidth / 2, mHeight / 2);

RectF rect = new RectF(0,0,200,200);   // 矩形区域

mPaint.setColor(Color.BLACK);           // 绘制黑色矩形
canvas.drawRect(rect,mPaint);

canvas.skew(1,0);                       // 水平错切 <- 45度

mPaint.setColor(Color.BLUE);            // 绘制蓝色矩形
canvas.drawRect(rect,mPaint);

如你所想，错切也是可叠加的，不过请注意，调用次序不同绘制结果也会不同

// 将坐标系原点移动到画布正中心
canvas.translate(mWidth / 2, mHeight / 2);

RectF rect = new RectF(0,0,200,200);   // 矩形区域

mPaint.setColor(Color.BLACK);           // 绘制黑色矩形
canvas.drawRect(rect,mPaint);

canvas.skew(1,0);                       // 水平错切
canvas.skew(0,1);                       // 垂直错切

mPaint.setColor(Color.BLUE);            // 绘制蓝色矩形
canvas.drawRect(rect,mPaint);

⑸快照(save)和回滚(restore)

Q: 为什么存在快照与回滚
A：画布的操作是不可逆的，而且很多画布操作会影响后续的步骤，例如第一个例子，两个圆形都是在坐标原点绘制的，而因为坐标系的移动绘制出来的实际位置不同。所以会对画布的一些状态进行保存和回滚。

与之相关的API:

相关API	简介
save	把当前的画布的状态进行保存，然后放入特定的栈中
saveLayerXxx	新建一个图层，并放入特定的栈中
restore	把栈中最顶层的画布状态取出来，并按照这个状态恢复当前的画布
restoreToCount	弹出指定位置及其以上所有的状态，并按照指定位置的状态进行恢复
getSaveCount	获取栈中内容的数量(即保存次数)

下面对其中的一些概念和方法进行分析：

状态栈：

其实这个栈我也不知道叫什么名字，暂时叫做状态栈吧，它看起来像下面这样：

这个栈可以存储画布状态和图层状态。

Q：什么是画布和图层？
A：实际上我们看到的画布是由多个图层构成的，如下图(图片来自网络)：

实际上我们之前讲解的绘制操作和画布操作都是在默认图层上进行的。
在通常情况下，使用默认图层就可满足需求，但是如果需要绘制比较复杂的内容，如地图(地图可以有多个地图层叠加而成，比如：政区层，道路层，兴趣点层)等，则分图层绘制比较好一些。
你可以把这些图层看做是一层一层的玻璃板，你在每层的玻璃板上绘制内容，然后把这些玻璃板叠在一起看就是最终效果。

SaveFlags

名称	简介
ALL_SAVE_FLAG	默认，保存全部状态
CLIP_SAVE_FLAG	保存剪辑区
CLIP_TO_LAYER_SAVE_FLAG	剪裁区作为图层保存
FULL_COLOR_LAYER_SAVE_FLAG	保存图层的全部色彩通道
HAS_ALPHA_LAYER_SAVE_FLAG	保存图层的alpha(不透明度)通道
MATRIX_SAVE_FLAG	保存Matrix信息( translate, rotate, scale, skew)

save

save 有两种方法：

// 保存全部状态
public int save ()

// 根据saveFlags参数保存一部分状态
public int save (int saveFlags)

可以看到第二种方法比第一种多了一个saveFlags参数，使用这个参数可以只保存一部分状态，更加灵活，这个saveFlags参数具体可参考上面表格中的内容。

每调用一次save方法，都会在栈顶添加一条状态信息，以上面状态栈图片为例，再调用一次save则会在第5次上面载添加一条状态。

saveLayerXxx

saveLayerXxx有比较多的方法：

// 无图层alpha(不透明度)通道
public int saveLayer (RectF bounds, Paint paint)
public int saveLayer (RectF bounds, Paint paint, int saveFlags)
public int saveLayer (float left, float top, float right, float bottom, Paint paint)
public int saveLayer (float left, float top, float right, float bottom, Paint paint, int saveFlags)

// 有图层alpha(不透明度)通道
public int saveLayerAlpha (RectF bounds, int alpha)
public int saveLayerAlpha (RectF bounds, int alpha, int saveFlags)
public int saveLayerAlpha (float left, float top, float right, float bottom, int alpha)
public int saveLayerAlpha (float left, float top, float right, float bottom, int alpha, int saveFlags)

注意：saveLayerXxx方法会让你花费更多的时间去渲染图像(图层多了相互之间叠加会导致计算量成倍增长)，使用前请谨慎，如果可能，尽量避免使用。

使用saveLayerXxx方法，也会将图层状态也放入状态栈中，同样使用restore方法进行恢复。

这个暂时不过多讲述，如果以后用到详细讲解。(因为这里面东西也有不少啊QAQ)

restore

状态回滚，就是从栈顶取出一个状态然后根据内容进行恢复。

同样以上面状态栈图片为例，调用一次restore方法则将状态栈中第5次取出，根据里面保存的状态进行状态恢复。

restoreToCount

弹出指定位置以及以上所有状态，并根据指定位置状态进行恢复。

以上面状态栈图片为例，如果调用restoreToCount(2) 则会弹出 2 3 4 5 的状态，并根据第2次保存的状态进行恢复。

getSaveCount

获取保存的次数，即状态栈中保存状态的数量，以上面状态栈图片为例，使用该函数的返回值为5。

不过请注意，该函数的最小返回值为1，即使弹出了所有的状态，返回值依旧为1，代表默认状态。

常用格式

虽然关于状态的保存和回滚啰嗦了不少，不过大多数情况下只需要记住下面的步骤就可以了：

save();      //保存状态
...          //具体操作
restore();   //回滚到之前的状态

这种方式也是最简单和最容易理解的使用方法。

三.总结

如本文一开始所说，合理的使用画布操作可以帮助你用更容易理解的方式创作你想要的效果。

(,,• ₃ •,,)

PS: 由于本人英文水平有限，某些地方可能存在误解或词语翻译不准确，如果你对此有疑问可以提交Issues进行反馈。

About

本系列相关文章

作者微博: GcsSloop

四.参考资料

Canvas
canvas变换与操作
 Canvas之translate、scale、rotate、skew方法讲解
 Canvas的save(),saveLayer()和restore()浅谈
 Graphics->Layers

安卓自定义View进阶-Canvas之绘制图形

Thu, 21 Jan 2016 00:00:00 +0800

在上一篇自定义View分类与流程中我们了解自定义View相关的基本知识，不过，这些东西依旧还是理论，并不能拿来(zhuang)用(B), 这一次我们就了解一些能(zhaung)用(B)的东西。

在本篇文章中，我们先了解Canvas的基本用法，最后用一个小示例来结束本次教程。

一.Canvas简介

Canvas我们可以称之为画布，能够在上面绘制各种东西，是安卓平台2D图形绘制的基础，非常强大。

一般来说，比较基础的东西有两大特点:

1.可操作性强：由于这些是构成上层的基础，所以可操作性必然十分强大。
2.比较难用：各种方法太过基础，想要完美的将这些操作组合起来有一定难度。

不过不必担心，本系列文章不仅会介绍到Canvas的操作方法，还会简单介绍一些设计思路和技巧。

二.Canvas的常用操作速查表

操作类型	相关API	备注
绘制颜色	drawColor, drawRGB, drawARGB	使用单一颜色填充整个画布
绘制基本形状	drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc	依次为点、线、矩形、圆角矩形、椭圆、圆、圆弧
绘制图片	drawBitmap, drawPicture	绘制位图和图片
绘制文本	drawText, drawPosText, drawTextOnPath	依次为绘制文字、绘制文字时指定每个文字位置、根据路径绘制文字
绘制路径	drawPath	绘制路径，绘制贝塞尔曲线时也需要用到该函数
顶点操作	drawVertices, drawBitmapMesh	通过对顶点操作可以使图像形变，drawVertices直接对画布作用、 drawBitmapMesh只对绘制的Bitmap作用
画布剪裁	clipPath, clipRect	设置画布的显示区域
画布快照	save, restore, saveLayerXxx, restoreToCount, getSaveCount	依次为保存当前状态、回滚到上一次保存的状态、保存图层状态、回滚到指定状态、获取保存次数
画布变换	translate, scale, rotate, skew	依次为位移、缩放、旋转、错切
Matrix(矩阵)	getMatrix, setMatrix, concat	实际上画布的位移，缩放等操作的都是图像矩阵Matrix，只不过Matrix比较难以理解和使用，故封装了一些常用的方法。

PS： Canvas常用方法在上面表格中已经全部列出了，当然还存在一些其他的方法未列出，具体可以参考官方文档 Canvas

三.Canvas详解

本篇内容主要讲解如何利用Canvas绘制基本图形。

绘制颜色：

绘制颜色是填充整个画布，常用于绘制底色。

canvas.drawColor(Color.BLUE); //绘制蓝色

关于颜色的更多资料请参考基础篇_颜色

创建画笔：

要想绘制内容，首先需要先创建一个画笔，如下：

// 1.创建一个画笔
private Paint mPaint = new Paint();

// 2.初始化画笔
private void initPaint() {
	mPaint.setColor(Color.BLACK);       //设置画笔颜色
	mPaint.setStyle(Paint.Style.FILL);  //设置画笔模式为填充
	mPaint.setStrokeWidth(10f);         //设置画笔宽度为10px
}

// 3.在构造函数中初始化
public SloopView(Context context, AttributeSet attrs) {
   super(context, attrs);
   initPaint();
}

在创建完画笔之后，就可以在Canvas中绘制各种内容了。

绘制点：

可以绘制一个点，也可以绘制一组点，如下：

canvas.drawPoint(200, 200, mPaint);     //在坐标(200,200)位置绘制一个点
canvas.drawPoints(new float[]{          //绘制一组点，坐标位置由float数组指定
      500,500,
      500,600,
      500,700
},mPaint);

关于坐标原点默认在左上角，水平向右为x轴增大方向，竖直向下为y轴增大方向。

更多参考这里基础篇_坐标系

绘制直线：

绘制直线需要两个点，初始点和结束点，同样绘制直线也可以绘制一条或者绘制一组：

canvas.drawLine(300,300,500,600,mPaint);    // 在坐标(300,300)(500,600)之间绘制一条直线
canvas.drawLines(new float[]{               // 绘制一组线 每四数字(两个点的坐标)确定一条线
    100,200,200,200,
    100,300,200,300
},mPaint);

绘制矩形：

我们都知道，确定一个矩形最少需要四个数据，就是对角线的两个点的坐标值，这里一般采用左上角和右下角的两个点的坐标。

关于绘制矩形，Canvas提供了三种重载方法，第一种就是提供四个数值(矩形左上角和右下角两个点的坐标)来确定一个矩形进行绘制。其余两种是先将矩形封装为Rect或RectF(实际上仍然是用两个坐标点来确定的矩形)，然后传递给Canvas绘制，如下：

// 第一种
canvas.drawRect(100,100,800,400,mPaint);

// 第二种
Rect rect = new Rect(100,100,800,400);
canvas.drawRect(rect,mPaint);

// 第三种
RectF rectF = new RectF(100,100,800,400);
canvas.drawRect(rectF,mPaint);

以上三种方法所绘制出来的结果是完全一样的。

看到这里,相信很多观众会产生一个疑问，为什么会有Rect和RectF两种？两者有什么区别吗？

答案当然是存在区别的，两者最大的区别就是精度不同，Rect是int(整形)的，而RectF是float(单精度浮点型)的。除了精度不同，两种提供的方法也稍微存在差别，在这里我们暂时无需关注，想了解更多参见官方文档 Rect 和 RectF

绘制圆角矩形：

绘制圆角矩形也提供了两种重载方式，如下：

// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawRoundRect(rectF,30,30,mPaint);

// 第二种
canvas.drawRoundRect(100,100,800,400,30,30,mPaint);

上面两种方法绘制效果也是一样的，但鉴于第二种方法在API21的时候才添加上，所以我们一般使用的都是第一种。

下面简单解析一下圆角矩形的几个必要的参数的意思。

很明显可以看出，第二种方法前四个参数和第一种方法的RectF作用是一样的，都是为了确定一个矩形，最后一个参数Paint是画笔，无需多说，与矩形相比，圆角矩形多出来了两个参数rx 和 ry，这两个参数是干什么的呢？

稍微分析一下，既然是圆角矩形，他的角肯定是圆弧(圆形的一部分)，我们一般用什么确定一个圆形呢？

答案是圆心和半径，其中圆心用于确定位置，而半径用于确定大小。

由于矩形位置已经确定，所以其边角位置也是确定的，那么确定位置的参数就可以省略，只需要用半径就能描述一个圆弧了。

但是，半径只需要一个参数，但这里怎么会有两个呢？

好吧，让你发现了，这里圆角矩形的角实际上不是一个正圆的圆弧，而是椭圆的圆弧，这里的两个参数实际上是椭圆的两个半径，他们看起来个如下图：

红线标注的 rx 与 ry 就是两个半径，也就是相比绘制矩形多出来的那两个参数。

我们了解到原理后，就可以为所欲为了，通过计算可知我们上次绘制的矩形宽度为700，高度为300，当你让 rx大于350(宽度的一半)， ry大于150(高度的一半) 时奇迹就出现了，你会发现圆角矩形变成了一个椭圆，他们画出来是这样的 ( 为了方便确认我更改了画笔颜色，同时绘制出了矩形和圆角矩形 )：

// 矩形
RectF rectF = new RectF(100,100,800,400);  

// 绘制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF,mPaint);

// 绘制圆角矩形
mPaint.setColor(Color.BLUE);
canvas.drawRoundRect(rectF,700,400,mPaint);

其中灰色部分是我们所选定的矩形，而里面的圆角矩形则变成了一个椭圆，实际上在rx为宽度的一半，ry为高度的一半时，刚好是一个椭圆，通过上面我们分析的原理推算一下就能得到，而当rx大于宽度的一半，ry大于高度的一半时，实际上是无法计算出圆弧的，所以drawRoundRect对大于该数值的参数进行了限制(修正)，凡是大于一半的参数均按照一半来处理。

绘制椭圆：

相对于绘制圆角矩形，绘制椭圆就简单的多了，因为他只需要一个矩形作为参数:

// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawOval(rectF,mPaint);

// 第二种
canvas.drawOval(100,100,800,400,mPaint);

同样，以上两种方法效果完全一样，但一般使用第一种。

绘制椭圆实际上就是绘制一个矩形的内切图形，原理如下，就不多说了：

PS：如果你传递进来的是一个长宽相等的矩形(即正方形)，那么绘制出来的实际上就是一个圆。

绘制圆：

绘制圆形也比较简单, 如下：

canvas.drawCircle(500,500,400,mPaint);  // 绘制一个圆心坐标在(500,500)，半径为400 的圆。

绘制圆形有四个参数，前两个是圆心坐标，第三个是半径，最后一个是画笔。

绘制圆弧：

绘制圆弧就比较神奇一点了，为了理解这个比较神奇的东西，我们先看一下它需要的几个参数：

// 第一种
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint){}
    
// 第二种
public void drawArc(float left, float top, float right, float bottom, float startAngle,
            float sweepAngle, boolean useCenter, @NonNull Paint paint) {}

从上面可以看出，相比于绘制椭圆，绘制圆弧还多了三个参数：

startAngle  // 开始角度
sweepAngle  // 扫过角度
useCenter   // 是否使用中心

通过字面意思我们基本能猜测出来前两个参数(startAngle， sweepAngel)的作用，就是确定角度的起始位置和扫过角度，不过第三个参数是干嘛的？试一下就知道了,上代码：

RectF rectF = new RectF(100,100,800,400);
// 绘制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF,mPaint);

// 绘制圆弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF,0,90,false,mPaint);

//-------------------------------------

RectF rectF2 = new RectF(100,600,800,900);
// 绘制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF2,mPaint);

// 绘制圆弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF2,0,90,true,mPaint);

上述代码实际上是绘制了一个起始角度为0度，扫过90度的圆弧，两者的区别就是是否使用了中心点，结果如下：

可以发现使用了中心点之后绘制出来类似于一个扇形，而不使用中心点则是圆弧起始点和结束点之间的连线加上圆弧围成的图形。这样中心点这个参数的作用就很明显了，不必多说想必大家试一下就明白了。另外可以关于角度可以参考一下这篇文章：角度与弧度

相比于使用椭圆，我们还是使用正圆比较多的，使用正圆展示一下效果：

RectF rectF = new RectF(100,100,600,600);
// 绘制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF,mPaint);

// 绘制圆弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF,0,90,false,mPaint);

//-------------------------------------

RectF rectF2 = new RectF(100,700,600,1200);
// 绘制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF2,mPaint);

// 绘制圆弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF2,0,90,true,mPaint);

简要介绍Paint

看了上面这么多，相信有一部分人会产生一个疑问，如果我想绘制一个圆，只要边不要里面的颜色怎么办？

很简单，绘制的基本形状由Canvas确定，但绘制出来的颜色,具体效果则由Paint确定。

如果你注意到了的话，在一开始我们设置画笔样式的时候是这样的：

mPaint.setStyle(Paint.Style.FILL);  //设置画笔模式为填充

为了展示方便，容易看出效果，之前使用的模式一直为填充模式，实际上画笔有三种模式，如下：

STROKE                //描边
FILL                  //填充
FILL_AND_STROKE       //描边加填充

为了区分三者效果我们做如下实验：

Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(40);     //为了实验效果明显，特地设置描边宽度非常大

// 描边
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(200,200,100,paint);

// 填充
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(200,500,100,paint);

// 描边加填充
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(200, 800, 100, paint);

一图胜千言，通过以上实验我们可以比较明显的看出三种模式的区别，如果只需要边缘不需要填充内容的话只需要设置模式为描边(STROKE)即可。

其实关于Paint的内容也是有不少的，这些只是冰山一角，在后续内容中会详细的讲解Paint。

小示例

简要介绍画布的操作:

画布操作详细内容会在下一篇文章中讲解, 不是本文重点，但以下示例中可能会用到，所以此处简要介绍一下。

相关操作	简要介绍
save	保存当前画布状态
restore	回滚到上一次保存的状态
translate	相对于当前位置位移
rotate	旋转

制作一个饼状图

在展示百分比数据的时候经常会用到饼状图，像这样：

简单分析

其实根据我们上面的知识已经能自己制作一个饼状图了。不过制作东西最重要的不是制作结果，而是制作思路。相信我贴上代码大家一看就立刻明白了，非常简单的东西。不过嘛，咱们还是想了解一下制作思路：

先分析饼状图的构成，非常明显，饼状图就是一个又一个的扇形构成的，每个扇形都有不同的颜色，对应的有名字，数据和百分比。

经以上信息可以得出饼状图的最基本数据应包括：名字数据值百分比对应的角度颜色。

用户关心的数据：名字数据值百分比

需要程序计算的数据：百分比对应的角度

其中颜色这一项可以用户指定也可以用程序指定(我们这里采用程序指定)。

封装数据：

public class PieData {
    // 用户关心数据
    private String name;        // 名字
    private float value;        // 数值
    private float percentage;   // 百分比
    
    // 非用户关心数据
    private int color = 0;      // 颜色
    private float angle = 0;    // 角度

    public PieData(@NonNull String name, @NonNull float value) {
        this.name = name;
        this.value = value;
    }
}

PS: 以上省略了get set方法

自定义View：

先按照自定义View流程梳理一遍(确定各个步骤应该做的事情)：

步骤	关键字	作用
1	构造函数	初始化(初始化画笔Paint)
2	onMeasure	测量View的大小(暂时不用关心)
3	onSizeChanged	确定View大小(记录当前View的宽高)
4	onLayout	确定子View布局(无子View，不关心)
5	onDraw	实际绘制内容(绘制饼状图)
6	提供接口	提供接口(提供设置数据的接口)

代码如下：

public class PieView extends View {
    // 颜色表 (注意: 此处定义颜色使用的是ARGB，带Alpha通道的)
    private int[] mColors = {0xFFCCFF00, 0xFF6495ED, 0xFFE32636, 0xFF800000, 0xFF808000, 0xFFFF8C69, 0xFF808080,
            0xFFE6B800, 0xFF7CFC00};
    // 饼状图初始绘制角度
    private float mStartAngle = 0;
    // 数据
    private ArrayList<PieData> mData;
    // 宽高
    private int mWidth, mHeight;
    // 画笔
    private Paint mPaint = new Paint();

    public PieView(Context context) {
        this(context, null);
    }

    public PieView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (null == mData)
            return;
        float currentStartAngle = mStartAngle;                    // 当前起始角度
        canvas.translate(mWidth / 2, mHeight / 2);                // 将画布坐标原点移动到中心位置
        float r = (float) (Math.min(mWidth, mHeight) / 2 * 0.8);  // 饼状图半径
        RectF rect = new RectF(-r, -r, r, r);                     // 饼状图绘制区域

        for (int i = 0; i < mData.size(); i++) {
            PieData pie = mData.get(i);
            mPaint.setColor(pie.getColor());
            canvas.drawArc(rect, currentStartAngle, pie.getAngle(), true, mPaint);
            currentStartAngle += pie.getAngle();
        }

    }

    // 设置起始角度
    public void setStartAngle(int mStartAngle) {
        this.mStartAngle = mStartAngle;
        invalidate();   // 刷新
    }

    // 设置数据
    public void setData(ArrayList<PieData> mData) {
        this.mData = mData;
        initData(mData);
        invalidate();   // 刷新
    }

    // 初始化数据
    private void initData(ArrayList<PieData> mData) {
        if (null == mData || mData.size() == 0)   // 数据有问题 直接返回
            return;

        float sumValue = 0;
        for (int i = 0; i < mData.size(); i++) {
            PieData pie = mData.get(i);

            sumValue += pie.getValue();       //计算数值和

            int j = i % mColors.length;       //设置颜色
            pie.setColor(mColors[j]);
        }

        float sumAngle = 0;
        for (int i = 0; i < mData.size(); i++) {
            PieData pie = mData.get(i);

            float percentage = pie.getValue() / sumValue;   // 百分比
            float angle = percentage * 360;                 // 对应的角度

            pie.setPercentage(percentage);                  // 记录百分比
            pie.setAngle(angle);                            // 记录角度大小
            sumAngle += angle;

            Log.i("angle", "" + pie.getAngle());
        }
    }
}

PS: 在更改了数据需要重绘界面时要调用invalidate()这个函数重新绘制。

效果图

PS: 这个饼状图并没有添加百分比等数据，仅作为示例使用。

PieView源码下载

总结：

其实自定义View只要按照流程一步步的走，也是比较容易的。不过里面也有不少坑，这些坑还是自己踩过印象比较深，建议大家不要直接copy源码，自己手打体验一下。

About

本系列相关文章

作者微博: GcsSloop

参考资料：

View
Canvas
Android Canvas绘图详解

安卓自定义View进阶-分类与流程

Sat, 16 Jan 2016 00:00:00 +0800

本章节为什么要叫进阶篇？(虽然讲的是基础内容)，因为从本篇开始，将会逐渐揭开自定义View的神秘面纱，每一篇都将比上一篇内容更加深入，利用所学的知识能够制作更加炫酷自定义View，就像在台阶上一样，每一篇都更上一层，~~帮助大家一步步走向人生巅峰，出任CEO，迎娶白富美。~~ 误，是帮助大家更加了解那些炫酷的自定义View是如何制作的，达到举一反三的效果。

自定义View绘制流程函数调用链(简化版)

一.自定义View分类

我将自定义View分为了两类(sloop个人分类法，非官方)：

1.自定义ViewGroup

自定义ViewGroup一般是利用现有的组件根据特定的布局方式来组成新的组件，大多继承自ViewGroup或各种Layout，包含有子View。

例如：应用底部导航条中的条目，一般都是上面图标(ImageView)，下面文字(TextView)，那么这两个就可以用自定义ViewGroup组合成为一个Veiw，提供两个属性分别用来设置文字和图片，使用起来会更加方便。

2.自定义View

在没有现成的View，需要自己实现的时候，就使用自定义View，一般继承自View，SurfaceView或其他的View，不包含子View。

例如：制作一个支持自动加载网络图片的ImageView，制作图表等。

PS：自定义View在大多数情况下都有替代方案，利用图片或者组合动画来实现，但是使用后者可能会面临内存耗费过大，制作麻烦等诸多问题。

二.几个重要的函数

1.构造函数

构造函数是View的入口，可以用于初始化一些的内容，和获取自定义属性。

View的构造函数有四种重载分别如下:

public void SloopView(Context context) {}
public void SloopView(Context context, AttributeSet attrs) {}
public void SloopView(Context context, AttributeSet attrs, int defStyleAttr) {}
public void SloopView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {}

可以看出，关于View构造函数的参数有多有少，先排除几个不常用的，留下常用的再研究。

有四个参数的构造函数在API21的时候才添加上，暂不考虑。

有三个参数的构造函数中第三个参数是默认的Style，这里的默认的Style是指它在当前Application或Activity所用的Theme中的默认Style，且只有在明确调用的时候才会生效，以系统中的ImageButton为例说明：

public ImageButton(Context context, AttributeSet attrs) {
    //调用了三个参数的构造函数，明确指定第三个参数
    this(context, attrs, com.android.internal.R.attr.imageButtonStyle);
}

public ImageButton(Context context, AttributeSet attrs, int defStyleAttr) {
    //此处调了四个参数的构造函数，无视即可
    this(context, attrs, defStyleAttr, 0); 
}

注意：即使你在View中使用了Style这个属性也不会调用三个参数的构造函数，所调用的依旧是两个参数的构造函数。

由于三个参数的构造函数第三个参数一般不用，暂不考虑，第三个参数的具体用法会在以后用到的时候详细介绍。

排除了两个之后，只剩下一个参数和两个参数的构造函数，他们的详情如下：

//一般在直接New一个View的时候调用。
public void SloopView(Context context) {}

//一般在layout文件中使用的时候会调用，关于它的所有属性(包括自定义属性)都会包含在attrs中传递进来。
public void SloopView(Context context, AttributeSet attrs) {}

以下方法调用的是一个参数的构造函数：

//在Avtivity中
SloopView view  new SloopView(this);

以下方法调用的是两个参数的构造函数：

//在layout文件中 - 格式为： 包名.View名
<com.sloop.study.SloopView
  android:layout_width"wrap_content"
  android:layout_height"wrap_content"/>

关于构造函数先讲这么多，关于如何自定义属性和使用attrs中的内容，在后面会详细讲解，目前只需要知道这两个构造函数在何时调用即可。

2.测量View大小(onMeasure)

Q: 为什么要测量View大小？

A: View的大小不仅由自身所决定，同时也会受到父控件的影响，为了我们的控件能更好的适应各种情况，一般会自己进行测量。

测量View大小使用的是onMeasure函数，我们可以从onMeasure的两个参数中取出宽高的相关数据：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthsize  MeasureSpec.getSize(widthMeasureSpec);      //取出宽度的确切数值
    int widthmode  MeasureSpec.getMode(widthMeasureSpec);      //取出宽度的测量模式
    
    int heightsize  MeasureSpec.getSize(heightMeasureSpec);    //取出高度的确切数值
    int heightmode  MeasureSpec.getMode(heightMeasureSpec);    //取出高度的测量模式
}

从上面可以看出 onMeasure 函数中有 widthMeasureSpec 和 heightMeasureSpec 这两个 int 类型的参数，毫无疑问他们是和宽高相关的， 但它们其实不是宽和高，而是由宽、高和各自方向上对应的测量模式来合成的一个值：

测量模式一共有三种，被定义在 Android 中的 View 类的一个内部类View.MeasureSpec中：

模式	二进制数值	描述
UNSPECIFIED	00	默认值，父控件没有给子view任何限制，子View可以设置为任意大小。
EXACTLY	01	表示父控件已经确切的指定了子View的大小。
AT_MOST	10	表示子View具体大小没有尺寸限制，但是存在上限，上限一般为父View大小。

在int类型的32位二进制位中，31-30这两位表示测量模式,29~0这三十位表示宽和高的实际值，实际上如下：

以数值1080(二进制为: 1111011000)为例(其中模式和实际数值是连在一起的，为了展示我将他们分开了)：

模式名称	模式数值	实际数值
UNSPECIFIED	00	000000000000000000001111011000
EXACTLY	01	000000000000000000001111011000
AT_MOST	10	000000000000000000001111011000

PS: 实际上关于上面的东西了解即可，在实际运用之中只需要记住有三种模式，用 MeasureSpec 的 getSize是获取数值， getMode是获取模式即可。

注意：

如果对View的宽高进行修改了，不要调用 super.onMeasure( widthMeasureSpec, heightMeasureSpec); 要调用 setMeasuredDimension( widthsize, heightsize); 这个函数。

3.确定View大小(onSizeChanged)

这个函数在视图大小发生改变时调用。

Q: 在测量完View并使用setMeasuredDimension函数之后View的大小基本上已经确定了，那么为什么还要再次确定View的大小呢？

A: 这是因为View的大小不仅由View本身控制，而且受父控件的影响，所以我们在确定View大小的时候最好使用系统提供的onSizeChanged回调函数。

onSizeChanged如下：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
}

可以看出，它又四个参数，分别为宽度，高度，上一次宽度，上一次高度。

这个函数比较简单，我们只需关注宽度(w), 高度(h) 即可，这两个参数就是View最终的大小。

4.确定子View布局位置(onLayout)

确定布局的函数是onLayout，它用于确定子View的位置，在自定义ViewGroup中会用到，他调用的是子View的layout函数。

在自定义ViewGroup中，onLayout一般是循环取出子View，然后经过计算得出各个子View位置的坐标值，然后用以下函数设置子View位置。

child.layout(l, t, r, b);

四个参数分别为：

名称	说明	对应的函数
l	View左侧距父View左侧的距离	getLeft();
t	View顶部距父View顶部的距离	getTop();
r	View右侧距父View左侧的距离	getRight();
b	View底部距父View顶部的距离	getBottom();

具体可以参考坐标系这篇文章。

PS：关于onLayout这个函数在讲解自定义ViewGroup的时候会详细讲解。

5.绘制内容(onDraw)

onDraw是实际绘制的部分，也就是我们真正关心的部分，使用的是Canvas绘图。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
}

关于Canvas绘图是本章节的重点，会分几篇文章进行详细讲解，敬请期待OwO。

6.对外提供操作方法和监听回调

自定义完View之后，一般会对外暴露一些接口，用于控制View的状态等，或者监听View的变化.

本内容会在后续文章中以实例的方式进讲解。

三.重点知识梳理

自定义View分类

PS ：实际上ViewGroup是View的一个子类。

类别	继承自	特点
View	View SurfaceView 等	不含子View
ViewGroup	ViewGroup xxLayout等	包含子View

自定义View流程：

步骤	关键字	作用
1	构造函数	View初始化
2	onMeasure	测量View大小
3	onSizeChanged	确定View大小
4	onLayout	确定子View布局(自定义View包含子View时有用)
5	onDraw	实际绘制内容
6	提供接口	控制View或监听View某些状态。

About

本系列相关文章

作者微博: GcsSloop

参考资料：

View
ViewGroup
View.MeasureSpec
onMeasure，MeasureSpec源码流程思路详解
 Android中自定义样式与View的构造函数中的第三个参数defStyle的意义
 android view构造函数研究
 Android View构造方法第三参数使用方法详解
 Android 自定义View onMeasure方法的实现
 Android API指南(二)自定义控件02之 onMeasure
Android中View的绘制过程 onMeasure方法简述
 Android自定义View基础-坐标系

安卓自定义View基础-颜色

Mon, 11 Jan 2016 00:00:00 +0800

简要介绍安卓中的颜色相关内容，包括颜色的定义，创建颜色的几种方式，以及颜色的混合模式等。

一.简单介绍颜色

安卓支持的颜色模式：

颜色模式	备注
ARGB8888	四通道高精度(32位)
ARGB4444	四通道低精度(16位)
RGB565	屏幕默认模式(16位)
Alpha8	仅有透明通道(8位)

PS：其中字母表示通道类型，数值表示该类型用多少位二进制来描述。如ARGB8888则表示有四个通道(ARGB),每个对应的通道均用8位来描述。

注意：我们常用的是ARGB8888和ARGB4444，而在所有的安卓设备屏幕上默认的模式都是RGB565,请留意这一点。

以ARGB8888为例介绍颜色定义:

类型	解释	0(0x00)	255(0xff)
A(Alpha)	透明度	透明	不透明
R(Red)	红色	无色	红色
G(Green)	绿色	无色	绿色
B(Blue)	蓝色	无色	蓝色

其中 A R G B 的取值范围均为0~255(即16进制的0x00~0xff)

A 从0x00到0xff表示从透明到不透明。

RGB 从0x00到0xff表示颜色从浅到深。

当RGB全取最小值(0或0x000000)时颜色为黑色，全取最大值(255或0xffffff)时颜色为白色

二.几种创建或使用颜色的方式

1.java中定义颜色

int color = Color.GRAY;     //灰色

由于Color类提供的颜色仅为有限的几个，通常还是用ARGB值进行表示。

int color = Color.argb(127, 255, 0, 0);   //半透明红色

int color = 0xaaff0000;                   //带有透明度的红色

2.在xml文件中定义颜色

在/res/values/color.xml 文件中如下定义：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
</resources>

详解：在以上xml文件中定义了两个颜色，红色和绿色，是没有alpha（透明）通道的。

定义颜色以‘#’开头，后面跟十六进制的值，有如下几种定义方式：

#f00            //低精度 - 不带透明通道红色
#af00           //低精度 - 带透明通道红色

#ff0000         //高精度 - 不带透明通道红色
#aaff0000       //高精度 - 带透明通道红色

3.在java文件中引用xml中定义的颜色：

int color = getResources().getColor(R.color.mycolor);

4.在xml文件(layout或style)中引用或者创建颜色

<!--在style文件中引用-->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/red</item>
</style>

android:background="@color/red"     //引用在/res/values/color.xml 中定义的颜色

android:background="#ff0000"        //创建并使用颜色

三.取色工具

颜色都是用RGB值定义的，而我们一般是无法直观的知道自己需要颜色的值，需要借用取色工具直接从图片或者其他地方获取颜色的RGB值。

1.ColorPix(for Win)

简单的取色调色工具，可以从屏幕取色，非常小而精简。

点击这里下载ColorPix

2.Picpick(for Win)

功能更加强大的工具：PicPick。

PicPick具备了截取全屏、活动窗口、指定区域、固定区域、手绘区域功能，支持滚动截屏，屏幕取色，支持双显示器，具备白板、屏幕标尺、直角座标或极座标显示与测量，具备强大的图像编辑和标注功能。

点击这里获取PicPick

3.Sip(for Mac)

Sip作为Mac上的取色工具，也是十分优秀的，除了屏幕取色外还配备了不同类型的调色板，并且支持将颜色格式化为任何常用的格式。

点击这里获取Sip

四.颜色混合模式(Alpha通道相关)

通过前面介绍我们知道颜色一般都是四个通道(ARGB)的，其中(RGB)控制的是颜色,而A(Alpha)控制的是透明度。

因为我们的显示屏是没法透明的，因此最终显示在屏幕上的颜色里可以认为没有Alpha通道。Alpha通道主要在两个图像混合的时候生效。

默认情况下，当一个颜色绘制到Canvas上时的混合模式是这样计算的：

(RGB通道) 最终颜色 = 绘制的颜色 + (1 - 绘制颜色的透明度) × Canvas上的原有颜色。

注意：

1.这里我们一般把每个通道的取值从0(0x00)到255(0xff)映射到0到1的浮点数表示。

2.这里等式右边的“绘制的颜色”、“Canvas上的原有颜色” 都是经过预乘了自己的Alpha通道的值。如绘制颜色：0x88ffffff，那么参与运算时的每个颜色通道的值不是1.0，而是(1.0 * 0.5333 = 0.5333)。 (其中0.5333 = 0x88/0xff)

使用这种方式的混合，就会造成后绘制的内容以半透明的方式叠在上面的视觉效果。

其实还可以有不同的混合模式供我们选择，用Paint.setXfermode，指定不同的PorterDuff.Mode。

下表是各个PorterDuff模式的混合计算公式：（D指原本在Canvas上的内容dst，S指绘制输入的内容src，a指alpha通道，c指RGB各个通道）

混合模式	计算公式
ADD	Saturate(S + D)
CLEAR	[0, 0]
DARKEN	[Sa + Da - SaDa, Sc(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)]
DST	[Da, Dc]
DST_ATOP	[Sa, Sa * Dc + Sc * (1 - Da)]
DST_IN	[Sa * Da, Sa * Dc]
DST_OUT	[Da * (1 - Sa), Dc * (1 - Sa)]
DST_OVER	[Sa + (1 - Sa)Da, Rc = Dc + (1 - Da)Sc]
LIGHTEN	[Sa + Da - SaDa, Sc(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)]
MULTIPLY	[Sa * Da, Sc * Dc]
SCREEN	[Sa + Da - Sa * Da, Sc + Dc - Sc * Dc]
SRC	[Sa, Sc]
SRC_ATOP	[Da, Sc * Da + (1 - Sa) * Dc]
SRC_IN	[Sa * Da, Sc * Da]
SRC_OUT	[Sa * (1 - Da), Sc * (1 - Da)]
SRC_OVER	[Sa + (1 - Sa)Da, Rc = Sc + (1 - Sa)Dc]
XOR	[Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc]

用示例图来查看使用不同模式时的混合效果如下（src表示输入的图，dst表示原Canvas上的内容）：

五.参考资料

安卓自定义View基础-角度与弧度

Wed, 06 Jan 2016 00:00:00 +0800

安卓中角度(angle)与弧度(radian)的有关问题。

一.前言

1.为什么讲这个？

在我们自定义View，尤其是制作一些复杂炫酷的效果的时候，实际上是将一些简单的东西通过数学上精密的计算组合到一起形成的效果。

这其中可能会涉及到画布的相关操作(旋转)，以及一些正余弦函数的计算等，这些内容就会用到一些角度、弧度相关的知识。

2.为什么对角的描述存在角度与弧度两种单位？

简单来说就是为了方便，为了精确描述一个角的大小引入了角度与弧度的概念。

由于两者进制是不同的(角度是60进制，弧度是10进制),在合适的地方使用合适的单位来描述会更加方便。

例如： 角度是60进位制，遇到30°6′这样的角，应该转化为10进制的30.1°。但弧度就不需要，因为弧度本身就是十进制的实数。

二.角度与弧度的定义

角度和弧度一样都是描述角的一种度量单位，下面是它们的定义：

名称	定义
角度	两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆周长的360分之一时，两条射线的夹角的大小为1度.
弧度	两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度.

如图:

三.角度和弧度的换算关系

圆一周对应的角度为360度(角度)，对应的弧度为2π弧度。

故得等价关系:360(角度) = 2π(弧度) ==> 180(角度) = π(弧度)

由等价关系可得如下换算公式:

rad 是弧度， deg 是角度

公式	例子
rad = deg x π / 180	2π ＝ 360 x π / 180
deg = rad x 180 / π	360 ＝ 2π x 180 / π

维基百科的公式：

rad 是弧度， deg 是角度

四.一些细节问题

由于默认屏幕坐标系和常见数学坐标系的小差别(坐标系问题点这里)，所以在角上必然也会存在一些区别，例如：

在常见的数学坐标系中角度增大方向为逆时针，

在默认的屏幕坐标系中角度增大方向为顺时针。

参考文章

◎本系列相关文章

安卓自定义View基础-坐标系

Tue, 05 Jan 2016 00:00:00 +0800

一.屏幕坐标系和数学坐标系的区别

由于移动设备一般定义屏幕左上角为坐标原点，向右为x轴增大方向，向下为y轴增大方向，所以在手机屏幕上的坐标系与数学中常见的坐标系是稍微有点差别的，详情如下：

（PS：其中的∠a 是对应的，注意y轴方向！）

实际屏幕上的默认坐标系如下：

PS: 假设其中棕色部分为手机屏幕

二.View的坐标系

注意：View的坐标系统是相对于父控件而言的.

getTop();       //获取子View左上角距父View顶部的距离
getLeft();      //获取子View左上角距父View左侧的距离
getBottom();    //获取子View右下角距父View顶部的距离
getRight();     //获取子View右下角距父View左侧的距离

如下图所示：

三.MotionEvent中 get 和 getRaw 的区别

event.getX();       //触摸点相对于其所在组件坐标系的坐标
event.getY();

event.getRawX();    //触摸点相对于屏幕默认坐标系的坐标
event.getRawY();

如下图所示：

PS:其中相同颜色的内容是对应的，其中为了显示方便，蓝色箭头向左稍微偏移了一点.

四.核心要点

序号	要点
1	在数学中常见的坐标系与屏幕默认坐标系的差别
2	View的坐标系是相对于父控件而言的
3	MotionEvent中get和getRaw的区别

五.参考文章：

二十多行代码画太极

Sat, 26 Dec 2015 00:00:00 +0800

一个然并卵的自定义View实例，觉得很有趣就做了一个试试，效果看起来貌似还是挺不错的，代码也非常简单。

如果想系统的学习自定义View，可以参考: 安卓自定义View教程目录

完成效果图

技术基础

这一篇内容主要设计到安卓中的2D绘图部分，主要用到的是Canvas，使用到的主要技术可以参考下面两篇文章：

绘制太极

1.定义画笔

由于太极图像由黑白两色构成，为了方便就定义了两个画笔，分别绘制黑色和白色。

private Paint whitePaint;   //白色画笔
private Paint blackPaing;   //黑色画笔
//初始化画笔函数
private void initPaints() {
    whitePaint = new Paint();
    whitePaint.setAntiAlias(true);
    whitePaint.setColor(Color.WHITE);

    blackPaing = new Paint(whitePaint);
    blackPaing.setColor(Color.BLACK);
}

2.在构造函数中初始化画笔

public TaiJi(Context context) {
    this(context, null);
}

public TaiJi(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public TaiJi(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initPaints();
}

3.在onDraw中使用Canvas绘制内容

3.1 确定画布大小

int width = canvas.getWidth();                          //画布宽度
int height = canvas.getHeight();                        //画布高度

3.2 将Canvas坐标原点移动到画布中心

canvas.translate(centerPoint.x, centerPoint.y);         //将画布移动到中心

3.3 绘制背景色

canvas.drawColor(Color.GRAY);                           //绘制背景色

3.4 确定太极的半径大小并绘制两个半圆

//绘制两个半圆
int radius = Math.min(width, height) / 2 - 100;             //太极半径
RectF rect = new RectF(-radius, -radius, radius, radius);   //绘制区域
canvas.drawArc(rect, 90, 180, true, blackPaing);            //绘制黑色半圆
canvas.drawArc(rect, -90, 180, true, whitePaint);           //绘制白色半圆

在这里简单解释一下drawArc绘制圆弧方法几个参数的意义。

参数	作用
RectF oval	绘制的区域（是一个矩形）
float startAngle	开始角度
float sweepAngle	扫过角度
boolean useCenter	是否使用中心
Paint paint	画笔

另外，由于移动设备屏幕的坐标系和我们在数学中常用的坐标系稍微有点区别，需要注意一下。在移动设备中一般定义左上角为坐标零点，x轴坐标向右增大，y轴坐标向下增大。而在数学坐标系中一般定义y轴坐标向上为增大方向，所以两者y轴刚好是反向的。

更多可参考：

3.5 绘制两个小圆

//绘制两个小圆
int smallRadius = radius / 2;	//小圆半径为大圆的一半
canvas.drawCircle(0, -smallRadius, smallRadius, blackPaing);
canvas.drawCircle(0, smallRadius, smallRadius, whitePaint);

3.6 绘制鱼眼

//绘制鱼眼（两个更小的圆）
canvas.drawCircle(0, -smallRadius, smallRadius / 4, whitePaint);
canvas.drawCircle(0, smallRadius, smallRadius / 4, blackPaing);

4.让太极旋转起来

4.1 设置旋转角度变量，并提供外部访问接口

private float degrees = 0;          //旋转角度
public void setRotate(float degrees) {
	this.degrees = degrees;
	invalidate();                   //重绘界面
}

4.2 在实际绘制之前调用旋转函数

//在绘制完背景色后调用即可
canvas.rotate(degrees);

4.3 不断改变旋转角度

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
    final TaiJi taiJi = new TaiJi(this);
    setContentView(taiJi);
    final Handler handler = new Handler() {
        private float degrees = 0;
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            taiJi.setRotate(degrees += 5);
            this.sendEmptyMessageDelayed(0, 80);
        }
    };

    handler.sendEmptyMessageDelayed(0, 20);
}

5.完整代码

public class TaiJi extends View {
    private Paint whitePaint;   //白色画笔
    private Paint blackPaing;   //黑色画笔

    public TaiJi(Context context) {
        this(context, null);
    }

    public TaiJi(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TaiJi(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initPaints();
    }

    //初始化画笔函数
    private void initPaints() {
        whitePaint = new Paint();
        whitePaint.setAntiAlias(true);
        whitePaint.setColor(Color.WHITE);

        blackPaing = new Paint(whitePaint);
        blackPaing.setColor(Color.BLACK);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        int width = canvas.getWidth();          //画布宽度
        int height = canvas.getHeight();        //画布高度

        canvas.translate(width/2, height/2);    // 移动坐标原点到画布中心

        canvas.drawColor(Color.GRAY);           //绘制背景色
        canvas.rotate(degrees);                 //旋转画布

        //绘制两个半圆
        int radius = Math.min(width, height) / 2 - 100;        		//太极半径
        RectF rect = new RectF(-radius, -radius, radius, radius);   //绘制区域
        canvas.drawArc(rect, 90, 180, true, blackPaing);            //绘制黑色半圆
        canvas.drawArc(rect, -90, 180, true, whitePaint);           //绘制白色半圆

        //绘制两个小圆
        int smallRadius = radius / 2;	                            //小圆半径为大圆的一半
        canvas.drawCircle(0, -smallRadius, smallRadius, blackPaing);
        canvas.drawCircle(0, smallRadius, smallRadius, whitePaint);

        //绘制鱼眼（两个更小的圆）
        canvas.drawCircle(0, -smallRadius, smallRadius / 4, whitePaint);
        canvas.drawCircle(0, smallRadius, smallRadius / 4, blackPaing);

    }

    private float degrees = 0;                  //旋转角度
    public void setRotate(float degrees) {
        this.degrees = degrees;
        invalidate();                           //重绘界面
    }
}

结语

虽然写了这么长，但核心代码不过二十几行，其实还是挺简单的，一个没什么用但很中国特色的自定义View。

在AndroidStudio中使用PlantUML(for Win)

Mon, 30 Nov 2015 00:00:00 +0800

点击下面切换平台:

| Mac | Win |

Unified Modeling Language (UML)又称统一建模语言或标准建模语言，用来描述类（对象的）、对象、关联、职责、行为、接口、用例、包、顺序、协作，以及状态。是用来帮助自己理清众多类之间复杂关系的不二利器，也能帮助别人快速理解你的设计思路。

那么，我们怎么在AndroidStudio中创建自己的UML类图呢？接下来我就教大家如何用正确的姿势创建UML类图。

一.用正确的姿势安装panltUML插件

1.File->Settings->Plugins->Browse repositories

2.在搜索框输入plantUML

3.导入插件

(ps：由于我已经安装过了，所以没有Install plugin 按钮，未安装的都有这样一个按钮，如下，点击安装即可。)

如果以上步骤正确的完成，重启AndroidStudio 右键->new 的时候你会发现多了这么一堆东西，如果出现了这些说明plantUML已经正确的安装了。

当然了，所有事情都不会是一帆风顺的，当你迫不及待的想创建一个文件试试的时候你会发现下面的情况。

想必此时你的内心一定和我当时一样，一万头草泥马奔腾而过，这都是什么东西！！！

一切事情都是有原因的，而这个因为你还缺少一个必要的东西，就是大名鼎鼎的贝尔实验室开发的一个工具包：Graphviz。

二，用正确的姿势安装Graphviz

1.下载Graphviz

【下载地址戳这里】

2.安装

安装过程我就不详细讲解了，点击next后要记住安装的目录。之后下一步，直到完成就行。

三.用正确的姿势设置plantUML

1.点击右上角的设置按钮或进入File->Settings->Other Settings ->PlantUML

2.将文件路径填写为刚刚Graphviz的目录下bin目录中dot.exe文件。

(我的为：D:/Program/Graphviz/bin/dot.exe)

3.点击OK 刷新一下界面就能看到这个了。

讲到这里，就已经安装完成了，可以愉快的用代码来书写UML图了。

什么？你说你还不会书写的语法？没关系，其实我也不会，不过我有一个好的教程推荐给你，相信你看完就明白啦。

四.用正确的姿势学习使用UML

1.【PlantUML快速指南戳这里】

2.注意，这个教程中的语法和AndroidStudio中基本一致，区别就是开始和结束标志不同。

好了，到这里该教程正式结束，祝各位小伙伴能愉快的使用plantUML玩耍。

在AndroidStudio中使用PlantUML(for Mac)

Mon, 30 Nov 2015 00:00:00 +0800

点击下面切换平台:

| Mac | Win |

那么，我们怎么在AndroidStudio中创建自己的UML类图呢？接下来我就教大家如何用正确的姿势创建UML类图。

一.用正确的姿势安装panltUML插件

1.File->Settings->Plugins->Browse repositories

2.在搜索框输入plantUML

3.导入插件

(ps：由于我已经安装过了，所以没有Install plugin 按钮，未安装的都有这样一个按钮，如下，点击安装即可。)

如果以上步骤正确的完成，重启AndroidStudio 右键->new 的时候你会发现多了这么一堆东西，如果出现了这些说明plantUML已经正确的安装了。

当然了，所有事情都不会是一帆风顺的，当你迫不及待的想创建一个文件试试的时候你会发现下面的情况。

想必此时你的内心一定和我当时一样，一万头草泥马奔腾而过，这都是什么东西！！！

一切事情都是有原因的，而这个因为你还缺少一个必要的东西，就是大名鼎鼎的贝尔实验室开发的一个工具包：Graphviz。

二，用正确的姿势安装Graphviz

此处建议使用Homebrew自动下载安装，如果你还没有用过Homebrew来帮助你管理软件，参考这里: Homebrew&HomebrewCask

安装好homebrew后直接输入如下命令，按下回车后等待片刻即可安装成功:

brew install graphviz

安装完成后，Homebrew会告诉你安装位置，请记好这个位置，你也可以用info命名查看安装位置:

brew info graphviz

我的安装位置在 /usr/local/Cellar/graphviz/2.38.0

三.用正确的姿势设置plantUML

1.点击右上角的设置按钮或进入File->Settings->Other Settings ->PlantUML或者在预览页面点击右上角的设置图标,如下:

2.将文件路径填写为刚刚Graphviz的目录下bin目录中dot文件。

//  我的安装路径
/usr/local/Cellar/graphviz/2.38.0/bin/dot

3.点击OK 刷新一下界面就能看到结果了。

讲到这里，就已经安装完成了，可以愉快的用代码来书写UML图了。

什么？你说你还不会书写的语法？没关系，其实我也不会，不过我有一个好的教程推荐给你，相信你看完就明白啦。

四.用正确的姿势学习使用UML

1.【PlantUML快速指南戳这里】

2.注意，这个教程中的语法和AndroidStudio中基本一致，区别就是开始和结束标志不同。

好了，到这里该教程正式结束，祝各位小伙伴能愉快的使用plantUML玩耍。

安卓自定义View教程目录

Sat, 03 Jan 1970 00:00:00 +0800

这是一个从零起步，从入门到懵逼的自定义View教程。本教程从最基础的内容讲解，并且深入到了相关的各个细节，不论你是刚入门的菜鸟，还是有一定经验的工程师相信本系列文章都会对你有所帮助。

你既可以将本教程当作学习资料来学习自定义View相关的各种知识，也可以作为工具来使用，在需要的时候查询相关的知识细节。

基础篇

进阶篇

⚠️ 警告：如果遇到文章中的示例测试结果于文章中效果不同，
请关闭硬件加速试试，
请关闭硬件加速试试，
请关闭硬件加速试试，
重要的话说三遍。

如何关闭参考这里 Android如何关闭硬件加速

GitHub 版本点这里查看

博文修复计划

由于自己的知识水平有限，书写的文章难免会出现一些问题。

随着知识增长和知识面的扩大，发现了一些之前未曾注意到的问题，故有此博文修复计划，本次修复不仅会修复之前文章中的瑕疵和纰漏，甚至会对文章的知识结构稍作调整，所有修复的文章和调整后的内容都会在微博重新发布声明，点击下面关注我的微博可以第一时间了解到相关信息，另外据说关注我的微博会变帅哦。

本次博文修复计划主要针对个人博客和 GitHub，由于博主精力有限以及某些平台自身限制，对于其他平台仅能修复部分内容。

作者微博: @GcsSloop

关于

Thu, 01 Jan 1970 08:00:00 +0800

我是 GcsSloop，一名生活在2.5次元的魔法师，我一直在致力于研究基础魔法，并且始终坚信利用这些基础魔法，可以创造出华丽而又强大的高级魔法。我尝试用很多种方式去分析这些基础魔法，并从中提炼出魔法的结晶，以方便了解这些基础魔法的妙用。最终我制作了一些魔法卷轴，上面详细记述了一些基础魔法的特性和使用诀窍，并分类整理好存放在我的魔法储藏室中。更多的魔法卷轴正在制作当中，如果你觉得这些魔法卷轴不错的话，告诉其他的小伙伴，或者鼓励一下我。

为了不浪费大家的时间，我发布在这个网站上的所有文章会保持原创，并尽量保证文章的质量，对于一些比较细碎的知识点和问题会保存在我的 GitHub 上，分类放在Issues和不同的仓库文件夹中。

喜欢本站的话按 Ctrl + D 加入收藏夹吧 (⊙ω⊙)

联系我

你可以通过以下几种方式联系到我。

为了减少被询问重复问题的次数，个人建议:

1.询问之前先看一下评论区是否已经有类似的问题。
2.与文章相关的问题直接在文章下面评论。
3.需要贴大量代码的内容在GitHub 提交Issues 。
4.问题描述尽量清晰明了。

交流群

QQ群：612310796 微信群：加我个人微信 GcsSloop，备注加群。

我活动的平台

| GitHub | 微博 | 掘金 | 简书 | 知乎 | CSDN |