iOS26适配指南之UISlider

介绍

在 iOS 26 中,UISlider 迎来了两项重要更新:

  • 增加了类型为UISlider.Style的属性sliderStyle,用于设置拖拽时的样式。
  • 增加了类型为UISlider.TrackConfiguration?的属性trackConfiguration,用于添加刻度,并且支持自定义刻度。

这两个属性结合使用,可以让 UISlider 从传统的"连续滑块"进化为带刻度的选择器,常见于音量调节、亮度调节、进度选择、配置项选择等场景。

使用

  • 代码。
swift 复制代码
import UIKit

class ViewController: UIViewController {
    lazy var basicTickSlider: UISlider = {
        let slider = UISlider()
        slider.value = 0.5
        slider.addTarget(self, action: #selector(valueChanged), for: .valueChanged)
        // iOS26新增
        slider.sliderStyle = .default
        // iOS26新增,刻度数量
        var config = UISlider.TrackConfiguration(numberOfTicks: 10)
        config.allowsTickValuesOnly = true
        slider.trackConfiguration = config
        slider.translatesAutoresizingMaskIntoConstraints = false
        return slider
    }()
    lazy var customTickSlider: UISlider = {
        let slider = UISlider()
        slider.value = 0.5
        slider.addTarget(self, action: #selector(valueChanged), for: .valueChanged)
        slider.sliderStyle = .thumbless
        // iOS26新增,自定义刻度
        let customTicks = [
            UISlider.TrackConfiguration.Tick(position: 0),
            UISlider.TrackConfiguration.Tick(position: 0.1),
            UISlider.TrackConfiguration.Tick(position: 0.3),
            UISlider.TrackConfiguration.Tick(position: 0.6),
            UISlider.TrackConfiguration.Tick(position: 1.0)
        ]
        let config = UISlider.TrackConfiguration(allowsTickValuesOnly: true, ticks: customTicks)
        slider.trackConfiguration = config
        slider.translatesAutoresizingMaskIntoConstraints = false
        return slider
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(basicTickSlider)
        view.addSubview(customTickSlider)

        NSLayoutConstraint.activate([
            basicTickSlider.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
            basicTickSlider.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            basicTickSlider.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            basicTickSlider.heightAnchor.constraint(equalToConstant: 44),
            customTickSlider.topAnchor.constraint(equalTo: basicTickSlider.bottomAnchor, constant: 40),
            customTickSlider.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            customTickSlider.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }

    // MARK: 滑块内容变化事件
    @objc func valueChanged(_ sender: Any) {
        print(#function)
    }
}
  • 效果。
相关推荐
茶底世界之下5 小时前
阴天海边的蓝船:用 Awaking 把灰蓝调成清亮主角
ios·app·产品
Digitally7 小时前
如何将 iPhone 备份到 iCloud?
ios
传奇开心果编程1 天前
【Flutter踩坑排雷】第19课:路由硬编码坑|字符串路由书写错误,页面跳转失败排查
android·flutter·ios·移动开发·跨平台·ui框架·声明式ui
茶底世界之下1 天前
雨后街口的斑马线:用 Awaking 把颜色让给光与步伐
ios·app·产品
茶底世界之下2 天前
晨雾河岸的旧书摊:用 Awaking 给木色一点暖光
ios·app·产品
90后的晨仔2 天前
在 macOS 27 上运行 Xcode 26
ios
茶底世界之下3 天前
山间站台不必转暖:用 Awaking 留住冷光与红箱
ios·app·产品
songgeb4 天前
YYImage Bug:一行之差,正常 JPEG 如何在 iOS 被读成条纹
ios·swift
fthux4 天前
Tick Rest,一个休息提醒工具的自我修养
macos·开源·swift