目前什么是“正确的"?设置 UIView 的圆角半径的方法? [英] What's currently the "correct" way to set a UIView's corner radius?
问题描述
设置UIView
的圆角半径可以通过以下方式完成:
设置
layer
的cornerRadius
属性:view.layer.cornerRadius = 5;view.layer.masksToBounds = true;
敷面膜:
func roundCorners(corners:UIRectCorner, radius: CGFloat) {let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))让掩码 = CAShapeLayer()mask.path = path.cgPathself.layer.mask = 面具}
覆盖
draw(_:)
:func draw(_ rect: CGRect) {//圆角矩形的大小让 rectWidth = rect.width让 rectHeight = rect.height//找到实际帧的中心以在中间设置矩形让 xf: CGFloat = (self.frame.width - rectWidth)/2让 yf: CGFloat = (self.frame.height - rectHeight)/2让 ctx = UIGraphicsGetCurrentContext()!ctx.saveGState()让 rect = CGRect(x: xf, y: yf, 宽度: rectWidth, height: rectHeight)让 clipPath = UIBezierPath(roundedRect: rect,cornerRadius: rectCornerRadius).cgPathctx.addPath(clipPath)ctx.setFillColor(rectBgColor.cgColor)ctx.closePath()ctx.fillPath()ctx.restoreGState()}
根据以下标准,哪些通常被认为是在 UIView
上实现圆角的正确"方式:
- 配置(有些角可能是圆角,有些则不是)
- 动画(您可以为
cornerRadius
变化设置动画) - 灵活性(是否会破坏您已经应用的第三方库或掩码)
- 可读性(解决方案的简洁性/可重用性如何)
- 速度(是否会对性能产生负面影响)
请注意,我不知道目前设置 UIView 圆角半径的正确"方法是什么.
我更喜欢做的是尽可能多地使用 Interface Builder,而不需要额外的代码,这种方法显示了并且根据我的经验是可靠的.
从 iOS 11 起
您可以通过设置以下属性,在 Interface Builder
的 Identity inspector
中使用用户定义的运行时属性:
layer.cornerRadiuslayer.maskedCornerslayer.masksToBounds
根据
Setting a UIView
's corner radius can be done the following ways:
Set the
layer
'scornerRadius
property:view.layer.cornerRadius = 5; view.layer.masksToBounds = true;
Apply a mask:
func roundCorners(corners:UIRectCorner, radius: CGFloat) { let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)) let mask = CAShapeLayer() mask.path = path.cgPath self.layer.mask = mask }
Override
draw(_:)
:func draw(_ rect: CGRect) { // Size of rounded rectangle let rectWidth = rect.width let rectHeight = rect.height // Find center of actual frame to set rectangle in middle let xf: CGFloat = (self.frame.width - rectWidth) / 2 let yf: CGFloat = (self.frame.height - rectHeight) / 2 let ctx = UIGraphicsGetCurrentContext()! ctx.saveGState() let rect = CGRect(x: xf, y: yf, width: rectWidth, height: rectHeight) let clipPath = UIBezierPath(roundedRect: rect, cornerRadius: rectCornerRadius).cgPath ctx.addPath(clipPath) ctx.setFillColor(rectBgColor.cgColor) ctx.closePath() ctx.fillPath() ctx.restoreGState() }
Which of these is generally considered to be the "correct" way of implementing rounded corners on a UIView
, accounting for the following criteria:
- configuration (some corners may be rounded while others are not)
- animation (can you animate the
cornerRadius
changing) - flexibility (does it break third party libraries or masks you have already applied)
- readability (how concise/reusable is the solution)
- speed (does it negatively impact performance)
Note that I don't know what's currently the "correct" way to set a UIView's corner radius.
What I prefer to do is to use Interface Builder as much as possible without having extra code which this approach shows and is reliable to my experience.
From iOS 11 upwards
you can use user-defined runtime attributes in the Identity inspector
of the Interface Builder
by setting the following properties:
layer.cornerRadius
layer.maskedCorners
layer.masksToBounds
According to the documentation of the CACornerMask you can see that the maskedCorners
property is in fact a NSUInteger
data type and you're allowed to set the following values:
kCALayerMinXMinYCorner = 1U << 0
kCALayerMaxXMinYCorner = 1U << 1
kCALayerMinXMaxYCorner = 1U << 2
kCALayerMaxXMaxYCorner = 1U << 3
Since you're allowed to bitwise OR
those masks together you only have to "calculate" the resulting integer of that bitwise OR of what you actually need.
Therefore set the following number (integer) values for the maskedCorners
property to get rounded corners:
0 = no corner is being rounded
1 = top left corner rounded only
2 = top right corner rounded only
3 = top left and top right corners rounded only
4 = bottom left corner rounded only
5 = top left and bottom left corners rounded only
6 = top right and bottom left corners rounded only
7 = top left, top right and bottom left corners rounded only
8 = bottom right corner rounded only
9 = top left and bottom right corners rounded only
10 = top right and bottom right corners rounded only
11 = top left, top right and bottom right corners rounded only
12 = bottom left and bottom right corners rounded only
13 = top left, bottom left and bottom right corners rounded only
14 = top right, bottom left and bottom right corners rounded only
15 = all corners rounded
Example: If you want to set the corner radius for the top-left and the top-right corners of a UIView you would use those attributes:
这篇关于目前什么是“正确的"?设置 UIView 的圆角半径的方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!