Даючи закруглені кути UIView


577

У моєму вікні входу є підзагляд, який містить підказку UIActivityViewта UILabel" Приєднання ...". У цьому підрозділі є кути, які не округлені. Як я можу зробити їх круглими?

Чи є спосіб зробити це всередині мого xib?


6
Зробити щось подібне в IB потрібно заздалегідь відредаговане зображення із закругленими кутами
Ed Marty

9
Не обов’язково @ ed-marty, Ця відповідь від @Gujamin заслуговує на більше кредиту, оскільки вона показує, як застосувати cornerRadiusвластивість до таблиці лише за допомогою Interface Builder, не використовуючи жодних попередньо зображених зображень або встановити їх у коді.
djskinner

Відповіді:


1219

Спробуйте це

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

...

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

Примітка: Якщо ви намагаєтесь застосувати закруглені кути до UIViewControllerподання виду, він не повинен застосовуватися в конструкторі контролера подання, а, скоріше, у -viewDidLoad, після того, як viewвін фактично створений.


6
Зауважте, що властивість існує лише в iPhone 3.0, а не в попередніх версіях.
Kendall Helmstetter Gelner

5
Я просто мушу сказати, що це був один із найвідповідальніших відповідей, які я коли-небудь бачив на SO. Перша перевірка тут просто врятувала мені годину боротьби з редактором зображень і зробила б мій погляд більш крихким щодо зміни кольорів / розмірів. Дякую!
Джастін Сірлз

20
Пов’язана примітка: кожен, хто зацікавлений у більшій зоровій вигоді (тобто тіні), щоб легко звернутися до UIView, повинен ознайомитися з посиланням на клас CALayer. Більшість це так само просто, як встановити одне або два значення властивостей, як наведена вище відповідь: developer.apple.com/mac/library/documentation/GraphicsImaging/…
Джастін Сірлз

6
@Ben Collins (або будь-хто інший, хто має цю проблему), переконайтесь, що для вашого перегляду встановлено "підгляди кліпу". Ви можете перевірити це в конструкторі інтерфейсів.
зем

2
це чудово працює, але якщо у вас багато таких закруглених кутів у будь-якому вигляді прокрутки або анімації (я намагався їх використовувати в UITableView), ви будете сильно страждати. Гарний гладкий прокручувальний стіл швидко стає похмурим :(
Сон

261

Ви також можете скористатися користувацькою функцією програмування інтерфейсу, призначеної користувачем, для встановлення ключового шляху layer.cornerRadiusдо значення. Переконайтеся, що ви включилиQuartzCore бібліотеку.

Цей трюк також працює для встановлення layer.borderWidth, однак він не працюватиме, layer.borderColorоскільки це очікує значення CGColoraUIColor .

Ви не зможете побачити ефекти на дошці розкадрування, оскільки ці параметри оцінюються під час виконання.

За допомогою конструктора інтерфейсів встановити радіус кута


10
не забудьте перевірити Clip Subviewsпараметр для перегляду IB також
Петро

2
(або) додати ключовий шлях: layer.masksToBounds, Type: boolean: Checked
Amitabh

64

Тепер ви можете використовувати швидку категорію в UIView (код нижче малюнка) в @IBInspectable, щоб показати результат на дошці повідомлень (Якщо ви використовуєте категорію, використовуйте лише як cornerRadius, а не шар.cornerRadius як ключовий шлях.

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

введіть тут опис зображення


І якщо ви використовуєте спеціальний підклас, обов’язково позначте його, @IBDesignableщоб отримати прямий попередній перегляд у IB! (Більше на nshipster.com/ibinspectable-ibdesignable )
clozach

56

Швидкий

Коротка відповідь:

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

Додатковий відповідь

Якщо ви прийшли до цієї відповіді, ви, напевно, вже бачили достатньо, щоб вирішити свою проблему. Я додаю цю відповідь, щоб дати трохи більш наочне пояснення, чому справи роблять те, що вони роблять.

Якщо ви почнете зі звичайної, UIViewвона має квадратні кути.

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

введіть тут опис зображення

Ви можете надати круглі кути, змінивши cornerRadiusвластивість виду layer.

blueView.layer.cornerRadius = 8

введіть тут опис зображення

Більші значення радіуса дають більш закруглені кути

blueView.layer.cornerRadius = 25

введіть тут опис зображення

а менші значення дають менш закруглені кути.

blueView.layer.cornerRadius = 3

введіть тут опис зображення

Цього може бути достатньо для вирішення вашої проблеми саме там. Однак іноді представлення може мати підвид або підшар, що виходить за межі перегляду. Наприклад, якби я додавав подібний вид перегляду

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

або якби я , щоб додати допоміжний шар , як це

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

Тоді я б закінчив

введіть тут опис зображення

Тепер, якщо я не хочу, щоб речі висіли поза межами меж, я можу це зробити

blueView.clipsToBounds = true

або це

blueView.layer.masksToBounds = true

що дає такий результат:

введіть тут опис зображення

І те clipsToBoundsй masksToBoundsінше рівнозначно . Просто перший використовується з, UIViewа другий використовується CALayer.

Дивись також


4
Я також хотів би додати, що встановлення радіуса кута на половину коротшої сторони (в даному випадку blueView.frame.size.height/2) призводить до ідеально закругленого кута.
Йоганн Берджесс

44

Інший підхід, ніж той, що зробив Ед Марті:

#import <QuartzCore/QuartzCore.h>

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

Вам потрібні setMasksToBounds для завантаження всіх об'єктів з IB ... У мене виникла проблема, коли мій погляд закруглювався, але не мав об’єктів з IB: /

це виправлено = D сподіваюся, що це допомагає!


48
як це по-іншому? крім використання синтаксису крапок?
користувач102008

3
[v.layer setMasksToBounds: ТАК]; \ n ця лінія є магічною, вона вирішує мою велику проблему
Cullen SUN,

3
Я написав це, коли я почав розробку iOS, і не знав, що між синтаксисом крапки та синтаксисом дужок немає різниці. Тому я написав це як "інше". Мій код також включав імпорт <>, якого Ед Марті не мав у своєму початковому відповіді (пізніше відредагований у), і тому моя відповідь допомагає людям вирішити свою проблему (він же не імпортує).
Крістіан Флоргейм Йенсен

28

Як описано в цій публікації в блозі , ось спосіб округлити кути 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];
}

Класна частина цього полягає в тому, що ви можете вибрати кути, які ви хочете округлити.


6
Замість того, щоб просто надавати посилання на зовнішній сайт, ми вважаємо за краще, щоб відповіді тут не були самостійними, тому я вніс відповідний код із пов’язаної публікації блогу у вашу відповідь. Люди можуть відвідати допис у блозі для більш детальної інформації, але переконайтеся, що вміст виживе, якщо публікація, про яку йде мова, піде. Також ви опублікували цю відповідь на кілька різних питань, які насправді не задавали одне і те ж. Їх було знято, і одне питання було закрито як дублікат цього. Нам подобається створити відповіді, щоб відповідати кожному питанню.
Бред Ларсон

5
Стародавній. Повідомлення в блозі зараз 404.
Ентоні C

Такий підхід чистий, але він приховує будь-який ефект тіні на погляд.
підписання

19

Потрібно спочатку імпортувати файл заголовка <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];

Не пропустіть використання - setMasksToBoundsінакше ефект може не проявитися.


2
Не потрібно імпортувати "QuartzCore / QuartzCore.h"
Sudhir Kumar

Так, вам потрібно імпортувати.
Лорд Жолтт

3
@LordZsolt Можливо, вони змінили це з iOS7, але вам більше не потрібно імпортувати QuartzCore.
Марк

14

Ви можете використовувати наступний спеціальний UIViewклас, який також може змінювати колір рамки та ширину. Оскільки це так, IBDesignalbeви також можете змінити атрибути в програмі інтерфейсів.

введіть тут опис зображення

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];

Застосування setMasksToBounds важливо. Налаштування кольору фону та тіні немає.
djskinner

3

Swift 4 - Використання IBDesignable

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

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

Вибачте, але як новачок у розробці IOS. Як рішення запобігає layer.cornerRadiusповерненню у початковий стан? (наприклад, як розшифровка xcode знає, як встановити cornerRadiusлише після UIViewініціалізації оригіналу )?
AlanSTACK


3

- SwiftUI

У SwiftUI ви можете використовувати cornerRadiusмодифікатор безпосередньо на будь-якому Viewбажанні. Наприклад, це питання:

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

Попередній перегляд

Зауважте, що діаманта, як радіус, немає, тому навіть якщо встановити кут Радію більше половини висоти , він буде плавно округлюватися .

Оформити замовлення цієї відповіді на собі , як раунд конкретних кутів в SwiftUI


2

Будь ласка, імпортуйте, Quartzcore frameworkтоді ви повинні встановити setMaskToBoundsдля TRUEцього дуже важливий рядок.

Тоді: [[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

Робіть це програмно в obj 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];

Ми також можемо це зробити із столярного столу.

 layer.cornerRadius  Number  5

введіть тут опис зображення


2

якщо круглий кут не працює у viewDidload () , краще написати код у 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);
}

Сподіваюся, це допомагає!


0

Ви також можете використовувати зображення:

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

встановити cornerRadious Properties для круглого виду

встановити masksToBounds Булеве значення для зображення все ще не буде намальовано поза межами радіуса кута

view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;

0

Використання розширення 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
}
}

Використання:

override func viewWillAppear(animated: Bool) {

sampleView.addRoundedCornerToView(statusBarView)

}

0

У Swift 4.2 та 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
    }
}

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.