CrownControl
概述
灵感来源于 Apple Watch 的数码表冠，CrownControl 是一个小附件视图，可以在不抬起手指的情况下实现滚动内容。
功能
表冠由背景表面和前景表面组成。前景是一个指示器，在表的中心旋转，同时附加的滚动视图偏移改变。
- 可以通过触摸压力或长按重新定位。
- 可以顺时针和逆时针旋转。
- 大多数用户交互动作都可以配置。
- 背景和前景的尺寸可配置。
- 可以完全定制。
示例项目
示例项目包含演示如何在可滚动环境中使用 CrownControl 的示例。
| 网页视图 / PDF | 联系人 | 照片库 |
|---|---|---|
 |
 |
 |
需求
- iOS 9 或更高版本。
- Swift 4.2 或更高版本。
- CrownControl 重度依赖于 QuickLayout - 一个用 Swift 编写的轻量级库，用于通过编程方式轻松布局视图。
安装
CocoaPods
CocoaPods 是 Cocoa 项目的依赖关系管理器。您可以使用以下命令安装它
$ gem install cocoapods要使用 CocoaPods 集成 CrownControl 到您的 Xcode 项目中，请在您的 Podfile 中指定它
source 'https://github.com/cocoapods/specs.git'
platform :ios, '9.0'
use_frameworks!
pod 'CrownControl', '1.0.0'然后，运行以下命令
$ pod install用法
快速使用
使用 CrownControl 非常简单。
在您的视图控制器中
- 定义并将
CrownAttributes绑定到一个滚动视图实例上，并可选地自定义这些属性。 - 实例化并将
CrownIndicatorViewController实例绑定到CrownAttributes实例上。 - 定义皇冠视图控制器的约束。
- 在父视图内布局皇冠视图控制器。
var crownControl: CrownControl!
var scrollView: UIScrollView!
private func setupCrownViewController() {
let attributes = CrownAttributes(scrollView: scrollView, scrollAxis: .vertical)
// Cling the bottom of the crown to the bottom of a view with -50 offset
let verticalConstraint = CrownAttributes.AxisConstraint(crownEdge: .bottom, anchorView: view, anchorViewEdge: .bottom, offset: -50)
// Cling the trailing edge of the crown to the trailing edge of a view with -50 offset
let horizontalConstraint = CrownAttributes.AxisConstraint(crownEdge: .trailing, anchorView: tableView, anchorViewEdge: .trailing, offset: -50)
// Setup the crown control within *self*
crownControl = CrownControl(attributes: attributes, delegate: self)
crownControl.layout(in: view, horizontalConstaint: horizontalConstraint, verticalConstraint: verticalConstraint)
}要使皇冠对除皇冠本身以外的任何其他触发器产生的滚动事件做出响应，请将以下内容添加到 scrollViewDidScroll(_:) 中
func scrollViewDidScroll(_ scrollView: UIScrollView) {
crownControl?.spinToMatchScrollViewOffset()
}王冠属性
CrownAttributes是王冠的外观描述符。它的嵌套属性描述了王冠的外观和感觉。
滚动轴
滚动视图的轴是.horizontal或.vertical。它必须在初始化CrownAttributes时设置。
锚点位置
前景指示器的锚点位置。表示前景初始定位的位置。
attributes.anchorPosition = .left可能的值有.left、.right、.top、.bottom。默认值是.top。
旋转方向
指示器旋转的方向。
设置旋转方向为逆时针的示例。
attributes.spinDirection = .counterClockwise默认值是clockwise。
用户交互
描述用户与王冠的交互。目前支持的用户交互手势：点击、双击、长按和重力触摸事件。
点击手势
在发生单独点击事件时，用指定的偏移值向前滚动。
attributes.userInteraction.singleTap = .scrollsForwardWithOffset(value: 20)在发生单独点击事件时，执行自定义动作。
attributes.userInteraction.singleTap = .custom(action: {
/* Do something */
})在发生双击事件时，滚动到滚动视图的起始边缘。
attributes.userInteraction.doubleTap = .scrollsToLeadingEdge拖放
如果设备硬件支持力度感应，可以使用力度感应拖放王冠。如果不支持，则回退到长按手势。
attributes.repositionGesture = .prefersForceTouch(attributes: .init())样式
可以使用各种样式自定义背景和前景 surface。
例如设置王冠背景为渐变样式，并将其边框设置为特定的颜色和宽度。
attributes.backgroundStyle.content = .gradient(gradient: .init(colors: [.white, .gray], startPoint: .zero, endPoint: CGPoint(x: 1, y: 1)))
attributes.backgroundStyle.border = .value(color: .gray, width: 1)尺寸
描述了王冠的尺寸以及前景与背景 surface 之间的关系。
以下示例中，将 `scrollRelation` 属性设置为 10 表示前景旋转 10 圈会使滚动视图的偏移量达到其尾部。
attributes.sizes.scrollRelation = 10例如设置王冠边缘大小（宽度和高度）为 60pt，前景边缘比例为此大小的 25%，即 15pt。
attributes.sizes.backgroundSurfaceDiameter = 60
attributes.sizes.foregroundSurfaceEdgeRatio = 0.25反馈
前景在到达王冠表面的锚定点时产生的反馈描述。
当滚动视图的偏移量达到前面部时，设备产生冲击触觉反馈。王冠的背景表面会以颜色闪烁。
attributes.feedback.leading.impactHaptic = .light
attributes.feedback.leading.backgroundFlash = .active(color: .white, fadeDuration: 0.3)作者
丹尼尔·哈里，《[email protected]
许可
CrownControl 在 MIT 许可证下可用。有关更多信息，请参阅 LICENSE 文件。