Bagaimana cara membuat perbatasan di UIButton?

Saya menggunakan tombol kustom di aplikasi saya bernama "addButton" dan saya ingin membatasinya dengan warna putih bagaimana saya bisa mendapatkan perbatasan warna putih di sekitar tombol kustom saya?

Anda dapat mengatur properti perbatasan pada CALayer dengan mengakses properti lapisan tombol.

Pertama, tambahkan Kuarsa

#import <QuartzCore/QuartzCore.h>

Setel properti:

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

Lihat:

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

CALayer di tautan di atas memungkinkan Anda untuk mengatur properti lain seperti radius sudut, maskToBounds dll ...

Juga, artikel bagus tentang tombol menyenangkan:

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

Ini sangat sederhana, cukup tambahkan header quartzCore di file Anda (untuk itu Anda harus menambahkan kerangka kuarsa ke proyek Anda)

dan kemudian lakukan ini

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

Anda dapat mengubah nilai float sesuai kebutuhan.

Nikmati.

Berikut ini beberapa kode modern khas ...

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;

itu mirip dengan kontrol tersegmentasi.

PEMBARUAN untuk Swift:

• Tidak perlu menambahkan "QuartzCore"

Kerjakan saja:

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

Dan dengan cepat, Anda tidak perlu mengimpor "QuartzCore / QuartzCore.h"

Cukup gunakan:

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

atau

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

Masalah pengaturan lapisan borderWidthdan borderColoradalah bahwa ketika Anda menyentuh tombol perbatasan tidak menghidupkan efek highlight.

Tentu saja, Anda dapat mengamati acara tombol dan mengubah warna perbatasan sesuai tetapi itu terasa tidak perlu.

Pilihan lain adalah membuat UIImage yang dapat direnggangkan dan mengaturnya sebagai gambar latar tombol. Anda dapat membuat set gambar di Images.xcassets Anda seperti ini:

Kemudian, Anda mengaturnya sebagai gambar latar tombol:

Jika gambar Anda adalah gambar templat, Anda dapat mengatur warna warna tombol dan batas akan berubah:

Sekarang perbatasan akan menyorot dengan sisa tombol saat disentuh.

Untuk mengubah tombol Radius, Warna dan Lebar saya atur seperti ini:

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;

Ini versi terbaru ( Swift 3.0.1 ) dari jawaban 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: "")
            }
        }
    }
}

Tombol yang dihasilkan dapat digunakan di dalam StoryBoard Anda berkat @IBDesignabledan @IBInspectabletag.

Juga dua properti yang ditentukan, memungkinkan Anda untuk mengatur lebar perbatasan dan warna langsung pada pembangun antarmuka dan mempratinjau hasilnya.

Properti lainnya dapat ditambahkan dengan cara yang sama, untuk radius perbatasan dan menyoroti waktu fading.

Anda tidak perlu mengimpor QuartzCore.hsekarang. Mengambil iOS 8 sdk dan Xcode 6.1 sebagai referensi.

Langsung menggunakan:

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

Berikut adalah UIButtonsubkelas yang mendukung animasi status yang disorot tanpa menggunakan gambar. Ini juga memperbarui warna tepi ketika mode tampilan berubah.

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

Pemakaian:

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

Penampilan:

Ini dapat dicapai dalam berbagai metode di Swift 3.0 Bekerja pada Versi terbaru Agustus - 2017

Pilihan 1:

Secara langsung menetapkan nilai properti borderWidth untuk Tombol UI:

  btnUserButtonName.layer.borderWidth = 1.0

Tetapkan Judul dengan nilai Warna Default untuk Tombol UI:

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

Tetapkan Batas dengan Warna Default untuk nilai properti perbatasan untuk Tombol UI:

btnUserButtonName.layer.borderColor = UIColor.red

Tetapkan Warna yang ditentukan pengguna untuk nilai properti perbatasan untuk Tombol UI:

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

Opsi 2: [Disarankan]

Gunakan metode Extension, sehingga Tombol di seluruh aplikasi akan terlihat konsisten dan tidak perlu mengulangi beberapa baris kode di mana saja.

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

Penggunaan dalam kode:

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

btnUserButtonName.setBordersSettings()

Output dari tombol Metode Ekstensi:

Perbarui dengan Swift 3

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

**** Dalam Swift 3 ****

Untuk membuat perbatasan

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

Untuk membuat sudut membulat

 btnName.layer.cornerRadius = 5

Cepat 5

button.layer.borderWidth = 2

Untuk mengubah warna perbatasan gunakan

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