Swift'te bir düğmenin yuvarlatılmış kenarlığı nasıl alabilirim?

Xcode 6'nın en son sürümünde swift kullanarak bir uygulama oluşturuyorum ve düğmemi nasıl değiştirebileceğimi bilmek istiyorum, böylece gerekirse kendimi ayarlayabileceğim yuvarlak bir kenarlık olabilir. Bu yapıldıktan sonra, arka plan eklemeden kenarlığın rengini nasıl değiştirebilirim? Başka bir deyişle, arka planı olmayan, sadece belirli bir rengin sadece 1 pt'lik bir kenarlığı olan hafif yuvarlak bir düğme istiyorum.

Kullanın button.layer.cornerRadius, button.layer.borderColorve button.layer.borderWidth. Bunu borderColorgerektiren bir not CGColor, böylece şunu söyleyebilirsiniz (Swift 3/4):

button.backgroundColor = .clear
button.layer.cornerRadius = 5
button.layer.borderWidth = 1
button.layer.borderColor = UIColor.black.cgColor

Bu işi film şeridinde yapmak için (Interface Builder Inspector)

Yardımı IBDesignableile Arayüz Oluşturucu Denetçisine daha fazla seçenek ekleyebilir UIButtonve bunları storyboard'da düzenleyebiliriz . İlk olarak, projenize aşağıdaki kodu ekleyin.

@IBDesignable extension UIButton {

    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
        }
        get {
            return layer.cornerRadius
        }
    }

    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }
}

Ardından, film şeridindeki düğmelerin özelliklerini ayarlayın.

tintColorMetin ve kenarlık renklerini kullanan ve vurgulandığında arka planını değiştirdiği basit bir UIButton sublcass oluşturdum tintColor.

class BorderedButton: UIButton {

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    layer.borderWidth = 1.0
    layer.borderColor = tintColor.CGColor
    layer.cornerRadius = 5.0
    clipsToBounds = true
    contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
    setTitleColor(tintColor, forState: .Normal)
    setTitleColor(UIColor.whiteColor(), forState: .Highlighted)
    setBackgroundImage(UIImage(color: tintColor), forState: .Highlighted)
}
}

Bu, bir renkten bir görüntü oluşturan bir UIImage uzantısını kullanır, bu kodu burada buldum: https://stackoverflow.com/a/33675160

Arabirim oluşturucuda Özel olarak ayarlandığında en iyi sonucu verir, çünkü varsayılan Sistem türü düğme vurgulandığında renkleri biraz değiştirir.

Bu sınıf, cevaplardaki tüm yorum ve önerilere dayanmaktadır ve ayrıca doğrudan xcode'dan da tasarlanabilir. Projenize kopyalayın ve herhangi bir UIBdüğmesi ekleyin ve özel sınıfı kullanmak için değiştirin, şimdi normal ve / veya vurgulanan durumlar için xcode'dan kenarlık veya arka plan rengini seçin.

//
//  RoundedButton.swift
//

import UIKit

@IBDesignable
class RoundedButton:UIButton {

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    //Normal state bg and border
    @IBInspectable var normalBorderColor: UIColor? {
        didSet {
            layer.borderColor = normalBorderColor?.CGColor
        }
    }

    @IBInspectable var normalBackgroundColor: UIColor? {
        didSet {
            setBgColorForState(normalBackgroundColor, forState: .Normal)
        }
    }


    //Highlighted state bg and border
    @IBInspectable var highlightedBorderColor: UIColor?

    @IBInspectable var highlightedBackgroundColor: UIColor? {
        didSet {
            setBgColorForState(highlightedBackgroundColor, forState: .Highlighted)
        }
    }


    private func setBgColorForState(color: UIColor?, forState: UIControlState){
        if color != nil {
            setBackgroundImage(UIImage.imageWithColor(color!), forState: forState)

        } else {
            setBackgroundImage(nil, forState: forState)
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        layer.cornerRadius = layer.frame.height / 2
        clipsToBounds = true

        if borderWidth > 0 {
            if state == .Normal && !CGColorEqualToColor(layer.borderColor, normalBorderColor?.CGColor) {
                layer.borderColor = normalBorderColor?.CGColor
            } else if state == .Highlighted && highlightedBorderColor != nil{
                layer.borderColor = highlightedBorderColor!.CGColor
            }
        }
    }

}

//Extension Required by RoundedButton to create UIImage from UIColor
extension UIImage {
    class func imageWithColor(color: UIColor) -> UIImage {
        let rect: CGRect = CGRectMake(0, 0, 1, 1)
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), false, 1.0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

@Returntrue yanıtına dayanarak, bunu Interface Builder'da uygulamayı başardım.

Arayüz Oluşturucu'yu kullanarak yuvarlak köşeler düğmesi almak için , düğmenin " " bölümüne ve (veya gerektiği gibi başka bir değer) Path = "layer.cornerRadius"içeren bir Anahtar ekleyin .Type = "Number"Value = "10"User Defined RunTime AttributeIdentity Inspector

UIButton'u ihtiyaçlarınıza göre özelleştirmek için bu UIButton alt sınıfını kullanabilirsiniz.

referans için bu github deposunu ziyaret edin

class RoundedRectButton: UIButton {

    var selectedState: Bool = false

    override func awakeFromNib() {
        super.awakeFromNib()
        layer.borderWidth = 2 / UIScreen.main.nativeScale
        layer.borderColor = UIColor.white.cgColor
        contentEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
    }


    override func layoutSubviews(){
        super.layoutSubviews()
        layer.cornerRadius = frame.height / 2
        backgroundColor = selectedState ? UIColor.white : UIColor.clear
        self.titleLabel?.textColor = selectedState ? UIColor.green : UIColor.white
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        selectedState = !selectedState
        self.layoutSubviews()
    }
}

Bence en kolay ve en temiz yol, miras ve kod tekrarını önlemek için protokol kullanmaktır. Bu özellikleri doğrudan film şeridinden değiştirebilirsiniz

protocol Traceable {
    var cornerRadius: CGFloat { get set }
    var borderColor: UIColor? { get set }
    var borderWidth: CGFloat { get set }
}

extension UIView: Traceable {

    @IBInspectable var cornerRadius: CGFloat {
        get { return layer.cornerRadius }
        set {
            layer.masksToBounds = true
            layer.cornerRadius = newValue
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            guard let cgColor = layer.borderColor else { return nil }
            return  UIColor(cgColor: cgColor)
        }
        set { layer.borderColor = newValue?.cgColor }
    }

    @IBInspectable var borderWidth: CGFloat {
        get { return layer.borderWidth }
        set { layer.borderWidth = newValue }
    }
}

Güncelleme

Bu linkte İzlenebilir protokolün yardımcı programını içeren bir örnek bulabilirsiniz

   @IBOutlet weak var yourButton: UIButton! {
        didSet{
            yourButton.backgroundColor = .clear
            yourButton.layer.cornerRadius = 10
            yourButton.layer.borderWidth = 2
            yourButton.layer.borderColor = UIColor.white.cgColor
        }
    }

bir kenara ipucu, düğmenizin hikaye panosunda herhangi bir özel sınıfın alt sınıfı olmadığından emin olun, bu durumda kodunuzun en iyi yeri özel sınıfta olmalıdır, çünkü düğmeniz varsayılanın alt sınıfı ise kodun yalnızca özel sınıfın dışında çalışmasına neden olur UIButton sınıfı ve çıkışı, umarım bu herkesin köşe radyolarının neden düğmeme uygulanmadığını merak etmesine yardımcı olabilir.

@IBOutlet weak var button: UIButton!

...

Yarıçap için yeterli bu parametre düşünüyorum:

button.layer.cornerRadius = 5

TRY BU Düğme Kenarları Yuvarlatılmış Köşeli

anyButton.backgroundColor = .clear

anyButton.layer.cornerRadius = anyButton.frame.height / 2

anyButton.layer.borderWidth = 1

anyButton.layer.borderColor = UIColor.black.cgColor

import UIKit

@IBDesignable
class RoundedButton: UIButton {
    
    @IBInspectable var cornerRadius: CGFloat = 8
    @IBInspectable var borderColor: UIColor? = .lightGray
    
    override func draw(_ rect: CGRect) {
        layer.cornerRadius = cornerRadius
        layer.masksToBounds = true
        layer.borderWidth = 1
        layer.borderColor = borderColor?.cgColor
        
    }
    
    
}

Özel düğme parametrelerini StoryBoard "Attribute Inspector" aracılığıyla yapılandırabilmeniz için alt sınıfları oluşturabilir UIButtonve @IBInspectabledeğişkenler ekleyebilirsiniz . Aşağıda bu kodu yazıyorum.

@IBDesignable
class BHButton: UIButton {

    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */

    @IBInspectable lazy var isRoundRectButton : Bool = false

    @IBInspectable public var cornerRadius : CGFloat = 0.0 {
        didSet{
            setUpView()
        }
    }

    @IBInspectable public var borderColor : UIColor = UIColor.clear {
        didSet {
            self.layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable public var borderWidth : CGFloat = 0.0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }

    //  MARK:   Awake From Nib

    override func awakeFromNib() {
        super.awakeFromNib()
        setUpView()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setUpView()
    }

    func setUpView() {
        if isRoundRectButton {
            self.layer.cornerRadius = self.bounds.height/2;
            self.clipsToBounds = true
        }
        else{
            self.layer.cornerRadius = self.cornerRadius;
            self.clipsToBounds = true
        }
    }

}

Bence bu basit bir form

        Button1.layer.cornerRadius = 10(Half of the length and width)
        Button1.layer.borderWidth = 2