Question

我想用UISlider做minimumTrackTintColor，用 track minimumTrackTintColor

做borderColor

我已经为trackTintColor和minimum都设置了maximum，但是我想为UISlider添加 border >跟踪

我的UISlider看起来像这样：

我需要这样跟踪边框：

代码


class SliderWithHeart: UISlider
{

    override func awakeFromNib()
    {
        super.awakeFromNib()

        let imageTint = UIImage(named: "SliderHeart")
        self.minimumTrackTintColor = colorWithHex(hex: COLORCODE.APP_BUTTON_COLOR)
        self.maximumTrackTintColor = colorWithHex(hex: COLORCODE.APP_ORANGE_COLOR)
        self.setThumbImage(imageTint, for: .normal)
    }
    override func layoutSubviews()
    {
        super.layoutSubviews()
        super.layer.cornerRadius = self.frame.height/2
    }

    override func trackRect(forBounds bounds: CGRect) -> CGRect
    {
        var newBounds = super.trackRect(forBounds: bounds)
        newBounds.size.height = 10
        return newBounds
    }

}

如何设置滑块轨道的边框颜色，而不是整个滑块？

Answer 1

将边框宽度和边框颜色添加到您的UISlider

Yourslider.layer.borderWidth = 4.0
let red = UIColor(red: 255.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0)
Yourslider.layer.borderColor = red.cgColor

Answer 2

您可能必须创建自己的CustomSlider。幸运的是，这很容易做到：

class CustomSlider: UIView {
    private var trackView = UIView()
    private var minimumTrackView = UIView()
    private var thumbImageView = UIImageView()

    var minimum: CGFloat = 0
    var maximum: CGFloat = 10
    var value: CGFloat {
        get {
            return (thumbImageView.center.x / frame.width) * (maximum - minimum) + minimum
        }
        set(x) {
            thumbImageView.center.x = (x - minimum) / (maximum - minimum) * frame.width
            setNeedsLayout()
        }
    }

    var thumbImage: UIImage? {
        didSet { thumbImageView.image = thumbImage }
    }

    var minimumTrackTintColor: UIColor = .red {
        didSet { minimumTrackView.backgroundColor = minimumTrackTintColor }
    }

    var maximumTrackTintColor: UIColor = .lightGray {
        didSet { trackView.backgroundColor = maximumTrackTintColor }
    }

    var borderColor: UIColor = .red {
        didSet { trackView.layer.borderColor = borderColor.cgColor }
    }

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

        backgroundColor = .clear

        addSubview(trackView)
        trackView.addSubview(minimumTrackView)
        addSubview(thumbImageView)

        trackView.backgroundColor = maximumTrackTintColor
        minimumTrackView.backgroundColor = minimumTrackTintColor

        isUserInteractionEnabled = true
        thumbImageView.isUserInteractionEnabled = true
        thumbImageView.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(pan(_:))))
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    @objc func pan(_ gesture: UIPanGestureRecognizer) {
        let x = gesture.location(in: self).x
        guard 0 <= x && x <= frame.width else { return }
        thumbImageView.center.x = x
        setNeedsLayout()
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        trackView.frame = bounds
        trackView.clipsToBounds = true
        trackView.layer.cornerRadius = 0.5 * frame.height
        trackView.layer.borderColor = UIColor.red.cgColor
        trackView.layer.borderWidth = 2
        minimumTrackView.frame = CGRect(x: 0, y: 0, width: thumbImageView.center.x, height: frame.height)

        let cx = thumbImageView.center.x
        thumbImageView.frame.size = CGSize(width: frame.height + 30, height: frame.height + 30)
        thumbImageView.center.x = cx
        thumbImageView.center.y = frame.height / 2
    }
}

如果有任何疑问，请在下面发表评论。

Answer 3

上图是使用纯代码实现的示例。

  private let volumeSlider = UISlider().then {
    let minimumTrackImage = UIView().then {
      $0.backgroundColor = R.color.tint()
      $0.pin.size(CGSize(width: 312, height: 6)) // <<< Key location, width of your slider, you can also customize the height here.
      $0.cornerRadius = 3
    }.screenshot

    let maximumTrackImage = UIView().then {
      $0.backgroundColor = .white
      $0.pin.size(CGSize(width: 312, height: 6))
      $0.borderColor = R.color.tint()
      $0.borderWidth = 1
      $0.cornerRadius = 3
    }.screenshot

    let thumbImage = UIView().then {
      $0.backgroundColor = .white
      $0.cornerRadius = 13
      $0.pin.size($0.cornerRadius * 2)
      $0.borderColor = R.color.tint()
      $0.borderWidth = 1
    }.screenshot

    $0.setMinimumTrackImage(minimumTrackImage, for: .normal)
    $0.setMaximumTrackImage(maximumTrackImage, for: .normal)
    $0.setThumbImage(thumbImage, for: .normal)
    $0.value = 0.3
  }

该代码来自我的项目，使用了许多第三方库，但是我认为它不应阻止您理解它。它们都是助手，不会影响核心代码。

哪个：
-R来自R.Swift。
-then来自Then。
-pin来自PinLayout。
-screenshot是

extension UIView {

  var screenshot: UIImage {
    return UIGraphicsImageRenderer(size: bounds.size).image { _ in
      drawHierarchy(in: bounds, afterScreenUpdates: true)
    }
  }

}

您还可以使用图像。只要宽度与滑块的最大宽度相同即可。希望它能对您有所帮助，尽管为时已晚。任何问题都可以在下面评论。

如何在Swift 4中为UISlider轨道添加边框颜色？

3 个答案: