it-swarm.com.de

UIView abgerundete Ecken geben

Meine Login-Ansicht hat eine Unteransicht, die eine UIActivityView und eine UILabel enthält, die "Anmelden ..." sagen. Diese Unteransicht hat Ecken, die nicht gerundet sind. Wie kann ich sie abrunden?

Gibt es eine Möglichkeit, dies in meinem Xib zu tun?

535
itsaboutcode

Versuche dies

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

...

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

Anmerkung: Wenn Sie versuchen, abgerundete Ecken auf die Ansicht eines UIViewController anzuwenden, sollte sie nicht im Konstruktor des View-Controllers angewendet werden, sondern in -viewDidLoad, nachdem view tatsächlich instanziiert wurde.

1171
Ed Marty

Sie können auch dasUser Defined Runtime-Attributvon Interface Builder verwenden, um den Schlüsselpfad layer.cornerRadius auf einen Wert festzulegen. Stellen Sie sicher, dass Sie die Bibliothek QuartzCore einschließen.

Dieser Trick funktioniert auch für das Setzen von layer.borderWidth, jedoch nicht für layer.borderColor, da dies eine CGColor und keine UIColor erwartet.

Sie können die Effekte nicht im Storyboard sehen, da diese Parameter zur Laufzeit ausgewertet werden. 

Using Interface builder to set the corner radius

252
Gujamin

Jetzt können Sie in UIView (Code unter dem Bild) in @IBInspectable eine Swift-Kategorie verwenden, um das Ergebnis im Storyboard anzuzeigen. (Wenn Sie die Kategorie verwenden, verwenden Sie nur cornerRadius und nicht layer.cornerRadius als Schlüsselpfad.

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

enter image description here

Ein anderer Ansatz als der von Ed Marty:

#import <QuartzCore/QuartzCore.h>

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

Sie benötigen die setMasksToBounds, um alle Objekte von IB zu laden. Ich hatte ein Problem, bei dem meine Sicht gerundet wurde, aber die Objekte von IB nicht vorhanden waren: /

das behoben es = D hoffe es hilft!

Schnell

Kurze Antwort:

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

Ergänzende Antwort

Wenn Sie zu dieser Antwort gekommen sind, haben Sie wahrscheinlich schon genug gesehen, um Ihr Problem zu lösen. Ich füge diese Antwort hinzu, um eine visuellere Erklärung zu geben, warum Dinge das tun, was sie tun.

Wenn Sie mit einem regulären UIView beginnen, hat es eckige Ecken.

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

 enter image description here

Sie können umlaufende Ecken geben, indem Sie die cornerRadius-Eigenschaft von layer der Ansicht ändern. 

blueView.layer.cornerRadius = 8

 enter image description here

Größere Radiuswerte ergeben abgerundete Ecken 

blueView.layer.cornerRadius = 25

 enter image description here

und kleinere Werte ergeben weniger abgerundete Ecken.

blueView.layer.cornerRadius = 3

 enter image description here

Dies könnte ausreichen, um Ihr Problem direkt dort zu lösen. Manchmal kann eine Ansicht jedoch eine Unteransicht oder eine Unterebene haben, die außerhalb der Grenzen der Ansicht liegt. Zum Beispiel, wenn ich ein subview wie folgt hinzufügen würde

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

oder wenn ich eine sublayer wie folgt hinzufügen würde

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

Dann würde ich mit enden 

 enter image description here

Wenn ich nicht will, dass Dinge außerhalb der Grenzen hängen, kann ich dies tun

blueView.clipsToBounds = true

oder dieses

blueView.layer.masksToBounds = true

was zu diesem Ergebnis führt:

 enter image description here

clipsToBounds und masksToBounds sind äquivalent . Es ist nur so, dass der erste mit UIView und der zweite mit CALayer verwendet wird. 

Siehe auch

42
Suragch

Wie in diesem Blogbeitrag beschrieben, gibt es hier eine Methode, um die Ecken einer UIView abzurunden:

+(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];
}

Das Coole daran ist, dass Sie auswählen können, welche Ecken Sie aufrunden möchten.

26
pabloruiz55

Sie müssen zuerst die Header-Datei <QuartzCore/QuartzCore.h> importieren.

 #import QuartzCore/QuartzCore.h>

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

Verpassen Sie nicht die Verwendung von -setMasksToBounds, andernfalls wird der Effekt möglicherweise nicht angezeigt.

19
Samir Jwarchan

Sie können die folgende benutzerdefinierte UIView-Klasse verwenden, die auch die Randfarbe und -breite ändern kann. Da dies IBDesignalbe ist, können Sie auch die Attribute im Interface Builder ändern.

 enter image description here

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
        }
    }

}
9
Vakas
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];
6
jorik
view.layer.cornerRadius = 25
view.layer.masksToBounds = true
3
Parth Barot

Bitte importieren Sie Quartzcore framework, dann müssen Sie setMaskToBounds auf TRUE setzen, dies ist die sehr wichtige Zeile.

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

2
DeveshM
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
Ashish Patel

Swift 4 - IBDesignable verwenden

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

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

Tun Sie dies programmatisch in 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];

Wir können dies auch von Stoaryboard aus tun.

 layer.cornerRadius  Number  5

 enter image description here

1
Vikas Rajput

wenn die runde Ecke nicht in viewDidload () funktioniert, schreiben Sie besser Code in 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);
}

Hoffe das hilft!

1

Verwenden der UIView-Erweiterung:

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
}
}

Verwendungszweck:

override func viewWillAppear(animated: Bool) {

sampleView.addRoundedCornerToView(statusBarView)

}
0
A.G

legen Sie die cornerRadious-Eigenschaft für die Rundansicht fest

set masksToBounds Boolean Wert für image wird nicht immer außerhalb der Eckenradiusgrenze gezeichnet

view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;
0

Sie können auch ein Bild verwenden:

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
richy

In Swift 4.2 und 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
    }
}
0
iOS