Swift 4为UIView添加自定义圆形

时间：2018-04-08 11:12:41

标签： ios swift uiview shape

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

Zenly Screenshot

1 个答案:

答案 0 :(得分：1)

hum eu ..，我对IOS很新，但我认为你可以使用Constraints animations，UIGestureRecogniser和（view.layer.cornerRadius）来做到这一点。 让我尝试。

好吧，让我们明星吧？

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

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

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

    see screenshot here

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

    see screenshot here

  • 完成后，将约束放在＆＃34; MAP KIT VIEW ＆＃34;并在＆＃34; 蓝色视图＆＃34; （在blueView上你必须确保从屏幕顶部放置一个约束（参见你理解的图片））

    see screenshot here

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

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

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

    1）我们将使用＆＃34; cornerRadius ＆＃34;设置BlueView和按钮的一角。各自层的财产

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

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

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

  • 现在让我们进入故事板：在属性检查器上搜索＆＃34; 滑动手势识别器＆＃34;并在蓝色视图上拖动 2次，以便在其上进行2次手势

  • 将第一个 Swipe Gesture识别器重命名为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等...）制作动画。正如我之前所说，有很多类型的动画。在这里，我们将使用我们所称的＆＃34; Spring Animation＆＃34; ;代码是非常明显的，参数选项是行为的枚举（我猜它就像那样），在这里我使用＆＃34; .curveEaseOut＆＃34;然后在闭包内（动画之后是什么:)我使用 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或草图中设计它，然后使用我在这里发布的教程，但是你会这样做   只需改变＆＃34; blueView UiViuew＆＃34;然后到一个大的UIimageView   将您的图片作为背景

相关问题
最新问题