Swift 4 将自定义圆形添加到 UIView [关闭]

Question

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

Answer 1

嗯 eu ..，我对 IOS 很陌生，但我认为您可以使用约束动画、UIGestureRecogniser 和 (view.layer.cornerRadius) 来做到这一点 让我尝试。

好的，让我们给你加星好吗？

首先，结果如下：https://streamable.com/cv91a

• 先在网站上获得2个图标https://www.flaticon.com/
• 现在打开 Xcode 并创建一个新项目作为单个视图应用程序

• 现在在属性检查器中搜索“MAP KIT VIEW”并添加 它是屏幕的一半

  see screenshot here

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

  see screenshot here

• 完成后，将约束放置在“MAP KIT VIEW”和“blue View”（在 blueView 上，您必须确保放置屏幕顶部的约束（看你会明白的图片））

  see screenshot here

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

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

• 现在让我解释一下我们将从这里应用的逻辑

  1) 我们将设置 BlueView 的角和带有各自图层的“cornerRadius”属性的按钮

  2) 我们将使用 uiSwipeGestureRecogniser 来识别对该 blueView 的上下滑动，然后采取相应措施

  3) 每次检测到更改时，我们都会为视图设置动画（实际上，我们将为之前连接到代码的顶部约束设置动画）

在我们继续之前请注意： IOS 中的动画是您应该知道的另一个概念，如果您不了解动画，您仍然可以跟随我，但在此结束时教程，我建议你继续 https://www.raywenderlich.com/category/ios 然后搜索动画的基础知识。

• 现在让我们进入情节提要：在属性检查器中搜索“Swipe Gesture Recognizer”并将其拖到蓝色视图上2次，以便有2个手势

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

• 现在不容错过的棘手部分：您必须将两个gestureRecognizer的委托设置为BlueView（参见图片，大多数时候您只需拖动并选择委托）

  see screenshot here

• 现在将 2 个gestureRecognizers 连接到 viewController.swift 作为 @IBAction 你会得到这样的东西：

@IBAction func SwipeDownGestureRecogniser(_ sender: Any) { }

@IBAction func SwipeupGestureRecognizer(_ sender: Any) { }

• 现在是时候让角落像图片中一样了：为此我们将使用图层属性并更改它们的角落半径，我们这样做 它在 viewDidLoad 上。这是代码：

  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(_) 用于在IOS 中为元素（uiViews、uiButton 等）设置动画；正如我之前所说，动画有很多种。在这里，我们将使用我们所说的“春季动画”；代码非常不言自明，参数 options 是行为的枚举（我猜它是这样调用的），这里我使用了“.curveEaseOut”，然后在闭包内（动画之后是什么：）我使用 self.view.layoutIfNeeded() 来使动画顺利运行，没有它你会有一个奇怪的行为

• 这是我的完整代码

  导入 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)
  }
  }
  

• 我想这就是你所要做的。对不起，如果它不是很好，我对教程、解释和快速仍然太陌生，所以我希望我足够清楚。这是它的视频https://streamable.com/cv91a（再次）。

  请注意，这不是我为解释而制作的精美作品，您必须根据自己的需要对其进行自定义并自己打磨其他所有内容

至于自定义顶部圆角，我建议你在 Photoshop 或草图中设计它，然后使用我在此处发布的教程，但你会 只需将“blueView UiViuew”更改为大 UIimageView 将您的图片作为背景