给UIView圆角


577

我的登录视图有一个子视图,其中有一个UIActivityViewUILabel“ Signing In…”的字样。此子视图的角没有倒圆角。如何使它们圆润?

有什么办法可以在我的xib内完成此操作?


6
在IB中做类似的事情需要一个带有圆角的预渲染图像
Ed Marty

9
@ gu-miny不一定是@ ed-marty,来自@Gujamin的此答案值得一提,因为它显示了如何cornerRadius仅使用Interface Builder 将属性应用于表,而不必使用预渲染的图像或在代码中进行设置。
djskinner

Answers:


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中,而不存在于早期版本中。
肯德尔·赫尔姆斯特·吉尔纳

5
我只需要说这是我在SO上见过的最直接令人满意的答案之一。首先在这里进行检查仅节省了我一个小时与图像编辑器进行的战斗,并且会使我的视图在颜色/尺寸更改方面变得更加脆弱。谢谢!
Justin Searls 2010年

20
相关说明:任何对更多视觉美感(例如阴影)感兴趣的人都可以轻松地将其应用于UIView,应该查看CALayer类参考。大部分是那么容易,因为设置一个或两个属性值,像上面的答案:developer.apple.com/mac/library/documentation/GraphicsImaging/...
贾斯汀Searls

6
@Ben Collins(或其他有此问题的人),请确保您的视图已设置“剪辑子视图”。您可以在界面构建器中进行检查。
zem 2010年

2
如果您在任何形式的滚动视图或动画(我曾尝试在UITableView中使用它们)中有很多这样的圆角,那么这将非常有用,但性能会受到很大影响。尼斯平滑的滚动表视图很快就变得断断续续:(
Slee

261

您还可以使用界面构建器的“ 用户定义的运行时属性”功能来将键路径layer.cornerRadius设置为值。确保确保包括QuartzCore库。

此技巧也适用于设置layer.borderWidth,但layer.borderColor由于预期CGColor不是a,因此将不适用于此设置UIColor

您将无法在情节提要中看到效果,因为这些参数是在运行时评估的。

使用“界面”构建器设置拐角半径


10
记得也要Clip Subviews在视图IB中签入该选项
Peter

2
(或)添加关键路径:layer.masksToBounds,类型:布尔值:已选中
Amitabh)

64

现在,您可以在UIView中使用快速类别(在下面的代码中进行编码),并使用@IBInspectable在故事板上显示结果(如果使用类别,请仅将cornerRadius而不是layer.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

得到以下结果:

在此处输入图片说明

这两个clipsToBoundsmasksToBounds相等的。只是第一个与一起使用,UIView第二个与一起使用CALayer

也可以看看


4
我还想补充一点,将拐角半径设置为较短边的一半(在本例中为blueView.frame.size.height/2)可得到完美的圆角。
约翰·伯吉斯

44

与Ed Marty所采取的方法不同:

#import <QuartzCore/QuartzCore.h>

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

您需要它的setMasksToBounds来从IB加载所有对象...我遇到了一个问题,即我的视图四舍五入,但是没有IB的对象:/

此问题已解决= D希望对您有所帮助!


48
有什么不同?除了不使用点语法以外?
user102008 2011年

3
[v.layer setMasksToBounds:YES]; \ n这行很神奇,它解决了我的大问题
Cullen SU​​N

3
我是在开始iOS开发时写的,不知道点语法和括号语法之间没有区别。因此,我将其写为“不同”。我的代码还包括Ed Marty在原始响应中(后来被编辑)没有的import <>,因此我的答案帮助人们解决了他们的问题(也就是未将其导入)。
克里斯蒂安·弗拉特海姆·延森

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。
Anthony C

这种方法很干净,但是会在视图上隐藏任何阴影效果。
thesummersign

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,

是的,您确实需要导入。
Zsolt勋爵,

3
@LordZsolt也许他们使用iOS7进行了更改,但是您不再需要导入QuartzCore。
2014年

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返回到原始状态?(ei xcode的情节提要如何cornerRadius仅在原始UIView内容初始化后才知道如何设置)?
AlanSTACK


3

-SwiftUI

在SwiftUI中,您可以cornerRadius直接在所需的任何位置使用修饰符View。例如这个问题:

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

预习

请注意,不再有菱形半径,因此,即使将cornerRadius设置为高度的一半以上,它也会平滑地变圆。

签出 此答案以了解如何在SwiftUI中舍入特定角落


2

请导入,Quartzcore framework然后您必须将这一行设置setMaskToBoundsTRUE非常重要的一行。

然后: [[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];

我们也可以从stoaryboard做到这一点。

 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

设置cornerRadiant属性为圆形视图

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

-4

在Xcode 6上尝试

     self.layer.layer.cornerRadius = 5.0f;

要么

    self.layer.layer.cornerRadius = 5.0f;
    self.layer.clipsToBounds = YES;
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.