我在名为Zenly的一个显然相当着名的应用程序中找到了一个很棒的设计,他们使用屏幕底部的视图为用户体验添加额外的内容。我需要一个与此非常类似的视图。不幸的是,我根本不知道如何获得视图顶部的圆角形状。我该怎么办?这是一个截图。
hum eu ..,我对IOS很新,但我认为你可以使用Constraints动画,UIGestureRecogniser和(view.layer.cornerRadius)让我试试。
好的,让我们明星吧?
首先,结果如下:https://streamable.com/cv91a
在我们继续之前注意:IOS中的动画是你应该知道的另一个概念,如果你不知道动画,你仍然可以跟随我但是在本教程结束时,我建议你继续使用https://www.raywenderlich.com/category/ios然后搜索动画的基础知识。
@IBAction func SwipeDownGestureRecogniser(_ sender:Any){}
@IBAction func SwipeupGestureRecognizer(_ sender:Any){}
override func viewDidLoad()
{
super.viewDidLoad()
BlueViewOutlet.layer.cornerRadius = 40
getDirectionButton.layer.cornerRadius = 30
view.layoutIfNeeded()
}
@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)
}
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)
}
}
至于自定义顶部圆形,我建议你在Photoshop或草图设计它然后使用我在这里发布的教程,但你只需要将“blueView UiViuew”更改为一个大的UIimageView然后将你的图像作为背景