Swift on 土土哥的技术 Blog

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

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

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每日图片壁纸的获取
支持多语言
支持浏览历史图片
导出图片
…

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周岁前一天-_-|||）