จะสร้างปุ่มโค้งมนง่ายๆใน Storyboard ได้อย่างไร?

ฉันเพิ่งเริ่มเรียนรู้การพัฒนา iOS ไม่พบวิธีสร้างปุ่มโค้งมนง่ายๆ ฉันพบแหล่งข้อมูลสำหรับเวอร์ชันเก่า ฉันต้องตั้งค่าพื้นหลังแบบกำหนดเองสำหรับปุ่มหรือไม่? ใน Android ฉันจะใช้แพตช์ 9 แต่ฉันรู้ว่า iOS ไม่มีความสามารถนี้

ในการทำสตอรีบอร์ดคุณต้องใช้รูปภาพสำหรับปุ่ม

หรือคุณสามารถทำได้ในรหัส:

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

คำตอบสั้น ๆ : ใช่

คุณสามารถสร้างปุ่มโค้งมนง่ายๆโดยไม่ต้องใช้ภาพพื้นหลังเพิ่มเติมหรือเขียนโค้ดใด ๆ สำหรับสิ่งเดียวกัน เพียงทำตามภาพหน้าจอด้านล่างเพื่อตั้งค่าแอตทริบิวต์รันไทม์สำหรับปุ่มเพื่อให้ได้ผลลัพธ์ที่ต้องการ

จะไม่แสดงในStoryboardแต่จะทำงานได้ดีเมื่อคุณเรียกใช้โครงการ

หมายเหตุ: 'เส้นทางสำคัญ'และความคุ้มค่าเป็น 5. ค่าที่จะต้องมีการเปลี่ยนแปลงได้ตามความสูงและความกว้างของปุ่ม สูตรของมันคือความสูงของปุ่ม * 0.50 ดังนั้นลองเล่นตามค่าเพื่อดูปุ่มกลมที่คาดไว้ในเครื่องจำลองหรือบนอุปกรณ์จริง ขั้นตอนนี้จะดูน่าเบื่อเมื่อคุณมีปุ่มมากกว่าหนึ่งปุ่มที่ต้องปัดในกระดานเรื่องราว
layer.cornerRadius

คุณสามารถทำสิ่งนี้:

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

ตั้งค่าคลาสเป็นMyButtonในIdentity Inspectorและใน IB คุณจะมีroundedคุณสมบัติ:

1. สร้างคลาส Cocoa Touch

2. แทรกโค้ดในคลาส 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. อ้างอิงภาพ

ฉันพบวิธีที่ง่ายที่สุดในการทำเช่นนี้คือการตั้งค่า cornerRadius เป็นครึ่งหนึ่งของความสูงของมุมมอง

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

คุณสามารถเชื่อมต่อIBOutletปุ่มของคุณจากกระดานเรื่องราว

จากนั้นคุณสามารถตั้งค่าcorner radiusปุ่มของคุณให้เป็นมุมกลม

ตัวอย่างเช่นคุณoutletเป็นmyButtonแล้ว

Obj - ค

 self.myButton.layer.cornerRadius = 5.0 ;

รวดเร็ว

  myButton.layer.cornerRadius = 5.0

ถ้าคุณต้องการที่ปุ่มกลมที่แน่นอนแล้วปุ่มของคุณwidthและheightจะต้องมีequalและcornerRadiusต้องเท่ากับความสูงหรือความกว้าง / 2 (ครึ่งหนึ่งของความกว้างหรือความสูง)

เนื่องจากคำตอบอื่น ๆ ได้แนะนำให้ทำงานส่วนใหญ่ในโค้ดเพียงคำตอบเดียวเท่านั้นที่ให้วิธีดูการเปลี่ยนแปลงของคุณในอินเทอร์เฟซ IB ของสตอรี่บอร์ด คำตอบของฉันไปไกลกว่าคำตอบนั้นโดยให้คุณเปลี่ยนมุมรัศมีของมุมมองปุ่มรูปภาพและอื่น ๆ

โปรดดูรหัสต่อไปนี้ หากต้องการใช้โค้ดนี้ให้สร้างไฟล์ที่รวดเร็วใหม่ชื่อ RoundedView หรืออะไรก็ได้ที่คุณต้องการเรียกมันจากนั้นไปที่กระดานเรื่องราวของคุณแล้วเปลี่ยนคลาสเป็น "RoundedView", "RoundedImageView" หรือ "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
    }
}

ในขณะที่เพิ่มlayer.cornerRadiusในสตอรีบอร์ดตรวจสอบให้แน่ใจว่าคุณไม่มีช่องว่างนำหน้าหรือต่อท้าย หากคุณคัดลอกและวางคุณอาจได้รับการเว้นวรรค คงจะดีไม่น้อยถ้า XCode พูดคำเตือนหรือข้อผิดพลาดบางอย่าง

ลองดูสิ !!

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

ส่วนขยายเป็นตัวเลือกที่ดีที่สุดสำหรับปัญหานี้ สร้างส่วนขยายของ View หรือ Button

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

เรียกจากรหัส

button.roundCorners()

ฉันใช้Xcode เวอร์ชัน 11.4

ในตัวตรวจสอบแอตทริบิวต์คุณสามารถกำหนดรัศมีมุมได้

จะไม่แสดงใน Storyboard แต่จะทำงานได้ดีเมื่อคุณเรียกใช้โครงการ

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