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

Question

我想用UISlider和minimumTrackTintColor用轨道minimumTrackTintColor制作borderColor

我已经为minimum和maximum state 设置了trackTintColor但我想为UISlider轨道添加边框

• 我的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
    }

}

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

Answer 1

您可以获取UISlider的超级视图以根据要求进行修改。

要增加高度：

 class CustomSlider: UISlider {

   override func trackRect(forBounds bounds: CGRect) -> CGRect {
       let customBounds = CGRect(origin: bounds.origin, size: CGSize(width: bounds.size.width, height: 17.0))
       super.trackRect(forBounds: customBounds)
       return customBounds
   }
}

添加边框（您可以在viewDidLoad()方法中编写此代码）：

DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            if #available(iOS 14.0, *) {
                self.slider.subviews.first?.subviews[1].layer.borderWidth = 2.8
                self.slider.subviews.first?.subviews[1].layer.borderColor = UIColor.white.cgColor
                self.slider.subviews.first?.subviews[1].makeRoundCorner(8.0)
            }
            else{
                self.slider.subviews[1].layer.borderWidth = 2.8
                self.slider.subviews[1].layer.borderColor = UIColor.white.cgColor
                self.slider.subviews[1].makeRoundCorner(8.0)
            }
        }

我不得不使用延迟来初始化它。

结果：

注意：我没有提供滑块的拇指、阴影和其他属性的代码。

Answer 2

我想最好的选择是为 Track CGRect 添加一个边框层。

在 Swift 5 中找到下面的 UISlider 子类化方法：

final class BorderedUISlider: UISlider {
    private var sliderBorder: CALayer = {
        let layer = CALayer()
        layer.borderWidth = 1
        layer.borderColor = ***Here Your Color***.cgColor
        return layer
    }()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        let rect = trackRect(forBounds: bounds)
        sliderBorder.removeFromSuperlayer()
        sliderBorder.frame = rect
        sliderBorder.cornerRadius = rect.height / 2
        layer.addSublayer(sliderBorder)
    }
}

Answer 3

如果您在视图层次结构上调试 UISlider，您将看到 slider 的边界。

据此，可以设置 slider 的backgroundColor来添加边框效果（默认为nil ）。

例子：

let valueSlider: UISlider = {
    let slider = UISlider(frame: .zero)
    slider.translatesAutoresizingMaskIntoConstraints = false
    slider.isContinuous = true
    slider.tintColor = .green
    slider.thumbTintColor = .darkGray
    slider.cornerRadius = 4
    slider.clipsToBounds = false
    slider.maximumTrackTintColor = .gray

    // Setting the background will add the effect of a border for the slider
    slider.backgroundColor = .gray

    return slider
}()

不设置背景颜色：

带背景颜色：

Answer 4

上图是一个例子，使用纯代码实现。

  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)
    }
  }

}

您也可以使用图像。 只要宽度与滑块的最大宽度相同。 希望对你有所帮助，虽然有点晚了。 有什么问题可以在下方评论。

Answer 5

将边框宽度和边框颜色添加到 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