ios 赋予 UIView 圆角

Giving UIView rounded corners

提问by itsaboutcode

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

我登录查看具有具有一个子视图UIActivityView和UILabel说：“登录...”。这个子视图有不圆角的角。我怎样才能让它们变圆？

Is there any way to do it inside my xib?

有什么办法可以在我的 xib 中做到这一点吗？

回答by Ed Marty

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 viewis actually instantiated.

注意：如果您尝试将圆角应用于 aUIViewController的视图，则不应在视图控制器的构造函数中应用它，而应在-viewDidLoad,view实际实例化之后应用它。

回答by Gujamin

You can also use the User Defined Runtime Attributesfeature of interface builder to set the key path layer.cornerRadiusto a value. Make sure you include the QuartzCorelibrary though.

您还可以使用界面构建器的用户定义的运行时属性功能将键路径layer.cornerRadius设置为值。不过，请确保包含该QuartzCore库。

This trick also works for setting layer.borderWidth however it will not work for layer.borderColoras this expects a CGColornot a UIColor.

这个技巧也适用于设置 layer.borderWidth 但是它不会工作，layer.borderColor因为它需要一个CGColornot a UIColor。

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

您将无法在故事板中看到效果，因为这些参数是在运行时评估的。

回答by Guilherme Torres Castro

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.

现在，您可以在 UIView（图片下方的代码）中使用 swift 类别和 @IBInspectable 在故事板中显示结果（如果您使用该类别，请仅使用cornerRadius 而不是 layer.cornerRadius 作为关键路径。

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

回答by Suragch

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 UIViewit has square corners.

如果您从常规开始，UIView它有方角。

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

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

您可以通过更改cornerRadius视图的layer.

blueView.layer.cornerRadius = 8

Larger radius values give more rounded corners

较大的半径值会产生更多的圆角

blueView.layer.cornerRadius = 25

and smaller values give less rounded corners.

较小的值会产生较少的圆角。

blueView.layer.cornerRadius = 3

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 subviewlike 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 sublayerlike 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

然后我会结束

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:

这给出了这个结果：

Both clipsToBoundsand masksToBoundsare equivalent. It is just that the first is used with UIViewand the second is used with CALayer.

这两个clipsToBounds和masksToBounds是相等的。只是第一个用于 with UIView，第二个用于 with CALayer。

See also

也可以看看

• How to add borders and shadow
• Bezier paths
• Transformations

• 如何添加边框和阴影
• 贝塞尔路径
• 转型

回答by Kristian Flatheim Jensen

A different approach than the one Ed Marty did:

一种与 Ed Marty 不同的方法：

#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 :/

您需要 setMasksToBounds 才能从 IB 加载所有对象...

this fixed it =D hope it helps!

这修复了它 =D 希望它有帮助！

回答by pabloruiz55

As described in this blog post, here is a method to round the corners of a UIView:

如这篇博文所述，这是一种圆角 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.

关于它的很酷的部分是您可以选择要舍入的角。

回答by Samir Jwarchan

You need to first import header file <QuartzCore/QuartzCore.h>

你需要先导入头文件 <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.

不要错过使用 - setMasksToBounds，否则可能无法显示效果。

回答by Vakas

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

您可以使用以下自定义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
        }
    }

}

回答by jorik

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

回答by Saranjith

Swift 4 - Using IBDesignable

Swift 4 - 使用 IBDesignable

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

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