斯威夫特：UISlider轨道的一侧不圆

Posted 2023-03-12

【中文标题】斯威夫特：UISlider轨道的一侧不圆

【英文标题】：Swift: UISlider one side of track not rounded

【发布时间】：2020-01-28 12:21:09

【问题描述】：

我有一个自定义 UISlider，但是滑块的一侧不是圆角

这是我的自定义视图：

class PrimarySliderView: UISlider 

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

    required init?(coder: NSCoder) 
        super.init(coder: coder)
        setup()
    

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

    func setup() 
        tintColor = .cornFlowerBlue
    

如何把右边也弄圆？

编辑

由于我的应用程序是RTL，所以滑块被剪切，当我更改为LTR时，此显示正确但不在RTL中，如何解决此问题？

在我的 AppDelegate 中，我强制 RTL：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool 
        // Override point for customization after application launch.
        UIView.appearance().semanticContentAttribute = .forceRightToLeft

        return true
    

【问题讨论】：

我测试了你的代码......它给了我完美的圆角滑块

两边是圆的？？

是的，正如@jawadAli 所说，我也测试了只是将.cornFlowerBlue 更改为.blue（因为我没有将此扩展定义为 UIColor），并且它的两端都是圆形。跨度>

还在类的顶部添加@IBDesignable 以直接从情节提要中分配它。

真的很奇怪谢谢，我去看看问题出在哪里

【参考方案1】：

您需要为最小和最大轨道添加圆形图像 或者您可以使用颜色创建圆形视图

其他解决方法是

override func layoutSubviews() 
          super.layoutSubviews()

        self.layer.sublayers![1].cornerRadius = 10

    

【讨论】：

感谢您的回答。我明白为什么滑块被剪切了，因为我的应用程序是 RTL，当我更改为 LTR 这个显示正确但不是在 RTL 中时，如何解决这个问题？

是的，但是您的解决方案并不能解决我的问题，切边仅围绕顶角...我的应用程序在 RTL 中。在 LTR 中它有效，但在 RTL 中无效。目前我的应用程序必须只在 RTL 中

你能和我分享代码吗？或者你有teamviewer？

工作谢谢，从你的回答中删除这个layer.cornerRadius = 10

上述带有子层的解决方案在 ios 14 上失败。

【参考方案2】：

这是一个解决方案/解决方法，它适用于基于 this answer 的 iOS 14。 此外，它还经过调整以解决模糊边缘的问题。

if UIApplication.shared.userInterfaceLayoutDirection == .rightToLeft 
        setMinimumTrackImage(getImageWithColor(color: .blue, size: frame.size).resizableImage(withCapInsets: UIEdgeInsets(top: 3, left: 3, bottom: 3, right: 3), resizingMode: .stretch), for: .normal)

这里是getImageWithColor的实现：

private func getImageWithColor(color: UIColor, size: CGSize) -> UIImage 
    
    let layer: CALayer =  CALayer()
    layer.frame = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    layer.masksToBounds = true
    layer.cornerRadius = 3
    layer.backgroundColor = color.cgColor
    
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    layer.render(in: UIGraphicsGetCurrentContext()!)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return image

注意：不要忘记更改cornerRadius 和 UIEdgeInsets 以满足您的需求。

在应用修复之前：

应用修复后：

【讨论】：

这对我来说完美解决了

【参考方案3】：

试试这个

if(UIApplication.sharedApplication().userInterfaceLayoutDirection == UIUserInterfaceLayoutDirection.RightToLeft)

   uiSlider.transform = CGAffineTransformMakeScale(-1.0, 1.0);

【讨论】：

感谢您的回答。我明白为什么滑块被剪切了，因为我的应用程序是 RTL，当我更改为 LTR 这个显示正确但不是在 RTL 中时，如何解决这个问题？

我更新了答案，试试那个

那不解决问题，我要保留RTL的意思

UISlider 在 RTL 和 LTR 模式下遵循相同的方向。

你可以看看这个，希望对你有帮助

【参考方案4】：

iOS14+版本Jawad's answer

final class RoundedSlider: UISlider 
    override func layoutSubviews() 
        super.layoutSubviews()

        if #available(iOS 14.0, *) 
            if let layers = layer.sublayers?.first?.sublayers, layers.count > 0, let layer = layers[1] 
                layer.cornerRadius = layer.bounds.height / 2
            
         else 
            if let layers = layer.sublayers, layers.count > 0, let layer = layers[1] 
                layer.cornerRadius = layer.bounds.height / 2