Bagaimana cara membuat tombol bulat sederhana di Storyboard?

Saya baru mulai mempelajari pengembangan iOS, tidak dapat menemukan cara membuat tombol bulat sederhana. Saya menemukan sumber daya untuk versi lama. Apakah saya perlu menyetel latar belakang khusus untuk tombol? Di Android, saya hanya akan menggunakan patch 9, tetapi saya tahu iOS tidak memiliki kemampuan ini.

Untuk melakukannya di storyboard, Anda perlu menggunakan gambar untuk tombolnya.

Atau Anda dapat melakukannya dalam kode:

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true

Jawaban Singkat: YA

Anda benar-benar dapat membuat tombol bulat sederhana tanpa perlu gambar latar belakang tambahan atau menulis kode apa pun untuk hal yang sama. Cukup ikuti tangkapan layar yang diberikan di bawah ini, untuk mengatur atribut runtime untuk tombol, untuk mendapatkan hasil yang diinginkan.

Ini tidak akan ditampilkan di Storyboardtetapi akan berfungsi dengan baik saat Anda menjalankan proyek.

Catatan:
The 'Jalan Key' layer.cornerRadius dan nilai adalah 5. Nilai perlu diubah sesuai dengan tinggi dan lebar dari tombol. Rumusnya adalah tinggi tombol * 0,50. Jadi, mainkan nilainya untuk melihat tombol bulat yang diharapkan di simulator atau di perangkat fisik. Prosedur ini akan terlihat membosankan jika Anda memiliki lebih dari satu tombol untuk dibulatkan di papan cerita.

Anda bisa melakukan sesuatu seperti ini:

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? frame.size.height / 2 : 0
    }
}

Setel kelas ke MyButtondalam Identity Inspectordan di IB Anda akan memiliki roundedproperti:

1. Buat kelas Cocoa Touch.

2. Masukkan kode di kelas RoundButton.

   import UIKit
   
   @IBDesignable
   class RoundButton: UIButton {
   
       @IBInspectable var cornerRadius: CGFloat = 0{
           didSet{
           self.layer.cornerRadius = cornerRadius
           }
       }
   
       @IBInspectable var borderWidth: CGFloat = 0{
           didSet{
               self.layer.borderWidth = borderWidth
           }
       }
   
       @IBInspectable var borderColor: UIColor = UIColor.clear{
           didSet{
               self.layer.borderColor = borderColor.cgColor
           }
       }
   }

3. Lihat gambarnya.

Saya menemukan cara termudah untuk melakukan ini, adalah dengan mengatur Radius sudut ke setengah dari ketinggian tampilan.

button.layer.cornerRadius = button.bounds.size.height/2

Anda dapat menghubungkan IBOutlettombol Anda dari storyboard.

Kemudian Anda dapat mengatur corner radiustombol Anda untuk membuatnya menjadi bulat.

misalnya, Anda outletadalah myButtonkemudian,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Cepat

  myButton.layer.cornerRadius = 5.0

Jika Anda ingin tombol bulat yang tepat maka tombol Anda widthdan heightharus equaldan cornerRadiusharus sama dengan tinggi atau lebar / 2 (setengah dari lebar atau tinggi).

Seperti jawaban lain yang menyarankan untuk melakukan sebagian besar pekerjaan ini dalam kode, hanya satu jawaban yang benar-benar menyediakan cara untuk melihat perubahan Anda di antarmuka IB storyboard. Jawaban saya melampaui jawaban itu dengan memungkinkan Anda untuk mengubah Radius sudut tampilan, tombol, gambar, dll.

Silakan lihat kode berikut. Untuk menggunakan kode ini, buat file swift baru bernama RoundedView atau apa pun yang Anda ingin menyebutnya, lalu buka storyboard Anda dan ubah kelas menjadi "RoundedView", "RoundedImageView", atau "RoundedButton".

import UIKit

@IBDesignable class RoundedImage: UIImageView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedView: UIView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

Saat menambahkan layer.cornerRadiusdi papan cerita, pastikan Anda tidak memiliki spasi di depan atau di belakang. Jika Anda melakukan salin tempel, Anda mungkin mendapatkan spasi yang disisipkan. Akan lebih baik jika Xcode mengatakan semacam peringatan atau kesalahan.

Coba ini!!

 override func viewDidLoad() {
   super.viewDidLoad()

   var button = UIButton.buttonWithType(.Custom) as UIButton
   button.frame = CGRectMake(160, 100, 200,40)

   button.layer.cornerRadius =5.0
   button.layer.borderColor = UIColor.redColor().CGColor
   button.layer.borderWidth = 2.0

   button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
   button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
   button.clipsToBounds = true

   view.addSubview(button)
}
    func OnClickroundButton() {
   NSLog(@"roundButton Method Called");
}

Ekstensi adalah opsi terbaik untuk masalah ini. Buat ekstensi dari View atau Button

public extension UIView {
  //Round the corners
  func roundCorners(){
    let radius = bounds.maxX / 16
    layer.cornerRadius = radius
  }
}

Sebut saja dari kode

button.roundCorners()

Saya menggunakan Xcode Versi 11.4

Di inspektur atribut, Anda dapat menentukan radius sudut.

Ini tidak akan ditampilkan di Storyboard tetapi akan berfungsi dengan baik saat Anda menjalankan proyek.

import UIKit

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()


    }

    func updateCornerRadius(radius:CGFloat) {
        layer.cornerRadius = radius
    }
    @IBInspectable var cornerRadius:CGFloat = 0{
        didSet{
            updateCornerRadius(radius: cornerRadius)
        }
    }
}