UIButton'da sınır nasıl oluşturulur?

Uygulamamda "addButton" adlı özel düğmeyi kullanıyorum ve beyaz renkle sınırlandırmak istiyorum.

Düğmenin katman özelliğine erişerek CALayer'daki kenarlık özelliklerini ayarlayabilirsiniz.

İlk olarak, Quartz ekleyin

#import <QuartzCore/QuartzCore.h>

Özellikleri ayarla:

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

Görmek:

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

Yukarıdaki bağlantıdaki CALayer, köşe yarıçapı, maskToBounds vb. Gibi diğer özellikleri ayarlamanıza olanak tanır.

Ayrıca, düğme eğlencesi hakkında iyi bir makale:

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

Çok basit, sadece kuvarsınızı başlık dosyasına ekleyin (bunun için projenize kuvars çerçeveyi eklemeniz gerekir)

ve sonra bunu yap

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

kayan nokta değerlerini gerektiği gibi değiştirebilirsiniz.

zevk almak.

İşte bazı tipik modern kodlar ...

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;

bu bölümlenmiş kontrollere benzer bir görünümdür.

Swift için GÜNCELLEME:

• "QuartzCore" eklemenize gerek yok

Sadece yap:

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

Ve hızlı bir şekilde, "QuartzCore / QuartzCore.h" dosyasını içe aktarmanıza gerek yoktur.

Sadece kullan:

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

veya

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

Katmanın borderWidthveborderColor düğmeye dokunduğunuzda sınır vurgu efekti animasyon olmamasıdır.

Tabii ki, düğmenin olaylarını gözlemleyebilir ve kenarlık rengini buna göre değiştirebilirsiniz, ancak bu gereksizdir.

Başka bir seçenek, gerilebilir bir UIImage oluşturmak ve düğmenin arka plan görüntüsü olarak ayarlamaktır. Images.xcasset'lerinizde aşağıdaki gibi bir Resim kümesi oluşturabilirsiniz:

Ardından, düğmenin arka plan resmi olarak ayarlarsınız:

Resminiz bir şablon resmiyse düğmenin renk tonunu ayarlayabilirsiniz ve kenarlık değişecektir:

Şimdi kenarlık dokunulduğunda düğmenin geri kalanıyla vurgulanacak.

Yarıçap, Renk ve Genişlik düğmesini değiştirmek için:

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;

İşte Ben Packard'ın cevabından güncellenmiş bir versiyon ( Swift 3.0.1 ) .

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

Ortaya çıkan düğme @IBDesignableve @IBInspectableetiketleri sayesinde StoryBoard'unuz içinde kullanılabilir .

Ayrıca tanımlanan iki özellik, sınır genişliğini ve rengini doğrudan arabirim oluşturucuda ayarlamanıza ve sonucu önizlemenize olanak tanır.

Kenarlık yarıçapı ve açık renk solma süresi için diğer özellikler benzer bir şekilde eklenebilir.

QuartzCore.hŞimdi içe aktarmanıza gerek yok . İOS 8 sdk ve Xcode 6.1 referans olarak alınmıştır.

Doğrudan kullanın:

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

UIButtonVurgulanan durum animasyonunu resim kullanmadan destekleyen bir alt sınıf. Ayrıca görünümün renk tonu modu değiştiğinde kenarlık rengini de günceller.

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

Kullanımı:

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

Görünüm:

Bu, Swift 3.0'da çeşitli yöntemlerle elde edilebilir.

Seçenek 1:

UI Düğmesi için borderWidth özellik değerlerini doğrudan atayın:

  btnUserButtonName.layer.borderWidth = 1.0

UI Düğmesi için Başlığı Varsayılan Renk değerleriyle ayarla:

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

UI Düğmesi için kenarlık özelliği değerleri için Kenarlığı Varsayılan Renkle Ayarla:

btnUserButtonName.layer.borderColor = UIColor.red

Kullanıcı Arabirimi Düğmesi için kenarlık özelliği değerleri için kullanıcı tanımlı Renk ayarlama:

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

2. Seçenek: [Önerilen]

Uzantı yöntemini kullanın, böylece uygulama boyunca Düğme tutarlı görünecek ve her yerde birden fazla kod satırını tekrarlamaya gerek olmayacaktır.

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

Kodda kullanım:

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

btnUserButtonName.setBordersSettings()

Uzantı yöntemi Düğmesinin Çıkışı:

Swift 3 ile güncelleme

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

**** Swift 3'te ****

Kenarlık oluşturmak için

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

Köşeyi yuvarlamak

 btnName.layer.cornerRadius = 5

Hızlı 5

button.layer.borderWidth = 2

Kenarlık rengini değiştirmek için

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