我们正在推出一个新的系列教程来回答一些常见的问题。其中一个问题是:
我们知道如何创建一个视图或按钮的圆角。但是如果我只想创建一个视图的顶部或底部创建圆角该怎么办?
好吧,让我们重新回顾通常我们如何为视图创建圆角。Apple已经提供了非常容易的API创建视图的圆角。所有您需要做的就是设置cornerRadius属性和设置clipsToBounds为true。这是代码片段:
如果你切换到 Assistant editor 模式,你应该看到这样的视图呈现,黄色View有四个圆角。
这是很简单的。视图所有的角都是圆形的。那么如何创建只有顶部的圆角呢?
Using maskedCorners on iOS 11
在iOS 11中,Apple引入了layer(CALayer)的一个新属性maskedCorners 。此属性的类型为CACornerMask,它有4个值:
layerMaxXMaxYCorner – lower right corner
layerMaxXMinYCorner – top right corner
layerMinXMaxYCorner – lower left corner
layerMinXMinYCorner – top left corner
默认情况下,maskedCorners的值为显示所有的四个角。现在我们只是想显示顶部的2个角。你可以设置maskedCorners如下:
如果你改变roundCorners方法如下,那么黄色图形就仅会显示顶部的2个圆角了。
、
Using Bezier Path on iOS 10 (or lower)
上面方法的问题是它只支持iOS 11+。如果你的应用需要支持iOS的低版本,你不能使用maskedCorners属性。下面是一个替代的解决方案。而不是使用maskedCorners,我们使用UIBezierPath创建一个圆角矩形路径。UIBezierPath允许我们指定的初始化角落我们想圆是这样的:
func roundCorners(cornerRadius: Double) {
let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
let maskLayer = CAShapeLayer()
maskLayer.frame = self.bounds
maskLayer.path = path.cgPath
self.layer.mask = maskLayer
}
效果如下图
Animating Corners
一些读者也想知道圆角动画如何实现。您可以使用UIView动画或新的API(iOS 10+) UIViewPropertyAnimator动画修改。
@objc func animateCornerChange(recognizer: UITapGestureRecognizer) {
let targetRadius: CGFloat = (cardView.layer.cornerRadius == 0.0) ? 100.0 : 0.0
UIViewPropertyAnimator(duration: 1.0, curve: .easeInOut) {
self.cardView.layer.cornerRadius = targetRadius
}.startAnimation()
运行效果
ISSUE:上周有读者朋友在公号后台提问,问题大概是Mach-O文件中符号表和DSYM中的有什么不同,各自包含什么样的符号?挺有趣的问题,值得我们研究探索,最近略忙,先预告一下,先挖个坑。
NOTICE:WWDC 2018 值得期待
北京时间6月5日凌晨1点,请到Apple观看直播
这里推荐几本书,公众号后台回复[Swift]即可获得下载链接,有效期只有一周哦
Swift 4 Programming Cookbook
Rxswift
High Performance iOS Apps.OReilly
iOS Animations by Tutorials v4.0
React Native 开发指南
更多骚操作,尽在iOSTips,关注公众号,第一时间get新姿势。