调整自定义UISlider的thumb图像 解决显示不居中问题

方案1：重写UISlider子类调整thumb绘制区域 #

自定义UISlider子类，重写thumbRect(forBounds:trackRect:value:)方法，直接修改thumb的绘制位置：

class CustomSlider: UISlider {
    // 根据实际偏移情况调整数值，正负值对应不同偏移方向
    private let yOffset: CGFloat = 2
    
    override func thumbRect(forBounds bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect {
        var originalRect = super.thumbRect(forBounds: bounds, trackRect: rect, value: value)
        // 调整y轴位置使thumb和滑块圆心居中，x轴偏移的话修改origin.x即可
        originalRect.origin.y = rect.midY - originalRect.height / 2 + yOffset
        return originalRect
    }
}

方案2：直接给图像设置对齐内边距（无需子类化） #

使用UIImage的withAlignmentRectInsets方法调整图像的对齐属性，设置thumbImage时直接传入处理后的图像：

// UIEdgeInsets四个参数分别对应top、left、bottom、right的缩进，负数为向外扩展
let thumbImage = UIImage(named: "POITicker")?.withAlignmentRectInsets(UIEdgeInsets(top: 0, left: 0, bottom: -2, right: 0))
self.setThumbImage(thumbImage, for: .normal)

补充说明 #

• 偏移数值需要根据你实际图像的偏差大小调整，多测试几次就能找到合适的参数
• 如果是切图本身的内容没有居中，也可以直接在切图时给图像补对应方向的透明像素，让有效显示内容正好在图像画布的中心，无需写代码即可实现对齐

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