具有清晰背景的 UISlider 拇指图像在其后面显示轨道

Question

如何在UISlider 上设置清晰的拇指背景，以便在拇指后面看不到轨道？

当我使用setThumbImage:forState: 并传递一个部分透明的图像时，滑块的最小轨道和最大轨道图像/颜色在拇指图像后面可见：

我希望它看起来像在 iOS 相机应用程序中，其中“透明”拇指图像圈剪辑轨道背景颜色：

Answer 1

TL;DR

简而言之，没有UISlider 的简单 API 可以重现此行为。

前提条件：根据问题，我只是演示如何使拇指显示为透明而不显示轨迹。我没有尝试完全重新创建相机的滑块。

理想的解决方案

理想的解决方案是创建最小和最大轨道图像，利用cap insets 来防止轨道的一部分被填充。我说这是理想的，因为它简单且相对高效。不幸的是，UISlider 做了两件事阻止我们使用这种方法。

1. 最大轨道图像实际上与整个轨道的宽度相同，但它包含在 clipsToBounds 设置为 true 的视图中。最大轨道的超级视图已调整大小并剪辑最大轨道，以确保它在拇指的前导侧永远不可见。

   在整个层次结构上禁用clipsToBounds 让我们在视图调试器中看到这一点。

1. 最小轨道UIImageView 被调整大小，但是当一个人在UISlider 上调用setMinimumTrackImage 时，它实际上会创建一个不同的大小调整图像。这个需要一段时间才能弄清楚，但可以通过检查内存地址来证明。

替代解决方案：更改图像以匹配值

根据我从最初调查中学到的知识，我们可以随着值的变化生成图像。这不是最有效的方法，因为它需要一遍又一遍地创建许多图像。但是，它符合原始问题的参数。请注意，您只能使用“连续”滑块有效地做到这一点，因为它依赖于值更新。从好的方面来说，这可以轻松扩展以绘制更有趣的轨迹图像（如相机中的图像）。

这是结果，我把拇指做得很大，这样你就可以很容易地看到它是透明的。

课程如下：

class TransparentThumbSlider: UISlider {

    let thumbWidth: CGFloat = 40

    override init(frame: CGRect) {
        super.init(frame: frame)

        configure()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        configure()
    }

    func configure() {
        setThumbImage(TransparentThumbSlider.thumbImage(diameter: thumbWidth, color: .blue), for: .normal)

        addTarget(self, action: #selector(updateTrackImages), for: .valueChanged)

        updateTrackImages()
    }

    static func thumbImage(diameter: CGFloat, color: UIColor) -> UIImage {
        let strokeWidth: CGFloat = 4
        let halfStrokeWidth = strokeWidth / 2
        let totalRect = CGRect(x: 0, y: 0, width: diameter, height: diameter)
        let strokeRect = CGRect(x: halfStrokeWidth,
                                y: halfStrokeWidth,
                                width: diameter - strokeWidth,
                                height: diameter - strokeWidth)

        let renderer = UIGraphicsImageRenderer(size: totalRect.size)
        let image = renderer.image { context in
            context.cgContext.setStrokeColor(color.cgColor)
            context.cgContext.setLineWidth(strokeWidth)
            context.cgContext.strokeEllipse(in: strokeRect)
        }

        return image
    }

    static func trackImage(colored color: UIColor,
                           thumbWidth: CGFloat,
                           trackWidth: CGFloat,
                           value: CGFloat,
                           flipped: Bool) -> UIImage {

        let fraction = flipped ? 1 - value : value
        let adjustableWidth = (trackWidth - thumbWidth)
        let halfThumbWidth = thumbWidth / 2
        let fudgeFactor: CGFloat = 2

        var totalRect: CGRect

        var coloredRect: CGRect
        if flipped {
            totalRect = CGRect(x: 0, y: 0, width: trackWidth, height: 2)
            coloredRect = CGRect(
                x: adjustableWidth * value + thumbWidth - fudgeFactor,
                y: 0,
                width: adjustableWidth * fraction + (halfThumbWidth - fudgeFactor),
                height: 2)
        } else {
            totalRect = CGRect(x: 0, y: 0, width: adjustableWidth * fraction + halfThumbWidth, height: 2)
            coloredRect = CGRect(x: 0, y: 0, width: adjustableWidth * fraction, height: 2)
        }

        let renderer = UIGraphicsImageRenderer(size: totalRect.size)
        let image = renderer.image { context in
            context.cgContext.setFillColor(color.cgColor)
            context.fill(coloredRect)
        }

        return image
    }

    @objc func updateTrackImages() {

        let trackWidth = trackRect(forBounds: bounds).width

        let minimumImage = TransparentThumbSlider.trackImage(
            colored: .green,
            thumbWidth: thumbWidth,
            trackWidth: trackWidth,
            value: CGFloat(value),
            flipped: false)
        setMinimumTrackImage(minimumImage, for: .normal)

        let maximumImage = TransparentThumbSlider.trackImage(
            colored: .yellow,
            thumbWidth: thumbWidth,
            trackWidth: trackWidth,
            value: CGFloat(value),
            flipped: true)
        setMaximumTrackImage(maximumImage, for: .normal)
    }

    var previousBounds: CGRect = .zero

    override func layoutSubviews() {
        super.layoutSubviews()

        // Prevent layout loop
        if previousBounds != bounds {
            previousBounds = bounds
            updateTrackImages()
        }
    }
}

Answer 2

让我们从它的实际操作开始，以证明这应该实现 OP 的目标：

简短的版本是我使用背景的 UIImage，并应用以下扩展来添加边框。

extension UIImage {
    func addRoundBorder(width: CGFloat,
                        color: UIColor) -> UIImage {
        let square = CGSize(width: min(size.width, size.height) + width * 2,
                            height: min(size.width, size.height) + width * 2)
        let imageView = UIImageView(frame: CGRect(origin: .zero, size: square))
        imageView.contentMode = .center
        imageView.image = self
        imageView.layer.cornerRadius = square.width / 2
        imageView.layer.masksToBounds = true
        imageView.layer.borderWidth = width
        imageView.layer.borderColor = color.cgColor
        UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, false, scale)
        guard let context = UIGraphicsGetCurrentContext() else { return self }
        imageView.layer.render(in: context)
        let result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return result ?? self
    }
}

然后，我引入背景的UIImage 并调用扩展程序，将结果用作我的新缩略图。

let image = UIImage(named: "circle")!.addRoundBorder(width: 3.0, color: .yellow)
slider.setThumbImage(image, for: .normal) 

虽然这仅用于演示目的，但我建议使用 #imageLiteral 来避免强制施法。

以下屏幕截图将 OP 通过 iOS 相机应用程序提供的示例图像与我实现的示例图像进行比较，如下所示。由于每个尺寸的大小，Apple 的质量允许在比较中提供更好的细节。

关于@Alladinian 的评论，我看到的问题是背景具有浅纹理，并且边框的使用提供了一种视觉方式来打破按钮与背景合并的位置。通过使用 OP 的背景，它似乎提供了类似的视觉效果。然而，更具挑战性的背景（例如图像）肯定会暴露我的设计并产生不良结果。

Answer 3

据我所知，您必须添加只有圆形边框并且是透明的唯一可能选项的拇指图像