Ios 使用UIStackView在UISlider上方放置标签

我们正在尝试为以下场景找到仅情节提要的解决方案：

我们想在UISlider上面设置“里程碑”/“步骤”标签。值为0.2的拇指位置应正好位于其上方相应标签的中间。标签位置的调整取决于屏幕，这一点很重要，因此约束必须是成比例的。说明：

我们尝试的内容：

我们使用7个排列的子视图（每一步一个）将UIStackView定位在滑块上方，并将其稍微加宽（滑块宽度的1.14倍，特意将其加宽1/7）。出于某些原因，它在某些步骤中对齐，而在其他步骤中不对齐。样本：

如有任何正确的建议或建议，我们将不胜感激。谢谢大家!

致以最诚挚的问候，Roi

如果您将

UISlider

子类化，则可以重写该方法，该方法允许您调整拇指图像显示的矩形。执行此操作，并使拇指图像的中心位于轨迹上的相应点上

override func thumbRect(forBounds bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect {
    let superThumbRect = super.thumbRect(forBounds: bounds, trackRect: rect, value: value)
    let valueAsDecimalFraction = value == minimumValue ? 0 : (value - minimumValue)/(maximumValue - minimumValue)
    let valueAsDecimalFractionOfMinusOneToOne = (valueAsDecimalFraction*2 - 1)/2
    let xOffset = CGFloat(valueAsDecimalFractionOfMinusOneToOne) * superThumbRect.width
    return CGRect(
        x: superThumbRect.origin.x + xOffset,
        y: superThumbRect.origin.y,
        width: superThumbRect.size.width,
        height: superThumbRect.size.height)
}

覆盖后，您将看到拇指图像现在具有正确的行为，但当滑块处于“最小”或“最大”值时，它会挂在视图之外。要更正此问题，请重写该方法，以便轨迹由某个值填充，该值允许拇指图像保持在滑块边界内

let padding = CGFloat(18)

override func trackRect(forBounds bounds: CGRect) -> CGRect {
    let superTrackRect = super.trackRect(forBounds: bounds)
    return CGRect(
        x: superTrackRect.origin.x + padding,
        y: superTrackRect.origin.y,
        width: superTrackRect.size.width - padding*2,
        height: superTrackRect.size.height)
}

您可能很难使用

UIStackView

定位

UILabel

——标签的中心点将不在正确的位置。相反，使用相对于滑块的约束布局标签

// Assuming labels: [UILabel], and a value of thumbIndent

override func viewWillLayoutSubviews() {
    let labelConstraints = labels.enumerated().map { (i, label) -> [NSLayoutConstraint] in
        let pct = CGFloat(i)/CGFloat(labels.count-1)
        let centerX = (view.bounds.size.width-2*thumbIndent) * pct + thumbIndent
        return [
            label.centerXAnchor.constraint(equalTo: slider.leftAnchor, constant: centerX),
            label.bottomAnchor.constraint(equalTo: slider.topAnchor, constant: 0),
        ]
        }.flatMap { $0 }
        .
        .
        .
}

---

我认为你应该创建你自己的滑块控件嘿@ReinierMelian谢谢你的回复。我考虑过了，但我很确定它是可以解决的，而且仅仅为了在上面放置标签（这不会影响触摸事件，这只是与UI相关的标签）而构建一个完整的新标签是一件过分的事情。你需要考虑拇指宽度，我认为添加（拇指宽度）/2作为开始之前和结束之后的空间作为堆栈宽度约束常量@Reiniermelian这是可能的，因为前导和尾随与滑块相连