Apakah mungkin untuk mengatur properti perbatasan UIView dari pembuat antarmuka?


184

Apakah mungkin untuk mengontrol properti perbatasan UIView (warna, ketebalan, dll ...) langsung dari pembuat antarmuka atau saya hanya dapat melakukannya secara terprogram?



1
Kalau-kalau ada yang datang dari Google seperti saya. Untuk melihat perubahan-perubahan tersebut tercermin dalam IB, Anda hanya perlu membuat subkelas UIView dan menetapkannya untuk Tampilan apa pun yang ingin Anda manipulasi dalam IB.
Kanongata

Jawaban:


392

Sebenarnya Anda dapat mengatur beberapa properti lapisan tampilan melalui pembangun antarmuka. Saya tahu bahwa saya dapat mengatur borderWidth layer dan cornerRadius melalui xcode. borderColor tidak berfungsi, mungkin karena layer menginginkan CGColor bukan UIColor.

Anda mungkin harus menggunakan Strings sebagai ganti angka, tetapi itu berhasil!

layer.cornerRadius
layer.borderWidth
layer.borderColor

Perbarui: layer.masksToBounds = true

contoh

Perbarui: pilih Jenis yang sesuai untuk Keypath:

masukkan deskripsi gambar di sini


3
Untuk Anda dan Peter DeWeese: Saya menggunakan Xcode 4.6.3 dan saya dapat mengatur tipe keypath menjadi "Color" tanpa menggunakan antarmuka CALayer

39
Sayangnya layer.borderColor tidak dapat diatur dengan cara ini. Ini adalah CGColorRef, tetapi tipe nilai IB Color adalah UIColor.
mrgrieves

12
Jadi INI adalah apa yang dilakukan atribut runtime yang ditetapkan pengguna! Haha, telah menulis untuk iOS sejak 2011 dan saya tidak pernah belajar untuk apa bidang-bidang itu. Terima kasih atas jawaban yang luar biasa ini.
Andy Ibanez

3
Bagus, tetapi Anda harus mengatur jenis yang benar untuk setiap properti. Jenis untuk mis. "Layer.cornerRadius" harus disetel ke "Number" dan bukannya "String"!
Peter Kreinz

5
Juga, jangan lupa untuk mencentang kotak "clip to bounds" agar cornerRadius berfungsi.
Pierre-Olivier Simonard

183

Jawaban Rich86Man benar, tetapi Anda dapat menggunakan kategori untuk proksi properti seperti layer.borderColor. (Dari CocoaPod Konvensional )

CALayer + XibConfiguration.h:

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer(XibConfiguration)

// This assigns a CGColor to borderColor.
@property(nonatomic, assign) UIColor* borderUIColor;

@end

CALayer + XibConfiguration.m:

#import "CALayer+XibConfiguration.h"

@implementation CALayer(XibConfiguration)

-(void)setBorderUIColor:(UIColor*)color
{
    self.borderColor = color.CGColor;
}

-(UIColor*)borderUIColor
{
    return [UIColor colorWithCGColor:self.borderColor];
}

@end

Pembuat Antarmuka

layer.borderUIColor

Hasilnya akan jelas selama runtime, bukan di Xcode.

Sunting : Anda juga harus menetapkan layer.borderWidthsetidaknya 1 untuk melihat batas dengan warna yang dipilih.

Dalam Swift 2.0:

extension CALayer {
    var borderUIColor: UIColor {
        set {
            self.borderColor = newValue.CGColor
        }

        get {
            return UIColor(CGColor: self.borderColor!)
        }
    }
}

Di Swift 3.0:

extension CALayer {
    var borderUIColor: UIColor {
        set {
            self.borderColor = newValue.cgColor
        }

        get {
            return UIColor(cgColor: self.borderColor!)
        }
    }
}

Saya tidak bisa membuat ini bekerja untuk saya. File .m mengeluh tentang borderColor harus menjadi borderUIColor dan memperbaikinya, setelah melakukannya masih menampilkan peringatan dan warna perbatasan tidak ditampilkan saat runtime. Bit yang berbeda pada saya adalah saya memiliki @ implementasi NameOfFile, bukan @ implementasi CALayer (NameOfFile), saya tidak mengerti bagian CALayer, dapatkah Anda menjelaskannya lebih baik
Dave Haigh

2
@PeterDeWeese jawaban bagus! =)
c-penjahat

1
Anda sebenarnya dapat menggunakan Nomor dengan borderWidth dan menerima NSNumber. Ini bekerja dengan baik.
Peter DeWeese

1
Ini jelas merupakan solusi terbaik menurut saya untuk menyelesaikan masalah BorderColor. Penggunaan kategori yang fantastis!
EricWasTaken

1
Bekerja di Swift!
KOTIOS

81

Mirip dengan jawaban iHulk, tetapi di Swift

Tambahkan file bernama UIView.swift di proyek Anda (atau cukup tempel ini di file apa pun):

import UIKit

@IBDesignable extension UIView {
    @IBInspectable var borderColor: UIColor? {
        set {
            layer.borderColor = newValue?.cgColor
        }
        get {
            guard let color = layer.borderColor else {
                return nil
            }
            return UIColor(cgColor: color)
        }
    }
    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}

Maka ini akan tersedia di Interface Builder untuk setiap tombol, imageView, label, dll. Di Utilities Panel> Attributes Inspector:

Inspektur Atribut

Catatan: perbatasan hanya akan muncul saat runtime.


@Gaurav Kesalahan apa yang Anda lihat? Pada komponen mana (UIButton, UILabel, dll.) Yang Anda gunakan?
Axel Guilmin

Saya tidak dapat membantu Anda tanpa rincian lebih lanjut :(
Axel Guilmin

2
Saya mendapatkan crash Interface Builder dengan pendekatan ini sampai saya dihapus @IBDesignabledari awal ekstensi.
Albert Bori

1
Itu luar biasa ... Terima kasih! Saya menggunakan
XCode

1
Sangat berguna dan rapi! Terima kasih!
Karl-John Chow

56

Anda dapat membuat kategori UIView dan menambahkannya dalam file .h kategori

@property (nonatomic) IBInspectable UIColor *borderColor;
@property (nonatomic) IBInspectable CGFloat borderWidth;
@property (nonatomic) IBInspectable CGFloat cornerRadius;

Sekarang tambahkan ini dalam file .m

@dynamic borderColor,borderWidth,cornerRadius;

dan ini juga di. file m

-(void)setBorderColor:(UIColor *)borderColor{
    [self.layer setBorderColor:borderColor.CGColor];
}

-(void)setBorderWidth:(CGFloat)borderWidth{
    [self.layer setBorderWidth:borderWidth];
}

-(void)setCornerRadius:(CGFloat)cornerRadius{
    [self.layer setCornerRadius:cornerRadius];
}

sekarang Anda akan melihat ini di storyboard Anda untuk semua subclass UIView (UILabel, UITextField, UIImageView dll)

masukkan deskripsi gambar di sini

Itu .. Tidak Perlu mengimpor kategori di mana saja, cukup tambahkan file kategori dalam proyek dan lihat properti ini di storyboard.


2
Lengkapi dengan IB_DESIGNABLE untuk membuat IB menggambar ulang tampilan kustom Anda menggunakan drawRect: method developer.apple.com/library/ios/recipes/…
txulu

3
Hebat, Jika Anda menulis IB_DESIGNABLE di file .h sebelum baris antarmuka, Anda tidak perlu menambahkan baris @dynamic di .m
Jasmeet

@ user1618612 tidak ada hubungannya dengan resolusi, itu hanya pengaturan properti layer normal.
iHulk

11

Untuk Swift 3 dan 4 , jika Anda bersedia menggunakan IBInspectables, ini dia:

@IBDesignable extension UIView {
    @IBInspectable var borderColor:UIColor? {
        set {
            layer.borderColor = newValue!.cgColor
        }
        get {
            if let color = layer.borderColor {
                return UIColor(cgColor: color)
            }
            else {
                return nil
            }
        }
    }
    @IBInspectable var borderWidth:CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}

Ini adalah solusi terbaik bagi saya
Mục Đồng

Solusi Hebat, Terima Kasih
Ebtehal___

7

sementara ini mungkin mengatur properti, itu sebenarnya tidak tercermin dalam IB. Jadi jika Anda pada dasarnya menulis kode dalam IB, Anda mungkin juga melakukannya dalam kode sumber Anda


1
Selamat datang di MVC! Anda melihat properti tidak boleh dalam kode!
Alejandro Iván

2
^ Ini bukan MVC.
Andrew Plummer

1
Mempertimbangkan bahwa 95% dari waktu kode ini berada di controller, itu juga MVC, tentu saja jika Anda benar subkelas atau memperluas pandangan Anda maka itu hanya konfigurasi atas pengkodean :-)
Daniele Bernardini

4

Jika Anda ingin menghemat waktu, cukup gunakan dua UIViewsdi atas satu sama lain, satu di belakang menjadi warna perbatasan, dan satu di depan lebih kecil, memberikan efek berbatasan. Saya tidak berpikir ini adalah solusi yang elegan juga, tetapi jika Apple sedikit peduli maka Anda tidak harus melakukan ini.


10
Penanganan masalah menghemat waktu sekarang dan membuang lebih banyak waktu di masa depan.
Lachezar Todorov

0

Ini benar-benar mungkin hanya ketika Anda mengatur layer.masksToBounds = truedan melakukan hal-hal lainnya.


-1

Storyboard tidak berfungsi untuk saya sepanjang waktu bahkan setelah mencoba semua solusinya di sini

Jadi jawabannya selalu sempurna adalah menggunakan kode, Cukup buat instance IBOutlet dari UIView dan tambahkan properti

Jawaban singkat :

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

Jawaban panjang :

Sudut Bulat dari UIView / UIButton dll

customUIView.layer.cornerRadius = 10

Ketebalan perbatasan

pcustomUIView.layer.borderWidth = 2

Warna perbatasan

customUIView.layer.borderColor = UIColor.blue.cgColor

Pertanyaannya sangat spesifik dan bertanya bagaimana melakukannya dari Interface Builder. Jawaban Anda tidak relevan.
Shinnyx

-5

Silakan tambahkan 2 baris kode sederhana ini:

self.YourViewName.layer.cornerRadius = 15
self.YourViewName.layer.masksToBounds = true

Ini akan bekerja dengan baik.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.