Pertanyaan Bagaimana cara membuat perbatasan di UIButton?


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


162
2017-11-17 05:10


asal


Jawaban:


Anda dapat mengatur properti border pada CALayer dengan mengakses properti layer dari tombol.

Pertama, tambahkan Quartz

#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 pada tautan di atas memungkinkan Anda untuk mengatur properti lain seperti radius sudut, maskToBounds, dll ...

Juga, artikel bagus tentang tombol yang menyenangkan:

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


325
2017-11-17 05:26



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

lalu lakukan ini

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

Anda dapat mengubah nilai float sesuai kebutuhan.

Nikmati.


Inilah beberapa kode modern yang 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 tampilan yang mirip dengan kontrol tersegmentasi.


45
2017-11-17 05:25



Masalah pengaturan lapisan borderWidth dan borderColor adalah ketika Anda menyentuh tombol, border tidak menganimasikan efek highlight.

Tentu saja, Anda dapat mengamati peristiwa tombol dan mengubah warna batas yang sesuai tetapi itu terasa tidak perlu.

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

Images.xcassets

Kemudian, Anda mengaturnya sebagai gambar latar belakang tombol:

Button properties

Jika gambar Anda adalah gambar template Anda dapat mengatur warna warna tombol dan perbatasan akan berubah:

Final Button

Sekarang perbatasan akan menyorot dengan sisa tombol saat disentuh.


19
2018-05-11 04:50



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

18
2017-11-12 16:18



Anda tidak perlu mengimpor QuartzCore.h sekarang. Mengambil iOS 8 SDK dan Xcode 6.1 dalam referensi.

Langsung menggunakan:

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

6
2018-03-14 10:06



Untuk mengubah tombol Radius, Warna dan Lebar Saya mengatur 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;

6
2017-10-22 08:16



Ini adalah versi terbaru (Swift 3.0.1) dari Ben Packard menjawab.

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 @IBDesignable dan @IBInspectable tag.

enter image description here

Juga dua properti didefinisikan, memungkinkan Anda untuk mengatur lebar dan warna perbatasan langsung pada pembangun antarmuka dan melihat hasilnya.

enter image description here

Properti lain dapat ditambahkan dengan cara yang sama, untuk radius batas dan waktu fading sorot.


6
2018-03-10 22:15



Ini a UIButton subkelas yang mendukung animasi keadaan yang disorot tanpa menggunakan gambar. Ini juga memperbarui warna perbatasan ketika mode warna 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:

enter image description here

enter image description here


5
2017-08-17 14:25



Ini dapat dicapai dalam berbagai metode di Swift 3.0 Worked pada versi terbaru Agustus - 2017

Pilihan 1: 

Langsung tetapkan nilai properti borderWidth untuk Tombol UI:

  btnUserButtonName.layer.borderWidth = 1.0

Setel Judul dengan nilai Warna Default untuk Tombol UI:

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

Set Border with Default Color untuk nilai properti perbatasan untuk Tombol UI:

btnUserButtonName.layer.borderColor = UIColor.red

Setel Warna yang ditentukan pengguna untuk nilai properti pembatas 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 Ekstensi, sehingga Tombol melalui aplikasi akan terlihat konsisten dan tidak perlu mengulang 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:

enter image description here


5
2017-08-23 21:18