Memberikan sudut bulat pada UIView


577

Tampilan login saya memiliki subview yang memiliki UIActivityViewdan UILabelmengatakan "Masuk ...". Subview ini memiliki sudut yang tidak membulat. Bagaimana saya bisa membuatnya bulat?

Apakah ada cara untuk melakukannya di dalam xib saya?


6
Melakukan sesuatu seperti ini di IB akan membutuhkan gambar yang telah dirender dengan sudut bulat
Ed Marty

9
Tidak harus @ ed-marty, Jawaban dari @Gujamin ini layak mendapatkan kredit lagi karena menunjukkan bagaimana menerapkan cornerRadiusproperti ke tabel menggunakan Interface Builder saja, tanpa harus menggunakan gambar yang telah dibuat sebelumnya atau mengaturnya dalam kode.
djskinner

Jawaban:


1219

Coba ini

#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now  :)

...

view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;

Catatan: Jika Anda mencoba menerapkan sudut bulat ke UIViewControllertampilan, itu tidak boleh diterapkan dalam konstruktor tampilan controller, melainkan dalam -viewDidLoad, setelah viewsebenarnya dibuat instantiated.


6
Perhatikan bahwa properti hanya ada di iPhone 3.0, bukan versi sebelumnya.
Kendall Helmstetter Gelner

5
Saya hanya perlu mengatakan bahwa ini adalah salah satu jawaban paling memuaskan yang pernah saya lihat di SO. Memeriksa di sini terlebih dahulu hanya menyelamatkan saya satu jam berkelahi dengan editor gambar dan akan membuat pandangan saya lebih rapuh terhadap perubahan warna / ukuran. Terima kasih!
Justin Searls

20
Catatan terkait: siapa pun yang tertarik pada lebih banyak barang visual (yaitu bayangan) agar mudah diterapkan ke UIView harus memeriksa referensi kelas CALayer. Sebagian besar semudah menetapkan satu atau dua nilai properti, seperti jawaban di atas: developer.apple.com/mac/library/documentation/GraphicsImaging/…
Justin Searls

6
@ Ben Collins (atau siapa pun yang memiliki masalah ini), pastikan tampilan Anda telah diatur "klip tayangan cuplikan". Anda dapat memeriksa ini di pembangun antarmuka.
zem

2
ini berfungsi dengan baik TAPI jika Anda memiliki banyak sudut membulat ini dalam segala jenis tampilan gulir atau animasi (saya mencoba menggunakannya dalam UITableView) kinerja Anda akan sangat menderita. Tampilan tabel gulir yang bagus dan cepat dengan cepat menjadi berombak :(
Lengan

261

Anda juga dapat menggunakan fitur Atribut yang Ditentukan Pengguna Atribut pembangun antarmuka untuk mengatur jalur kunci layer.cornerRadiuske nilai. Pastikan Anda menyertakan QuartzCoreperpustakaan.

Trik ini juga berfungsi untuk mengatur layer.borderWidth namun tidak akan berhasil karena layer.borderColorini mengharapkan CGColorbukan UIColor.

Anda tidak akan dapat melihat efek di storyboard karena parameter ini dievaluasi saat runtime.

Menggunakan pembangun Antarmuka untuk mengatur radius sudut


10
ingatlah untuk memeriksa Clip Subviewsopsi pada tampilan IB juga
Peter

2
(atau) tambahkan Key Path: layer.masksToBounds, Jenis: boolean: Diperiksa
Amitabh

64

Sekarang Anda dapat menggunakan kategori cepat di UIView (kode di bawah gambar) dengan @IBInspectable untuk menampilkan hasilnya di storyboard (Jika Anda menggunakan kategori, gunakan hanya cornerRadius dan bukan layer.cornerRadius sebagai jalur kunci.

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

masukkan deskripsi gambar di sini


Dan jika Anda menggunakan sub-kelas khusus, Pastikan untuk memberi tag @IBDesignableuntuk mendapatkan pratinjau langsung di IB! (Lebih banyak di nshipster.com/ibinspectable-ibdesignable )
clozach

56

Cepat

Jawaban singkat:

myView.layer.cornerRadius = 8
myView.layer.masksToBounds = true  // optional

Jawaban Tambahan

Jika Anda sampai pada jawaban ini, Anda mungkin sudah cukup melihat untuk menyelesaikan masalah Anda. Saya menambahkan jawaban ini untuk memberikan sedikit penjelasan visual mengapa hal-hal melakukan apa yang mereka lakukan.

Jika Anda mulai dengan yang biasa UIViewmemiliki sudut persegi.

let blueView = UIView()
blueView.frame = CGRect(x: 100, y: 100, width: 100, height: 50)
blueView.backgroundColor = UIColor.blueColor()
view.addSubview(blueView)

masukkan deskripsi gambar di sini

Anda bisa memberikannya sudut-sudut dengan mengubah cornerRadiusproperti tampilan layer.

blueView.layer.cornerRadius = 8

masukkan deskripsi gambar di sini

Nilai radius yang lebih besar menghasilkan sudut yang lebih bulat

blueView.layer.cornerRadius = 25

masukkan deskripsi gambar di sini

dan nilai yang lebih kecil menghasilkan sudut yang lebih sedikit.

blueView.layer.cornerRadius = 3

masukkan deskripsi gambar di sini

Ini mungkin cukup untuk menyelesaikan masalah Anda di sana. Namun, terkadang tampilan dapat memiliki subview atau sublapisan yang melampaui batas tampilan. Misalnya, jika saya menambahkan sub tampilan seperti ini

let mySubView = UIView()
mySubView.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubView.backgroundColor = UIColor.redColor()
blueView.addSubview(mySubView)

atau jika saya menambahkan sub lapisan seperti ini

let mySubLayer = CALayer()
mySubLayer.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubLayer.backgroundColor = UIColor.redColor().CGColor
blueView.layer.addSublayer(mySubLayer)

Maka saya akan berakhir dengan

masukkan deskripsi gambar di sini

Sekarang, jika saya tidak ingin hal-hal tergantung di luar batas, saya bisa melakukan ini

blueView.clipsToBounds = true

atau ini

blueView.layer.masksToBounds = true

yang memberikan hasil ini:

masukkan deskripsi gambar di sini

Kedua clipsToBoundsdan masksToBoundsyang setara . Hanya saja yang pertama digunakan dengan UIViewdan yang kedua digunakan dengan CALayer.

Lihat juga


4
Saya juga ingin menambahkan bahwa pengaturan radius sudut menjadi setengah dari sisi yang lebih pendek (dalam hal ini blueView.frame.size.height/2) menghasilkan sudut bulat sempurna.
Johann Burgess

44

Pendekatan yang berbeda dari yang Ed Marty lakukan:

#import <QuartzCore/QuartzCore.h>

[v.layer setCornerRadius:25.0f];
[v.layer setMasksToBounds:YES];

Anda memerlukan setMasksToBounds untuk memuat semua objek dari IB ... saya mendapat masalah ketika pandangan saya membulat, tetapi tidak memiliki objek dari IB: /

ini memperbaikinya = D harap ini membantu!


48
apa bedanya? selain tidak menggunakan sintaks dot?
user102008

3
[v.layer setMasksToBounds: YES]; Baris ini ajaib, ini memecahkan masalah besar saya
Cullen SUN

3
Saya menulis ini ketika saya memulai pengembangan iOS dan tidak tahu tidak ada perbedaan antara sintaksis titik dan sintaks braket. Karena itu saya menulisnya sebagai "berbeda". Kode saya juga termasuk impor <> yang tidak dimiliki Ed Marty dalam respons aslinya (kemudian diedit) dan oleh karena itu jawaban saya membantu orang memperbaiki masalah mereka (alias tidak mengimpornya).
Kristian Flatheim Jensen

28

Seperti dijelaskan dalam posting blog ini , berikut adalah metode untuk membulatkan sudut-sudut UIView:

+(void)roundView:(UIView *)view onCorner:(UIRectCorner)rectCorner radius:(float)radius
{
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds
                                                   byRoundingCorners:rectCorner
                                                         cornerRadii:CGSizeMake(radius, radius)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = view.bounds;
    maskLayer.path = maskPath.CGPath;
    [view.layer setMask:maskLayer];
    [maskLayer release];
}

Bagian kerennya adalah Anda bisa memilih sudut mana yang ingin dibulatkan.


6
Daripada hanya menyediakan tautan ke situs eksternal, kami lebih suka jawaban itu lengkap di sini, jadi saya membawa kode yang relevan dari posting blog yang terhubung ke jawaban Anda. Orang-orang dapat mengunjungi posting blog untuk lebih detail, tetapi ini memastikan bahwa konten tersebut akan bertahan jika posting yang dimaksud hilang. Juga, Anda memposting jawaban ini ke beberapa pertanyaan berbeda yang tidak benar-benar menanyakan hal yang sama. Itu sudah dihapus, dan satu pertanyaan ditutup sebagai duplikat dari yang ini. Kami ingin ada jawaban yang dibuat untuk mencocokkan setiap pertanyaan.
Brad Larson

5
Terus mata. Posting blog adalah 404 sekarang.
Anthony C

Pendekatan ini Bersih tetapi akan menyembunyikan efek bayangan pada tampilan.
musim panas

19

Anda harus terlebih dahulu mengimpor file header <QuartzCore/QuartzCore.h>

 #import QuartzCore/QuartzCore.h>

[yourView.layer setCornerRadius:8.0f];
yourView.layer.borderColor = [UIColor redColor].CGColor;
yourView.layer.borderWidth = 2.0f;
[yourView.layer setMasksToBounds:YES];

Jangan ketinggalan untuk menggunakan - setMasksToBounds, jika tidak, efeknya mungkin tidak ditampilkan.


2
Tidak perlu mengimpor "QuartzCore / QuartzCore.h"
Sudhir Kumar

Ya, Anda perlu mengimpor.
Lord Zsolt

3
@ LordZsolt Mungkin mereka mengubahnya dengan iOS7, tetapi Anda tidak perlu mengimpor QuartzCore lagi.
Marc

15

Anda dapat menggunakan UIViewkelas khusus berikut ini yang juga dapat mengubah warna dan lebar perbatasan. Karena ini adalah IBDesignalbeAnda dapat mengubah atribut dalam pembangun antarmuka juga.

masukkan deskripsi gambar di sini

import UIKit

@IBDesignable public class RoundedView: UIView {

    @IBInspectable var borderColor: UIColor = UIColor.white {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 2.0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }

}

6
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50, 200, 200)];

view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);

view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;

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

Menerapkan setMasksToBounds adalah penting. Mengatur warna latar belakang dan drop shadow tidak.
djskinner

3

Swift 4 - Menggunakan IBDesignable

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

        @IBInspectable
        var cornerRadius: CGFloat {
            get {
                return layer.cornerRadius
            }
            set {
            layer.cornerRadius = newValue
        }
    }
}

Maaf, tetapi sebagai pendatang baru dalam pengembangan iOS. Bagaimana solusinya mencegah layer.cornerRadiusdikembalikan ke keadaan semula? (ei bagaimana storyboard xcode mengetahui cara mengatur cornerRadiushanya setelah aslinya UIViewdiinisialisasi)?
AlanSTACK


3

- SwiftUI

Di SwiftUI, Anda dapat menggunakan cornerRadiuspengubah langsung pada apa pun yang ViewAnda inginkan. Sebagai contoh dari pertanyaan ini:

Text("Signing In…")
    .padding(16)
    .background(Color.red)
    .cornerRadius(50)

Pratinjau

Perhatikan bahwa tidak ada lagi berlian seperti jari-jari, jadi bahkan jika Anda mengatur sudutRadius lebih dari setengah tinggi , itu akan membulatkannya dengan mulus.

Lihatlah jawaban ini untuk mengetahui caranya Putaran Corners khusus di SwiftUI


2

Silakan impor Quartzcore frameworkmaka Anda harus mengatur setMaskToBoundskeTRUE ini garis sangat penting.

Kemudian: [[yourView layer] setCornerRadius:5.0f];


2
UIView* viewWithRoundedCornersSize(float cornerRadius,UIView * original)
{
    // Create a white border with defined width
    original.layer.borderColor = [UIColor yellowColor].CGColor;
    original.layer.borderWidth = 1.5;

    // Set image corner radius
    original.layer.cornerRadius =cornerRadius;

    // To enable corners to be "clipped"
    [original setClipsToBounds:YES];
    return original;
}

2

Lakukan ini secara pemrograman dalam objektif c

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50,    200, 200)];

view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);

[view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;][1]

[self.view addSubview:view];

Kami Juga Bisa melakukan ini dari stoaryboard.

 layer.cornerRadius  Number  5

masukkan deskripsi gambar di sini


2

jika sudut bulat tidak berfungsi di viewDidload () lebih baik menulis kode di viewDidLayoutSubview ()

-(void)viewDidLayoutSubviews
{
    viewTextfield.layer.cornerRadius = 10.0 ;                                               
    viewTextfield.layer.borderWidth = 1.0f;
    viewTextfield.layer.masksToBounds =  YES;
    viewTextfield.layer.shadowRadius = 5;
    viewTextfield.layer.shadowOpacity = 0.3;
    viewTextfield.clipsToBounds = NO;
    viewTextfield.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
}

Semoga ini membantu!


0

Anda juga dapat menggunakan gambar:

UIImage *maskingImage = [UIImage imageNamed:@"bannerBarBottomMask.png"];
CALayer *maskingLayer = [CALayer layer];
maskingLayer.frame = CGRectMake(-(self.yourView.frame.size.width - self.yourView.frame.size.width) / 2
                                , 0
                                , maskingImage.size.width
                                , maskingImage.size.height);
[maskingLayer setContents:(id)[maskingImage CGImage]];
[self.yourView.layer setMask:maskingLayer];

0

atur Property cornerRadious untuk Round view

set masksToBounds Nilai Boolean untuk gambar tidak akan tetap ditarik di luar batas radius sudut

view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;

0

Menggunakan Ekstensi UIView:

extension UIView {    

func addRoundedCornerToView(targetView : UIView?)
{
    //UIView Corner Radius
    targetView!.layer.cornerRadius = 5.0;
    targetView!.layer.masksToBounds = true

    //UIView Set up boarder
    targetView!.layer.borderColor = UIColor.yellowColor().CGColor;
    targetView!.layer.borderWidth = 3.0;

    //UIView Drop shadow
    targetView!.layer.shadowColor = UIColor.darkGrayColor().CGColor;
    targetView!.layer.shadowOffset = CGSizeMake(2.0, 2.0)
    targetView!.layer.shadowOpacity = 1.0
}
}

Pemakaian:

override func viewWillAppear(animated: Bool) {

sampleView.addRoundedCornerToView(statusBarView)

}

0

Di Swift 4.2 dan Xcode 10.1

let myView = UIView()
myView.frame = CGRect(x: 200, y: 200, width: 200, height: 200)
myView.myViewCorners()
//myView.myViewCorners(width: myView.frame.width)//Pass View width
view.addSubview(myView)

extension UIView {
    //If you want only round corners
    func myViewCorners() {
        layer.cornerRadius = 10
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.red.cgColor
        layer.masksToBounds = true
    }
    //If you want complete round shape, enable above comment line
    func myViewCorners(width:CGFloat) {
        layer.cornerRadius = width/2
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.red.cgColor
        layer.masksToBounds = true
    }
}

-4

PADA Xcode 6 Upaya Anda

     self.layer.layer.cornerRadius = 5.0f;

atau

    self.layer.layer.cornerRadius = 5.0f;
    self.layer.clipsToBounds = YES;
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.