Swift 4 add custom rounded shape to UIView [closed

Question

I found a great design in an apparently rather famous app called Zenly, they use a view on the bottom of the screen to add extra content to the user experience. I need a view very similar to this one. Unfortunately, I have no idea at all how to get exactly this rounded off shape that the view has on its top. How would I do that? Here's a screenshot.

Answer 1

hum eu.., I'm quite new to IOS but I think that you can do it using Constraints animations, UIGestureRecogniser, and (view.layer.cornerRadius) let me try.

ok let us star will you?

Firstly ,here is the result : https://streamable.com/cv91a

• first get 2 icons on the website https://www.flaticon.com/
• now open Xcode and create a new project as a single View Application

• now on the attribute inspector search for "MAP KIT VIEW" and add it half the screen

  see screenshot here

• now still on the attribute inspector search for "View" then place it so that a part of it overlaps the MAP KIT VIEW then set its color to the desired color (if you want the same color as the one on your pic, use the colorPicker icon and pick that color from the image)

  see screenshot here

• once it is done place the constraints on the "MAP KIT VIEW" and on the "blue View" (on the blueView you have to make sure to place a constraint from the top of the screen (see the pic you'll understand))

  see screenshot here

• now connect the BlueView to ViewController.swift as a UIView! and also connect the top constraint to the code (look at my previous image)

• now add the buttons, the labels as per the image you provided us and connect all of them inside viewController.swift

• now let me explain the logic that we will be applying from here

  1) we will set the corner of the BlueView and the button with the "cornerRadius" property of their respective layer

  2) we will use uiSwipeGestureRecogniser to recognize a swipe up and down on that blueView then act accordingly

  3) we will animate the view everytime a change is detected (actually we will be animating the top constraint we connected to our code earlier)

Note before we continue: animating in IOS is another notion that you're supposed to know, if you don't know animations, you can still follow along with me but at the end of this tutorial, I would suggest you go on https://www.raywenderlich.com/category/ios then search for the basics of animating.

• Now let's go on the storyboard: on the attribute inspector search for "Swipe Gesture Recognizer" and drag it 2 times on the blue view in order to have 2 gestures on It

• rename the first Swipe Gesture Recognizer to SwipeUpGestureRecognizer and the other one to SwipeDownGestureRecognizer

• now the tricky part to not miss: you have to set the delegate of both the gestureRecognizer to the BlueView (see the pic, most of the time you just drag and choose delegate )

  see screenshot here

• now connect the 2 gestureRecognizers to viewController.swift as an @IBAction you'll get something like this :

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

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

• Now it is time we get the corners to be like in the picture : for that we will use the layer properties and change their corner radius , we do it on viewDidLoad . here is the code :

  override func viewDidLoad()
      {
  
          super.viewDidLoad()
          BlueViewOutlet.layer.cornerRadius = 40
           getDirectionButton.layer.cornerRadius = 30
          view.layoutIfNeeded()
  
       }
  

• now add this code inside both the functions and make sure that the value of the constraint.constant is different

  @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)
      }
  

• some explanations : Uiview.animate(_) is used to animate elements(uiViews, uiButton etc..) in IOS; as I said before there are many types of animations. Here we will be using what we call "Spring Animation" ; the code is pretty self-explanatory, the parameter options is an enumeration of behavior (i guess it's called like that ), here I used ".curveEaseOut" then inside the closure (what is after animation: ) I used self.view.layoutIfNeeded() to enable the animation to work smoothly, without it you'll be having a weird behavior

• Here is my full code

  import 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)
  }
  }
  

• I Guess it is all you have to do . I'm sorry If it is not really nice, I'm still too new to tutorials, explaining, and swift so I hope I was clear enough . here is a video of it https://streamable.com/cv91a (again).

  note that it is not a polished work just something I made to explain, you'll have to customize it according to your need and polish everything else yourself

As for the custom top rounded I would suggest you design it in Photoshop or sketch then use the tutorial I posted here but you'll just have to change the "blueView UiViuew" to a big UIimageView then place your image as a background