如何自定义 UISlider 高度答案

【问题标题】：How to customise UISlider height如何自定义 UISlider 高度
【发布时间】：2015-10-13 22:12:47
【问题描述】：

我有一个项目，其中必须自定义 UISlider 元素。我想知道是否有人知道如何更改，或者是否可以更改UISlide 条线的高度。

我尝试了类似的方法但不起作用：

let customBounds = CGRect(origin: bounds.origin, 
                          size: CGSize(width: bounds.size.width, height: 15.0))
feedbackSlider.trackRectForBounds(customBounds)

谢谢

【问题讨论】：

标签： ios objective-c iphone swift uislider

【解决方案1】：

如果您使用的是autolayout，您可以在storyboard 中的UISlider 上设置height 约束。如果您需要在运行时更改它 - 为约束创建一个 IBOutlet 并修改其 .constant 值。

【讨论】：

我认为它只是改变滑块的内部高度，而不是轨道高度

【解决方案2】：

您应该能够继承 UISlider 并实现：

- (CGRect)trackRectForBounds:(CGRect)bounds

只需在此处返回新的 CGRect。

【讨论】：

【解决方案3】：

你可以通过继承UISlider 轻松完成它。见以下代码

class CustomUISlider : UISlider
{        
    override func trackRectForBounds(bounds: CGRect) -> CGRect {
    //set your bounds here
    return bounds

   }
}

【讨论】：

【解决方案4】：

您可以覆盖自定义滑块中的方法

对于 Objective-C

- (CGRect)trackRectForBounds:(CGRect)bounds {
    CGRect rect = CGRectMake(0, 0, 100, 30);//change it to any size you want
    return rect;
}

对于斯威夫特

override func trackRectForBounds(bounds: CGRect) -> CGRect {
    var rect:CGRect = CGRectMake(0, 0, 100, 30)
    return rect
}

【讨论】：

当我使用此代码时，滑块的高度成功改变。但是当滑块到达末端时，圆角会“闪烁”正方形。似乎这段代码没有考虑滑块末端的圆角。知道怎么做吗？
这里也一样。有什么解决办法吗？

【解决方案5】：

我希望你想在故事板中编辑它，只有线条大小，在你的自定义 UISlider 中使用它

class CustomSlide: UISlider {

     @IBInspectable var trackHeight: CGFloat = 2

     override func trackRectForBounds(bounds: CGRect) -> CGRect {
         //set your bounds here
         return CGRect(origin: bounds.origin, size: CGSizeMake(bounds.width, trackHeight))



       }
}

【讨论】：

【解决方案6】：

斯威夫特 3

class MySlide: UISlider {

    @IBInspectable var height: CGFloat = 2        
    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(origin: bounds.origin, size: CGSize(width: bounds.width, height: height))
    }
}

【讨论】：

【解决方案7】：

覆盖trackRect 是一种可行的方法，但是如果您使用其他UISlider 的视图，例如minimumValueImage, maximumValueImage，您还需要考虑它们的绑定，否则它们将与滑块的轨道重叠。作为快捷方式，您可以简单地使用super's func:

固定版本。

Swift 3+

 @IBDesignable
    class CustomSlider: UISlider {
       /// custom slider track height
       @IBInspectable var trackHeight: CGFloat = 3

       override func trackRect(forBounds bounds: CGRect) -> CGRect {
           // Use properly calculated rect
           var newRect = super.trackRect(forBounds: bounds)
           newRect.size.height = trackHeight
           return newRect
       }
}

【讨论】：

【解决方案8】：

Swift 4 没有 thumbImage 的版本。

class CustomSlider: UISlider {
  @IBInspectable var trackHeight: CGFloat = 2

  override func trackRect(forBounds bounds: CGRect) -> CGRect {
    return CGRect(origin: bounds.origin, size: CGSize(width: bounds.width, height: trackHeight))
  }
}

【讨论】：

【解决方案9】：

我认为上面的答案有一个缺陷：轨道矩形的原点必须偏移以考虑轨道高度的变化，否则它会显示偏离中心。这是我的做法：

class CustomSlider: UISlider {

@IBInspectable var sliderTrackHeight : CGFloat = 2

    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        let originalRect = super.trackRect(forBounds: bounds)
        return CGRect(origin: CGPoint(x: originalRect.origin.x, y: originalRect.origin.y + (sliderTrackHeight / 2)), size: CGSize(width: bounds.width, height: sliderTrackHeight))
    } 
}

【讨论】：