ios - 拇指中心位于轨道起点和终点的 UISlider

Question

UISlider 的默认行为是它的拇指不在轨道的开始/结束处居中。如下所示:

我想修改它的行为以获得:

拇指的中心可以定位在起点或终点。

我试图用空的 UIView 覆盖开始/结束。效果是看起来几乎没问题，但拇指有阴影显示我在某些位置的 hack(我可以接受)，但是我的 hacky View 覆盖了一点拇指并捕获它的触摸事件(甚至当用户交互被禁用时)。

所以我想我需要在拇指和轨道之间打包我的hacky View 。可能不操纵其内部 View 。有什么想法吗？

Answer 1

UISlider 类有一个方法 thumbRect(forBounds:trackRect:value:)您可以覆盖它以控制 slider 的缩略图图像的绘图矩形。因此，假设这个空间是 5 个点(可能会因您使用的拇指图像而异)，我们可以执行以下操作:

1. 子类 UISlider 并覆盖 thumbRect(forBounds:trackRect:value:) 以将我们自己挂接到进程中
2. 定义 thumbSpace(我假设它是 5)，从 thumbSpace 我们可以计算起始偏移量( slider 前 5 个点)和结束偏移量( slider 后 5 个点)。
3. 计算与当前值、minValue 和 maxValue 相关的拇指平移(换句话说，根据当前值，我们稍微移动拇指以覆盖我们不想显示的空间)
4. 返回一个移位的矩形(应用 x 平移后)给 super 方法以进行常规计算

完整的代码应该是这样的:

class CustomSlider: UISlider {
    let defaultThumbSpace: Float = 5
    lazy var startingOffset: Float = 0 - defaultThumbSpace
    lazy var endingOffset: Float = 2 * defaultThumbSpace

    override func thumbRect(forBounds bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect {
        let xTranslation =  startingOffset + (minimumValue + endingOffset) / maximumValue * value
        return super.thumbRect(forBounds: bounds,
                               trackRect: rect.applying(CGAffineTransform(translationX: CGFloat(xTranslation),
                                                                          y: 0)),
                               value: value)
    }
}