开源 on 土土哥的技术 Blog

开源项目 Claude Code Notifier Plus：让 Claude Code 真正需要你时再提醒你

Sun, 12 Jul 2026 16:30:00 +0000

前言

最近这段时间用 Claude Code 比较多，慢慢发现一个很实际的问题：AI 写代码的时候人不应该一直盯着它。

比如我让它跑一个重构任务，然后切到浏览器查资料、看文档，或者去另一个项目里继续处理事情。几分钟后切回来，发现它早就停在权限确认那里了；再或者任务已经结束，但我完全不知道。项目窗口一多，这种反复切换就更明显了。

所以我写了一个小工具：Claude Code Notifier Plus。它的目标很简单：当 Claude Code 需要我注意时，用系统通知提醒我，并且点击通知能回到对应的 VS Code 窗口或终端窗口。

Github: https://github.com/zekunyan/claude-code-notifier-plus

为什么还要再做一个通知插件

Claude Code 本身有 Hook 机制，理论上我们可以监听通知事件，然后调用系统通知工具即可。最开始我也是这么想的。

但实际用下来有个坑：在 VS Code 扩展模式下，依赖 Notification hook 的方式并不可靠。Claude Code 的 VS Code 扩展会在自己的 webview 内部处理一部分交互，很多 CLI 模式下可用的通知逻辑，到了 VS Code 里就会悄悄失效。

所以这个插件没有继续依赖单一的 Notification hook，而是直接注册更具体的事件：

场景	Claude Code Hook
请求工具权限	`PermissionRequest`
需要用户确认/回答	`Elicitation`
主任务结束	`Stop`
Subagent 结束	`SubagentStop`

这样 CLI 和 VS Code 扩展模式都能覆盖到。通知的触发条件也更清楚：不是“任何通知都弹一下”，而是围绕我真正需要回去处理的几个节点。

功能点

当前版本是 1.5.0，主要能力如下：

双模式支持：终端里的 Claude Code、VS Code 扩展里的 Claude Code 都能触发。
纯 CLI fallback：即使 VS Code 没有启动，也可以直接发系统通知。
点击跳转：macOS 上配合 terminal-notifier，点击通知可以跳回对应 VS Code 项目窗口，或者 Terminal / iTerm2 / Warp 等终端窗口。
任务上下文：通知里会带项目名和任务摘要，不用靠猜是哪一个窗口。
多实例安全：多个 VS Code 窗口同时运行时，通过 marker、lock、去重逻辑避免重复弹。
焦点感知和延迟通知：VS Code 已经在前台时可以不弹，也可以设置延迟，让 VS Code 内部 popup 有机会先被手动取消。
选中代码发送到 Claude Code：选中代码后可以通过右键、快捷键、编辑器按钮，把 @file#line 引用插入 Claude Code 输入框。

快速安装

VS Code 扩展商店搜索 Claude Code Notifier Plus，或者命令行安装：

code --install-extension tutuge.claude-code-notifier-plus

如果在 macOS 上希望支持点击通知后跳转到准确窗口，推荐安装：

brew install terminal-notifier

还需要给 terminal-notifier 一次辅助功能权限：

系统设置 -> 隐私与安全性 -> 辅助功能 -> 开启 terminal-notifier

这个权限的作用不是读取内容，而是允许它把对应窗口 raise 到前台。没有这个权限时，点击通知通常只能激活 App，不能精确切到某个项目窗口。

整体架构

先看整体流程：

实现上拆成几块：

extension.js：VS Code 扩展入口，负责安装 hook、监听 pipe 文件、读取配置、发通知。
hooks/notify.js：真正被 Claude Code hook 调用的脚本，负责把不同事件整理成统一 payload。
lib/hook-installer.js：自动修改 ~/.claude/settings.json，注册事件 hook。
lib/system-notification.js：封装 macOS / Windows / Linux 系统通知，以及 macOS 上的点击跳转。
lib/payload.js：解析 payload、过滤事件类型。

简单来说，Claude Code 事件先进入 notify.js，再写入一个固定文件；VS Code 扩展监听这个文件，最后根据配置决定要不要发系统通知。

这个设计看起来多绕了一层，但它解决了一个实际问题：hook 脚本和 VS Code 扩展不在同一个进程里。hook 是 Claude Code 启动的 Node 进程，扩展运行在 VS Code extension host 里，两边需要一个足够简单、跨环境稳定的通信方式。

自动注册 Hook

插件启动时会把 hook 写到 ~/.claude/settings.json。核心逻辑大概是这样：

const VSCODE_HOOK_EVENTS = [
 'PermissionRequest',
 'Elicitation',
 'Stop',
 'SubagentStop',
];

function buildHookEntry(notifyScriptPath, options) {
 return {
 type: 'command',
 command: `node "${notifyScriptPath}" # claude-code-notifier-plus`,
 ...options,
 };
}

这里有两个细节：

hook entry 里带了一个 sentinel：# claude-code-notifier-plus。
每次安装前会先清理旧的 managed hook，再写入新的 hook。

为什么要这么做？因为用户自己的 settings.json 里可能已经有别的 hook，插件不能粗暴覆盖整个 hooks 配置。sentinel 的作用就是只识别自己管理的那一段：

function isManaged(hookEntry) {
 return Array.isArray(hookEntry.hooks) &&
 hookEntry.hooks.some((h) =>
 typeof h.command === 'string' && h.command.includes(SENTINEL)
 );
}

这样后续升级、路径变化、卸载时，都可以只处理插件自己的 hook，尽量不影响用户已有配置。这个地方是写工具类扩展时很容易忽略的：自动化配置要可回收、可重复执行、不能污染用户配置。

Payload 归一

Claude Code 传给 hook 的数据不应该直接透传到通知层。不同事件的数据结构不一样，通知层也不需要知道所有细节，所以 notify.js 会先做一次归一：

const EVENT_MAP = {
 PermissionRequest: (data) => ({
 event: 'permission_prompt',
 text: `🔐 Requesting permission: ${data.tool_name || 'a tool'}`,
 }),
 Elicitation: () => ({
 event: 'elicitation_dialog',
 text: '❓ Claude has a question for you',
 }),
 Stop: () => ({
 event: 'idle_prompt',
 text: '✅ Task completed',
 }),
 SubagentStop: () => ({
 event: 'subagent_stop',
 text: '🤖 Subagent finished',
 }),
};

最终写给扩展侧的是统一格式：

{
 event,
 text,
 project,
 taskTitle,
 cwd,
 termBundleId,
 ts: Date.now()
}

其中 project 来自 cwd 的目录名，taskTitle 会从 transcript 里取第一条用户消息并截断。这样通知里就不是只有一句“任务完成”，而是能看到类似：

📂 MyBlog · 💬 写一篇 Claude Code Notifier Plus 的文章
✅ 任务完成

项目窗口一多，这个上下文非常重要。否则通知弹出来以后，还要自己回忆“这是哪个任务”，体验就差很多。

Pipe、Marker 和 Lock

扩展和 hook 之间用了三个文件：

const CLAUDE_DIR = path.join(os.homedir(), '.claude');
const NOTIFY_FILE = path.join(CLAUDE_DIR, 'notify-plus.pipe');
const MARKER_FILE = path.join(CLAUDE_DIR, 'notify-plus.active');

notify-plus.pipe 不是严格意义上的 Unix pipe，而是一个固定路径的普通文件。hook 把 JSON payload 写进去，扩展用 fs.watch 监听变化：

fileWatcher = fs.watch(NOTIFY_FILE, () => {
 handleNotification();
});

如果 fs.watch 不可用，再 fallback 到 fs.watchFile：

fs.watchFile(NOTIFY_FILE, { interval: 500 }, (curr, prev) => {
 if (curr.mtimeMs > prev.mtimeMs) handleNotification();
});

notify-plus.active 用来记录当前活着的 VS Code extension host PID。hook 运行时会检查这个文件，如果发现扩展没有启动，就直接走 CLI fallback 发通知：

function isExtensionActive() {
 const pids = content.split('\n').filter(Boolean).map(Number);
 return pids.some(pid => {
 try {
 process.kill(pid, 0);
 return true;
 } catch (_) {
 return false;
 }
 });
}

还有一个 lock 文件：notify-plus.pipe.lock。多个 VS Code 窗口都可能监听同一个 pipe，如果没有 lock，同一条 payload 可能被多个窗口同时读到并弹多次。所以扩展处理通知前会先抢锁：

function acquireLock() {
 const lockFile = NOTIFY_FILE + '.lock';
 const fd = fs.openSync(lockFile, 'wx');
 fs.closeSync(fd);
 return true;
}

这里用的是 wx，也就是文件不存在时才创建成功。这个方式很朴素，但足够处理“多个扩展进程同时抢同一条通知”的问题。

另外扩展里还有一个 2 秒窗口的去重：

function isDuplicate(event, text) {
 const key = `${event}:${text}`;
 const now = Date.now();
 if (key === lastNotifKey && now - lastNotifTime < 2000) return true;
 lastNotifKey = key;
 lastNotifTime = now;
 return false;
}

Lock 解决跨窗口竞争，dedup 解决短时间内同一事件重复触发。两个点关注的问题不一样，都需要有。

CLI 和 VS Code 的区分

点击通知要跳回哪里？这个问题比“发一条通知”复杂。

如果 Claude Code 跑在 VS Code 扩展里，点击通知应该回到 VS Code 项目窗口。如果 Claude Code 跑在 iTerm2 或 Warp 里，点击通知应该回到对应终端。最麻烦的是：VS Code 里也可能有 terminal，进程树判断很容易误判。

所以 hook 里优先检查 VSCODE_PID：

const isVSCode = !!process.env.VSCODE_PID ||
 process.env.TERM_PROGRAM === 'vscode';

const detectedTermBundleId = isVSCode
 ? ''
 : (getTerminalBundleId() || '');

如果是 VS Code 环境，就不再尝试检测终端，避免把 VS Code 内部 terminal 误认为外部终端。只有纯 CLI 场景，才去看 TERM_PROGRAM、LC_TERMINAL，再不行就沿进程树往上找：

if (/^Terminal$/.test(comm)) return 'com.apple.Terminal';
if (/iTerm/i.test(comm)) return 'com.googlecode.iterm2';
if (/[Ww]arp/.test(comm)) return 'dev.warp.Warp-Stable';

这个判断并不是追求覆盖所有终端，而是优先保证主流场景不要跳错。工具类插件里，“不支持某些边缘终端”通常比“跳到错误窗口”更容易接受。

macOS 点击跳转

macOS 普通 osascript display notification 能发通知，但点击行为不好控制。所以增强模式下使用 terminal-notifier。

发通知时会带上 -activate 和 -execute：

const args = [
 '-title', '✨ Claude Code',
 '-message', safe,
 '-activate', activateBundleId,
 '-group', groupId,
];

args.push('-execute', `${executeScript}; ${removeCmd}`);

-activate 负责激活 App，-execute 负责进一步执行 AppleScript，把具体窗口 raise 到前台。VS Code 场景下会按窗口标题匹配项目名：

set wins to every window whose title contains "MyBlog"
if (count of wins) > 0 then
 perform action "AXRaise" of item 1 of wins
end if

这个实现依赖辅助功能权限，所以插件第一次启动时会提示用户授权。没有授权也不是完全不可用，只是从“跳到具体项目窗口”降级成“激活 VS Code / 终端 App”。

另外通知里带了 groupId，点击后会执行：

terminal-notifier -remove 'claude-notif-...'

这样点完通知以后，通知中心里不会一直堆着旧消息。这个细节对高频使用来说挺重要，不然一天跑下来通知中心会很乱。

选中代码发送到 Claude Code

除了通知之外，插件还加了一个小功能：把选中的代码快速发给 Claude Code。

入口有几个：

编辑器右上角按钮。
右键菜单。
Lightbulb code action。
快捷键 Cmd+Shift+I / Ctrl+Shift+I。
资源管理器里右键某个文件。

实现上并没有重新发明一套与 Claude Code webview 通信的协议，而是复用 Claude Code 扩展已有的命令：

await vscode.commands.executeCommand('claude-vscode.insertAtMention');

如果 Claude Code 面板还没打开，就先打开最近的 Claude Code，再插入：

try {
 await vscode.commands.executeCommand('claude-vscode.insertAtMention');
} catch {
 await vscode.commands.executeCommand('claude-vscode.editor.openLast');
 await vscode.commands.executeCommand('claude-vscode.insertAtMention');
}

这个功能看起来和通知没什么关系，但实际工作流里很顺手：选中一段代码，按快捷键，Claude Code 输入框里就会出现 @file#line-range 引用。它拿到的是文件引用，而不是单纯复制文本，所以后续还能基于完整上下文继续读文件。

配置项

目前配置都放在 claudeCodeNotifierPlus.* 下：

{
 "claudeCodeNotifierPlus.notifyOnPermissionRequest": true,
 "claudeCodeNotifierPlus.notifyOnQuestion": true,
 "claudeCodeNotifierPlus.notifyOnTaskComplete": true,
 "claudeCodeNotifierPlus.notifyOnSubagentStop": false,
 "claudeCodeNotifierPlus.systemNotification": true,
 "claudeCodeNotifierPlus.sound": false,
 "claudeCodeNotifierPlus.notificationDelay": 0,
 "claudeCodeNotifierPlus.showVSCodePopup": false,
 "claudeCodeNotifierPlus.clickToFocus": "window",
 "claudeCodeNotifierPlus.suppressWhenFocused": false
}

这里默认不开 subagent_stop，是因为 subagent 在复杂任务里可能比较频繁，如果每个子任务完成都弹一下，会比较吵。默认只提醒主流程真正需要注意的事件。

notificationDelay 这个配置也比较实用。比如你同时打开了 VS Code popup 和系统通知，可以设置几秒延迟；如果你在这几秒里手动点掉 VS Code popup，就取消系统通知，避免重复打扰。

总结

Claude Code Notifier Plus 本质上不是一个复杂项目，它解决的是一个很具体的效率问题：让 Claude Code 在需要人介入时把我叫回来，而不是让我一直盯着它。

这次实现里我自己比较关注几个点：

不依赖单一 Notification hook，而是监听更明确的事件。
hook 和 VS Code extension host 之间用固定文件通信，简单、可调试、跨环境稳定。
CLI 和 VS Code 场景分开处理，避免点击通知跳错窗口。
自动修改用户配置时，用 sentinel 标记自己的内容，做到可重复安装和可清理。
多窗口场景下用 marker、lock、dedup 处理重复通知。

总的来说，AI Coding 工具越来越强以后，工程师的工作方式也会跟着变化。以前我们关注的是“怎么让工具更聪明”，现在也要关注“怎么让工具在合适的时候打断我”。打断太少会错过确认，打断太多又会变成噪音。这个插件就是在这个小问题上的一次实践。

参考

全新开源项目 TTGRefresh：一个低侵入、高定制的刷新组件

Fri, 10 Jul 2026 02:15:00 +0000

前言

这次是一个全新的项目：TTGRefresh。

iOS 里下拉刷新、上拉加载更多是非常常见的需求。自己写并不难，但真正放到项目里以后，会慢慢遇到一些细节：contentInset 怎么恢复、刷新和加载更多能不能同时触发、异步任务结束时 UI 怎么收起、列表内容不满一屏时 footer 怎么处理、想换一个动画样式是不是要改很多业务代码。

TTGRefresh 的目标就是把这些细节收拢起来，同时保持 API 尽量轻：通过一个 scrollView.ttg 命名空间，把 header refresh、footer refresh、infinite load、默认 UI、路径动画和自定义 View 都接进去。

Github: https://github.com/zekunyan/TTGRefresh

项目特点

TTGRefresh 0.1.0 目前是第一个版本，我希望它一开始就把方向定清楚：

极简 API：常用场景一两行代码完成。
低侵入性：不需要替换 UITableView / UICollectionView，只通过 scrollView.ttg 扩展安装能力。
高度可定制：默认文字 UI、20 种内置 path effect、或者完全自定义 UIView 都可以接入。
状态机明确：header 和 footer 都有独立状态，刷新、加载、结束、无更多数据都可控。
异步友好：支持 callback 和 async/await，并且可配置异步结束后自动收起。
避免重复触发：内部有 activity coordinator，默认拦截重复刷新、加载更多互相打架这类问题。
开箱即用动画样式：内置 20 个路径动画样式，先能用、再定制。✨

快速使用

最常见的下拉刷新：

import TTGRefresh

tableView.ttg.addHeaderRefresh {
 await viewModel.reload()
}

上拉加载更多：

tableView.ttg.addFooterRefresh {
 await viewModel.loadNextPage()
}

tableView.ttg.endFooterRefreshingWithNoMoreData()
tableView.ttg.resetFooterNoMoreData()

如果是 feed 流，希望滚动接近底部时自动加载下一页：

collectionView.ttg.addInfiniteLoad(preloadOffset: 180) {
 await viewModel.loadNextPage()
}

这个 API 的重点是 scrollView.ttg。它不会要求你换一个列表基类，也不会把刷新逻辑藏到 ViewController 之外。它只是给已有的 UIScrollView 增加一个很薄的入口，业务代码仍然围绕原本的 tableView / collectionView 写。

Programmatic Control

刷新控件不能只响应手势，很多页面会在首次进入时自动刷新，或者在筛选条件变化后主动重新加载。这类入口也走同一套状态机：

tableView.ttg.triggerRefresh()
tableView.ttg.triggerLoadMore()

tableView.ttg.beginHeaderRefreshing(animated: true, triggerAction: true)
tableView.ttg.beginFooterRefreshing(animated: true, triggerAction: true)

tableView.ttg.endHeaderRefreshing()
tableView.ttg.endFooterRefreshing()

这样手动触发和用户手势触发的表现是一致的：动画、状态、回调、防重入都走同一条路径。这个地方如果分开写，后面很容易出现“首次加载正常，手动下拉又是另一套状态”的问题。

内置动画样式

TTGRefresh 内置了 20 种 path effect 样式，比如 auroraWave、pulseCircuit、quantumKnot、rocketOrbit 等。每个样式都可以同时作为 refresh header、pull load-more footer 或 infinite-load footer。

tableView.ttg.addPathEffectHeaderRefresh(style: .auroraWave) {
 await viewModel.reload()
}

tableView.ttg.addPathEffectFooterRefresh(style: .rocketOrbit) {
 await viewModel.loadNextPage()
}

collectionView.ttg.addPathEffectInfiniteLoad(style: .pulseCircuit, preloadOffset: 160) {
 await viewModel.loadNextPage()
}

这些内置样式不是为了让每个项目都用花哨动画，而是给组件提供一个足够完整的默认能力：普通工具型 App 可以用默认文字 UI，内容型或品牌型 App 可以快速挑一个合适的动画，再用 template 调整颜色、高度、速度、线宽。

let template = TTGRefreshPathEffectTemplate(
 style: .quantumKnot,
 headerPreferredHeight: 120,
 footerPreferredHeight: 82,
 footerContentWidth: 300,
 colors: [.systemCyan, .systemPurple],
 animationSpeed: 1.2,
 lineWidthScale: 1.1
)

tableView.ttg.addPathEffectHeaderRefresh(template: template) {
 await viewModel.reload()
}

完全自定义 View

如果内置样式不够，任意 UIView 都可以作为 header 或 footer，只要实现一个很小的协议。比如自定义 header：

final class CustomHeaderView: UIView, TTGRefreshHeaderContentView {
 var preferredHeight: CGFloat { 88 }
 var triggerHeight: CGFloat { 72 }

 func refreshHeaderDidChange(state: TTGRefreshHeaderState) {
 switch state {
 case .idle:
 break
 case .pulling(let progress):
 updatePullProgress(progress)
 case .willRefresh:
 showReleaseState()
 case .refreshing:
 startLoadingAnimation()
 case .ending:
 stopLoadingAnimation()
 }
 }

 func refreshHeaderDidUpdate(progress: CGFloat) {
 updatePullProgress(progress)
 }
}

tableView.ttg.addHeaderRefresh(contentView: CustomHeaderView()) {
 await viewModel.reload()
}

库只规定状态协议，不规定你的 UI 长什么样。这样对宿主页面的侵入就会低很多：页面不需要知道 header 内部动画怎么画，header 也不需要知道业务怎么加载数据。

架构

内部大致分成几块：

UIScrollView+TTGRefresh.swift：通过 associated object 安装 header/footer，提供 scrollView.ttg 入口。
TTGRefreshHeader / TTGRefreshFooter：负责 scroll observation、状态变化、触发条件和结束动画。
TTGRefreshActivityCoordinator：协调 header/footer，避免重复任务和交叉触发。
TTGRefreshInsetStore：记录和恢复 inset，处理 contentInset / overlay 模式。
TTGRefreshDefaultHeaderView / TTGRefreshDefaultFooterView：默认文字 UI。
TTGRefreshPathEffectStyle：内置路径动画样式和 template。

这里我刻意把“运行时行为”和“展示内容”拆开。刷新控件最容易变复杂的地方，就是 scroll 状态、inset、动画、业务回调混在一个类里。拆开之后，默认 UI、path effect、自定义 View 都能走同一个状态机。

总结

TTGRefresh 目前是 0.1.0，但它不是一个只做最小 Demo 的项目。它一开始就希望把 API、状态机、自定义能力和内置动画都放到一个相对完整的结构里。

我自己最看重的几个点是：API 足够简单、对宿主 UI 低侵入、定制能力足够强、内置样式开箱即用。后面如果继续扩展，也应该围绕这几个原则来做，而不是把它做成一个很重、很难接入的列表框架。

老项目大升级系列 - TTGTagCollectionView：Swift-first 的标签布局控件更新

Wed, 08 Jul 2026 02:00:00 +0000

前言

TTGTagCollectionView 是我很早之前写的标签布局控件。最开始的目标很简单：项目里总是要做“标签云”、“筛选项”、“兴趣标签”这种 UI，不想每次都重新计算换行和选中状态，所以把这块抽出来做了一个库。

这次整理到了 3.3.0，变化就不只是补几个属性了，而是把它重新整理成了一个 Swift-first、Objective-C 仍然可用、布局和视图分离 的版本。简单来说，老项目能继续用，新项目也可以更自然地接入 Swift / SPM / AutoLayout。

Github: https://github.com/zekunyan/TTGTagCollectionView

更新

这次 3.3.0 我自己比较关心的是下面这些点：

Swift-first：核心源码迁移到 Swift，Package product 为 TTGTags，同时保留 Objective-C 兼容命名。
模型化的文字标签：TextTag 拆成 content、style、selectedStyle、attachment，外部更容易管理状态。
更强的布局能力：垂直换行、水平滚动、多行限制、6 种 alignment、水平分布和垂直对齐都集中到了布局层。
AutoLayout 友好：支持 intrinsicContentSize、preferredMaxLayoutWidth，放到 StackView、自适应 Cell、表单里更省心。
性能更可控：文字测量缓存和纯布局缓存拆出来，密集标签列表不用每次都全量重新算。
交互补齐：除了点击和选中，还加了滑动选择、长按拖拽排序、拖到删除区域等常见需求。

快速使用

现在的使用方式更像“先构造一个 tag 模型，再交给 collection view 布局”：

import TTGTags

let tagView = TextTagCollectionView()
tagView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(tagView)

let content = TextTagStringContent(text: "Swift")
content.textFont = .boldSystemFont(ofSize: 14)
content.textColor = .white

let style = TextTagStyle()
style.enableGradientBackground = true
style.gradientBackgroundStartColor = .systemBlue
style.gradientBackgroundEndColor = .systemPurple
style.cornerRadius = 12
style.extraSpace = CGSize(width: 14, height: 8)

let tag = TextTag(content: content, style: style)
tagView.add(tag: tag)
tagView.reload()

如果只做简单文字标签，这个模型看起来比以前多了一层，但好处是后面扩展不会把 TextTagCollectionView 自己撑得越来越大。文字、样式、选中样式、附件数据各管各的，调用方也更容易做 diff、缓存或者复用。

样式更新

以前标签样式基本是一些直接挂在 View 上的属性。现在统一放到了 TextTagStyle：

let selectedStyle = TextTagStyle()
selectedStyle.backgroundColor = .systemOrange
selectedStyle.cornerRadius = 12
selectedStyle.extraSpace = CGSize(width: 14, height: 8)

tag.selectedStyle = selectedStyle
tagView.selectionLimit = 3

TextTagStyle 里面包含背景色、渐变背景、圆角、边框、阴影、padding、最大/最小/固定宽高等属性。这个设计的重点不是属性数量，而是 每个 Tag 可以有自己的 style，不再只能让整个 collection 共享一套样式。

布局层拆出来

这次重构里比较重要的一点，是把布局计算抽成了 TagCollectionLayout。它接收 tag sizes、滚动方向、alignment、spacing、inset、容器宽高等输入，然后输出每个 tag 的 frame 和最终 contentSize。

这样做有几个好处：

视图层只负责把 frame 应用到子 view 上，代码职责更清楚。
布局计算可以单独写单元测试，不需要依赖 UIKit 交互过程。
对相同输入可以做布局缓存，避免频繁刷新时重复计算。

比如下面这个配置，可以从普通换行标签切到水平滚动的筛选条：

tagView.alignment = .fillByExpandingWidth
tagView.horizontalSpacing = 8
tagView.verticalSpacing = 8
tagView.contentInset = UIEdgeInsets(top: 12, left: 12, bottom: 12, right: 12)

tagView.scrollDirection = .horizontal
tagView.numberOfLines = 2
tagView.showsHorizontalScrollIndicator = false

tagView.reload()

交互能力

标签控件经常一开始只是展示，后来就会慢慢长出“多选”、“滑动选择”、“排序”、“删除”之类的需求。3.3.0 这次把这些常用交互也补齐了一些：

tagView.enableTagSelection = true
tagView.enableSwipeSelection = true
tagView.enableTagReordering = true
tagView.enableDragToDelete = true
tagView.selectionLimit = 3

对应的 delegate 里可以拦截点击、滑动选择、移动、删除：

func textTagCollectionView(_ collectionView: TextTagCollectionView,
 canTapTag tag: TextTag,
 at index: Int) -> Bool {
 true
}

func textTagCollectionView(_ collectionView: TextTagCollectionView,
 didMoveTag tag: TextTag,
 fromIndex: Int,
 toIndex: Int) {
 print("move", fromIndex, toIndex)
}

这类功能放在库里并不是为了替业务层做决定，而是把手势、快照、自动滚动、frame 重排这些重复工作处理掉。业务层只需要决定“能不能选”、“能不能删”、“移动后数据源怎么更新”。

架构

从架构上看，新的版本大致分成几块：

TextTag / TextTagContent / TextTagStyle：描述标签数据和外观。
TextTagCollectionView：文字标签的高层封装，处理交互和状态。
TagCollectionView：通用自定义 View 标签容器。
TagCollectionLayout：纯布局计算。
TextTagComponentView：负责最终渲染，包括渐变、圆角、边框、阴影等。

这个拆法比以前多了几个类型，但每个类型的职责更窄。后续如果继续加 SwiftUI 包装、自定义内容、测试用例，也不会都堆到一个类里。

总结

TTGTagCollectionView 3.3.0 更像是一次“把老项目重新整理成现代 iOS 组件”的更新。它保留了最初“简单显示标签”的入口，也补上了 Swift、SPM、AutoLayout、缓存、交互和 Objective-C 兼容这些实际项目里会遇到的问题。

如果项目里只是几个固定标签，自己写当然也可以；但如果标签数量多、样式多、还要放在 Cell 或筛选页里反复复用，用一个专门的布局控件会省掉不少琐碎工作。嗯，这也是这个库一开始存在的原因。

老项目大升级系列 - TTGSnackbar：从简单提示条到现代消息反馈组件

Mon, 06 Jul 2026 02:05:00 +0000

前言

TTGSnackbar 最早只是我用 Swift 写的一个 Android Snackbar 风格提示条：显示一段文案，带一个 Action，几秒后自动消失。

这次整理到 2.0.0，目标变成了一个更完整的 iOS 消息反馈组件：不仅能显示顶部/底部消息，还要支持语义样式、队列管理、自定义 View、Swift concurrency、无障碍、触觉反馈和现代 Apple 平台要求。

Github: https://github.com/zekunyan/TTGSnackbar

更新

这次 2.0.0 可以理解成几个方向的补齐：

平台升级：当前开发目标为 Swift 5.9、Xcode 15+、iOS 16.0+。
语义样式：内置 .default、.info、.success、.warning、.error、.loading。
配置对象：新增 TTGSnackbarConfiguration，更适合现代 Swift 调用。
Swift Concurrency：可以 await 用户点击、滑动、dismiss、展示失败等结果。
队列管理：TTGSnackbarManager 支持排队、替换当前、相同消息去重。
体验细节：Dynamic Type、VoiceOver、Reduce Motion、haptics、生命周期暂停/恢复计时器。
自定义能力：支持自定义内容 View，也可以放到自定义容器里展示。

快速使用

最简单的用法还是没有变：

import TTGSnackbar

let snackbar = TTGSnackbar(message: "TTGSnackbar!", duration: .short)
snackbar.show()

如果消息需要一个恢复入口，比如删除文件后的 Undo：

let snackbar = TTGSnackbar(
 message: "File deleted",
 duration: .middle,
 actionText: "Undo"
) { snackbar in
 restoreFile()
 snackbar.dismiss()
}

snackbar.show()

这个 API 继续保留，是为了兼容老项目，也因为它确实足够直接。对一个提示控件来说，简单场景不应该被复杂 API 绑架。

语义样式

以前做不同状态的提示，通常是自己设置背景色、文字色、icon。写多了之后就会发现，业务里其实反复出现的是几类固定语义：成功、警告、错误、加载中。

所以新版加了 TTGSnackbarStyle：

let snackbar = TTGSnackbar(message: "Saved successfully", duration: .middle)
snackbar.style = .success
snackbar.show()

加载中的场景也可以直接用 .loading，配合 .forever 手动结束：

let snackbar = TTGSnackbar(message: "Uploading...", duration: .forever)
snackbar.style = .loading
snackbar.actionText = "Cancel"
snackbar.actionBlock = { snackbar in
 cancelUpload()
 snackbar.dismiss()
}
snackbar.show()

Configuration API

属性式配置比较直观，但是当参数多起来以后，会出现“创建对象、设置一堆属性、最后 show”的散落代码。2.0.0 里增加了 TTGSnackbarConfiguration，把一次展示需要的信息收拢到一个 value object：

let snackbar = TTGSnackbar(configuration: .init(
 message: "File deleted",
 duration: .long,
 style: .warning,
 actionText: "Undo",
 actionBlock: { snackbar in
 undoDelete()
 snackbar.dismiss()
 }
))

snackbar.show()

这不是为了替代旧 API，而是给复杂一点的调用场景一个更稳定的入口。比如产品里做统一消息中心、错误处理器、网络状态提示时，用 configuration 传递会清楚很多。

async / await

Snackbar 其实是一个临时 UI，但它经常和业务决策有关：用户点了 Undo 还是直接忽略？展示失败要不要降级？被队列丢弃算不算完成？

新版可以直接等待结果：

let result = await TTGSnackbar.show(configuration: .init(
 message: "File deleted",
 duration: .long,
 style: .warning,
 actionText: "Undo"
))

switch result {
case .action:
 undoDelete()
case .dismissed:
 break
case .dropped:
 print("A manager policy dropped the snackbar")
case .failedToPresent:
 print("No window or container was available")
default:
 break
}

这块实现上用的是 continuation，把 action、second action、tap、swipe、dismiss、manager drop、presentation failure 都统一成 TTGSnackbarResult。调用方不用再在几个 block 之间跳来跳去，读起来会顺很多。

自定义内容

有些提示不只是“一行文字 + 一个按钮”，比如同步状态、表单错误、网络诊断，就需要自己塞一个 View 进去：

let contentView = UIStackView()
contentView.axis = .vertical
contentView.spacing = 4
contentView.isLayoutMarginsRelativeArrangement = true
contentView.layoutMargins = UIEdgeInsets(top: 16, left: 18, bottom: 16, right: 18)

let titleLabel = UILabel()
titleLabel.text = "Custom content view"
contentView.addArrangedSubview(titleLabel)

let snackbar = TTGSnackbar(customContentView: contentView, duration: .forever)
snackbar.shouldActivateLeftAndRightMarginOnCustomContentView = true
snackbar.show()

这个设计里，库继续负责安全区域、展示位置、动画和 dismiss，内容内部怎么布局交给业务。边界要分清，不然控件会越来越像一个小页面 =。=

总结

TTGSnackbar 2.0.0 最大的变化不是“样式变好看了”，而是从一个简单提示条，补成了一个更适合现代 iOS 项目的反馈组件。

简单场景仍然可以一行 show()；复杂场景可以用 configuration、manager 和 async result 做统一管理。这个平衡比较重要：提示控件要轻，但也不能在真正接到业务流程时马上露怯。

老项目大升级系列 - TTGPuzzleVerify：拼图验证控件的 Swift 化和能力补齐

Sat, 04 Jul 2026 02:10:00 +0000

前言

TTGPuzzleVerify 是一个拼图验证控件。最早写它的时候，重点是“怎么从图片里抠出一块拼图、怎么做镂空、怎么判断拖动是否成功”。那篇旧文章里也主要讲的是 UIBezierPath、CAShapeLayer.mask 和手势判断。

这次更新到 2.0.0，核心思路没有变，但项目本身变得完整了很多：Swift 原生实现、Objective-C 可调用、SwiftUI 可包装、统一配置对象、更多验证行为、状态机、失败反馈、结果指标等等。

Github: https://github.com/zekunyan/TTGPuzzleVerify

更新

2.0.0 这次主要做了这些事情：

迁移到 Swift：核心类 TTGPuzzleVerifyView 用 Swift 实现，同时通过 @objc 暴露给 Objective-C。
统一配置：新增 TTGPuzzleVerifyConfiguration，把形状、尺寸、容差、拖动方向、自动吸附、重试次数等放到一起。
更多形状：内置 classic、square、circle，并支持自定义 UIBezierPath。
拖动方向控制：支持水平、垂直、双轴拖动。
状态机：公开 idle、dragging、verified、failed、locked 状态。
结果指标：成功/失败回调里带上偏移、耗时、拖动距离、交互次数等数据。
SwiftUI / UIKit / Objective-C 共用核心：不同集成方式不再各写一套逻辑。

快速使用

UIKit 里最基本的配置如下：

import TTGPuzzleVerify

let puzzleView = TTGPuzzleVerifyView()
puzzleView.image = UIImage(named: "background")

let configuration = TTGPuzzleVerifyConfiguration()
configuration.puzzlePattern = .circlePattern
configuration.puzzleSize = CGSize(width: 92, height: 92)
configuration.allowedAxes = .horizontal
configuration.verificationTolerance = 7

puzzleView.applyConfiguration(configuration)
puzzleView.puzzleBlankPosition = CGPoint(x: 210, y: 20)
puzzleView.resetVerification()

如果在 SwiftUI 里用，也就是包一层 UIViewRepresentable：

struct PuzzleVerifyRepresentable: UIViewRepresentable {
 @Binding var isVerified: Bool

 func makeUIView(context: Context) -> TTGPuzzleVerifyView {
 let view = TTGPuzzleVerifyView()
 view.image = UIImage(named: "background")

 let configuration = TTGPuzzleVerifyConfiguration()
 configuration.puzzlePattern = .classicPattern
 configuration.puzzleSize = CGSize(width: 86, height: 86)
 configuration.allowedAxes = .both
 configuration.autoSnapWhenWithinTolerance = true

 view.applyConfiguration(configuration)
 view.puzzleBlankPosition = CGPoint(x: 220, y: 96)
 view.verificationChangeBlock = { _, verified in
 isVerified = verified
 }
 return view
 }
}

配置对象

旧版很多属性是直接设置到 view 上的，这当然简单，但当行为越来越多以后，调用处会比较散。新版增加了 TTGPuzzleVerifyConfiguration：

let configuration = TTGPuzzleVerifyConfiguration()
configuration.puzzlePattern = .classicPattern
configuration.puzzleSize = CGSize(width: 100, height: 100)
configuration.verificationTolerance = 8
configuration.allowedAxes = .both
configuration.autoSnapWhenWithinTolerance = true
configuration.recordsTrack = true
configuration.maxRetryCount = 3

puzzleView.applyConfiguration(configuration)

这里最重要的几个参数：

puzzlePattern：拼图形状。
puzzleSize：拼图块大小。
verificationTolerance：验证容差，避免要求用户像素级对齐。
allowedAxes：限制水平、垂直或双轴拖动。
autoSnapWhenWithinTolerance：进入容差范围时自动吸附到正确位置。
maxRetryCount：失败次数达到上限后进入 locked 状态。

这个配置对象的好处是，产品层可以维护几套不同策略：比如登录页更严格，活动页更轻一点，或者调试环境打开 track 记录。

状态和结果

拼图验证不只是“成功/失败”两个布尔值。实际接到业务里以后，常常还需要知道失败了几次、拖动过程是否异常、耗时多久、偏差是多少。

新版公开了状态：

public enum TTGPuzzleVerifyState: Int {
 case idle
 case dragging
 case verified
 case failed
 case locked
}

完成时会产生 TTGPuzzleVerifyResult，里面包括：

isVerified
puzzlePosition
blankPosition
xOffset / yOffset
elapsedTime
dragDistance
interactionCount

注意，这些指标不是为了在客户端做“安全风控”，客户端本身不适合承担这个职责。它更适合用于体验分析、调试、轻量行为判断，真正的安全策略还是应该服务端参与。

实现回顾

拼图控件核心还是三个层：

背景图：完整图片。
镂空图：用 even-odd mask 从背景中抠掉拼图区域。
拼图块：同一张图片通过 puzzle path mask 裁出来。

旧文章里讲过 mask 的基本思路，这次重构后，重点是把这些能力封装成可以稳定复用的状态机：配置变化时更新 path 和 mask，拖动时更新拼图位置，结束时根据容差和轴向策略决定 verified/failed/locked。

在 API 上，customPuzzlePatternPath 仍然保留给自定义形状：

configuration.puzzlePattern = .customPattern
puzzleView.customPuzzlePatternPath = myBezierPath
puzzleView.applyConfiguration(configuration)

这样内置形状不够时，外部可以继续提供自己的 UIBezierPath，控件本身只负责把路径缩放、移动、应用到 mask 和验证逻辑里。

总结

TTGPuzzleVerify 2.0.0 更像是把一个“有趣的拼图 Demo 控件”整理成了一个能在项目里使用的组件：Swift 化、配置化、状态清晰、回调信息更完整，也兼顾了 UIKit、SwiftUI 和 Objective-C。

当然，拼图验证这种东西也要看使用场景。它可以增加交互门槛、减少误触或低成本刷操作，但不要把它当成完整安全方案。控件负责交互体验，安全策略还是要回到整体系统设计里。

老项目大升级系列 - TTGEmojiRate：让评分控件重新有表情

Thu, 02 Jul 2026 02:20:00 +0000

前言

TTGEmojiRate 是我很早之前写的一个评分控件。最初的灵感来自一个 Dribbble 动画：用户上下拖动 Emoji，表情从不开心慢慢变成开心，评分也跟着变化。相比星星评分，这种方式更像是在表达一个情绪。

这次整理到 1.0.0，不是简单把 Swift 版本升级一下，而是把原来“一个会变嘴型的表情评分”扩展成了一个更完整的情绪评分组件：范围、步进、点击评分、只读展示、表情预设、眼睛/嘴型样式、脸型、渐变、填充、自定义路径都补了进来。😊

Github: https://github.com/zekunyan/TTGEmojiRate

更新

1.0.0 的主要变化：

评分范围可配置：不再固定 0 到 5，可以设置 minimumRateValue / maximumRateValue。
步进控制：rateStep = 0 表示连续评分，也可以设置 0.5 或 1 做半星/整数评分。
交互方式增强：支持拖动、点击评分、只读展示，以及垂直/水平手势方向。
表情系统扩展：新增 expression preset、eye style、mouth style 和 accessories。
脸型和填充：支持 circle、roundedSquare、squircle、blob、capsule、shield、cloud 等脸型，以及填充和渐变。
自定义路径：可以替换内置绘制，也可以在内置 Emoji 上 overlay 自己的路径。
Objective-C 兼容：枚举和 setter 都提供了 ObjC-friendly 入口。

快速使用

基础用法还是创建一个 EmojiRateView，设置评分范围，然后监听变化：

import TTGEmojiRate

let rateView = EmojiRateView(frame: CGRect(x: 0, y: 0, width: 220, height: 220))
rateView.minimumRateValue = 0
rateView.maximumRateValue = 10
rateView.rateStep = 0

rateView.rateValueChangeCallback = { score in
 print("Score:", score)
}

view.addSubview(rateView)

如果产品需要更明确的分值，比如 1 到 5 分、每次 0.5：

rateView.minimumRateValue = 1
rateView.maximumRateValue = 5
rateView.rateStep = 0.5
rateView.setRateValue(4.5, animated: true)

这个地方要注意：连续值适合情绪输入、满意度滑动；步进值适合问卷、评价、统计。控件提供两种方式，但具体选哪个还是要看业务。

表情和样式

以前的版本主要是调整嘴巴弧度和颜色变化。新版里，表情本身变得更丰富：

rateView.setEmojiExpressionPreset(.playful)
rateView.setEmojiEyeStyle(.heart)
rateView.setEmojiMouthStyle(.openSmile)
rateView.emojiShowAccessories = true

脸型、填充和渐变也可以单独控制：

rateView.faceShape = TTGEmojiRateFaceShape.blob.rawValue
rateView.faceShapeMorphEnabled = true
rateView.faceFillEnabled = true
rateView.faceFillGradientEnabled = true
rateView.rateGradientColorEnabled = true
rateView.rateGradientColors = [
 .systemCyan,
 .systemBlue,
 .systemPurple
]

这里的设计思路还是沿用旧版：rateValue 是核心状态，表情、颜色、路径都根据当前 progress 重新计算。只是现在可参与计算的维度更多了，不再只有嘴巴和线条颜色。

自定义路径

如果内置 Emoji 不符合产品气质，可以用自定义路径替换，或者保留内置表情再叠加额外图形：

rateView.customEmojiPathMode = TTGEmojiRateCustomPathMode.replace.rawValue
rateView.customEmojiPathProvider = { rect, progress, view in
 let path = UIBezierPath()
 let faceRect = rect.insetBy(dx: 12, dy: 12)
 path.append(UIBezierPath(ovalIn: faceRect))

 let symbol = UIBezierPath()
 let midY = rect.midY + (1 - progress) * 20
 symbol.move(to: CGPoint(x: rect.minX + 54, y: midY))
 symbol.addLine(to: CGPoint(x: rect.midX, y: midY - 18))
 symbol.addLine(to: CGPoint(x: rect.maxX - 54, y: midY))
 path.append(symbol)

 return path
}

自定义路径这里我比较喜欢保留两种模式：

replace：完全替换内置绘制，适合品牌化很强的控件。
overlay：保留内置 Emoji，再叠加自己的符号、波形、徽章等。

这样可以避免“想加一点点元素，却被迫重写所有绘制”的问题。

交互方向和只读状态

旧版主要是上下拖动。这次增加了水平手势方向，也补了 tap-to-rate 和 read-only：

rateView.rateGestureDirection = TTGEmojiRateGestureDirection.horizontal.rawValue
rateView.isTapToRateEnabled = true

rateView.isReadOnly = true
rateView.setRateColor(from: .systemBlue, to: .systemGreen)

只读状态看起来是小功能，但实际挺常见：详情页展示平均分、评价列表展示用户打过的分、统计页展示结果，都不应该还能被拖动修改。把输入态和展示态放在同一个控件里，会比再写一个只读 View 简单。

实现小结

从实现上看，TTGEmojiRate 仍然是基于 CAShapeLayer 和 UIBezierPath：

拖动或点击改变 rateValue。
rateValue 归一化成 rateProgress。
根据 progress 计算嘴型、眼睛、脸型、颜色、填充和自定义路径。
更新 shape layer，并在 setRateValue(_:animated:) 里做 path/color 动画。

旧版文章里讲过 HSB 颜色插值，这个思路新版继续保留。相比直接在 RGB 上插值，HSB 更适合做“情绪从低到高”的颜色变化，因为 hue 的连续性更符合直觉。

总结

TTGEmojiRate 1.0.0 的方向是把评分从“选一个数字”变成“表达一个情绪”。它不一定适合所有评分场景，比如严肃的表单可能还是星星或分段控件更清楚；但在满意度、轻量反馈、活动页、情绪记录这类场景里，一个会动的表情会更有温度。

总的来说，这次更新把旧版的绘制思路保留下来，同时补齐了现代项目需要的可配置性和展示状态。接下来如果继续优化，我会更关注示例、无障碍和更多产品化场景里的默认参数。

在对象dealloc的后期执行Task-开源库TTGDeallocTaskHelper

Sat, 11 Mar 2017 03:11:11 +0000

前言

最近更新了下以前写的TTGDeallocTaskHelper库，功能非常简单，就是**在不改变原有代码的情况下，不用Runtime的Method Swizzling给任意对象添加任务Block，在对象dealloc的后期执行Block。**使用时：

// 给object对象添加dealloc后期要执行的任务Block
[object ttg_addDeallocTask:^(__unsafe_unretained id target, NSUInteger identifier) {
 // 执行任务
}];

Github地址：https://github.com/zekunyan/TTGDeallocTaskHelper

一张图说明原理：

库的详细原理、限制、注意事项，为什么说“后期”执行，将在下文给出。

使用案例

先给出几个使用案例。

删除Notification监听

比如你给一个第三方类对象添加了Notification通知，要在对象release后删除Notification的监听，就可以：

[object ttg_addDeallocTask:^(__unsafe_unretained SomeClass *object, NSUInteger identifier) {
	// 删除Notification监听
 [[NSNotificationCenter defaultCenter] removeObserver:object];
}];

快速Debug内存泄漏

有时你想快速验证一下一个类有没有释放，存不存在内存泄漏，比如一个ViewController返回后，就可以这么做：

[someViewController ttg_addDeallocTask:^(__unsafe_unretained UIViewController *controller, NSUInteger identifier) {
 NSLog(@"我正常释放了！哈哈哈！");
}];

事件打点

业务开发中，想监听某个事件什么时候销毁，就可以：

[someEvent ttg_addDeallocTask:^(__unsafe_unretained SomeEvent *event, NSUInteger identifier) {
 // 打点。。。
}];

是不是很方便！没有对原有的代码做任何侵入。接下来看看实现原理。

原理

在对象dealloc的时候做操作的四种办法

在对象dealloc的时候做操作，有好几种方法：

继承：这个应该是最“正常”的方法了，继承对应的类，在子类中实现dealloc方法，执行相关的任务。缺点是要修改用到类的地方为自己定义的子类
Method Swizzling：方法交换，直接自己定义新的dealloc方法实现，实现任务的调用。但是坏处是所有的对象都会被替换，侵入性太大
ISA Swizzling：动态的生成对象的子类，在子类继承方法，实现调用任务，然后设置对象的isa指针，使其指向子类。这种方法的好处是只会影响到单个对象，但是系统KVO也是用这个方法，重复设置isa的话，会有问题。
利用Associated Object：Associated Object会在对象释放时自动释放，所以可以用来“挂载”要执行的任务。

对比了上面的四种方法后，选定用Associated Object的方式实现TTGDeallocTaskHelper。

用Associated Object挂载任务

总的思路是：

给对象添加Associated Object
在Associated Object里面保存要执行的任务Block
实现Associated Object的dealloc方法，在Associated Object释放的时候，批量执行之前添加的Block

图示如下：

Associated Object - TaskModel

属性

上图中的TaskModel，就是库代码里面的TTGDeallocTaskModel类，包含三个属性：

@property (nonatomic, assign) pthread_mutex_t lock;
@property (nonatomic, strong) NSMutableDictionary *tasksDict;
@property (nonatomic, unsafe_unretained) id target;

tasksDict保存要执行的任务Block
lock锁用来保证多线程下操作tasksDict的安全性
target指向的是原对象，是unsafe_unretained的，保证始终不为nil，所以也建议不要在任务Block里面调用target的方法

添加任务Block

TTGDeallocTaskModel的tasksDict就是用来保存要执行的任务Block的，为了能在添加了以后删除，所以要以Key-Value的形式保存。 Key的类型是NSUInteger，全局自增，保证唯一。

OSAtomicIncrement64实现线程安全的自增整型Key-identifier

为了保证自增的Key的线程安全，同时平衡性能，所以此处用OSAtomicIncrement64实现原子整型数自增：

// 全局静态变量
static volatile int64_t globalIdentifier = 0;
// 自增+1，生成新的Key
NSUInteger newIdentifier = (NSUInteger)OSAtomicIncrement64(&globalIdentifier);

pthread_mutex_t保证操作字典的线程安全

为了保证NSMutableDictionary的多线程操作的安全，用pthread_mutex_t对添加Block的操作加锁：

pthread_mutex_lock(&_lock);
[_tasksDict setObject:[taskBlock copy] forKey:newIdentifierNumber];
pthread_mutex_unlock(&_lock);

删除任务Block

删除任务有两种，分别是删除一个identifier key对应的Block，和删除所有Block，同样，都要加锁保证线程安全：

// 加锁
pthread_mutex_lock(&_lock);
// 删除某个identifier对应的Block
[_tasksDict removeObjectForKey:identifierNumber];
// 或删除所有
[_tasksDict removeAllObjects];
// 解除锁
pthread_mutex_unlock(&_lock);

dealloc执行Block

最终在TaskModel被释放的时候，要批量执行所有添加的Block：

- (void)dealloc {
 // 批量执行Block
 [_tasksDict enumerateKeysAndObjectsUsingBlock:^(NSNumber *identifier, TTGDeallocTaskBlock block, BOOL * _Nonnull stop) {
 block(_target, identifier.unsignedIntegerValue);
 }];
 // 销毁锁
 pthread_mutex_destroy(&_lock);
}

给NSObject添加Category

上面是TaskModel的部分，接下来是NSObject的。

给NSObject添加Categor NSObject (TTGDeallocTaskHelper)，保存TTGDeallocTaskModel，封装调用。

封装-添加任务Block

Associated Object给对象添加TaskModel属性

用objc_setAssociatedObject实现给任意对象添加对应的TaskModel对象。

@synchronized保证多线程下TaskModel的唯一性

首次添加任务Block，会创建TaskModel，为了保证多线程下的唯一性，所以创建的部分要用@synchronized保护起来。

所以，添加任务Block的代码如下：

- (NSUInteger)ttg_addDeallocTask:(TTGDeallocTaskBlock)taskBlock {
 if (!taskBlock) {
 // block为空
 return TTGDeallocTaskIllegalIdentifier;
 }

 TTGDeallocTaskModel *model = nil;

 // 线程安全
 @synchronized (self) {
 model = objc_getAssociatedObject(self, &TTGDeallocTaskModelKey);
 if (!model) {
 // 创建
 model = [[TTGDeallocTaskModel alloc] initWithTarget:self];
 // 保存
 objc_setAssociatedObject(self, &TTGDeallocTaskModelKey, model, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
 }
 }

 // 添加新的Block
 NSUInteger newIdentifier = [model addTask:taskBlock];

 return newIdentifier;
}

封装-删除Block

直接获取当前对象的TaskModel对象，调用相应的方法即可，不再贴代码。

限制与注意事项

原理和实现说完了，接下来是库的限制与注意事项。

NSObject对象的dealloc过程

先来看看Associated Object在dealloc的什么时候释放。

NSObject对象dealloc的具体细节，sunnyxx在他的《ARC下dealloc过程及.cxx_destruct的探究》已经说的很清楚了。简单来说，就是对象dealloc的时候，最终会调用到objc_destructInstance方法上：

// 源码：objc4-706 objc-class.mm
/***********************************************************************
* objc_destructInstance
* Destroys an instance without freeing memory.
* Calls C++ destructors.
* Removes associative references.
* Returns `obj`. Does nothing if `obj` is nil.
* CoreFoundation and other clients do call this under GC.
**********************************************************************/
void *objc_destructInstance(id obj)
{
 if (obj) {
 Class isa = obj->getIsa();

 if (isa->hasCxxDtor()) {
 // 1. 释放property
 object_cxxDestruct(obj);
 }

 if (isa->instancesHaveAssociatedObjects()) {
 // 2. 删除对象的associated objects
 _object_remove_assocations(obj);
 }

 // 3. 设置所有指向此对象的weak指针为nil
 objc_clear_deallocating(obj);
 }
 return obj;
}

主要是3步：

object_cxxDestruct释放对象的ivar、property
_object_remove_assocations释放对象的Associated Object
objc_clear_deallocating重置所有指向对象的weak指针为空

不建议在Block里面调用target原对象的方法

从dealloc的流程可知，Associated Object是在第二步被释放的，这个时候，原对象的属性已被release，并且，Associated Object对象自己的dealloc不一定在什么时候会被调用（比如加到了autorelease pool里面），所以，不建议在任务Block里面调用target原对象的方法。

最后

什么时候Associated Object的释放能在对象属性release之前就好了=。=

用QuartzCode快速实现一个收藏动画

Tue, 07 Mar 2017 16:00:00 +0000

前言

“工欲善其事,必先利其器”，iOS的Core Animation非常强大，可以做出非常炫酷的动画，但是实际写起来还是比较麻烦，代码不直观，需要反复的改参数、Build、运行，所以诞生了各种动画制作工具，本文就以其中比较有名的QuartzCode为例，快速实现一个收藏功能的星星动画，最终的效果如下：

GitHub地址：https://github.com/zekunyan/QuartzCodeExample-StarAimation

QuartzCode简介

QuartzCode是一款专门用来创作iOS/macOS动画的软件，基本上把整个Core Animation框架的内容都搬到了软件里面，比如各种Layer、Mask、可以用来动画的属性，基本上跟代码是一致的，完全可以当成**“可视化动画编程”工具，而且制作以后可以导出代码+资源文件**，直接就可以在代码里面调用，方便自定义修改。

以QuartzCode 1.54.0为例，主体界面如下：

简单讲下：

A: Layers，用于动画的Layer在这里显示，先后顺序、层级和StoryBoard比较像
B: Inspector，当前选中元素，如Layer的属性编辑，基本和对应CALayer类的属性一一对应
C: Animations，动画组，可以有多个动画组，每个相互独立
D: Timeline，动画时间轴，每个Layer的动画都会在时间轴上标出
E: Keyframe inspector，动画关键帧的属性编辑，也是跟Core Animation的CAAnimation类以及子类的属性一致
F: 画布，Layer的编辑区

总体上来看，QuartzCode的界面跟XIB、StoryBoard的风格非常类似，还是很容易上手的，更多的教程看官网：http://www.quartzcodeapp.com/

整理思路

首先整理下思路：

总体上可以分成两个部分，一个是动画部分，用QuartzCode实现可视化编辑创建；另一个是功能、代码API设置部分，需要在QuartzCode最后导出的代码基础上，添加、修改，封装成简单的控件库。

QuartzCode实现动画

先来看看动画的实现，本节只把主要步骤流程列出来，详细的参数、设置，参考GitHub上的QuartzCode文件。

显示星星动画

显示星星的动画由三个部分组成，分别是实心的星星从小到大出现，空心的从大到小并透明度减小消失，最后星星四周闪动圆点、短线。

实心星星从小到大出现

拖入图片素材到中间的画布上，软件会自动创建一个layer，可以通过Inspector调整大小、位置
对Layers里面自动生成的layer重命名
点击Animations的“+”按钮，添加一个动画组，命名为show
选中当前的layer，点击Timeline下对应layer的“+”按钮，添加一个Bounds帧动画
Timeline里面的每一行对应帧动画的时间轴，可以在轴上双击、右键添加关键帧，这里默认就好，分别选中Bounds帧动画时间轴两端的关键点，在右边的Keyframe inspector里面设置Size值，起始是（0，0），结束时大小为原图大小

空心星星从大到小、透明度减小消失

基本和上一步一样，可以先隐藏实心的layer以便于观察。

添加空心的星星图片素材
命名layer
给空心的layer添加Bounds和Opacity两种动画，分别修改帧动画的起始、结束值
拖动时间轴查看效果

四周闪动短线、圆点

短线、圆点是沿着星星的四周重复排列的，所以这里可以用CAReplicatorLayer来实现，对应到QuartzCode里面就是工具栏的”Replicator”类型的Layer。CAReplicatorLayer可以根据一定的规则重复的绘制内部的子Layer，在这里只需要按照旋转角度变化就好。

点击”Replicator”，在中间的画布上拖动出一个layer，然后选择”Shape”里面的圆角矩形，在星星的一角拖动画出一个小的圆角矩形，保证star_layer在replicator layer的内部
设置replicator的属性，实现循环重复内部的layer，这里设置”instance count”为5，”Rotation”为72，也就是360/5=72，就可以实现按照星星的五个角重复绘制
最后就是添加动画，分别是Opacity透明度从0到1，Position从内到外，Transform变化大小

剩余的圆点，和短线的创建方法一致，就不再重复讲解～

至此，显示的动画就创建好了。

隐藏星星动画

再来看看隐藏星星的动画，有了上一小节的基础，隐藏星星的动画就容易多了，基本步骤都是一样的，如下：

添加一个新的动画组hide
分别设置每个layer的动画，实心的星星从大到小、同时透明度降低，空心的相反，replicator layer一直隐藏

导出动画代码

动画都实现了好了以后，就可以导出代码了。

依次File->Export Code...，就可以打开导出代码的预览界面：

右边的选项，按照需要选择，默认的基本可以满足要求，“Export Image Assets”最好选上，可以一同导出图片资源。选项的说明参见文档：http://www.quartzcodeapp.com/code-generation/code-options/

至此，最复杂的动画部分就完成了，不用写一行代码，全部可视化编辑～

调整、封装代码

接着就是封装导出的代码，方便使用。

API设计

首先是整个动画的API的设计，为了方便给任意UIView实例添加动画，所以设计成UIView的Category，如下：

// UIView+TTGStarAnimation.h
@interface UIView (TTGStarAnimation)

// 初始化动画
- (void)ttg_setupStarAnimation;

// 初始化动画，同时可以调整inset
- (void)ttg_setupStarAnimationWithEdgeInset:(UIEdgeInsets)inset;

// 显示星星动画
- (void)ttg_showStarAnimated:(BOOL)animated complete:(void (^)())complete;

// 隐藏星星动画
- (void)ttg_hideStarAnimated:(BOOL)animated complete:(void (^)())complete;

// 当前是否显示
- (BOOL)ttg_getStarIsShow;

@end

AssociatedObject保存动画View实例

QuartzCode导出的动画代码都在一个View上，所以为了在Category里给任意UIView实例添加动画View的Property、当前星星是否显示的Bool值，就要用到AssociatedObject，对应的set、get方法如下：

// UIView+TTGStarAnimation.m

- (TTGStarAnimationView *)ttg_getStarAnimationView {
 return objc_getAssociatedObject(self, &kTTGButtonStarAnimationViewKey);
}

- (BOOL)ttg_getStarIsShow {
 return [objc_getAssociatedObject(self, &kTTGButtonStarAnimationStateKey) boolValue];
}

- (void)ttg_setStarIsShow:(BOOL)isShow {
 objc_setAssociatedObject(self, &kTTGButtonStarAnimationStateKey, @(isShow), OBJC_ASSOCIATION_COPY_NONATOMIC);
}

修改QuartzCode导出的代码 - 暴露内部Layer实例

QuartzCode导出的代码，内部的动画Layer是不可见的，为了能“手动”控制动画View的实际显示状态，就要修改下导出的代码，暴露内部的动画Layer实例。

所有的Layer都在NSMutableDictionary * layers字典里面，通过key获取，给TTGStarAnimationView.h添加三个属性：

// TTGStarAnimationView.h
@interface TTGStarAnimationView : UIView
@property (nonatomic, strong, readonly) CALayer *fillLayer;
@property (nonatomic, strong, readonly) CALayer *emptyLayer;
@property (nonatomic, strong, readonly) CALayer *replicatedLayer;
// ...
@end

然后实现getter方法：

// TTGStarAnimationView.m
- (CALayer *)fillLayer {
 return _layers[@"star_animation_fill"];
}

- (CALayer *)emptyLayer {
 return _layers[@"star_animation_empty"];
}

- (CALayer *)replicatedLayer {
 return _layers[@"replicator"];
}

初始化

ttg_setupStarAnimation和ttg_setupStarAnimationWithEdgeInset:方法，用来初始化动画，包括创建TTGStarAnimationView实例，添加、保存在当前view上，设置每个动画layer的状态等操作：

// TTGStarAnimationView.m

- (void)ttg_setupStarAnimation {
 [self ttg_setupStarAnimationWithEdgeInset:UIEdgeInsetsZero];
}

- (void)ttg_setupStarAnimationWithEdgeInset:(UIEdgeInsets)inset {
 // 获取当前实例的动画starAnimationView
 TTGStarAnimationView *starAnimationView = [self ttg_getStarAnimationView];

 if (!starAnimationView) {
 // 不存在，创建新的
 starAnimationView = [[TTGStarAnimationView alloc] initWithFrame:UIEdgeInsetsInsetRect(self.bounds, inset)];
 // 设置不可接受交互事件，防止阻断父view
 starAnimationView.userInteractionEnabled = NO;
 // 设置AutoSizingMask
 starAnimationView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
 // 添加
 [self addSubview:starAnimationView];
 // AssociatedObject保存实例
 objc_setAssociatedObject(self, &kTTGButtonStarAnimationViewKey, starAnimationView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
 }

 // 移除所有动画
 [starAnimationView removeAllAnimations];

 // 设置layer的初始化状态
 starAnimationView.fillLayer.hidden = YES;
 starAnimationView.emptyLayer.hidden = NO;
 starAnimationView.replicatedLayer.hidden = YES;

 // 设置初始化状态值
 [self ttg_setStarIsShow:NO];
}

动画控制

最后就是实现动画的控制，这里比较关键的是对动画的每个Layer的控制，每个Layer的初始、最终状态都要设置，保证多次调用、无论是否执行动画，最终显示都是一致的，以显示星星为例：

// TTGStarAnimationView.m

- (void)ttg_showStarAnimated:(BOOL)animated complete:(void (^)())complete {
 // 获取当前view的动画starAnimationView实例
 TTGStarAnimationView *starAnimationView = [self ttg_getStarAnimationView];

 // 当前是hide，才执行show
 if (![self ttg_getStarIsShow]) {
 // 设置状态值
 [self ttg_setStarIsShow:YES];

 // 先移除所有动画
 [starAnimationView removeAllAnimations];

 // 设置最终状态下Layer的hidden值的Block
 void (^completionBlock)() = ^ {
 starAnimationView.fillLayer.hidden = NO;
 starAnimationView.emptyLayer.hidden = YES;
 starAnimationView.replicatedLayer.hidden = YES;

 // 执行回调
 if (complete) {
 complete();
 }
 };

 if (animated) {
 // 如果要执行动画，则设置动画前Layer的hidden值
 starAnimationView.fillLayer.hidden = NO;
 starAnimationView.emptyLayer.hidden = NO;
 starAnimationView.replicatedLayer.hidden = NO;
 // 执行动画
 [starAnimationView addShowAnimationCompletionBlock:^(BOOL finished) {
 completionBlock();
 }];
 } else {
 // 不用动画，直接执行最终状态
 completionBlock();
 }
 }
}

隐藏的代码跟显示基本一致，把各种状态、hidden的值倒过来就可以了。所有代码参见Github。

要写的代码就这么多，是不是非常简单！

总结

“工欲善其事,必先利其器”，借助各种强大的工具软件，做动画的效率简直提升几十倍～

开源项目-拼图验证控件TTGPuzzleVerify的实现

Sun, 25 Dec 2016 10:15:40 +0000

前言

最近抽空写了个拼图验证控件，用户可以通过水平、垂直，或者直接拖动拼图块，完成拼图图案，来完成验证。拼图块的形状可以自定义，默认提供了经典的拼图形状、圆形、正方形，整个拼图的图案也是支持从图片生成的。

CocoaPods: pod "TTGPuzzleVerify" Github: https://github.com/zekunyan/TTGPuzzleVerify

接下来，说说TTGPuzzleVerify的整体设计思路和实现原理。

分析

组成部分

先直观上分析一下控件的组成部分：

可以直观看出，控件应该由三个部分组成：

拼图块：就是从原图上**“抠”**出来的拼图形状的图片块
原始图片：拼图整体图案的图片
镂空背景：从原始图片上抠出拼图块以后，给用户提示用的，透明度更低的拼图块镂空背景

拆解步骤

分析完了控件的组成，现在就来梳理一下控件的整个创建、交互流程。

输入：图片、拼图形状、拼图大小、镂空的位置、拼图块的起始位置
生成拼图路径：根据拼图类型，生成对应的贝塞尔曲线
从图片抠出拼图块、镂空：有了拼图路径，就可以抠出拼图块和镂空的部分
设置位置、样式：根据参数设置拼图块的初始位置、样式，如阴影、镂空的透明度等
用户拖动：响应用户的头动手势，移动拼图块，根据坐标判断是否完成拼图
回调：用户完成拼图后，要回调，让外部响应拼图完成事件

关键技术点

从上面的步骤可以整理出来几个关键的技术点，如下：

拼图的路径生成 普通的形状，如正方形、圆形之类的还好，代码实现比较方便，但是复杂的拼图图案怎么办？

从图片上“抠出”拼图块、镂空 有了拼图的形状路径，如何从图片上抠出拼图块和镂空？

用户拖动拼图、完成拼图验证 抠出了拼图块，如何将用户的手势对应到移动拼图块，最终完成验证？

下面针对这三个点着重写下实现原理。

实现

拼图的路径生成

既然手写代码太难，那就从现有的图案生成代码。

1. 找SVG素材 既然要能随意改变大小，就要找矢量的图，Google “free svg”、“free icon”之类的，很容易就能找到免费的矢量图素材，例如TTGPuzzleVerify里面用的拼图形状就是从iconmonstr.com找来的。

2. 编辑 直接下载回来的SVG还需要调整一下，如去除背景，我是用Sketch来编辑的。

3. 生成代码 拼图的路径本质上就是拼图的轮廓，在Sketch里面把拼图SVG的背景色等颜色删除，然后就是将其转换为代码。这里可以用PaintCode plugin for Sketch，将Sketch的拼图矢量路径导出成代码。

4. 调整代码 直接生成的代码有时可能会不适用，可以人工调整下，然后就可以放到自己的类里面了：

+ (UIBezierPath *)classicPuzzlePath {
 static UIBezierPath *puzzleShape = nil;

 static dispatch_once_t onceToken;
 dispatch_once(&onceToken, ^{
 puzzleShape = [UIBezierPath bezierPath];
 [puzzleShape moveToPoint:CGPointMake(17.45, 71.16)];
 // 此处省略很多行=。=，PaintCode生成的
 [puzzleShape closePath];
 });
 return puzzleShape;
}

5. UIBezierPath拼图路径的大小、位置调整 直接导出的拼图路径的大小、位置是固定的，但是控件是要可以支持改变大小、位置的，所以，要对路径做变换，刚好UIBezierPath支持CGAffineTransform变换。

大小变换：

// 大小变换，path是生成的原始路径，_puzzleSize是传入的拼图块大小
[path applyTransform:CGAffineTransformMakeScale(_puzzleSize.width / path.bounds.size.width,
 _puzzleSize.height / path.bounds.size.height)];

位置变换：

// 位置变换，path是生成的原始路径，_puzzleBlankPosition是传入的拼图块、镂空位置
[path applyTransform:CGAffineTransformMakeTranslation(
 _puzzleBlankPosition.x - path.bounds.origin.x,
 _puzzleBlankPosition.y - path.bounds.origin.y)];

至此，拼图的路径就写好了。

从图片上“抠出”拼图块、镂空

1. 拼图块 有了UIBezierPath路径，抠出拼图块还是比较容易的，直接用CAShapeLayer来**“mask”**图片即可：

// 拼图路径
UIBezierPath *puzzlePath = [self getNewScaledPuzzledPath];

// 创建mask layer
CAShapeLayer *puzzleMaskLayer = [CAShapeLayer new];
puzzleMaskLayer.frame = self.bounds;
puzzleMaskLayer.path = puzzlePath.CGPath;

// Mask到图片imageView上
_puzzleImageView.layer.mask = puzzleMaskLayer;

效果就是：

2. 镂空图片 抠出拼图块还是很容易的，但是“镂空”怎么办？其实道理是一样的，都是mask，只不过mask的区域反过来而已。 CAShapeLayer的fillRule就可以调整“填充的规则”，此处用kCAFillRuleEvenOdd就可以了，文档的解释如下：

Specifies the even-odd winding rule. Count the total number of path crossings. If the number of crossings is even, the point is outside the path. If the number of crossings is odd, the point is inside the path and the region containing it should be filled.

理解过来就是：区域内一点，往外划一条线，经过奇数个数的交点，则点在区域内，偶数个数的交点，则在区域外。

所以，只要在拼图路径的基础上，补充最外部的边框的路径即可：

// 创建矩形边框路径
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRect:self.bounds];
// 添加拼图路径
[maskPath appendPath:[UIBezierPath bezierPathWithCGPath:puzzlePath.CGPath]];
// 设置规则
maskPath.usesEvenOddFillRule = YES;

// 创建mask的layer
CAShapeLayer *frontMaskLayer = [CAShapeLayer new];
frontMaskLayer.frame = self.bounds;
frontMaskLayer.path = maskPath.CGPath;
frontMaskLayer.fillRule = kCAFillRuleEvenOdd; // 填充规则

// 设置mask
_frontImageView.layer.mask = frontMaskLayer;

效果：

3. 镂空背景 有了拼图块、镂空，还差一块，就是镂空的“半透明背景”，其实这个“半透明背景”和拼图块是一模一样的，所以不再重复代码，唯一增加的就是设置其透明度。

4. 组合 将上面的组合到一起，就能形成最终的效果，从Reveal里面看到分层结构如下：

其实就是三张一样的图片，按照不同的mask规则做了处理，叠加起来。

用户拖动拼图、完成拼图验证

1. 拖动图片 有了上面的结构，拖动拼图的处理也就容易多了，只要移动最上层的拼图块就行了，这里直接用UIPanGestureRecognizer实现，移动的时候基于拼图的中心移动。

// 创建手势
UIPanGestureRecognizer *panGestureRecognizer = [UIPanGestureRecognizer new];
[panGestureRecognizer addTarget:self action:@selector(onPanGesture:)];
[self addGestureRecognizer:panGestureRecognizer];

// 手势处理
- (void)onPanGesture:(UIPanGestureRecognizer *)panGestureRecognizer {
 // 获取坐标
 CGPoint panLocation = [panGestureRecognizer locationInView:self];
 // 拼图中心偏移
 CGPoint position = CGPointZero;
 position.x = panLocation.x - _puzzleSize.width / 2;
 position.y = panLocation.y - _puzzleSize.height / 2;
 // 设置坐标
 [self setPuzzlePosition:position];
 // 判断、回调。。。
}

2. 验证用户的拼图是否完成 用户移动拼图时，只要判断拼图的坐标和镂空的位置是否一致就行。但是如果完全精确的判断，用户很难准确的把拼图拼对上，所以还要增加一定的**“tolerance”**，让拼图更加容易，同时暴漏出让外部设置：

@property (nonatomic, assign) CGFloat verificationTolerance; // Verification tolerance, default is 8

判断的逻辑如下：

// puzzlePosition是当前拼图块的位置，_puzzleBlankPosition是拼图镂空的位置
- (BOOL)isVerified {
 return fabsf([self puzzlePosition].x - _puzzleBlankPosition.x) <= _verificationTolerance &&
 fabsf([self puzzlePosition].y - _puzzleBlankPosition.y) <= _verificationTolerance;
}

3. 完成拼图 当用户完成拼图后，外部会得到delegate、block的回调响应，接着就可以“完成拼图验证”，对此向外提供一个方法：- (void)completeVerificationWithAnimation:(BOOL)withAnimation，调用后拼图块将会移动回镂空位置，模拟出拼图完成的效果。

至此，TTGPuzzleVerify的关键实现技术点就是这些了～

最后

嗯，圣诞节快乐！ – 2016-12-25

Swift开源Mac App - BingWallPaper

Sun, 28 Aug 2016 14:37:02 +0000

更新

2016-09-05: 新版0.3增加子Menu，整理选项；增加“History Wallpapers”打开历史图片文件夹；增加“Launch at startup”开机启动。
2016-09-03: 新版0.2.0！增加“Auto Update”选项；增加“Random”随机选择设置壁纸；修复自动更新不准的Bug。

极简的壁纸Mac App，每天自动下载最新微软Bing的每日壁纸并设置为桌面背景。

Github: https://github.com/zekunyan/TTGBingWallPaper

由来

其实最开始只是很喜欢Bing的首页的壁纸图片，然后手动下载回来做壁纸，后来发现手动太麻烦，作为一个程序员，自己动手丰衣足食！=。= 然后花了个周末写了这个超简单的Mac App。

安装

到Github的项目页面，即https://github.com/zekunyan/TTGBingWallPaper，从release里面下载最新的BingWallPaper.app.zip压缩包，解压出BingWallPaper.app，拖到Applications应用程序文件夹里面，打开即可。

开发

用Swift 2.2写的，目前唯一依赖的库是SwiftyJSON/SwiftyJSON，需要Carthage。

git clone git@github.com:zekunyan/TTGBingWallPaper.git
cd TTGBingWallPaper
carthage update
open BingWallPaper.xcodeproj
编译、安装、运行

未来

还有很多点可以做，一点一点来吧=。=

TODO

支持多国地区的Bing每日图片壁纸的获取
支持多语言
支持浏览历史图片
导出图片
…

开源项目-TTGTagCollectionView

Thu, 31 Dec 2015 13:56:04 +0000

更新

2017-02-27: 增加两种Alignment布局类型；增加点击前的回调判断；增加选中Tag上限
2016-12-25: 不再依赖UICollectionView，减少了位置刷新次数，提高性能；增加了alignment属性，可以靠左中右排列
2016-10-29: 增加Tag的阴影和ContentInset的设置，更新了Demo
2016-10-17: 增加了水平滑动；Autolayout适配；UITableViewCell例子等
2016-02-18: 修复了超长标签导致排版错误的Bug

前言

这段时间做项目的时候，总是需要显示一些“标签”样式的内容，但是又找不到用的顺手的库，所以琢磨了几天，自己实现了出来，就有了这个库：TTGTagCollectionView。如果只需要显示文字标签的话，直接使用TTGTextTagCollectionView，需要自己定义标签的话，就用TTGTagCollectionView，效果如下:

支持五种布局排版：

CocoaPods: pod "TTGTagCollectionView" Carthage: github "zekunyan/TTGTagCollectionView"

Github地址: https://github.com/zekunyan/TTGTagCollectionView

只显示文字标签 - TTGTextTagCollectionView

基本使用

只显示文字标签的话，直接用TTGTextTagCollectionView类就可以了：

TTGTextTagCollectionView *tagCollectionView = [[TTGTextTagCollectionView alloc] initWithFrame:CGRectMake(20, 20, 200, 200)];
[self.view addSubview:tagCollectionView];
[tagCollectionView addTags:@[@"TTG", @"Tag", @"collection", @"view"]];

接收点击事件 - 实现Delegate

如果想在标签被点击时得到通知，实现对应的Protocol即可，定义如下:

@protocol TTGTextTagCollectionViewDelegate <NSObject>
@optional
// 是否可以点击某个Tag
- (BOOL)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView canTapTag:(NSString *)tagText atIndex:(NSUInteger)index currentSelected:(BOOL)currentSelected;

// 点击了某个Tag
- (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView didTapTag:(NSString *)tagText atIndex:(NSUInteger)index selected:(BOOL)selected;

// 内容大小更新
- (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView updateContentSize:(CGSize)contentSize;
@end

自定义文字标签样式

如果想对标签的样式做定制，可以设置以下属性：

// 标签是否可以被选中
@property (assign, nonatomic) BOOL enableTagSelection;

// 字体
@property (strong, nonatomic) UIFont *tagTextFont;

// 文字颜色
@property (strong, nonatomic) UIColor *tagTextColor;
@property (strong, nonatomic) UIColor *tagSelectedTextColor;

// 标签背景颜色
@property (strong, nonatomic) UIColor *tagBackgroundColor;
@property (strong, nonatomic) UIColor *tagSelectedBackgroundColor;

// 圆角值
@property (assign, nonatomic) CGFloat tagCornerRadius;
@property (assign, nonatomic) CGFloat tagSelectedCornerRadius;

// 边框
@property (assign, nonatomic) CGFloat tagBorderWidth;
@property (assign, nonatomic) CGFloat tagSelectedBorderWidth;
@property (strong, nonatomic) UIColor *tagBorderColor;
@property (strong, nonatomic) UIColor *tagSelectedBorderColor;

// 阴影
@property (nonatomic, copy) UIColor *tagShadowColor; // Default is [UIColor black]
@property (nonatomic, assign) CGSize tagShadowOffset; // Default is (2, 2)
@property (nonatomic, assign) CGFloat tagShadowRadius; // Default is 2f
@property (nonatomic, assign) CGFloat tagShadowOpacity; // Default is 0.3f

// 滚动方向，默认垂直方向
@property (nonatomic, assign) TTGTagCollectionScrollDirection scrollDirection;

// 布局类型，默认靠左
@property (nonatomic, assign) TTGTagCollectionAlignment alignment;

// 行数，默认0，不限制
@property (nonatomic, assign) NSUInteger numberOfLines;

// 选中的数量限制
@property (nonatomic, assign) NSUInteger selectionLimit;

// 标签宽高的扩展值，可以理解为padding
@property (assign, nonatomic) CGSize extraSpace;

// 水平间隔
@property (assign, nonatomic) CGFloat horizontalSpacing;
// 行距
@property (assign, nonatomic) CGFloat verticalSpacing;

// 整体的Inset
@property (nonatomic, assign) UIEdgeInsets contentInset;

// 所有标签大小
@property (nonatomic, assign, readonly) CGSize contentSize;

// 是否显示滚动条
@property (nonatomic, assign) BOOL showsHorizontalScrollIndicator;
@property (nonatomic, assign) BOOL showsVerticalScrollIndicator;

增加、删除标签

// 增加一个标签
- (void)addTag:(NSString *)tag;

- (void)addTags:(NSArray <NSString *> *)tags;

/// 删除标签
- (void)removeTag:(NSString *)tag;

- (void)removeTagAtIndex:(NSUInteger)index;

- (void)removeAllTags;

在代码里控制标签的选中状态

- (void)setTagAtIndex:(NSUInteger)index selected:(BOOL)selected;

获取所有、选中、未选中标签

- (NSArray <NSString *> *)allTags;

- (NSArray <NSString *> *)allSelectedTags;

- (NSArray <NSString *> *)allNotSelectedTags;

重新加载 - Reload

用- (void)reload方法重新加载所有标签。

显示自定义的标签控件View - TTGTagCollectionView

如果想自己定义标签View，如同时显示图像、文字、按钮，可以用TTGTagCollectionView类实现。

基本要求 - 实现DataSource和Delegate

DataSource的定义如下：

@protocol TTGTagCollectionViewDataSource <NSObject>
@required
// 返回标签数量
- (NSUInteger)numberOfTagsInTagCollectionView:(TTGTagCollectionView *)tagCollectionView;

// 返回对应标签View
- (UIView *)tagCollectionView:(TTGTagCollectionView *)tagCollectionView tagViewForIndex:(NSUInteger)index;
@end

Delegate的定义如下:

@protocol TTGTagCollectionViewDelegate <NSObject>
@required
// 必须实现：返回对应的标签Size
- (CGSize)tagCollectionView:(TTGTagCollectionView *)tagCollectionView sizeForTagAtIndex:(NSUInteger)index;

@optional
// 是否可以点击Tag
- (BOOL)tagCollectionView:(TTGTagCollectionView *)tagCollectionView shouldSelectTag:(UIView *)tagView atIndex:(NSUInteger)index;

// 点击标签时回调
- (void)tagCollectionView:(TTGTagCollectionView *)tagCollectionView didSelectTag:(UIView *)tagView atIndex:(NSUInteger)index;

// 所有标签总体Size更新
- (void)tagCollectionView:(TTGTagCollectionView *)tagCollectionView updateContentSize:(CGSize)contentSize;
@end

跟UITableView的思路一致~

设置标签的行距、间隔

// 滚动方向
@property (nonatomic, assign) TTGTagCollectionScrollDirection scrollDirection;

// 布局方式，默认靠左
@property (nonatomic, assign) TTGTagCollectionAlignment alignment;

// 行数，默认0，不限制
@property (nonatomic, assign) NSUInteger numberOfLines;

// 水平间隔
@property (assign, nonatomic) CGFloat horizontalSpacing;
// 行距
@property (assign, nonatomic) CGFloat verticalSpacing;

// 整体Inset
@property (nonatomic, assign) UIEdgeInsets contentInset;

// 所有标签总体Size
@property (nonatomic, assign, readonly) CGSize contentSize;

// 是否显示滚动条
@property (nonatomic, assign) BOOL showsHorizontalScrollIndicator;
@property (nonatomic, assign) BOOL showsVerticalScrollIndicator;

重新加载 - Reload

用- (void)reload方法重新加载所有标签。

End

2015最后一天~ 新年快乐~

Swift开源项目: TTGEmojiRate的实现

Sun, 25 Oct 2015 11:32:42 +0000

前言

前段时间在Dribbble上发现了一个Rating控件的演示动画，控件以Emoji表情为基础，结合了上下滑动手势，正好最近正在深入学习iOS动画、绘图相关的知识，就尝试着用UIBezierPath实现了出来。本文就是TTGEmojiRate的实现过程。

Github: https://github.com/zekunyan/TTGEmojiRate

分析

先看看原本的效果：Rating Version A - Hoang Nguyen

可以看出来，主要的特点如下：

可以上下拖动，改变Emoji表情嘴的弧度。
拖动的时候Rate的值也会随之变化，从0到5，并且跟表情的“喜怒”相对应。
颜色也会变化，从绿色到蓝色再到红色，也对应表情的“喜怒”。

实际实现的时候，增加了眼睛元素，并且增强了自定义，如颜色的变化范围、线条的粗细等都可以设定，基本的思路还是不变的。

实现

思路

开始写代码之前，先理理思路。

拖动的时候，直接影响的应该是Rate值，然后在Rate值改变的时候刷新整个控件，刷新的时候重绘。重绘的时候，嘴、眼睛的弧度，颜色的值都要根据Rate值重新计算，如下图：

拖动改变Rate值

这个还是很容易实现的，直接重写UIView的touch相关的三个方法，在里面记录拖动在Y轴上的变化值，然后映射到Rate值上就可以了。

先声明一个CGPoint属性，用来保存手指按下时的点位置：

private var touchPoint: CGPoint? = nil

在手指移动的时候，在touchesMoved方法里面计算当前点跟上一次触摸点的Y轴上的差值，然后映射到Rate值上。

public override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
 // 获取当前触摸点
 let currentPoint = touches.first?.locationInView(self)
 // 改变Rate值
 rateValue = rateValue + Float((currentPoint!.y - touchPoint!.y) / CGRectGetHeight(self.bounds) * rateDragSensitivity)
 // 保存当前触摸点
 touchPoint = currentPoint
}

注意：

计算Y轴差值的时候，除以了当前控件的高度，这是为了保证Rate值按比例增减。
增加了一个rateDragSensitivity属性，用来调节改变Rate值的“灵敏度”

UIBezierPath - 贝塞尔曲线

控件的主要内容都是用UIBezierPath绘制出来的。网上关于UIBezierPath的讲解很多，在这里就不详细说了。

简单来说，UIBezierPath用来绘制矢量路径，是一种参数曲线，在使用的时候，只需要先设定好锚点、控制点，系统就可以根据贝塞尔曲线的算法，绘制出对应的线，并且保证锚点和对应的控制点的连线与曲线相切。

这里有一个演示绘制贝塞尔曲线过程的网站：Bézier curve

脸

脸是最简单的，就是一个圆，直接用一个方法就可以：

private func drawFaceWithRect(rect: CGRect) {
 let facePath = UIBezierPath(ovalInRect: rect)
 rateColor.setStroke()
 facePath.lineWidth = rateLineWidth // 线粗细
 facePath.stroke()
}

实际实现的时候可以加上Margin，防止线画到View的边界之外。

嘴、眼睛

先看看UIBezierPath提供的可以用来绘制曲线的方法： addCurveToPoint(_:controlPoint1:controlPoint2:)和addQuadCurveToPoint(_:controlPoint:)，如下图:

直观上来讲，嘴、眼睛的绘制跟addQuadCurveToPoint方法绘制的效果基本一致，但是这样的效果没法调整，因为只能控制唯一的一个控制点，所以还是要用addCurveToPoint方法，对称的绘制两条曲线，拼接起来，如下图：

这样的话，就可以通过调整两个控制点，来控制嘴、眼睛的弯曲宽度、形状。

以绘制嘴为例：

private func drawMouthWithRect(rect: CGRect) {
 let width = CGRectGetWidth(rect)
 let height = CGRectGetWidth(rect)

 // 左端点
 let leftPoint = CGPointMake(
 width * (1 - rateMouthWidth) / 2,
 height * (1 - rateMouthVerticalPosition))

 // 右端点
 let rightPoint = CGPointMake(
 width - leftPoint.x,
 leftPoint.y)

 // 中间点 - Y值根据当前的Rate值计算，0.3为系数
 let centerPoint = CGPointMake(
 width / 2,
 leftPoint.y + height * 0.3 * (CGFloat(rateValue) - 2.5) / 5)

 // 控制点跟中间点在X轴上的距离
 let halfLipWidth = width * rateMouthWidth * rateLipWidth / 2

 // 创建贝塞尔曲线
 let mouthPath = UIBezierPath()

 // 移动到起始点
 mouthPath.moveToPoint(leftPoint)

 // 添加左半边曲线路径
 mouthPath.addCurveToPoint(
 centerPoint,
 controlPoint1: leftPoint,
 controlPoint2: CGPointMake(centerPoint.x - halfLipWidth, centerPoint.y))

 // 添加右半边曲线路径
 mouthPath.addCurveToPoint(
 rightPoint,
 controlPoint1: CGPointMake(centerPoint.x + halfLipWidth, centerPoint.y),
 controlPoint2: rightPoint)

 // 设定样式
 mouthPath.lineCapStyle = CGLineCap.Round;
 rateColor.setStroke()
 mouthPath.lineWidth = rateLineWidth
 mouthPath.stroke()
}

说明：

所有的距离、坐标都是根据当前控件的大小计算出来的。
rateMouthWidth为嘴的宽度与整个控件宽度的比值，即相对值。
rateMouthVerticalPosition为嘴的左右两个端点的Y轴坐标值，也为相对值。
rateLipWidth为中心点的两个控制点的距离与嘴宽度的比值，也是相对值。

眼睛的绘制跟嘴原理一致，就不再说明。

颜色的渐变

Dribbble的演示中，控件的线条颜色也是会变化的，从红色到蓝色再到绿色，是连续变化的。这个时候用常见的RGB色彩模式是不好控制的，效果也不好。

所以这个时候要用HSB色彩模式

HSB 色彩模式是基于人眼的一种颜色模式。是普及型设计软件中常见的色彩模式，其中H代表色相；S代表饱和度；B代表亮度。- 百度百科

对应到UIColor类，就是下面两个方法：

// 创建UIColor
init(hue hue: CGFloat, saturation saturation: CGFloat, brightness brightness: CGFloat, alpha alpha: CGFloat)
// 获取HSB值，注意参数
func getHue(_ hue: UnsafeMutablePointer<CGFloat>, saturation saturation: UnsafeMutablePointer<CGFloat>, brightness brightness: UnsafeMutablePointer<CGFloat>, alpha alpha: UnsafeMutablePointer<CGFloat>) -> Bool

实现的时候，为了增加可定制性，控件颜色的变化范围是可以设置的，用以下属性保存：

public var rateColorRange: (from: UIColor, to: UIColor)

刷新时，就可以根据当前的Rate值，重新计算颜色的HSB和alpha值：

let rate: CGFloat = CGFloat(rateValue / 5) // Rate值归一化

self.rateColor = UIColor.init(
 hue: hueFrom + hueDelta * rate, // 色相
 saturation: saturationFrom + saturationDelta * rate, // 饱和度
 brightness: brightnessFrom + brightnessDelta * rate, // 亮度
 alpha: alphaFrom + alphaDelta * rate // 透明度
)

说明：

所有的颜色参数都是根据Rate值做线性增减。
xxxFrom、xxxDelta分别指HSB和alpha的起始值与变化范围，在设置rateColorRange时计算保存下来。

这样，颜色就能做到跟Rate值做连续的线性变化。

善于使用didSet

实现控件的时候，对外暴露了很多属性，如线的宽度rateLineWidth、嘴的宽度rateMouthWidth等。为了对这些属性做校验，并且在设置后刷新控件，就要用到didSet。

didSet在Swift里面，跟类的属性是一一绑定的，在对属性赋值后会被调用。

控件的大部分属性都做了校验、刷新，如下：

/// Mouth width. From 0.2 to 0.7.
@IBInspectable public var rateMouthWidth: CGFloat = 0.6 {
 didSet {
 // 判断上限
 if rateMouthWidth > 0.7 {
 rateMouthWidth = 0.7
 }
 // 判断下限
 if rateMouthWidth < 0.2 {
 rateMouthWidth = 0.2
 }
 // 刷新、重绘
 self.setNeedsDisplay()
 }
}

@IBDesignable、@IBInspectable

为了能在XIB、StoryBoard里面使用、编辑控件，就要用到@IBDesignable和@IBInspectable这两个关键字。

在类的前面加上@IBDesignable关键字，使IB可以预览控件：

@IBDesignable
public class EmojiRateView: UIView {
 // ...
}

在属性前面加上@IBInspectable，就可以在IB里面编辑属性，实时预览：

@IBInspectable public var rateLineWidth: CGFloat = 14 {
 // ...
}

详细的使用可以参考NSHipster上的文章：IBInspectable / IBDesignable

最后，在IB里面就是下面这样：

By the way =。= 属性名字太长，在IB里面显示不完整，咋办。。。

回调

拖动改变Rate值的时候，肯定要有回调，如下定义：

public var rateValueChangeCallback: ((newRateValue: Float) -> Void)? = nil

在rateValue的didSet里面回调：

@IBInspectable public var rateValue: Float = 2.5 {
 didSet {
 // ...
 // 回调
 self.rateValueChangeCallback?(newRateValue: rateValue)
 }
}

总结

看似简单的一个Rating控件，从构思到实现，再到完善，一点一点朝着完美去做，收获不少~

最后，Dribbble是个好地方，贝塞尔曲线好强大，XCode 7.1写Swift还是有点卡=。=

以上。

参考

Swift写的库-TTGSnackbar

Fri, 09 Oct 2015 11:49:09 +0000

更新

2016-12-25: 增加多行文本的支持，增加阴影
2016-10-20: 增加ContentInset，也就是Padding的属性；增加自定义内容View; 版本1.3.0
2016-10-17: 支持Swift3；增加的顶部Top位置动画；增加同时两个Action按钮；增加带图片icon显示
2016-03-25: 版本更新到了0.5.1，补充些说明、示例

TTGSnackbar

用Swift写了个简单的控件库：TTGSnackbar，模仿Android的Snackbar。目前更新到了版本1.3.0。支持多种动画，增强了自定义。

Github: https://github.com/zekunyan/TTGSnackbar

Gif

安装

需要Swift3, Xcode8, iOS 8+

CocoaPods

platform :ios, '8.0'
use_frameworks!

pod "TTGSnackbar"

Carthage

github "zekunyan/TTGSnackbar"

简单的使用案例

只显示文字

let snackbar = TTGSnackbar.init(message: "Message", duration: .Short)
snackbar.show()

显示文字和一个动作按钮

let snackbar = TTGSnackbar.init(message: "Message", duration: .Middle, actionText: "Action")
{ (snackbar) -> Void in
 NSLog("Click action!")
}
snackbar.show()

显示文字和一个耗时操作按钮

let snackbar = TTGSnackbar.init(message: "Message", duration: .Forever, actionText: "Action")
{ (snackbar) -> Void in
 NSLog("Click action!")
 // Dismiss manually after 3 seconds
 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, Int64(3 * Double(NSEC_PER_SEC))), dispatch_get_main_queue()) { () -> Void in
 snackbar.dismiss()
 }
}
snackbar.show()

显示文字和两个动作按钮

let snackbar: TTGSnackbar = TTGSnackbar.init(message: "Two actions !", duration: .Long)

// Action 1
snackbar.actionText = "Yes"
snackbar.actionTextColor = UIColor.greenColor()
snackbar.actionBlock = { (snackbar) in NSLog("Click Yes !") }

// Action 2
snackbar.secondActionText = "No"
snackbar.secondActionTextColor = UIColor.yellowColor()
snackbar.secondActionBlock = { (snackbar) in NSLog("Click No !") }

snackbar.show()

显示文字和图片ICON

let snackbar: TTGSnackbar = TTGSnackbar.init(message: "Two actions !", duration: .Long)

// Add icon image
snackbar.icon = UIImage.init(named: "emoji_cool_small")

snackbar.show()

自定义

可以自定义文字的字体、颜色，动作按钮的字体、颜色，回调等等，详细的请看Github的README说明。😊

总之

一时兴起写了个简单的库，后来发现居然有人提交PR、issue，不敢怠慢啊，也就坚持了下来，断断续续更新了10个小版本了=。=（2016年3月25号，25周岁前一天-_-|||）

Android开源库-LinkTextView-原创

Sat, 01 Nov 2014 18:34:46 +0000

前言

近来因为项目的缘故，仔细研究了一下如何在Android的TextView里面绑定可以点击的链接，并且定制链接的颜色，包括正常状态、按下去时的文字、背景的颜色，当然，还有点击后的回调。

为了以后方便自己，也为了方便更多的人，就把这些封装成了一个简单的开源库，也算是我自己的第一个开源库吧。

LinkTextView

名称：LinkTextView。喜欢的话就Star一下吧。

Example

功能：

可以方便的对TextView里面的文字增加可点击链接，并且绑定回调。
可以为每个链接单独设置文字、链接背景的正常、按下状态下的颜色。
可以为每个链接绑定任意类型的“附件”对象，作为点击链接时的回调参数。

讲解

下面分重点讲解一下。

1. 为文字增加可点击链接，绑定回调。

为文字增加链接，已经是老生常谈了，真是一搜一大把，不过在这里还是简单讲一下。

用过TextView应该都知道这个接口：

public final void setText (CharSequence text)

其中CharSequence接口的子接口里面有Spannable，而由这个接口派生出来的类SpannableString，就是我们可以对TextView里面的文字做附加效果的原因。如改变颜色、增加超链接等，有兴趣的各位可以去仔细查查。下面简单的说说怎么加可点击的链接。

首先创建SpannableString：

SpannableString text = new SpannableString("LinkTextView dadada");

绑定ClickableSpan回调

ClickableSpan clickableSpan = new ClickableSpan() {
 @Override
 public void onClick(View view) {
 //点击了链接，做你想干的事吧=。=
 }
};
text.setSpan(clickableSpan, 0, 5, 0);

最后再setText

textView.setText(text);

看，绑定可以点击的链接就是这么简单。

2. 改变正常、按下时的文字、链接背景颜色。

往往系统默认的链接颜色是不能满足我们的需求的，所以最好能对链接的文字、背景的按下、松开时的颜色做定制。

但是好坑=。=，Google居然没有为ClickableSpan增加按下时的回调

那就只好自己造轮子了。

首先

必须要能获取到链接按下时的回调，应该是onTouch什么的，于是，就查到了类：LinkMovementMethod。在TextView中可以用方法：public final void setMovementMethod (MovementMethod movement)设定监听，而LinkMovementMethod类里面就可以监听到链接的onTouch！

LinkMovementMethod的onTouch就是介个样子的

boolean	 onTouchEvent(TextView textView, Spannable spannable, MotionEvent event)

于是，我们可以通过event来判断是按下还是移动等等操作。但是问题是，这里的spannable是整个TextView全部的文字，所以，只能通过event里面的x、y坐标，找到具体点击的是哪个链接。这里，要感谢stack overflow上的大神的帖子。

具体的找点击链接的方法如下：

private TouchableSpan getPressedSpan(TextView textView, Spannable spannable, MotionEvent event) {
 //获取点击的x、y坐标
 int x = (int) event.getX();
 int y = (int) event.getY();
 //减去Padding
 x -= textView.getTotalPaddingLeft();
 y -= textView.getTotalPaddingTop();
 //加上滚动的偏移
 x += textView.getScrollX();
 y += textView.getScrollY();
 //获取第几行、以及偏移
 Layout layout = textView.getLayout();
 int line = layout.getLineForVertical(y);
 int off = layout.getOffsetForHorizontal(line, x);
 //获取真正点击的链接
 TouchableSpan[] link = spannable.getSpans(off, off, TouchableSpan.class);
 TouchableSpan touchedSpan = null;
 if (link.length > 0) {
 touchedSpan = link[0];
 }
 return touchedSpan;
}

到此，我们已经能获取到链接的点击状态，并且捕捉到具体点击的ClickableSpan。

接着

就是改变链接的文字、背景颜色。

ClickableSpan的方法里面，除了

void onClick(View widget);

还有就是：

public void updateDrawState(TextPaint textPaint);

很明显，就是更新文字渲染效果的。我们用如下两个方法，就能实现：

public void setColor (int color);
bgColor属性

最后

到目前为止，我们已经可以捕捉到链接的点击状态，能获取到真正的点击的链接，还有能刷新链接的颜色了，相信聪明的你一定能自己琢磨出来，怎么样实现文章开头的效果。=v=

本文参考

Android官方文档。
StackOverFlow的：Change the text color of a ClickableSpan when pressed。