Ios Swift 4将自定义圆角形状添加到UIView

我在一个名为Zenly的应用程序中发现了一个很棒的设计，他们使用屏幕底部的视图为用户体验添加额外的内容。我需要一个非常类似于此的视图。不幸的是，我完全不知道如何得到视图顶部的这个圆角形状。我该怎么做？这是一个截图

---

嗯，我对IOS很陌生，但我认为可以使用约束动画、UIgestureRecograiser和（view.layer.cornerRadius）来实现 让我试试

好吧，让我们来做明星，好吗

首先，结果如下：

• 首先在网站上获得2个图标
• 现在打开Xcode并创建一个新项目作为单个视图应用程序
• 现在在属性检查器上搜索“地图套件视图””并添加 它占据了半个屏幕

• 现在仍然在属性检查器上搜索“视图”，然后将其放置在重叠的部分上，然后将其颜色设置为所需的颜色（如果希望与图片上的颜色相同，请使用颜色选择器图标并从图像中选择该颜色）

• 完成后，在“地图套件视图”和“蓝色视图”上放置约束条件（在蓝色视图上，您必须确保从屏幕顶部放置约束条件（参见您将了解的图片））

• 现在将BlueView作为UIView连接到ViewController.swift！并将顶部约束连接到代码（查看我之前的图片）

• 现在根据您提供给我们的图像添加按钮和标签，并在viewController.swift中连接所有按钮和标签

• 现在让我解释一下我们将从这里应用的逻辑
  1） 我们将使用相应图层的“拐角半径””属性设置BlueView的拐角和按钮
  2） 我们将使用UISweepGestureRecograiser识别blueView上下滑动，然后相应地采取行动
  3） 每次检测到更改时，我们都将设置视图的动画（实际上，我们将设置前面连接到代码的顶部约束的动画）

在继续之前请注意：在IOS中制作动画是另一个你应该知道的概念，如果你不知道动画，你仍然可以跟着我，但在本教程结束时，我建议你继续，然后搜索动画的基础知识

• 现在让我们进入故事板：在属性检查器上搜索“滑动手势识别器”，并在蓝色视图上拖动它两次，以便在其上有两个手势

• 将第一个滑动手势识别器重命名为SwipeUpgestureRecognitor，将另一个重命名为SwipeDowngestureRecognitor

• 现在需要注意的一点是：您必须将两个手势识别器的委托设置为BlueView（请参见图片，大多数情况下您只需拖动并选择委托）

• 现在，将2个手势识别器连接到viewController.swift，作为一个@iAction，您将得到如下结果：

@iAction func SwipedDowngestureRecognitor（\发送方：任意） { }

@iAction func SwipeUpgestureRecognitor（\发送方：任意） { }

• 现在是时候让角点与图片中的一样了：为此，我们将使用图层属性并更改其角点半径，我们会这样做 它正在加载。代码如下：

  override func viewDidLoad()
      {
  
          super.viewDidLoad()
          BlueViewOutlet.layer.cornerRadius = 40
           getDirectionButton.layer.cornerRadius = 30
          view.layoutIfNeeded()
  
       }
  

• 现在在这两个函数中添加此代码，并确保constraint.constant的值不同

  @IBAction func SwipeDownGestureRecogniser(_ sender: Any)
       {
  
           UIView.animate(withDuration: 0.9, delay: 0.0, usingSpringWithDamping: 0.0, initialSpringVelocity: 0.0, options:
   .curveEaseOut, animations: {
               self.view.layoutIfNeeded()
               self.BlueViewOutlet.layoutIfNeeded()
               self.BlueViewVerticalConstraint.constant = 357 // this value depends on the constraint you have set , most of the time before putting this value i identify the device i'm running on and i set different values depending on the type of the screen but here we suppose that we are just on the iPhoneX so i use raw values 
               self.view.layoutIfNeeded()
           }, completion: nil)
      }
  

• 一些解释：Uiview.animate（u）用于在IOS中为元素（Uiview、uiButton等）设置动画；正如我之前所说的，有很多类型的动画。在这里，我们将使用我们称之为“春季动画”；代码非常简单，参数options是一个行为枚举（我猜它的名称是这样的），这里我使用了“.curveEaseOut”，然后在闭包内部（动画之后是什么：）我使用self.view.layoutFneed（）使动画能够顺利工作，没有它，你会有奇怪的行为

• 这是我的全部代码
  导入UIKit

  class ViewController: UIViewController {
      @IBOutlet weak var BlueViewOutlet: UIView!
      @IBOutlet weak var BlueViewVerticalConstraint: NSLayoutConstraint! // on my computer the value of its constant is 307 , you can see it from the attribute inspector
      @IBOutlet weak var getDirectionButton: UIButton!
  
  override func viewDidLoad()
  {
      super.viewDidLoad()
      BlueViewOutlet.layer.cornerRadius = 40
      getDirectionButton.layer.cornerRadius = 30
      view.layoutIfNeeded()
  }
  
  override func didReceiveMemoryWarning() {
      super.didReceiveMemoryWarning()
      // Dispose of any resources that can be recreated.
  }
  
  @IBAction func SwipeDownGestureRecogniser(_ sender: Any)
  {
      UIView.animate(withDuration: 0.9, delay: 0.0, usingSpringWithDamping: 0.0, initialSpringVelocity: 0.0, options: .curveEaseOut, animations: {
          self.view.layoutIfNeeded()
          self.BlueViewOutlet.layoutIfNeeded()
          self.BlueViewVerticalConstraint.constant = 357
          self.view.layoutIfNeeded()
      }, completion: nil)
  }
  
  @IBAction func SwipeupGestureRecognizer(_ sender: Any)
  {
      self.view.layoutIfNeeded()
      UIView.animate(withDuration: 0.9, delay: 0.0, usingSpringWithDamping: 0.0, initialSpringVelocity: 0.0, options: .curveEaseOut, animations: {
          self.view.layoutIfNeeded()
          self.BlueViewOutlet.layoutIfNeeded()
          self.BlueViewVerticalConstraint.constant = 257
          self.view.layoutIfNeeded()
      }, completion: nil)
  }
  }
  

• 我想这就是你所要做的。如果不是很好的话，我很抱歉，我对教程、解释和swift还太陌生，所以我希望我已经足够清楚了。这是一个视频（再次）
  请注意，这不是一个抛光的工作，只是我做了一些解释，你将不得不定制它根据您的需要和抛光自己的一切

至于定制的顶部圆角，我建议您在Photoshop或sketch中进行设计，然后使用我在这里发布的教程，但您将 只需将“blueView UiViuew”更改为大UIimageView即可 将图像作为背景放置

---

我相信有一种叫做

UIBezierPath

，也许你可以用它来掩盖你的观点。我不确定它是否是这样工作的。你需要在draw rect中绘制所需的形状。我在这里看到的是我们需要在topHello处画一条曲线！来自Zenly的Pascal，我真的很高兴你喜欢这个面板上的设计！Linus是对的，我们正在使用

UIBezierPath

在

CAShapeLayer

中绘制此曲线。我把它们放在一起是为了看看它们是如何制作的。贝塞尔路径有点可怕，但只要花一点时间，就可以画出漂亮的东西。玩得开心@哇，你真好！谢谢：DI添加了动画，因为我猜这个设计是动画。。。