Làm cách nào để tạo đường viền trong UIButton?

Question

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

Answer 1

Bạn có thể đặt thuộc tính đường 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 thạch anh

#import <QuartzCore/QuartzCore.h> 

Set thuộc tính:

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

Xem:

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

Các CALayer trong liên kết ở trên cho phép bạn thiết lập các tài sản khác như góc bán kính, maskToBounds, v.v ...

Ngoài ra, một bài viết tốt vào nút thú vị:

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

Answer 2

của nó rất đơn giản, chỉ cần thêm tiêu đề quartzCore trong tập tin của bạn (ví rằng bạn phải thêm khuôn khổ thạch anh để dự án của bạn)

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 float giá trị theo yêu cầu.

thưởng thức.

---

Dưới đâ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ư điều khiển phân đoạn.

Answer 3

Và trong nhanh chóng, bạn không cần phải nhập khẩu "QuartzCore/QuartzCore.h"

Chỉ cần sử 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

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

Answer 4

Bạn không cần nhập QuartzCore.h ngay bây giờ. Nhận iOS 8 sdk và Xcode 6.1 khi tham chiếu.

Trực tiếp sử dụng:

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

Answer 5

Vấn đề thiết lập của borderWidth và borderColor là khi bạn chạm vào nút biên giới không sinh động hiệu quả nổi bật lớp.

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 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 làm hình nền của nút. Bạn có thể tạo một tập ảnh trong ảnh của bạn.xcassets như thế này:

Sau đó, bạn thiết lập nó như là hình nền của nút:

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

Bây giờ b thứ tự sẽ làm nổi bật với phần còn lại của nút khi chạm vào.

Answer 6

Để thay đổi nút Radius, Màu sắc và Width tôi đặt như thế này:

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; 

Answer 7

Dưới đây là một lớp con UIButton có hỗ trợ hình ảnh động nhà nước nhấn mạnh 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: "") 
      } 
     } 
    } 
} 

Cách sử dụng:

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

Hình thức:

Answer 8

Cập nhật với Swift 3

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

Answer 9

Dưới đây là một phiên bản cập nhật (Swift 3.0.1) từ Ben Packard answer.

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 @IBDesignable và @IBInspectable thẻ.

Ngoài hai thuộc tính xác định, cho phép bạn thiết lập độ rộng biên giới, màu trực tiếp trên giao diện người xây dựng và xem trước kết quả.

Các tài sản khác có thể được thêm vào trong một thời trang tương tự, đối với bán kính biên giới và làm nổi bật thời gian phai màu.

Answer 10

**** Trong Swift 3 ****

Để tạo biên giới

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

Để làm cho góc làm tròn

btnName.layer.cornerRadius = 5 

Answer 11

này có thể đạt được trong các 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:

trực tiếp gán các giá trị tài sản borderWidth cho UI Button:

btnUserButtonName.layer.borderWidth = 1.0 

Set Tiêu đề với các giá trị mặc định màu cho giao diện người dùng Button:

Set Border với Mặc định màu cho các giá trị tài sản biên giới cho giao diện người dùng Button:

btnUserButtonName.layer.borderColor = UIColor.red 

Set người dùng định nghĩa màu cho giá trị tài sản biên giới cho giao diện người dùng Button:

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

Lựa chọn 2 : [Đề xuất]

Sử dụng Ext Phương thức ension, do đó, Button thông qua ứng dụng sẽ được tìm kiếm nhất quán và không cần phải 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 
    } 
} 

Cách sử dụng trong mã:

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

btnUserButtonName.setBordersSettings() 

Output của phương pháp mở rộng Button: