Bagaimana saya bisa membuat tombol memiliki batas bulat di Swift?

Saya sedang membangun aplikasi menggunakan cepat di versi terbaru Xcode 6, dan ingin tahu bagaimana saya bisa memodifikasi tombol saya sehingga dapat memiliki batas bulat yang dapat saya sesuaikan sendiri jika diperlukan. Setelah selesai, bagaimana saya bisa mengubah warna perbatasan itu sendiri tanpa menambahkan latar belakang? Dengan kata lain saya ingin tombol agak membulat tanpa latar belakang, hanya batas 1pt dengan warna tertentu.

Gunakan button.layer.cornerRadius, button.layer.borderColordan button.layer.borderWidth. Catatan yang borderColormembutuhkan CGColor, jadi Anda bisa mengatakan (Swift 3/4):

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

Untuk melakukan pekerjaan ini di storyboard (Interface Builder Inspector)

Dengan bantuan IBDesignable, kami dapat menambahkan lebih banyak opsi ke Interface Builder Inspector untuk UIButtondan men-tweak mereka di storyboard. Pertama, tambahkan kode berikut ke proyek Anda.

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

Kemudian cukup atur atribut untuk tombol di storyboard.

Saya telah membuat sublcass UIButton sederhana yang menggunakan tintColor untuk teks dan warna perbatasan dan ketika disorot mengubah latar belakangnya ke 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)
}
}

Ini memanfaatkan ekstensi UIImage yang membuat gambar dari warna, saya menemukan kode itu di sini: https://stackoverflow.com/a/33675160

Ini bekerja paling baik ketika diatur untuk mengetikkan Custom in interface builder karena jenis Sistem default sedikit mengubah warna ketika tombol disorot.

Kelas ini didasarkan dari semua komentar dan saran dalam jawaban, dan juga dapat dirancang langsung dari xcode. Salin ke proyek Anda dan masukkan UIButton apa saja dan ubah untuk menggunakan kelas khusus, sekarang cukup pilih warna batas atau latar belakang dari xcode untuk kondisi normal dan / atau yang disorot.

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

Berdasarkan jawaban @ returntrue saya berhasil mengimplementasikannya di Interface Builder.

Untuk mendapatkan tombol sudut menggunakan Interface Builder tambahkan Kunci Path = "layer.cornerRadius"dengan Type = "Number"dan Value = "10"(atau nilai lain yang diperlukan) di " User Defined RunTime Attribute" Identity Inspectortombol.

Anda dapat menggunakan subkelas UIButton ini untuk menyesuaikan UIButton sesuai kebutuhan Anda.

kunjungi repo github ini untuk referensi

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

Saya pikir cara termudah dan terbersih, adalah menggunakan protokol untuk menghindari pewarisan dan pengulangan kode. Anda dapat mengubah properti ini langsung dari storyboard

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

Memperbarui

Di tautan ini Anda dapat menemukan contoh dengan utilitas protokol yang dapat dilacak

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

sebagai samping tip pastikan tombol Anda bukan subkelas dari kelas khusus di papan cerita, dalam hal ini kode Anda tempat terbaik harus di kelas kustom itu sendiri menyebabkan kode hanya bekerja di luar kelas kustom jika tombol Anda subkelas dari default Kelas UIButton dan outletnya, semoga ini bisa membantu orang bertanya-tanya mengapa radio sudut tidak berlaku pada tombol saya dari kode.

@IBOutlet weak var button: UIButton!

...

Saya pikir untuk radius cukup dengan parameter ini:

button.layer.cornerRadius = 5

COBALAH Tombol Border Ini Dengan Sudut Bulat

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

Anda dapat subkelas UIButtondan menambahkan @IBInspectablevariabel ke dalamnya sehingga Anda dapat mengonfigurasi parameter tombol khusus melalui StoryBoard "Attribute Inspector". Di bawah ini saya menuliskan kode itu.

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

}

Saya pikir ini adalah bentuk sederhana

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