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

【问题标题】：How to add border color to UISlider track in Swift 4?如何在 Swift 4 中为 UISlider 轨道添加边框颜色？
【发布时间】：2019-11-28 03:30:52
【问题描述】：

我想让UISlider 和minimumTrackTintColor 和minimumTrackTintColor 和track borderColor

我已经为minimum 和maximum 状态设置了trackTintColor，但我想为UISlider 添加border track

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

}

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

【问题讨论】：

你可以使用“sliderName.layer.borderColor = UIColor.red.cgColor”这可能对你有帮助
我已经用过了，还是不行。
您在哪个功能中使用过它以及如何使用它。喜欢你叫滑块名称还是使用自我？？
awakeFromNib()。调用self。
@BhaveshSarsawa 发布所需输出的图像，而不是整个滑块。

标签： ios swift uislider

【解决方案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

【讨论】：

这里我想为 Track 添加 Border 而不是整个 UiSlider

【解决方案2】：

上图为示例，使用纯代码实现。

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

}

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

【讨论】：

【解决方案3】：

您可以获取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)
            }
        }

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

结果：

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

【讨论】：