ChatGPT解决这个技术问题 Extra ChatGPT

Giving UIView rounded corners

My login view has a subview which has a UIActivityView and a UILabel saying "Signing In…". This subview has corners which aren't rounded. How can I make them round?

Is there any way to do it inside my xib?

Doing something like this in IB would require a pre-rendered image with rounded corners
Not necessarily @ed-marty, This answer from @Gujamin deserves some more credit as it shows how to apply the cornerRadius property to the table using Interface Builder only, without having to use either pre-rendered images or set it in the code.

F
Fattie

Try this

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

...

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

Note: If you are trying to apply rounded corners to a UIViewController's view, it should not be applied in the view controller's constructor, but rather in -viewDidLoad, after view is actually instantiated.


Note that property only exists in iPhone 3.0, not earlier versions.
I just have to say that this was one of the most immediately satisfying answers I've ever seen on SO. Checking here first just saved me an hour of fighting with an image editor and would have made my view more brittle to color / sizing changes. Thanks!
Related note: anyone interested in more visual goodies (i.e. shadow) to easily apply to a UIView should check out the CALayer class reference. Most of it is as easy as setting one or two property values, like the above answer: developer.apple.com/mac/library/documentation/GraphicsImaging/…
@Ben Collins (or anyone else who has this problem), make sure your view has "clip subviews" set. You can check this in interface builder.
this works great BUT if you have a lot of these rounded corners in any sort of scroll view or animation (I tried using them in a UITableView) you performance will suffer greatly. Nice smooth scrolling table view quickly become choppy :(
K
Kudit

You can also use the User Defined Runtime Attributes feature of interface builder to set the key path layer.cornerRadius to a value. Make sure you include the QuartzCore library though.

This trick also works for setting layer.borderWidth however it will not work for layer.borderColor as this expects a CGColor not a UIColor.

You will not be able to see the effects in the storyboard because these parameters are evaluated at runtime.

https://i.stack.imgur.com/CHs6o.png


remember to check the Clip Subviews option in for the view IB as well
(or) add a Key Path: layer.masksToBounds, Type: boolean: Checked
Set the 2 user defined runtime attributes (layer.cornerRadius and layer.masksToBounds) on the FxView in the document outline, not on its view. This answer is a lifesaver! Works for me using Xcode 12.3, without the #import statement.
In Xcode 12.4 the setting to clip subviews can be found in the "Attributes inspector": It's a tickbox in the "Drawing" section and it's called "Clips to Bounds".
C
Community

Swift

Short answer:

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

Supplemental Answer

If you have come to this answer, you have probably already seen enough to solve your problem. I'm adding this answer to give a bit more visual explanation for why things do what they do.

If you start with a regular UIView it has square corners.

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

https://i.stack.imgur.com/4Z0yJ.png

You can give it round corners by changing the cornerRadius property of the view's layer.

blueView.layer.cornerRadius = 8

https://i.stack.imgur.com/2Y5yX.png

Larger radius values give more rounded corners

blueView.layer.cornerRadius = 25

https://i.stack.imgur.com/fkz2q.png

and smaller values give less rounded corners.

blueView.layer.cornerRadius = 3

https://i.stack.imgur.com/MEKeQ.png

This might be enough to solve your problem right there. However, sometimes a view can have a subview or a sublayer that goes outside of the view's bounds. For example, if I were to add a subview like this

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

or if I were to add a sublayer like this

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

Then I would end up with

https://i.stack.imgur.com/E3KMQ.png

Now, if I don't want things hanging outside of the bounds, I can do this

blueView.clipsToBounds = true

or this

blueView.layer.masksToBounds = true

which gives this result:

https://i.stack.imgur.com/XyQFG.png

Both clipsToBounds and masksToBounds are equivalent. It is just that the first is used with UIView and the second is used with CALayer.

See also

How to add borders and shadow

Bezier paths

Transformations


I would also like to add that setting the corner radius to half of the shorter side (in this case blueView.frame.size.height/2) results in a perfectly rounded corner.
k
krolik

Now you can use a swift category in UIView (code bellow the picture) in with @IBInspectable to show the result at the storyboard (If you are using the category, use only cornerRadius and not layer.cornerRadius as a key path.

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

https://i.stack.imgur.com/CHs6o.png


And if you're using a custom sub-class, Make sure to tag it with @IBDesignable to get a live preview in IB! (More at nshipster.com/ibinspectable-ibdesignable)
This doesn't seem to work in current XCode. The view is rounded running on the device but not in IB.
A
Arbitur

A different approach than the one Ed Marty did:

#import <QuartzCore/QuartzCore.h>

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

You need the setMasksToBounds for it to load all the objects from IB... i got a problem where my view got rounded, but did not have the objects from IB :/

this fixed it =D hope it helps!


how is it different? other than not using dot syntax?
[v.layer setMasksToBounds:YES]; \n this line is magic, it solves my big problem
I wrote this when i started iOS development and didn't know there wasn't a difference between dot syntax and the bracket syntax. Therefore I wrote it as "different". My code also included the import<> that Ed Marty did not have in his original response (later edited in) and therefore my answer help people fix their problem (aka not having it imported).
B
Brad Larson

As described in this blog post, here is a method to round the corners of a 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];
}

The cool part about it is that you can select which corners you want rounded up.


Rather than just providing a link to an external site, we prefer that answers be self-contained here, so I brought the relevant code from the linked blog post into your answer. People can visit the blog post for more detail, but this make sure that the content will survive if the post in question goes away. Also, you posted this answer to several different questions that didn't really ask the same thing. Those were removed, and one question was closed as a duplicate of this one. We like to have answers crafted to match each question.
Prescient. The blog post is 404 now.
This approach is Clean but it will hide any shadow effect on the view.
V
Vakas

You can use following custom UIView class which can also change border color and width. As this is IBDesignalbe You can change the attributes in interface builder as well.

https://i.stack.imgur.com/oPYvu.png

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

}

I am quite new to Swift, is there's a Swift version of this?
P
Paras Joshi

You need to first import header file <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];

Don't miss to use -setMasksToBounds , otherwise the effect may not be shown.


Not need to import "QuartzCore/QuartzCore.h"
Yes you do need to import.
@LordZsolt Maybe they changed that with iOS7, but you needn't import QuartzCore anymore.
H
Hamed Rajabi
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];

Applying setMasksToBounds is important. Setting a background colour and drop shadow is not.
k
koen
view.layer.cornerRadius = 25
view.layer.masksToBounds = true

M
Mojtaba Hosseini

- SwiftUI

In SwiftUI, you can use cornerRadius modifier directly on any View you want. For example of this question:

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

https://i.stack.imgur.com/eA0g0.png

Note that there is no more diamond like radius, so even if you set the cornerRadius more than half of the height, it will round smoothly.

Checkout this answer to se how to Round Specific Corners in SwiftUI


D
Dharmesh Mansata

if round corner not working in viewDidload() it's better to write 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);
}

Hope this helps!


N
Naresh

In Swift 4.2 and 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
    }
}

S
Saranjith

Swift 4 - Using IBDesignable

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

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

I'm sorry, but as a newcomer to IOS development. How does the solution prevent layer.cornerRadius from being returned to the original state? (e.i. how does xcode's storyboard know how to set cornerRadius only after the original UIView is initialized)?
P
Paras Joshi

Please import Quartzcore framework then you have to set setMaskToBounds to TRUE this the very important line.

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


A
Ashish Patel
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;
}

V
Vikas Rajput

Do this programatically 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];

We Can Also do this from stoaryboard.

 layer.cornerRadius  Number  5

https://i.stack.imgur.com/NBJjD.png


r
richy

You can also use an image:

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

P
Pang

set cornerRadious Property for round View

set masksToBounds Boolean Value for image will not still be drawn outside the corner radius boundary

view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;

A
Alvin George

Using UIView Extension:

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

Usage:

override func viewWillAppear(animated: Bool) {

sampleView.addRoundedCornerToView(statusBarView)

}

S
Saringkhan Vungsin

ON Xcode 6 Your try

     self.layer.layer.cornerRadius = 5.0f;

or

    self.layer.layer.cornerRadius = 5.0f;
    self.layer.clipsToBounds = YES;