不是UISliderColorful自定义亮度滑块的秘密UIScrollView二次开发实战【免费下载链接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.项目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOS如果你正在为 iOS 应用寻找一款颜值在线的颜色选择器开源库Colorful值得一看——这是一款用 Swift 构建的 iOS Color Picker内置色彩地图、亮度和暗色模式支持。而它最巧妙的地方在于那条能上下拖动的亮度滑块根本不是用 UISlider 写的而是通过UIScrollView 二次开发实现的。今天就带你拆解这个自定义亮度滑块的完整思路看看系统组件换一种用法能玩出多少花样。为什么亮度滑块不用 UISlider先想清楚需求。在 Colorful 的色盘中亮度滑块要同时做到三件事显示一条从亮到暗的渐变刻度条20 个渐变色块支持拖动和点击跳转松手要有干脆的停手感滑块外要有一圈描边和上下渐变阴影像系统滑块一样精致UISlider 是值优先的组件你给它一个 value它负责显示 thumb。但 Colorful 需要的是视图优先的交互——整条刻度本身就是内容拖动它更像在翻阅一条色带。硬用 UISlider 就得自己重写trackRect、thumbRect、渐变渲染等一堆私有细节得不偿失。于是作者选择了一个更取巧的方案把亮度值映射成 UIScrollView 的 contentOffset。核心思路用 contentOffset 当亮度值核心实现位于 Colorful/Classes/BrightnessSlider.swift关键设计只有三步1️⃣ 让滚动方向变成亮度滑块内部放了一个UIScrollViewcontentSize高度固定为 500 点并设置了上下各半屏高度的contentInset。这意味着内容滚到最顶端 亮度 1.0最亮内容滚到最底端 亮度 0.0最暗亮度读取就是一个纯数学换算把contentOffset.y归一化到 0~1再四舍五入到百分位brightness (offsetY inset.top) / contentSize.height → 取反归一 → 保留两位小数反方向也一样外部要设置亮度时直接算出目标contentOffset并setContentOffset整个滑块就跳到了对应位置。2️⃣ 20 个 CALayer 拼出渐变刻度条滑条本身由 20 个CALayer色块竖向排列组成每块高度 500 / 20。当用户在色盘里换了色相和饱和度set(hsColor:)方法会把这 20 个色块按当前色相逐个重新着色——于是同一条刻度条选红色时是红→黑渐变选蓝色时是蓝→黑渐变视觉上一目了然。3️⃣ 用 CAGradientLayer 伪装系统质感上下各叠一个CAGradientLayer从背景色渐变到透明再配一个CAShapeLayer描边包裹整条刻度。这三层装饰让一条简单的滚动视图拥有了 iOS 13 风格的精致外观而且能跟随深色模式自动切换颜色traitCollectionDidChange里重新取色。交互细节让滑块手感拉满二次开发的乐趣在于细节。这个亮度滑块有三个值得偷师的交互设计细节实现方式效果快速回弹decelerationRate .fast松手后迅速停住符合精确取值场景点击跳转手势识别 setContentOffset(animated: true)点哪里滑到哪动画平滑过渡隐藏滚动条showsVerticalScrollIndicator false视觉上就是一条干净的颜色刻度拖动的实时回传也很干净BrightnessSlider只实现了scrollViewDidScroll这一个代理方法每帧滚动都通过BrightnessSliderDelegate把新亮度抛给上层。上层 Colorful/Classes/ColorPicker.swift 收到后更新 HSV 模型再同步刷新色盘透明度、滑块色块和游标——三者联动无一例外都走这条 delegate 链路。滑块三件套Slider Cursor ColorMap单看滑块只是冰山一角Colorful 的完整结构由四个类协作完成BrightnessSlider亮度滑块上文的主角负责亮度维度的输入BrightnessCursor亮度游标Colorful/Classes/BrightnessCursor.swift 中的小色块悬浮在滑块右侧实时显示当前颜色的 HEX 值背景色就是选中色本身ColorMapView色盘Colorful/Classes/ColorMapView.swift 里用 CoreGraphics 逐像素生成圆形 HSV 色图支持 sRGB 和 extendedSRGBDisplay P3两种广色域ColorPicker总控Colorful/Classes/ColorPicker.swift 继承自UIControl把三件套组装起来并在颜色变化时触发.valueChanged事件和触感反馈值得注意的是ColorPicker继承了UIControl而不是UIView所以外部可以直接addTarget监听值变化API 设计和系统控件完全一致——这是把自定义组件当系统控件用的正确姿势。三步在项目中用上 Colorful想直接体验这套自定义滑块接入成本很低添加依赖在 Podfile 中写入pod Colorful, ~ 3.0然后执行pod install也支持 Swift Package Manager参见根目录 Package.swift最低支持 iOS 11摆放控件创建一个ColorPicker实例加入视图像普通UIView一样布局监听变化addTarget注册.valueChanged事件用set(color:colorSpace:)设置初始颜色完整可运行的 Demo 在 Example/Colorful/ViewController.swift 里还演示了如何一键切换 sRGB / extendedSRGB 色域。小结系统组件二次开发的正确姿势Colorful 的亮度滑块给我们的启发可以浓缩成三点先看约束再选组件UISlider 解决不了内容即交互的需求那就换 UIScrollView 把交互当内容来滚动值与视图解耦亮度 ↔ contentOffset 的双向换算公式让读值和设值都变成几行纯函数质感靠层不靠框架渐变、描边、阴影全部用 CALayer 家族堆出来深色模式适配只改三个颜色下次需要自定义控件时不妨先问问自己这个系统类还有哪些隐藏身份可以被我二次开发项目源码入口Colorful/Classes/ · 许可协议LICENSEnew BSD【免费下载链接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.项目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 不是UISlider！Colorful自定义亮度滑块的秘密：UIScrollView二次开发实战
不是UISliderColorful自定义亮度滑块的秘密UIScrollView二次开发实战【免费下载链接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.项目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOS如果你正在为 iOS 应用寻找一款颜值在线的颜色选择器开源库Colorful值得一看——这是一款用 Swift 构建的 iOS Color Picker内置色彩地图、亮度和暗色模式支持。而它最巧妙的地方在于那条能上下拖动的亮度滑块根本不是用 UISlider 写的而是通过UIScrollView 二次开发实现的。今天就带你拆解这个自定义亮度滑块的完整思路看看系统组件换一种用法能玩出多少花样。为什么亮度滑块不用 UISlider先想清楚需求。在 Colorful 的色盘中亮度滑块要同时做到三件事显示一条从亮到暗的渐变刻度条20 个渐变色块支持拖动和点击跳转松手要有干脆的停手感滑块外要有一圈描边和上下渐变阴影像系统滑块一样精致UISlider 是值优先的组件你给它一个 value它负责显示 thumb。但 Colorful 需要的是视图优先的交互——整条刻度本身就是内容拖动它更像在翻阅一条色带。硬用 UISlider 就得自己重写trackRect、thumbRect、渐变渲染等一堆私有细节得不偿失。于是作者选择了一个更取巧的方案把亮度值映射成 UIScrollView 的 contentOffset。核心思路用 contentOffset 当亮度值核心实现位于 Colorful/Classes/BrightnessSlider.swift关键设计只有三步1️⃣ 让滚动方向变成亮度滑块内部放了一个UIScrollViewcontentSize高度固定为 500 点并设置了上下各半屏高度的contentInset。这意味着内容滚到最顶端 亮度 1.0最亮内容滚到最底端 亮度 0.0最暗亮度读取就是一个纯数学换算把contentOffset.y归一化到 0~1再四舍五入到百分位brightness (offsetY inset.top) / contentSize.height → 取反归一 → 保留两位小数反方向也一样外部要设置亮度时直接算出目标contentOffset并setContentOffset整个滑块就跳到了对应位置。2️⃣ 20 个 CALayer 拼出渐变刻度条滑条本身由 20 个CALayer色块竖向排列组成每块高度 500 / 20。当用户在色盘里换了色相和饱和度set(hsColor:)方法会把这 20 个色块按当前色相逐个重新着色——于是同一条刻度条选红色时是红→黑渐变选蓝色时是蓝→黑渐变视觉上一目了然。3️⃣ 用 CAGradientLayer 伪装系统质感上下各叠一个CAGradientLayer从背景色渐变到透明再配一个CAShapeLayer描边包裹整条刻度。这三层装饰让一条简单的滚动视图拥有了 iOS 13 风格的精致外观而且能跟随深色模式自动切换颜色traitCollectionDidChange里重新取色。交互细节让滑块手感拉满二次开发的乐趣在于细节。这个亮度滑块有三个值得偷师的交互设计细节实现方式效果快速回弹decelerationRate .fast松手后迅速停住符合精确取值场景点击跳转手势识别 setContentOffset(animated: true)点哪里滑到哪动画平滑过渡隐藏滚动条showsVerticalScrollIndicator false视觉上就是一条干净的颜色刻度拖动的实时回传也很干净BrightnessSlider只实现了scrollViewDidScroll这一个代理方法每帧滚动都通过BrightnessSliderDelegate把新亮度抛给上层。上层 Colorful/Classes/ColorPicker.swift 收到后更新 HSV 模型再同步刷新色盘透明度、滑块色块和游标——三者联动无一例外都走这条 delegate 链路。滑块三件套Slider Cursor ColorMap单看滑块只是冰山一角Colorful 的完整结构由四个类协作完成BrightnessSlider亮度滑块上文的主角负责亮度维度的输入BrightnessCursor亮度游标Colorful/Classes/BrightnessCursor.swift 中的小色块悬浮在滑块右侧实时显示当前颜色的 HEX 值背景色就是选中色本身ColorMapView色盘Colorful/Classes/ColorMapView.swift 里用 CoreGraphics 逐像素生成圆形 HSV 色图支持 sRGB 和 extendedSRGBDisplay P3两种广色域ColorPicker总控Colorful/Classes/ColorPicker.swift 继承自UIControl把三件套组装起来并在颜色变化时触发.valueChanged事件和触感反馈值得注意的是ColorPicker继承了UIControl而不是UIView所以外部可以直接addTarget监听值变化API 设计和系统控件完全一致——这是把自定义组件当系统控件用的正确姿势。三步在项目中用上 Colorful想直接体验这套自定义滑块接入成本很低添加依赖在 Podfile 中写入pod Colorful, ~ 3.0然后执行pod install也支持 Swift Package Manager参见根目录 Package.swift最低支持 iOS 11摆放控件创建一个ColorPicker实例加入视图像普通UIView一样布局监听变化addTarget注册.valueChanged事件用set(color:colorSpace:)设置初始颜色完整可运行的 Demo 在 Example/Colorful/ViewController.swift 里还演示了如何一键切换 sRGB / extendedSRGB 色域。小结系统组件二次开发的正确姿势Colorful 的亮度滑块给我们的启发可以浓缩成三点先看约束再选组件UISlider 解决不了内容即交互的需求那就换 UIScrollView 把交互当内容来滚动值与视图解耦亮度 ↔ contentOffset 的双向换算公式让读值和设值都变成几行纯函数质感靠层不靠框架渐变、描边、阴影全部用 CALayer 家族堆出来深色模式适配只改三个颜色下次需要自定义控件时不妨先问问自己这个系统类还有哪些隐藏身份可以被我二次开发项目源码入口Colorful/Classes/ · 许可协议LICENSEnew BSD【免费下载链接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.项目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考