Swift 3中不使用transform增大UISlider轨道高度的方法

我之前也碰到过这个问题，直接用transform缩放整个滑块确实会把轨道和滑块一起放大，下面给你两个实用的方案，都能完美实现你要的效果：

方案一：自定义轨道图片（灵活适配颜色/样式） #

这个方法通过替换轨道的默认图片，来指定轨道的高度，滑块保持默认样式：

1. 先写一个生成指定高度轨道图片的工具方法（可以自定义颜色、圆角）：

func generateTrackImage(withHeight height: CGFloat, color: UIColor) -> UIImage {
    let trackSize = CGSize(width: 1, height: height)
    UIGraphicsBeginImageContextWithOptions(trackSize, false, UIScreen.main.scale)
    guard let context = UIGraphicsGetCurrentContext() else {
        return UIImage()
    }
    color.setFill()
    let trackRect = CGRect(origin: .zero, size: trackSize)
    let roundedPath = UIBezierPath(roundedRect: trackRect, cornerRadius: height / 2)
    roundedPath.fill()
    context.addPath(roundedPath.cgPath)
    let trackImage = UIGraphicsGetImageFromCurrentImageContext() ?? UIImage()
    UIGraphicsEndImageContext()
    // 返回可拉伸的图片，适配不同宽度的滑块
    return trackImage.resizableImage(withCapInsets: .zero, resizingMode: .stretch)
}

2. 给你的UISlider设置轨道图片：

// 假设原滑块高度是4，设置为8（2倍）
let targetTrackHeight = slider.frame.height * 2
slider.minimumTrackImage = generateTrackImage(withHeight: targetTrackHeight, color: .systemBlue)
slider.maximumTrackImage = generateTrackImage(withHeight: targetTrackHeight, color: .systemGray3)

这样轨道高度就变成你要的2倍，滑块还是系统默认的大小和样式。

方案二：子类化UISlider重写轨道布局（纯代码更简洁） #

如果你不需要自定义轨道样式，只是单纯调整高度，这个方法更高效：

创建一个UISlider的子类，重写trackRect(forBounds:)方法来指定轨道的尺寸：

class CustomTrackHeightSlider: UISlider {
    // 可以在这里直接设置轨道高度，或者外部赋值
    var customTrackHeight: CGFloat = 8 {
        didSet {
            setNeedsLayout()
        }
    }
    
    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        // 获取系统默认的轨道rect，然后修改高度
        var trackRect = super.trackRect(forBounds: bounds)
        // 调整高度，同时保持轨道在滑块视图中垂直居中
        trackRect.size.height = customTrackHeight
        trackRect.origin.y = bounds.midY - trackRect.size.height / 2
        return trackRect
    }
}

之后在Storyboard里选中你的UISlider，在Identity Inspector里把类改成CustomTrackHeightSlider，然后可以通过代码设置customTrackHeight为原高度的2倍，或者直接在子类里固定值，这样轨道高度就会变化，滑块完全不受影响。

为什么之前的transform方法不行？ #

CGAffineTransform(scaleX:2, y:2)是对整个UISlider视图进行缩放，轨道和滑块作为子视图会一起被放大，所以才会出现滑块变大的问题。上面的两种方法都是单独修改轨道的布局或样式，不会影响滑块的尺寸。

内容的提问来源于stack exchange，提问作者darkginger