Warna perbatasan UITextField

133

Saya benar-benar ingin mengatur warna saya sendiri ke batas UITextField. Namun sejauh ini saya bisa mengetahui cara mengubah gaya garis perbatasan saja.

Saya telah menggunakan properti latar belakang untuk mengatur warna latar belakang sedemikian rupa:

self.textField.backgroundColor = textFieldColor;

Tapi saya harus mengubah warna perbatasan UITextField juga. Dan pertanyaan saya adalah bagaimana mengubah warna perbatasan.

dasha
sumber
Banyak jawaban yang membantu tetapi hanya satu ( stackoverflow.com/a/5387607/826946 ) menyebutkan sesuatu yang saya temukan kunci: textField.borderStyle = UITextField.BorderStyle.none. Tanpa itu saya mendapatkan jejak perbatasan bawaan. Tampaknya sekali Anda tidak menggunakan batas bawaan dan mulai menentukan sendiri, Anda harus mengatakan bahwa Anda tidak ingin menggunakannya menggunakan borderStyle = tidak ada, lalu tentukan semua parameter (warna, sudutRadius, dan batasWidth)
Andy Weinstein

Jawaban:

274

QuartzCoreKerangka kerja impor di kelas Anda:

#import <QuartzCore/QuartzCore.h>

dan untuk mengubah warna perbatasan gunakan cuplikan kode berikut (saya mengaturnya ke redColor),

    textField.layer.cornerRadius=8.0f;
    textField.layer.masksToBounds=YES;
    textField.layer.borderColor=[[UIColor redColor]CGColor];
    textField.layer.borderWidth= 1.0f;

Untuk kembali ke tata letak asli hanya mengatur warna tepi menjadi warna yang jelas,

    serverField.layer.borderColor=[[UIColor clearColor]CGColor];

dalam kode cepat

    textField.layer.borderWidth = 1
    textField.layer.borderColor = UIColor.whiteColor().CGColor
Gary
sumber
3
Ini #import <QuartzCore / QuartzCore.h> alih-alih QuartCore (Anda lupa z)
cldrr
54
Di iOS 7 Anda harus mengatur lebar perbatasan atau warna tidak berlaku.
Micah
1
Sebagai seorang pemula, ini tidak masuk akal bagi saya. Jika saya memulai aplikasi kosong, kosong, buka storyboard dan tambahkan bidang TextView. Di mana saya mengimpor quartzcore? Di mana saya menambahkan info batas-batas di atas? Apa itu "textField" dan bagaimana cara mengetahui bidang teks yang saya bicarakan?
Nathan McKaskle
1
@ Sefethus jika Anda belum mengetahuinya, inilah yang harus Anda lakukan: Anda harus "menghubungkan" bidang teks yang Anda buat di storyboard dan mengubah properti ini secara terprogram . Setelah Anda menghubungkan papan cerita, Anda masuk ke kode Anda (misalnya dalam viewDidLoad) dan mengubah properti ini dengan mengatakan self.myTextField.layer.cornerRadiusdll. Perubahan ini akan berlaku segera setelah Anda meluncurkan aplikasi Anda, tetapi Anda tidak dapat melihat perubahan di Storyboard. Jika ini tidak masuk akal bagi Anda, saya sarankan Anda pergi ke situs web, misalnya Ray Wenderlich, dan membaca beberapa tulisan pemula.
Aleksander
@NathanMcKaskle "Di mana saya mengimpor quartzcore?" Anda menambahkannya di bagian atas file ViewController.h Anda. "Apa itu" textField "dan bagaimana ia tahu bidang teks mana yang saya bicarakan?" Anda dapat membuat bidang teks 'lokal' IBOutlet var dan menghubungkannya ke TextField (bukan TextView) yang baru saja Anda masukkan ke Storyboard. Untuk info lebih lanjut, periksa di sini: hubpages.com/technology / ... "Di mana saya menambahkan info batas lebar pita di atas?" Di mana saja, tetapi lebih disukai, pada fungsi viewDidLoad.
Chen Li Yong
21

Coba ini:

UITextField *theTextFiels=[[UITextField alloc]initWithFrame:CGRectMake(40, 40, 150, 30)];
    theTextFiels.borderStyle=UITextBorderStyleNone;
    theTextFiels.layer.cornerRadius=8.0f;
    theTextFiels.layer.masksToBounds=YES;
        theTextFiels.backgroundColor=[UIColor redColor];
    theTextFiels.layer.borderColor=[[UIColor blackColor]CGColor];
    theTextFiels.layer.borderWidth= 1.0f;

    [self.view addSubview:theTextFiels];
    [theTextFiels release];

dan impor QuartzCore:

#import <QuartzCore/QuartzCore.h>
iOSPawan
sumber
17

Impor kelas berikut:

#import <QuartzCore/QuartzCore.h> 

// Kode untuk mengatur warna abu-abu untuk batas bidang teks

[[textField layer] setBorderColor:[[UIColor colorWithRed:171.0/255.0
                                                   green:171.0/255.0
                                                    blue:171.0/255.0
                                                   alpha:1.0] CGColor]];

Ganti 171.0dengan nomor warna masing-masing sesuai kebutuhan.

james lobo
sumber
14

pertanyaan ini muncul cukup tinggi pada pencarian Google dan sebagian besar berhasil! Saya memang menemukan bahwa jawaban Salman Zaidi sebagian benar untuk iOS 7.

Anda perlu membuat modifikasi pada kode "reverting". Saya menemukan bahwa yang berikut untuk mengembalikan berfungsi dengan sempurna:

textField.layer.cornerRadius = 0.0f;
textField.layer.masksToBounds = YES;
textField.layer.borderColor = [[UIColor blackColor] CGColor];
textField.layer.borderWidth = 0.0f;

Saya mengerti bahwa ini kemungkinan besar disebabkan oleh perubahan pada iOS 7.

Jovin_
sumber
10

Untuk menyederhanakan tindakan ini dari jawaban yang diterima, Anda juga dapat membuat Kategori untuk UIView(karena ini berfungsi untuk semua subkelas UIView, tidak hanya untuk bidang teks:

UIView + Tambahan.h:

#import <Foundation/Foundation.h>

@interface UIView (Additions)
- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width 
                   radius:(float)radius;
@end

UIView + Tambahan.m:

#import "UIView+Additions.h"

@implementation UIView (Additions)

- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width
                   radius:(float)radius
{
    self.layer.cornerRadius = radius;
    self.layer.masksToBounds = YES;
    self.layer.borderColor = [color CGColor];
    self.layer.borderWidth = width;
}

@end

Pemakaian:

#import "UIView+Additions.h"
//...
[textField setBorderForColor:[UIColor redColor]
                       width:1.0f
                      radius:8.0f];
pencukur langit
sumber
9

Jika Anda menggunakan TextField dengan sudut bulat gunakan kode ini:

    self.TextField.layer.cornerRadius=8.0f;
    self.TextField.layer.masksToBounds=YES;
    self.TextField.layer.borderColor=[[UIColor redColor]CGColor];
    self.TextField.layer.borderWidth= 1.0f;

Untuk menghapus perbatasan:

self.TextField.layer.masksToBounds=NO;
self.TextField.layer.borderColor=[[UIColor clearColor]CGColor];
StefanLdhl
sumber
8

Perbarui untuk swift 5.0

textField.layer.masksToBounds = true
textField.layer.borderColor = UIColor.blue.cgColor
textField.layer.borderWidth = 1.0
Hugo Jordao
sumber
4

borderColor pada tampilan apa pun (atau Subclass UIView) juga dapat diatur menggunakan storyboard dengan sedikit pengkodean dan pendekatan ini bisa sangat berguna jika Anda mengatur warna batas pada beberapa Objek UI.

Di bawah ini adalah langkah-langkah bagaimana mencapainya,

  1. Buat kategori di kelas CALayer. Nyatakan properti bertipe UIColor dengan nama yang sesuai, saya beri nama borderUIColor .
  2. Tulis setter dan pengambil untuk properti ini.
  3. Dalam metode 'Setter' hanya mengatur properti "borderColor" dari layer ke nilai warna CGColor baru.
  4. Dalam metode 'Getter', kembalikan UIColor dengan borderColor layer.

PS: Ingat, Kategori tidak bisa menyimpan properti. 'borderUIColor' digunakan sebagai properti yang dihitung, hanya sebagai referensi untuk mencapai apa yang kami fokuskan.

Silakan lihat contoh kode di bawah ini;

Sasaran C:

File Antarmuka:

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

@interface CALayer (BorderProperties)

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

@end

File Implementasi:

#import "CALayer+BorderProperties.h"

@implementation CALayer (BorderProperties)

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

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

@end

Swift 2.0:

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

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

Dan akhirnya pergi ke storyboard Anda / XIB, ikuti langkah-langkah yang tersisa;

  1. Klik pada objek Lihat yang ingin Anda atur Warna perbatasan.
  2. Klik pada "Identity Inspector" (3 dari Kiri) di panel "Utility" (Sisi kanan layar).
  3. Di bawah "Atribut Runtime yang Ditentukan Pengguna", klik tombol "+" untuk menambahkan jalur kunci.
  4. Setel jenis jalur kunci ke "Warna".
  5. Masukkan nilai untuk path kunci sebagai "layer.borderUIColor". [Ingat ini harus nama variabel yang Anda nyatakan dalam kategori, bukan borderColor di sini itu borderUIColor ].
  6. Akhirnya pilih warna apa pun yang Anda inginkan.

Anda harus menetapkan nilai properti layer.borderWidth ke minimal 1 untuk melihat warna batas.

Bangun dan Lari. Selamat Coding. :)

Rameswar Prasad
sumber
Tolong jangan posting jawaban yang identik untuk beberapa pertanyaan. Posting satu jawaban yang baik, lalu pilih / panji untuk menutup pertanyaan lain sebagai duplikat. Jika pertanyaan itu bukan duplikat, sesuaikan jawaban Anda untuk pertanyaan itu .
josliber
1

Inilah implementasi Swift. Anda dapat membuat ekstensi agar dapat digunakan oleh tampilan lain jika diinginkan.

extension UIView {
    func addBorderAndColor(color: UIColor, width: CGFloat, corner_radius: CGFloat = 0, clipsToBounds: Bool = false) {
        self.layer.borderWidth  = width
        self.layer.borderColor  = color.cgColor
        self.layer.cornerRadius = corner_radius
        self.clipsToBounds      = clipsToBounds
    }
}

Menyebutnya seperti: email.addBorderAndColor(color: UIColor.white, width: 0.5, corner_radius: 5, clipsToBounds: true).

meow2x
sumber