Daje UIView zaokrąglone rogi


577

Mój widok logowania ma widok podrzędny, który ma UIActivityViewaUILabel napisem „Logowanie się ...”. Ten widok cząstkowy ma narożniki, które nie są zaokrąglone. Jak mogę je okrągłe?

Czy jest jakiś sposób, aby to zrobić w moim XIB?


6
Wykonanie czegoś takiego w IB wymagałoby wcześniej wyrenderowanego obrazu z zaokrąglonymi narożnikami
Ed Marty

9
Niekoniecznie @ ed-marty, Ta odpowiedź od @Gujamin zasługuje na więcej uznania, ponieważ pokazuje, jak zastosować cornerRadiuswłaściwość do tabeli przy użyciu tylko Konstruktora interfejsów, bez konieczności używania wstępnie renderowanych obrazów lub ustawiania jej w kodzie.
djskinner

Odpowiedzi:


1219

Spróbuj tego

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

...

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

Uwaga: Jeśli próbujesz zastosować zaokrąglone narożniki do UIViewControllerwidoku, nie należy go stosować w konstruktorze kontrolera widoku, ale raczej w instancji -viewDidLoadpo, która viewjest faktycznie tworzona.


6
Pamiętaj, że właściwość istnieje tylko w telefonie iPhone 3.0, a nie we wcześniejszych wersjach.
Kendall Helmstetter Gelner

5
Muszę tylko powiedzieć, że była to jedna z najbardziej satysfakcjonujących odpowiedzi, jakie kiedykolwiek widziałem na SO. Sprawdzanie tutaj najpierw zaoszczędziło mi godzinę walki z edytorem zdjęć i sprawiłoby, że mój widok stałby się bardziej kruchy w stosunku do zmian kolorów / rozmiarów. Dzięki!
Justin Searls

20
Powiązana uwaga: każdy zainteresowany bardziej wizualnymi dodatkami (tj. Cieniem), aby łatwo zastosować go do UIView, powinien zapoznać się z referencją klasy CALayer. Większość z nich jest tak łatwa, jak ustawienie jednej lub dwóch wartości właściwości, jak powyższa odpowiedź: developer.apple.com/mac/library/documentation/GraphicsImaging/...
Justin Searls

6
@Ben Collins (lub ktokolwiek inny, kto ma ten problem), upewnij się, że Twój widok ma ustawione „klipy podglądu”. Możesz to sprawdzić w kreatorze interfejsów.
zem

2
działa to świetnie ALE jeśli masz wiele z tych zaokrąglonych rogów w dowolnym widoku przewijania lub animacji (próbowałem użyć ich w UITableView), wydajność bardzo ucierpi. Ładny płynny przewijany widok tabeli szybko staje się niepewny :(
Slee

261

Możesz także użyć funkcji Runtime Attribute zdefiniowanej przez użytkownika konstruktora interfejsu, aby ustawić ścieżkę klucza layer.cornerRadiusna wartość. Pamiętaj jednak, aby dołączyć QuartzCorebibliotekę.

Ta sztuczka działa również w celu ustawienia layer.borderWidth, jednak nie będzie działać, layer.borderColorponieważ oczekuje się, że CGColornie UIColor.

Efekty nie będą widoczne w serii ujęć, ponieważ parametry te są oceniane w czasie wykonywania.

Korzystanie z Konstruktora interfejsów do ustawiania promienia narożnika


10
pamiętaj, aby również sprawdzić Clip Subviewsopcję w widoku IB
Peter

2
(lub) dodaj ścieżkę kluczową: layer.masksToBounds, Typ: boolean: Sprawdzone
Amitabh

64

Teraz możesz użyć szybkiej kategorii w UIView (kod poniżej obrazka) w @IBInspectable, aby wyświetlić wynik w serii ujęć (jeśli używasz kategorii, użyj tylko cornerRadius, a nie layer.cornerRadius jako kluczowej ścieżki.

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

wprowadź opis zdjęcia tutaj


A jeśli używasz niestandardowej podklasy, pamiętaj o jej otagowaniu, @IBDesignableaby uzyskać podgląd na żywo w IB! (Więcej na nshipster.com/ibinspectable-ibdesignable )
clozach

56

Szybki

Krótka odpowiedź:

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

Dodatkowa odpowiedź

Jeśli doszedłeś do tej odpowiedzi, prawdopodobnie już widziałeś wystarczająco dużo, aby rozwiązać swój problem. Dodaję tę odpowiedź, aby dać trochę więcej wizualnego wyjaśnienia, dlaczego rzeczy robią to, co robią.

Jeśli zaczynasz od zwykłego UIView, ma kwadratowe rogi.

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

wprowadź opis zdjęcia tutaj

Możesz nadawać mu zaokrąglone rogi, zmieniając cornerRadiuswłaściwość widoku layer.

blueView.layer.cornerRadius = 8

wprowadź opis zdjęcia tutaj

Większe wartości promienia dają bardziej zaokrąglone rogi

blueView.layer.cornerRadius = 25

wprowadź opis zdjęcia tutaj

a mniejsze wartości dają mniej zaokrąglone rogi.

blueView.layer.cornerRadius = 3

wprowadź opis zdjęcia tutaj

To może wystarczyć, aby rozwiązać problem właśnie tam. Czasami jednak widok może mieć widok podrzędny lub podwarstwę, która wykracza poza granice widoku. Na przykład, gdybym dodać sub widok takiego

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

lub jeśli było dodać sub warstwę takiego

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

Wtedy skończyłbym z

wprowadź opis zdjęcia tutaj

Teraz, jeśli nie chcę, żeby rzeczy wisiały poza granicami, mogę to zrobić

blueView.clipsToBounds = true

albo to

blueView.layer.masksToBounds = true

co daje ten wynik:

wprowadź opis zdjęcia tutaj

Zarówno clipsToBoundsi masksToBoundsrównoważne . Po prostu pierwszy jest używany z UIViewdrugim, a drugi zCALayer .

Zobacz też


4
Chciałbym również dodać, że ustawienie promienia narożnika na połowę krótszego boku (w tym przypadku blueView.frame.size.height/2) powoduje idealnie zaokrąglony narożnik.
Johann Burgess,

44

Inne podejście niż to zrobiło Ed Marty:

#import <QuartzCore/QuartzCore.h>

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

Potrzebujesz setMasksToBounds, aby załadować wszystkie obiekty z IB ... Mam problem z zaokrągleniem mojego widoku, ale nie miałem obiektów z IB: /

to naprawiło to = D mam nadzieję, że to pomoże!


48
czym się różni? inne niż nie używanie składni kropkowej?
user102008

3
[v.layer setMasksToBounds: YES]; \ n ta linia jest magiczna, rozwiązuje mój wielki problem
Cullen SUN

3
Napisałem to, kiedy rozpocząłem programowanie na iOS i nie wiedziałem, że nie ma różnicy między składnią kropki a składnią nawiasu. Dlatego napisałem to jako „różne”. Mój kod zawierał również import <>, którego Ed Marty nie miał w swojej pierwotnej odpowiedzi (później edytowany w) i dlatego moja odpowiedź pomaga ludziom naprawić ich problem (inaczej nie importując go).
Kristian Flatheim Jensen

28

Jak opisano w tym poście na blogu , oto sposób na zaokrąglenie rogów 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];
}

Fajne jest to, że możesz wybrać, które rogi chcesz zaokrąglić w górę.


6
Zamiast podawać link do strony zewnętrznej, wolimy, aby odpowiedzi były tu zawarte samodzielnie, więc w odpowiedzi umieściłem odpowiedni kod z linku na blogu. Ludzie mogą odwiedzić post na blogu, aby uzyskać więcej szczegółów, ale upewnij się, że treść przetrwa, jeśli dany post zniknie. Odpowiedziałeś też na kilka różnych pytań, które tak naprawdę nie zadały tego samego pytania. Zostały one usunięte, a jedno pytanie zostało zamknięte jako duplikat tego. Chcemy, aby odpowiedzi były dopasowane do każdego pytania.
Brad Larson

5
Przewidujący. Wpis na blogu to obecnie 404.
Anthony C

To podejście jest czyste, ale ukryje każdy efekt cienia na widoku.
thesummersign

19

Musisz najpierw zaimportować plik nagłówka <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];

Nie przegap użycia - setMasksToBoundsw przeciwnym razie efekt może nie zostać wyświetlony.


2
Nie trzeba importować pliku „QuartzCore / QuartzCore.h”
Sudhir Kumar

Tak, musisz zaimportować.
Lord Zsolt,

3
@LordZsolt Być może zmienili to w iOS7, ale nie musisz już importować QuartzCore.
Marc

14

Możesz użyć następującej UIViewklasy niestandardowej, która może również zmienić kolor i szerokość obramowania. W tym IBDesignalbemomencie możesz również zmieniać atrybuty w kreatorze interfejsów.

wprowadź opis zdjęcia tutaj

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

Zastosowanie setMasksToBounds jest ważne. Ustawienie koloru tła i cienia nie jest.
djskinner

3

Swift 4 - Korzystanie z IBDesignable

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

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

Przykro mi, ale jako nowicjusz w rozwoju IOS. W jaki sposób rozwiązanie zapobiega layer.cornerRadiusprzywróceniu do pierwotnego stanu? (ei skąd storyboard xcode wie, jak ustawić cornerRadiusdopiero po UIViewzainicjowaniu oryginału )?
AlanSTACK


3

- SwiftUI

W SwiftUI możesz używać cornerRadiusmodyfikatora bezpośrednio na dowolnym, Viewco chcesz. Na przykład tego pytania:

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

Zapowiedź

Zauważ, że nie ma już promienia diamentowego, więc nawet jeśli ustawisz narożnikRadius na więcej niż połowę wysokości , zaokrągli się on gładko.

Kasy tę odpowiedź do se jak Okrągłego szczegółowych Corners w SwiftUI


2

Proszę importować Quartzcore frameworkwtedy trzeba ustawić setMaskToBounds, aby TRUEten bardzo ważny wiersz.

Następnie: [[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

Zrób to programowo w 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];

Możemy to również zrobić ze stoaryboardu.

 layer.cornerRadius  Number  5

wprowadź opis zdjęcia tutaj


2

jeśli okrągły narożnik nie działa w viewDidload () , lepiej napisać kod w 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);
}

Mam nadzieję że to pomoże!


0

Możesz także użyć obrazu:

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

Ustaw narożny Właściwość dla okrągłego widoku

set masksToBounds Boolean Wartość obrazu nie będzie nadal rysowana poza granicą promienia narożnika

view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;

0

Korzystanie z rozszerzenia 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
}
}

Stosowanie:

override func viewWillAppear(animated: Bool) {

sampleView.addRoundedCornerToView(statusBarView)

}

0

W Swift 4.2 i 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

ON Xcode 6 Twoja próba

     self.layer.layer.cornerRadius = 5.0f;

lub

    self.layer.layer.cornerRadius = 5.0f;
    self.layer.clipsToBounds = YES;
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.