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

希望這可以幫助：）