Swift：UISlider 轨道的一侧未修圆

Question

我有一个自定义 UISlider，但是 slider 的一侧没有四舍五入

这是我的自定义视图：

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
    }

怎么把右边也弄圆？

编辑

slider 被剪掉了，因为我的应用是 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
    }

Answer 1

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

其他解决方法是

override func layoutSubviews() {
          super.layoutSubviews()

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

    }

Answer 2

试试这个

if(UIApplication.sharedApplication().userInterfaceLayoutDirection == UIUserInterfaceLayoutDirection.RightToLeft)
{
   uiSlider.transform = CGAffineTransformMakeScale(-1.0, 1.0);
}

Answer 3

这是一个解决方案/解决方法，它适用于基于此答案的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 以满足您的需要。

在应用修复之前：

应用修复后：

Answer 4

Jawad的回答iOS14+版本

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

Answer 5

对于 SwiftUI

问题出现了，如强制环境为 RTL 时的问题中所述。 像这样.environment(\.layoutDirection, .rightToLeft)

我找到了一个适合我的简单解决方案。

只需在 slider 上使用像这样的旋转效果： .rotationEffect(Angle(degrees: 180)) ，它看起来就像是 RTL。

这只会将 slider 旋转 180 度

笔记

如果您想添加一些填充，请确保将其放在此修饰符之后，这样才有意义，否则您将不得不输入相反的边缘。 （例如.bottom而不是.top ）

这会将填充应用到顶部

Slider(value: $progress)
    .rotationEffect(Angle(degrees: 180))
    .padding(.top, 20) // After rotating

这会将填充应用到底部

Slider(value: $progress)
    .padding(.top, 20) // before 
    .rotationEffect(Angle(degrees: 180))

希望这可以帮助：）