Swift 4为UIView添加自定义圆形

我在一个名为Zenly的显然相当着名的应用程序中找到了一个很棒的设计，他们使用屏幕底部的视图为用户体验添加额外的内容。 我需要一个与此非常相似的视图。 不幸的是，我根本不知道如何获得视图顶部的圆形形状。 我该怎么办？ 这是一个截图。

Answer 1

hum eu ..，我对IOS很新，但我认为你可以使用Constraints动画，UIGestureRecogniser和（view.layer.cornerRadius）让我试试。

好吧，让我们明星吧？

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

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

• 现在在属性检查器上搜索“ MAP KIT VIEW ”并将其添加到屏幕的一半

  看这里的截图

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

  看这里的截图

• 一旦完成，将限制放在“ 地图套件视图 ”和“ 蓝色视图 ”上（在蓝色视图上，您必须确保从屏幕顶部放置约束（请参阅您将理解的图片））

  看这里的截图

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

• 现在按照您提供的图像添加按钮，标签，并在viewController.swift中连接所有这些按钮

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

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

  2）我们将使用uiSwipeGestureRecogniser来识别在蓝色上向上和向下滑动，然后相应地采取行动

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

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

• 现在让我们继续故事板：在属性检查器上搜索“ Swipe Gesture Recognizer ”并在蓝色视图上拖动它2次以便在它上面有2个手势

• 将第一个Swipe Gesture Recognizer重命名为SwipeUpGestureRecognizer，将另一个重命名为SwipeDownGestureRecognizer

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

  看这里的截图

• 现在将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等…）制作动画; 正如我之前所说，有很多类型的动画。 在这里，我们将使用我们所谓的“Spring Animation”; 代码是不言自明的，参数选项是一个行为的枚举（我猜它就像那样），在这里我使用“.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) } } 

• 我猜这就是你要做的一切。 我很抱歉如果它不是很好，我还是太新了教程，解释和快速，所以我希望我足够清楚。 这是一段videohttps://streamable.com/cv91a （再次）。

  请注意，这不是一个完美的工作，只是我要解释的东西，你必须根据自己的需要定制它，并自己润色其他一切

至于自定义顶部圆角我建议你在Photoshop或草图设计它然后使用我在这里发布的教程，但你只需要将“blueView UiViuew”更改为一个大的UIimageView然后将你的图像作为背景