ใช้ Storyboard เพื่อปิดบัง UIView และให้มุมโค้งมน?

คำถามมากมายเช่นนี้จะอธิบายถึงวิธีการสร้างมาสก์โดยใช้โปรแกรมและให้มุมโค้งมนกับ UIView

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

ใช่ฉันใช้มันมาก แต่คำถามแบบนี้มีคำตอบหลายครั้งแล้ว

แต่อย่างไรก็ตามใน Interface Builder คุณต้องเพิ่ม User Defined Runtime Attributes ดังนี้:

layer.masksToBounds Boolean YES
layer.cornerRadius Number {View's Width/2}

และเปิดใช้งาน

Clips subviews

ผล:

คุณสามารถทำได้ในสตอรีบอร์ดโดยใช้คุณสมบัติที่ผู้ใช้กำหนดเอง เลือกมุมมองที่คุณต้องการปัดเศษและเปิด Identity Inspector ในส่วนแอททริบิวต์รันไทม์ที่ผู้ใช้กำหนดให้เพิ่มสองรายการต่อไปนี้:

• Key Path:, layer.cornerRadiusType: Number, Value: (รัศมีใดก็ได้ที่คุณต้องการ)
• Key Path:, layer.masksToBoundsType: Boolean, Value: checked

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

แก้ไข: ตัวอย่างรัศมีแบบไดนามิก

extension UIView {

    /// The ratio (from 0.0 to 1.0, inclusive) of the view's corner radius
    /// to its width. For example, a 50% radius would be specified with
    /// `cornerRadiusRatio = 0.5`.
    @IBDesignable public var cornerRadiusRatio: CGFloat {
        get {
            return layer.cornerRadius / frame.width
        }

        set {
            // Make sure that it's between 0.0 and 1.0. If not, restrict it
            // to that range.
            let normalizedRatio = max(0.0, min(1.0, newValue))
            layer.cornerRadius = frame.width * normalizedRatio
        }
    }

}

ฉันตรวจสอบแล้วว่าใช้งานได้ในสนามเด็กเล่น

เลือกมุมมอง

extension UIView {

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

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

    @IBInspectable var borderColorV: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
}

แม้จะเปลี่ยนสตอรี่บอร์ดทั้งหมดแล้วคำตอบของวรพจน์ก็ไม่ได้ผลสำหรับฉัน

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

คำตอบยาว:

มุมโค้งมนของ UIView / UIButton ฯลฯ

customUIView.layer.cornerRadius = 10

ความหนาของขอบ

pcustomUIView.layer.borderWidth = 1

สีเส้นขอบ

customUIView.layer.borderColor = UIColor.blue.cgColor