วิธีสร้างเส้นขอบใน UIButton

ฉันใช้ปุ่มที่กำหนดเองในแอพชื่อ "addButton" และฉันต้องการกำหนดเส้นขอบด้วยสีขาวฉันจะได้เส้นขอบสีขาวรอบปุ่มที่กำหนดเองได้อย่างไร

คุณสามารถตั้งค่าคุณสมบัติเส้นขอบบน CALayer ได้โดยเข้าถึงคุณสมบัติเลเยอร์ของปุ่ม

ก่อนอื่นเติม Quartz

#import <QuartzCore/QuartzCore.h>

ตั้งค่าคุณสมบัติ:

myButton.layer.borderWidth = 2.0f;
myButton.layer.borderColor = [UIColor greenColor].CGColor;

ดู:

https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer

CALayer ในลิงก์ด้านบนอนุญาตให้คุณตั้งค่าคุณสมบัติอื่น ๆ เช่นรัศมีมุม, maskToBounds ฯลฯ ...

นอกจากนี้บทความที่ดีเกี่ยวกับความสนุกสนานของปุ่ม:

https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php

มันง่ายมากเพียงแค่เพิ่มส่วนหัว quartzCore ในไฟล์ของคุณ (สำหรับที่คุณต้องเพิ่มกรอบควอทซ์ให้กับโครงการของคุณ)

แล้วทำสิ่งนี้

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

คุณสามารถเปลี่ยนค่าลอยได้ตามต้องการ

สนุก.

นี่คือรหัสทั่วไปที่ทันสมัย ​​...

self.buttonTag.layer.borderWidth = 1.0f;
self.buttonCancel.layer.borderWidth = 1.0f;

self.buttonTag.layer.borderColor = [UIColor blueColor].CGColor;
self.buttonCancel.layer.borderColor = [UIColor blueColor].CGColor;

self.buttonTag.layer.cornerRadius = 4.0f;
self.buttonCancel.layer.cornerRadius = 4.0f;

นั่นเป็นรูปลักษณ์ที่คล้ายกับการควบคุมแบบแบ่งกลุ่ม

อัปเดตสำหรับ Swift:

• ไม่จำเป็นต้องเพิ่ม "QuartzCore"

แค่ทำ:

button.layer.cornerRadius = 8.0
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.black.cgColor

และอย่างรวดเร็วคุณไม่จำเป็นต้องนำเข้า "QuartzCore / QuartzCore.h"

เพียงใช้:

button.layer.borderWidth = 0.8
button.layer.borderColor = (UIColor( red: 0.5, green: 0.5, blue:0, alpha: 1.0 )).cgColor

หรือ

button.layer.borderWidth = 0.8
button.layer.borderColor = UIColor.grayColor().cgColor

ปัญหาในการตั้งค่าของเลเยอร์borderWidthและborderColorเมื่อคุณแตะปุ่มเส้นขอบจะไม่ทำให้เอฟเฟ็กต์ไฮไลท์เคลื่อนไหว

แน่นอนคุณสามารถสังเกตเห็นเหตุการณ์ของปุ่มและเปลี่ยนสีของเส้นขอบได้ แต่ก็ไม่จำเป็น

อีกทางเลือกหนึ่งคือการสร้าง UII ที่ยืดหยุ่นได้และตั้งเป็นภาพพื้นหลังของปุ่ม คุณสามารถสร้างชุดรูปภาพใน Images.xcassets ของคุณเช่นนี้:

จากนั้นคุณตั้งเป็นภาพพื้นหลังของปุ่ม:

หากภาพของคุณเป็นภาพเทมเพลตคุณสามารถตั้งค่าสีอ่อนของปุ่มและเส้นขอบจะเปลี่ยน:

ตอนนี้เส้นขอบจะเน้นด้วยปุ่มที่เหลือเมื่อสัมผัส

ในการเปลี่ยนรัศมีปุ่มสีและความกว้างฉันตั้งค่าดังนี้:

self.myBtn.layer.cornerRadius = 10;
self.myBtn.layer.borderWidth = 1;
self.myBtn.layer.borderColor =[UIColor colorWithRed:189.0/255.0f green:189.0/255.0f blue:189.0/255.0f alpha:1.0].CGColor;

ต่อไปนี้เป็นรุ่นที่ปรับปรุง ( สวิฟท์ 3.0.1 ) จากเบน Packard ของคำตอบ

import UIKit

@IBDesignable class BorderedButton: UIButton {

    @IBInspectable var borderColor: UIColor? {
        didSet {
            if let bColor = borderColor {
                self.layer.borderColor = bColor.cgColor
            }
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }

    override var isHighlighted: Bool {
        didSet {
            guard let currentBorderColor = borderColor else {
                return
            }

            let fadedColor = currentBorderColor.withAlphaComponent(0.2).cgColor

            if isHighlighted {
                layer.borderColor = fadedColor
            } else {

                self.layer.borderColor = currentBorderColor.cgColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = currentBorderColor.cgColor
                animation.duration = 0.4
                self.layer.add(animation, forKey: "")
            }
        }
    }
}

สามารถใช้ปุ่มผลลัพธ์ภายในกระดานเรื่องราวของคุณด้วยแท็ก@IBDesignableและ@IBInspectable

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

คุณสมบัติอื่น ๆ สามารถเพิ่มในลักษณะที่คล้ายกันสำหรับรัศมีชายแดนและไฮไลต์เวลาซีดจาง

คุณไม่จำเป็นต้องนำเข้าQuartzCore.hตอนนี้ การใช้ iOS 8 sdk และ Xcode 6.1 ในการอ้างอิง

ใช้โดยตรง:

[[myButton layer] setBorderWidth:2.0f];
[[myButton layer] setBorderColor:[UIColor greenColor].CGColor];

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

class BorderedButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)

        layer.borderColor = tintColor.CGColor
        layer.borderWidth = 1
        layer.cornerRadius = 5

        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("NSCoding not supported")
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        layer.borderColor = tintColor.CGColor
    }

    override var highlighted: Bool {
        didSet {
            let fadedColor = tintColor.colorWithAlphaComponent(0.2).CGColor

            if highlighted {
                layer.borderColor = fadedColor
            } else {
                layer.borderColor = tintColor.CGColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = tintColor.CGColor
                animation.duration = 0.4
                layer.addAnimation(animation, forKey: "")
            }
        }
    }
}

การใช้งาน:

let button = BorderedButton(style: .System) //style .System is important

ลักษณะ:

สามารถทำได้ในวิธีการต่าง ๆ ใน Swift 3.0 ทำงานกับรุ่นล่าสุดสิงหาคม - 2017

ตัวเลือกที่ 1:

กำหนดค่าคุณสมบัติ borderWidth โดยตรงสำหรับปุ่ม UI:

  btnUserButtonName.layer.borderWidth = 1.0

ตั้งชื่อด้วยค่าสีเริ่มต้นสำหรับปุ่ม UI:

btnUserButtonName.setTitleColor(UIColor.darkGray, for: .normal)

กำหนดเส้นขอบด้วยสีเริ่มต้นสำหรับค่าคุณสมบัติเส้นขอบสำหรับปุ่ม UI:

btnUserButtonName.layer.borderColor = UIColor.red

ตั้งค่าสีที่ผู้ใช้กำหนดสำหรับค่าคุณสมบัติเส้นขอบสำหรับปุ่ม UI:

   let myGrayColor = UIColor(red: 0.889415, green: 0.889436, blue:0.889424, alpha: 1.0 )
   btnUserButtonName.layer.borderColor = myGrayColor.cgColor

ตัวเลือก 2: [แนะนำ]

ใช้วิธีการขยายดังนั้นปุ่มทั่วทั้งแอปพลิเคชันจะดูสอดคล้องกันและไม่จำเป็นต้องทำซ้ำหลายบรรทัดของรหัสทุกที่

//Create an extension class in any of the swift file

extension UIButton {
func setBordersSettings() {
        let c1GreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        self.layer.borderWidth = 1.0
        self.layer.cornerRadius = 5.0
        self.layer.borderColor = c1GreenColor.cgColor
        self.setTitleColor(c1GreenColor, for: .normal)
        self.layer.masksToBounds = true
    }
}

การใช้งานในรหัส:

//use the method and call whever the border has to be applied

btnUserButtonName.setBordersSettings()

ปุ่มเอาต์พุตวิธีการขยาย:

อัปเดตด้วย Swift 3

    button.layer.borderWidth = 0.8
    button.layer.borderColor = UIColor.blue.cgColor

**** ใน Swift 3 ****

เพื่อสร้างเส้นขอบ

 btnName.layer.borderWidth = 1
 btnName.layer.borderColor = UIColor.black.cgColor

เพื่อให้มุมมน

 btnName.layer.cornerRadius = 5

สวิฟท์ 5

button.layer.borderWidth = 2

เพื่อเปลี่ยนสีของการใช้เส้นขอบ

button.layer.borderColor = CGColor(srgbRed: 255/255, green: 126/255, blue: 121/255, alpha: 1)