Cara membulatkan sudut tombol


182

Saya memiliki gambar persegi panjang (jpg) dan ingin menggunakannya untuk mengisi latar belakang tombol dengan sudut bulat di xcode.

Saya menulis yang berikut ini:

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain];
CGRect frame = CGRectMake(x, y, cardWidth, cardHeight);
button.frame = frame;
[button setBackgroundImage:backImage forState:UIControlStateNormal];

Namun, tombol yang saya dapatkan dengan pendekatan itu tidak memiliki sudut yang membulat: melainkan persegi panjang polos yang persis seperti gambar asli saya. Bagaimana saya bisa mendapatkan gambar dengan sudut bulat untuk mewakili tombol saya?

Terima kasih!

Jawaban:


436

Saya pikir saya punya masalah Anda, saya mencoba solusi berikut dengan UITextArea dan saya kira ini akan bekerja dengan UIButton juga.

pertama-tama impor ini di file .m Anda -

#import <QuartzCore/QuartzCore.h>

dan kemudian dalam loadViewmetode Anda tambahkan baris berikut

    yourButton.layer.cornerRadius = 10; // this value vary as per your desire
    yourButton.clipsToBounds = YES;

Semoga ini berhasil untuk Anda dan jika ya, lakukan komunikasi.


6
Juga bekerja dengan inspektur "Atribut Buatan Pengguna Runtime"
— Avi Cherry

Bekerja dengan cepat juga! Ubah saja YA menjadi benar.
— Andrew Thomas

119

Anda dapat mencapai dengan Atribut RunTime ini

masukkan deskripsi gambar di sini

kita dapat membuat tombol kustom. cukup lihat tangkapan layar terlampir.

mohon memperhatikan:

dalam atribut runtime untuk mengubah warna perbatasan ikuti instruksi ini

  1. buat kelas kategori CALayer

  2. dalam file h

    @property(nonatomic, assign) UIColor* borderIBColor;
  3. dalam file m:

    -(void)setBorderIBColor:(UIColor*)color {
        self.borderColor = color.CGColor;
    }
    
    -(UIColor*)borderIBColor {
        return [UIColor colorWithCGColor:self.borderColor];
    }

sekarang dan seterusnya untuk mengatur tangkapan layar pemeriksaan warna perbatasan

jawaban yang diperbarui

Terima kasih


4
Hanya saya atau apakah informasi dalam jawaban tidak lengkap? Itu tidak benar-benar bekerja. Pembaruan: ini berfungsi selama saya tidak menentukan borderColor. Tapi kemudian selalu menggunakan warna hitam untuk borderColor.
— Jonny

3
Jawaban yang diperluas: Warna yang diatur dalam IB kemungkinan jenis UIColor yang tidak berfungsi dengan borderColor, yang merupakan CGColorRef. Atau semacam itu. Jadi solusinya adalah membuat kategori pada CALayer, dengan sesuatu seperti @property(nonatomic, assign) UIColor* borderIBColor;(yang tidak berbenturan dengan nama lain) dalam file header, dan implementasinya adalah:-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}
— Jonny

1
Jika Anda tidak ingin warna batas, atur borderRadius ke 0 dan Anda tidak akan memilikinya!
— jungledev

Bagaimana dengan Swift?
— Jayprakash Dubey

1
@JayprakashDubey saya membuat ekstensi CALayer.
— Krutarth Patel

14

Anda mungkin ingin memeriksa perpustakaan saya yang disebut DCKit . Itu ditulis pada versi terbaru Swift .

Anda dapat membuat tombol sudut / bidang teks bulat dari pembuat antarmuka secara langsung:

DCKit: tombol bulat

Ini juga memiliki banyak fitur keren lainnya, seperti bidang teks dengan validasi, kontrol dengan batas, garis putus-putus, tampilan lingkaran dan garis rambut dll.


11

Mendorong ke batas jari-jari sudut hingga mendapatkan lingkaran:

    self.btnFoldButton.layer.cornerRadius = self.btnFoldButton.frame.height/2.0;

masukkan deskripsi gambar di sini

Jika bingkai tombol berbentuk bujur sangkar, tidak masalah frame.height atau frame.width. Kalau tidak, gunakan yang terbesar dari keduanya.


7

Impor kerangka kerja QuartCore jika tidak ada di proyek Anda yang ada, lalu impor #import <QuartzCore/QuartzCore.h>di viewcontroller.m

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect]];
CGRect frame = CGRectMake(x, y, width, height); // set values as per your requirement
button.layer.cornerRadius = 10;
button.clipsToBounds = YES;

6
UIButton* closeBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 50, 90, 35)];
//Customise this button as you wish then
closeBtn.layer.cornerRadius = 10;
closeBtn.layer.masksToBounds = YES;//Important

4

Lebar set pertama = 100 dan Tinggi = 100 tombol

Tujuan C Solusi

YourBtn1.layer.cornerRadius=YourBtn1.Frame.size.width/2;
YourBtn1.layer.borderColor=[uicolor blackColor].CGColor;
YourBtn1.layer.borderWidth=1.0f;

Solusi Swift 4

YourBtn1.layer.cornerRadius = YourBtn1.Frame.size.width/2
YourBtn1.layer.borderColor = UIColor.black.cgColor
YourBtn1.layer.borderWidth = 1.0

2

Jika Anda ingin sudut bulat hanya untuk satu sudut atau dua sudut, dll ... baca posting ini:

[ObjC] - UIButton dengan sudut bundar - http://goo.gl/kfzvKP

Ini adalah subclass XIB / Storyboard. Impor dan tetapkan batas tanpa menulis kode.



2

diperbarui untuk Swift 3:

digunakan kode di bawah ini untuk membuat putaran sudut UIButton:

 yourButtonOutletName.layer.cornerRadius = 0.3 *
        yourButtonOutletName.frame.size.height

2

Coba kode saya. Di sini Anda dapat mengatur semua properti UIButton seperti warna teks, warna latar belakang, radius sudut, dll.

extension UIButton {
    func btnCorner() {
        layer.cornerRadius = 10
        clipsToBounds = true
        backgroundColor = .blue
    }
}

Sekarang panggil seperti ini

yourBtnName.btnCorner()


0

Untuk iOS SWift 4

button.layer.cornerRadius = 25;
button.layer.masksToBounds = true;

0

masukkan deskripsi gambar di sini

Untuk Tujuan C :

submitButton.layer.cornerRadius = 5;
submitButton.clipsToBounds = YES;

Untuk Swift :

submitButton.layer.cornerRadius = 5
submitButton.clipsToBounds = true

0

Pembaruan Swift 4

Saya juga mencoba banyak pilihan namun saya tidak bisa mendapatkan putaran UIButton saya terpojok. Saya menambahkan kode jari-jari sudut di dalam viewDidLayoutSubviews()masalah Saya.

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = anyButton.frame.height / 2
    }

Kami juga dapat menyesuaikan cornerRadius sebagai berikut

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = 10 //Any suitable number as you prefer can be applied 
    }
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.