Làm cách nào để tạo một nút tròn đơn giản trong Storyboard?

Tôi mới bắt đầu học phát triển iOS, không thể tìm thấy cách làm cho nút tròn đơn giản. Tôi tìm tài nguyên cho các phiên bản cũ. Tôi có cần đặt nền tùy chỉnh cho một nút không? Trong Android, tôi sẽ chỉ sử dụng bản vá 9, nhưng tôi biết iOS không có khả năng này.

Để làm điều đó trong bảng phân cảnh, bạn cần sử dụng hình ảnh cho nút.

Ngoài ra, bạn có thể làm điều đó trong mã:

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

Câu trả lời ngắn: CÓ

Bạn hoàn toàn có thể tạo một nút tròn đơn giản mà không cần thêm ảnh nền hay viết bất kỳ đoạn mã nào cho giống nhau. Chỉ cần làm theo ảnh chụp màn hình dưới đây, để đặt các thuộc tính thời gian chạy cho nút, để có được kết quả mong muốn.

Nó sẽ không hiển thị trong Storyboardnhưng nó sẽ hoạt động tốt khi bạn chạy dự án.

Lưu ý:
Các 'Đường dẫn chính' layer.cornerRadius và giá trị là 5. Giá trị cần phải được thay đổi theo chiều cao và chiều rộng của nút. Công thức cho nó là chiều cao của nút * 0,50. Vì vậy, hãy chơi xung quanh giá trị để xem nút tròn dự kiến ​​trong trình mô phỏng hoặc trên thiết bị vật lý. Quy trình này sẽ trông tẻ nhạt khi bạn có nhiều nút được làm tròn trong bảng phân cảnh.

Bạn có thể làm điều gì đó như sau:

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

Đặt lớp MyButtonvào Identity Inspectorvà trong IB, bạn sẽ có thuộc roundedtính:

1. Tạo một lớp Cocoa Touch.

2. Chèn mã vào lớp 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. Tham khảo hình ảnh.

Tôi tìm thấy cách dễ nhất để làm điều này, là thiết lập angleRadius bằng một nửa chiều cao của chế độ xem.

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

Bạn có thể kết nối IBOutletnút của bạn từ bảng phân cảnh.

Sau đó, bạn có thể thiết lập corner radiusnút của mình để làm cho nó tròn góc.

Ví dụ, bạn outletlà myButtonsau đó,

Mục tiêu - C

 self.myButton.layer.cornerRadius = 5.0 ;

Nhanh

  myButton.layer.cornerRadius = 5.0

Nếu bạn muốn nút tròn chính xác thì nút của bạn là widthvà heightphải equalvà cornerRadiusphải bằng chiều cao hoặc chiều rộng / 2 (một nửa chiều rộng hoặc chiều cao).

Như câu trả lời khác đã đề xuất để thực hiện hầu hết công việc này trong mã, chỉ một câu trả lời thực sự cung cấp một cách để xem các thay đổi của bạn trong Giao diện IB của bảng phân cảnh. Câu trả lời của tôi vượt xa câu trả lời đó bằng cách cho phép bạn thay đổi Bán kính góc của chế độ xem, nút, hình ảnh, v.v.

Vui lòng xem đoạn mã sau. Để sử dụng mã này, hãy tạo một tệp nhanh mới có tên là RoundedView hoặc bất cứ thứ gì bạn muốn gọi nó, sau đó đi tới bảng phân cảnh của bạn và thay đổi lớp thành "RoundedView", "RoundedImageView" hoặc "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
    }
}

Trong khi thêm layer.cornerRadiusbảng phân cảnh, hãy đảm bảo rằng bạn không có khoảng trống ở đầu hoặc cuối. Nếu bạn thực hiện sao chép dán, bạn có thể bị chèn khoảng trắng. Sẽ rất tuyệt nếu XCode nói một số loại cảnh báo hoặc lỗi.

Thử cái này!!

 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");
}

Phần mở rộng là lựa chọn tốt nhất cho vấn đề này. Tạo phần mở rộng của Chế độ xem hoặc Nút

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

Gọi nó từ mã

button.roundCorners()

Tôi đang sử dụng Xcode Phiên bản 11.4

Trong trình kiểm tra thuộc tính, bạn có thể xác định bán kính góc.

Nó sẽ không hiển thị trong Storyboard nhưng nó sẽ hoạt động tốt khi bạn chạy dự án.

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