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

Posted 2021-05-04

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

答案

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

好的，让我们明星吧？

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

• 首先在网站https://www.flaticon.com/上获得2个图标
• 现在打开Xcode并创建一个新项目作为单个View应用程序
• 现在在属性检查器上搜索“MAP KIT VIEW”并将其添加到屏幕的一半 see screenshot here
• 现在仍然在属性检查器中搜索“视图”然后放置它以使其一部分与MAP KIT VIEW重叠，然后将其颜色设置为所需的颜色（如果您想要与图片上的颜色相同的颜色，请使用colorPicker图标并从图像中选择该颜色） see screenshot here
• 一旦完成，将约束放在“地图套件视图”和“蓝色视图”上（在蓝色视图上，您​​必须确保从屏幕顶部放置约束（请参阅您将理解的图片）） see screenshot here
• 现在将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（参见图片，大多数时候你只需拖动并选择委托） 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等...）制作动画;正如我之前所说，有很多类型的动画。在这里，我们将使用我们所谓的“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) } }
• 我猜你只需要这样做。我很抱歉如果它不是很好，我还是太新了教程，解释和快速，所以我希望我足够清楚。这是一段视频https://streamable.com/cv91a（再次）。 请注意，这不是一个完美的工作，只是我要解释的东西，你必须根据自己的需要定制它，并自己润色其他一切

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