【问题标题】:Giving UIView rounded corners给 UIView 圆角
【发布时间】:2010-12-03 07:58:18
【问题描述】:

我的登录视图有一个子视图,其中有一个UIActivityView 和一个UILabel,上面写着“正在登录...”。此子视图具有未圆角的角。我怎样才能使它们变圆?

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

【问题讨论】:

  • 在 IB 中做这样的事情需要一个带有圆角的预渲染图像
  • 不一定是@ed-marty,来自@Gujamin 的This answer 值得更多赞扬,因为它展示了如何仅使用Interface Builder 将cornerRadius 属性应用于表,而无需使用任何一个pre - 渲染图像或在代码中设置。

标签: ios xcode cocoa-touch uiview layer


【解决方案1】:

试试这个

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

...

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

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

【讨论】:

  • 请注意,该属性仅存在于 iPhone 3.0 中,不存在早期版本。
  • 我不得不说这是我在 SO 上见过的最直接令人满意的答案之一。首先检查这里只是为我节省了一个小时与图像编辑器的战斗,并且会使我的视图对颜色/尺寸变化更加脆弱。谢谢!
  • 相关说明:任何对更易于应用到 UIView 的视觉效果(即阴影)感兴趣的人都应该查看 CALayer 类参考。大部分都像设置一两个属性值一样简单,就像上面的答案:developer.apple.com/mac/library/documentation/GraphicsImaging/…
  • @Ben Collins(或其他有此问题的人),确保您的视图设置了“剪辑子视图”。您可以在界面生成器中进行检查。
  • 这很好用但是如果你在任何类型的滚动视图或动画中有很多这些圆角(我尝试在 UITableView 中使用它们)你的性能会受到很大影响。漂亮平滑的滚动表视图很快变得不稳定:(
【解决方案2】:

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

这个技巧也适用于设置 layer.borderWidth 但它不适用于layer.borderColor,因为这需要CGColor 而不是UIColor

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

【讨论】:

  • 记得在视图 IB 中检查 Clip Subviews 选项
  • (或)添加一个关键路径:layer.masksToBounds,类型:布尔:选中
  • 在文档大纲中的 FxView 上设置 2 个用户定义的运行时属性(layer.cornerRadius 和 layer.masksToBounds),而不是在其视图上。这个答案是救命稻草!使用 Xcode 12.3 为我工作,没有 #import 语句。
  • 在 Xcode 12.4 中,剪辑子视图的设置可以在“属性检查器”中找到:它是“绘图”部分中的一个复选框,称为“剪辑到边界”。
【解决方案3】:

斯威夫特

简答:

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)

您可以通过更改视图的layercornerRadius 属性来给它圆角。

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 都是 equivalent。只是第一个与UIView一起使用,第二个与CALayer一起使用。

另见

【讨论】:

  • 我还想补充一点,将角半径设置为短边的一半(在本例中为 blueView.frame.size.height/2)会产生完美的圆角。
【解决方案4】:

现在您可以在 UIView 中使用 swift 类别(图片下方的代码)与@IBInspectable 一起在情节提要中显示结果(如果您使用该类别,请仅使用cornerRadius 而不是 layer.cornerRadius 作为关键路径。

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

【讨论】:

【解决方案5】:

一种与 Ed Marty 不同的方法:

#import <QuartzCore/QuartzCore.h>

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

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

这解决了它=D希望它有帮助!

【讨论】:

  • 有什么不同?除了不使用点语法?
  • [v.layer setMasksToBounds:YES]; \n这条线很神奇,它解决了我的大问题
  • 我在开始 iOS 开发时写了这个,不知道点语法和括号语法之间没有区别。因此我把它写成“不同的”。我的代码还包括 Ed Marty 在他的原始回复(后来编辑)中没有的 import,因此我的回答可以帮助人们解决他们的问题(也就是没有导入它)。
【解决方案6】:

this blog post 中所述,这是一种对 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];
}

它最酷的部分是您可以选择要四舍五入的角。

【讨论】:

  • 我们希望答案在此处自成一体,而不是仅仅提供指向外部站点的链接,因此我将链接博客文章中的相关代码带到您的答案中。人们可以访问博客文章以获取更多详细信息,但这可以确保如果相关文章消失,内容将继续存在。此外,您针对几个不同的问题发布了这个答案,这些问题并没有真正问到同样的问题。那些被删除了,一个问题作为这个问题的副本被关闭了。我们喜欢精心设计的答案来匹配每个问题。
  • 先见之明。博文现在是 404。
  • 这种方法很干净,但它会隐藏视图上的任何阴影效果。
【解决方案7】:

需要先导入头文件&lt;QuartzCore/QuartzCore.h&gt;

 #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 ,否则可能无法显示效果。

【讨论】:

  • 不需要导入“QuartzCore/QuartzCore.h”
  • 是的,您确实需要导入。
  • @LordZsolt 也许他们用 iOS7 改变了这一点,但你不需要再导入 QuartzCore。
【解决方案8】:

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

}

【讨论】:

  • 我对 Swift 很陌生,有 Swift 版本吗?
【解决方案9】:
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 很重要。没有设置背景颜色和阴影。
【解决方案10】:
view.layer.cornerRadius = 25
view.layer.masksToBounds = true

【讨论】:

    【解决方案11】:

    - SwiftUI

    在 SwiftUI 中,您可以直接在任何您想要的 View 上使用 cornerRadius 修饰符。 比如这个问题:

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

    注意没有更多的菱形半径,所以即使你将cornerRadius设置为超过一半的高度,它也会圆滑的。

    结帐 this answer 了解如何在 SwiftUI 中 Round Specific Corners

    【讨论】:

      【解决方案12】:

      Swift 4 - 使用 IBDesignable

         @IBDesignable
          class DesignableView: UIView {
          }
      
          extension UIView
          {
      
              @IBInspectable
              var cornerRadius: CGFloat {
                  get {
                      return layer.cornerRadius
                  }
                  set {
                  layer.cornerRadius = newValue
              }
          }
      }
      

      【讨论】:

      • 不好意思,作为IOS开发的新手。解决方案如何防止layer.cornerRadius恢复原状? (即 xcode 的情节提要如何知道如何在原始的 UIView 初始化后才知道如何设置 cornerRadius)?
      【解决方案13】:

      如果圆角在 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);
      }
      

      希望这会有所帮助!

      【讨论】:

        【解决方案14】:

        请导入Quartzcore framework 然后你必须将setMaskToBounds 设置为TRUE 这是非常重要的一行。

        然后:[[yourView layer] setCornerRadius:5.0f];

        【讨论】:

          【解决方案15】:
          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;
          }
          

          【讨论】:

            【解决方案16】:

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

            我们也可以从故事板上做到这一点。

             layer.cornerRadius  Number  5
            

            【讨论】:

              【解决方案17】:

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

              【讨论】:

                【解决方案18】:

                你也可以使用图片:

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

                【讨论】:

                  【解决方案19】:

                  为圆形视图设置cornerRadious属性

                  set maskToBounds Boolean Value for image 不会仍然绘制在圆角半径边界之外

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

                  【讨论】:

                    【解决方案20】:

                    使用 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)
                    
                    }
                    

                    【讨论】:

                      【解决方案21】:

                      开启 Xcode 6 你的尝试

                           self.layer.layer.cornerRadius = 5.0f;
                      

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

                      【讨论】:

                        猜你喜欢
                        • 2013-05-15
                        • 2011-01-24
                        • 2016-01-21
                        • 1970-01-01
                        • 2016-03-16
                        • 2014-09-15
                        • 1970-01-01
                        • 1970-01-01
                        • 2011-06-18
                        相关资源
                        最近更新 更多