关于ios：给UIView圆角


Giving UIView rounded corners

我的登录视图有一个子视图，其中UIActivityView和UILabel表示"登录..."。 此子视图的拐角不是圆角。 我怎样才能让它们成圆形？

有没有办法在我的xib中做到这一点？

相关讨论

尝试这个

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

...

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

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

相关讨论

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

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

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

Using Interface builder to set the corner radius

相关讨论

现在，您可以在UIView中使用swift类别(图片中的代码)，并在@IBInspectable中显示故事板上的结果(如果您使用的是类别，请仅使用cornerRadius而不是layer.cornerRadius作为键路径。

1
2
3
4
5
6
7
8
9
10
11
extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

enter image description here

相关讨论

迅速

简短回答：

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

补充答案

如果你已经得到这个答案，你可能已经看到了足以解决你的问题。我正在添加这个答案，以便为事情做他们所做的事情提供更多的视觉解释。

如果你从常规的UIView开始它有方角。

1
2
3
4
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

您可以通过更改视图layer的cornerRadius属性为其提供圆角。

1
blueView.layer.cornerRadius = 8

enter image description here

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

1
blueView.layer.cornerRadius = 25

enter image description here

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

1
blueView.layer.cornerRadius = 3

enter image description here

这可能足以解决您的问题。但是，有时视图可以具有超出视图边界的子视图或子图层。例如，如果我要添加这样的子视图

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

或者如果我要添加这样的子图层

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

然后我会结束

enter image description here

现在，如果我不想让事情悬而未决，我可以做到这一点

1
blueView.clipsToBounds = true

或这个

1
blueView.layer.masksToBounds = true

这给出了这个结果：

enter image description here

clipsToBounds和masksToBounds都是等价的。只是第一个与UIView一起使用，第二个与CALayer一起使用。

也可以看看

  • 如何添加边框和阴影
  • Bezier路径
  • 转换
相关讨论

与Ed Marty所做的不同：

1
2
3
4
#import <QuartzCore/QuartzCore.h>

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

你需要setMasksToBounds来加载IB中的所有对象...我遇到了一个问题，我的视图已经四舍五入，但是没有来自IB的对象：/

这固定了= D希望它有所帮助！

相关讨论

正如本博文中所描述的，这是一个圆角UIView角落的方法：

1
2
3
4
5
6
7
8
9
10
11
+(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];
}

关于它的很酷的部分是你可以选择你想要四舍五入的角落。

相关讨论

您需要先导入头文件

1
2
3
4
5
6
 #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，否则可能无法显示效果。

相关讨论

您可以使用以下自定义UIView类，它也可以更改边框颜色和宽度。因为这是IBDesignalbe您也可以在界面构建器中更改属性。

enter image description here

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
        }
    }

}
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
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];
相关讨论

1
2
view.layer.cornerRadius = 25
view.layer.masksToBounds = true
Swift 4 - 使用IBDesignable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

        @IBInspectable
        var cornerRadius: CGFloat {
            get {
                return layer.cornerRadius
            }
            set {
            layer.cornerRadius = newValue
        }
    }
}
相关讨论

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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;
}

在对象中以编程方式执行此操作

1
2
3
4
5
6
7
8
9
10
11
12
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这样做。

1
 layer.cornerRadius  Number  5

enter image description here

如果圆角不在viewDidload()中工作，最好在viewDidLayoutSubview()中编写代码

1
2
3
4
5
6
7
8
9
10
-(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);
}

希望这可以帮助！

您还可以使用图片：

1
2
3
4
5
6
7
8
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];

在Swift 4.2和Xcode 10.1中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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
    }
}

为圆视图设置cornerRadious属性

set masksToBounds布尔值的图像将不会在角半径边界外绘制

1
2
3
view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;

使用UIView扩展：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
}
}

用法：

1
2
3
4
5
override func viewWillAppear(animated: Bool) {

sampleView.addRoundedCornerToView(statusBarView)

}

在Xcode 6上
你的尝试

1
     self.layer.layer.cornerRadius = 5.0f;

要么

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