我的登录视图有一个子视图,其中有一个 UIActivityView
和一个 UILabel
表示“正在登录...”。此子视图具有未圆角的角。我怎样才能让它们变圆?
有什么办法可以在我的 xib 中做到这一点?
cornerRadius
属性应用于表,而无需使用预渲染图像或将其设置在代码。
尝试这个
#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now :)
...
view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;
注意:如果您尝试对 UIViewController
的视图应用圆角,则不应在视图控制器的构造函数中应用圆角,而应在 view
实际实例化之后在 -viewDidLoad
中应用。
您还可以使用界面生成器的用户定义的运行时属性 功能将键路径 layer.cornerRadius
设置为一个值。但请确保包含 QuartzCore
库。
此技巧也适用于设置 layer.borderWidth,但它不适用于 layer.borderColor
,因为它需要 CGColor
而不是 UIColor
。
您将无法在情节提要中看到效果,因为这些参数是在运行时评估的。
https://i.stack.imgur.com/CHs6o.png
Clip Subviews
选项
迅速
简短的回答:
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)
https://i.stack.imgur.com/4Z0yJ.png
您可以通过更改视图的 layer
的 cornerRadius
属性给它圆角。
blueView.layer.cornerRadius = 8
https://i.stack.imgur.com/2Y5yX.png
较大的半径值会产生更多的圆角
blueView.layer.cornerRadius = 25
https://i.stack.imgur.com/fkz2q.png
较小的值会产生较少的圆角。
blueView.layer.cornerRadius = 3
https://i.stack.imgur.com/MEKeQ.png
这可能足以解决您的问题。然而,有时一个视图可能有一个超出视图边界的子视图或子层。例如,如果我要添加这样的子视图
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)
然后我会结束
https://i.stack.imgur.com/E3KMQ.png
现在,如果我不想让事情超出界限,我可以这样做
blueView.clipsToBounds = true
或这个
blueView.layer.masksToBounds = true
这给出了这个结果:
https://i.stack.imgur.com/XyQFG.png
clipsToBounds
和 masksToBounds
都是 equivalent。只是第一个与UIView
一起使用,第二个与CALayer
一起使用。
也可以看看
如何添加边框和阴影
贝塞尔路径
转型
blueView.frame.size.height/2
)会产生一个完美的圆角。
现在您可以在 UIView 中使用 swift 类别(图片下方的代码)和 @IBInspectable 以在情节提要中显示结果(如果您使用该类别,请仅使用cornerRadius 而不是 layer.cornerRadius 作为关键路径。
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
@IBDesignable
对其进行标记,以便在 IB 中获得实时预览! (更多请参阅 nshipster.com/ibinspectable-ibdesignable)
与 Ed Marty 所做的不同的方法:
#import <QuartzCore/QuartzCore.h>
[v.layer setCornerRadius:25.0f];
[v.layer setMasksToBounds:YES];
您需要 setMasksToBounds 才能从 IB 加载所有对象...我遇到了一个问题,我的视图变圆了,但没有来自 IB 的对象:/
这修复了它=D希望它有帮助!
如 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];
}
它最酷的部分是您可以选择要四舍五入的角。
您可以使用以下自定义 UIView
类,它也可以更改边框颜色和宽度。因为这是 IBDesignalbe
,您也可以在界面生成器中更改属性。
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
}
}
}
您需要先导入头文件 <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
,否则可能无法显示效果。
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];
view.layer.cornerRadius = 25
view.layer.masksToBounds = true
- 斯威夫特用户界面
在 SwiftUI 中,您可以直接在任何您想要的 View
上使用 cornerRadius
修饰符。例如这个问题:
Text("Signing In…")
.padding(16)
.background(Color.red)
.cornerRadius(50)
https://i.stack.imgur.com/eA0g0.png
请注意,没有更多的菱形半径,因此即使将cornerRadius设置为高度的一半以上,它也会平滑圆润。
结帐 this answer 了解如何在 SwiftUI 中Round Specific Corners
如果圆角在 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);
}
希望这可以帮助!
在 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
}
}
Swift 4 - 使用 IBDesignable
@IBDesignable
class DesignableView: UIView {
}
extension UIView
{
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
}
layer.cornerRadius
恢复到原始状态? (ei 只有在初始化原始 UIView
之后,xcode 的故事板才知道如何设置 cornerRadius
)?
请导入 Quartzcore framework
然后您必须将 setMaskToBounds
设置为 TRUE
这是非常重要的一行。
然后:[[yourView layer] setCornerRadius:5.0f];
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;
}
在 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
https://i.stack.imgur.com/NBJjD.png
您还可以使用图像:
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];
为圆形视图设置cornerRadious属性
为图像设置 maskToBounds 布尔值仍不会在圆角半径边界之外绘制
view.layer.cornerRadius = 5;
view.layer.masksToBounds = YES;
使用 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)
}
ON Xcode 6 你的尝试
self.layer.layer.cornerRadius = 5.0f;
或者
self.layer.layer.cornerRadius = 5.0f;
self.layer.clipsToBounds = YES;
不定期副业成功案例分享