(译)How to Create Top/Bottom Rounded Corners for Views?

我们正在推出一个新的系列教程来回答一些常见的问题。其中一个问题是:

我们知道如何创建一个视图或按钮的圆角。但是如果我只想创建一个视图的顶部或底部创建圆角该怎么办?

好吧,让我们重新回顾通常我们如何为视图创建圆角。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]即可获得下载链接，有效期只有一周哦

1. Swift 4 Programming Cookbook
   

2. Rxswift 

3. High Performance iOS Apps.OReilly

4. iOS Animations by Tutorials v4.0

5. React Native 开发指南

    更多骚操作，尽在iOSTips，关注公众号，第一时间get新姿势。