Làm thế nào để tạo đường viền trong UIButton?

Tôi sử dụng nút tùy chỉnh trong ứng dụng của mình có tên "addButton" và tôi muốn viền nó với màu trắng làm thế nào tôi có thể có viền màu trắng xung quanh nút tùy chỉnh của mình?

Bạn có thể đặt thuộc tính viền trên CALayer bằng cách truy cập thuộc tính lớp của nút.

Đầu tiên, thêm Quartz

#import <QuartzCore/QuartzCore.h>

Đặt thuộc tính:

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

Xem:

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

CALayer trong liên kết trên cho phép bạn đặt các thuộc tính khác như bán kính góc, maskToBound, v.v ...

Ngoài ra, một bài viết tốt về nút vui vẻ:

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

Rất đơn giản, chỉ cần thêm tiêu đề thạch anh trong tệp của bạn (để bạn phải thêm khung thạch anh vào dự án của mình)

và sau đó làm điều này

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

bạn có thể thay đổi các giá trị float theo yêu cầu.

thưởng thức.

Đây là một số mã hiện đại điển hình ...

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;

đó là một cái nhìn tương tự như các điều khiển phân đoạn.

CẬP NHẬT cho Swift:

• Không cần thêm "QuartzCore"

Cứ làm đi:

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

Và trong swift, bạn không cần nhập "QuartzCore / QuartzCore.h"

Chỉ dùng:

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

hoặc là

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

Vấn đề thiết lập lớp borderWidthvà borderColorlà khi bạn chạm vào nút, đường viền không tạo hiệu ứng nổi bật.

Tất nhiên, bạn có thể quan sát các sự kiện của nút và thay đổi màu đường viền cho phù hợp nhưng điều đó cảm thấy không cần thiết.

Một tùy chọn khác là tạo UIImage có thể kéo dài và đặt nó làm hình nền của nút. Bạn có thể tạo một bộ Ảnh trong Images.xcassets của bạn như thế này:

Sau đó, bạn đặt nó làm hình nền của nút:

Nếu hình ảnh của bạn là hình ảnh mẫu, bạn có thể đặt màu sắc của nút và đường viền sẽ thay đổi:

Bây giờ đường viền sẽ nổi bật với phần còn lại của nút khi chạm vào.

Để thay đổi nút Bán kính, Màu sắc và Chiều rộng tôi đặt như sau:

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;

Đây là phiên bản cập nhật ( Swift 3.0.1 ) từ câu trả lời của Ben 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: "")
            }
        }
    }
}

Nút kết quả có thể được sử dụng bên trong StoryBoard của bạn nhờ vào các thẻ @IBDesignablevà @IBInspectable.

Ngoài ra hai thuộc tính được xác định, cho phép bạn đặt chiều rộng và màu trực tiếp trên trình tạo giao diện và xem trước kết quả.

Các thuộc tính khác có thể được thêm vào theo cách tương tự, cho bán kính đường viền và làm nổi bật thời gian mờ dần.

Bạn không cần phải nhập QuartzCore.hngay bây giờ. Lấy sdk iOS 8 và Xcode 6.1 trong lượt giới thiệu.

Sử dụng trực tiếp:

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

Đây là một UIButtonlớp con hỗ trợ hoạt hình trạng thái được tô sáng mà không sử dụng hình ảnh. Nó cũng cập nhật màu đường viền khi chế độ màu của chế độ xem thay đổi.

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

Sử dụng:

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

Xuất hiện:

Điều này có thể đạt được bằng nhiều phương pháp khác nhau trong Swift 3.0 Hoạt động trên phiên bản mới nhất tháng 8-2017

Lựa chọn 1:

Chỉ định trực tiếp các giá trị thuộc tính BorderWidth cho Nút UI:

  btnUserButtonName.layer.borderWidth = 1.0

Đặt Tiêu đề với các giá trị Màu mặc định cho Nút UI:

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

Đặt viền với màu mặc định cho các giá trị thuộc tính viền cho nút UI:

btnUserButtonName.layer.borderColor = UIColor.red

Đặt Màu do người dùng xác định cho các giá trị thuộc tính viền cho Nút UI:

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

Tùy chọn 2: [Khuyến nghị]

Sử dụng phương thức Tiện ích mở rộng, do đó, Nút thông qua ứng dụng sẽ trông ổn định và không cần lặp lại nhiều dòng mã ở mọi nơi.

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

Sử dụng trong mã:

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

btnUserButtonName.setBordersSettings()

Đầu ra của nút Phương thức mở rộng:

Cập nhật với Swift 3

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

**** Trong Swift 3 ****

Tạo đường viền

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

Để làm tròn góc

 btnName.layer.cornerRadius = 5

Swift 5

button.layer.borderWidth = 2

Để thay đổi màu sắc của đường viền sử dụng

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