A draggable modal for iOS Applications

Mantle Modal

Draggable Modal, PopUp or Menu written in Swift.

Description

A simple modal resource that uses a UIScrollView to allow the user to close the view by removing it from the screen.

Install Instructions

CocoaPods

MantleModal is available through CocoaPods. To install it, simply add the following line to your Podfile:

use_frameworks!

target 'ProjectName' do
  pod 'MantleModal'
end

Then, run pod install

In case you haven’t installed CocoaPods yet, run the following command

$ gem install cocoapods

Manual

Drag the file named RCMantleViewController.swift into your project.

Usage

Setup is faily simple, but I have plans to make it even easier later.

Step 1

Add a new View Controler into your storyboard and set the Class to RCMantleViewController and the Storyboard ID to MantleViewController.

### Step 2 Add your own view into your storyboard which will represent the modal. Also set a unique **Storyboard ID** to it.

If you are gonna use a PopUp set the background view color transparent.

Step 3

Import the module to your parent controller(if your using CocoaPods)

  import MantleModal

Activate the modal like this in your parent controller.

  // Create the MantleViewController from the Storyboard using the ID
  let mantleViewController = storyboard!.instantiateViewControllerWithIdentifier("MantleViewController") as! RCMantleViewController
  // Create your modal controller with your storyboard ID
  let popUpViewController = storyboard!.instantiateViewControllerWithIdentifier("YourUniqueStoryboardID") as! YourViewController
  // Set it's delegate to be able to call 'delegate.dismissView(animated: Bool)'
  popUpViewController.delegate = mantleViewController
  // Initialize Mantle
  mantleViewController.setUpScrollView()
  // Add your modal to Mantle
  mantleViewController.addToScrollViewNewController(popUpViewController)
  // Present the modal through the MantleViewController
  self.presentViewController(mantleViewController, animated: false, completion: nil)

Step 4

In your modal’s controller also import:

  import MantleModal

Then define your delegate helper.

  var delegate: RCMantleViewDelegate!

And then dismiss the modal using this:

  delegate.dismissView(true)

Configuration

MantleModal currently includes some configuration which you must call before mantleViewController.setUpScrollView(). The current configuration available includes:

  // Allows you to dismiss the view by dragging up
  mantleViewController.bottomDismissible = false
  // Allows you to dismiss the view by dragging down
  mantleViewController.topDismissable = true
  // Allows you to drag to the sides to close
  mantleViewController.draggableToSides = false

  // 'appearOffset' moves the menu closer to the edge so that it appears quicker
  mantleViewController.appearOffset = CGFloat(290)
  // '290' could be the distance between the top of the popup and the top of the screen 
  
  // Makes the view present from the top, can be set multiple times before presenting
  // Also makes it hide to the top.
  mantleViewController.appearFromTop = true // // default = false

You can also access the ScrollView and modify its options, just make sure you do it after calling mantleViewController.setUpScrollView()

  mantleViewController.scrollView.bounces = false

How it works

The view you are actually presenting is actually a UIScrollView with a larger UIView inside that contains your own view along with extra empty space that is fully created by RCMantleViewController. RCMantleViewController will then detect when your view is no longer centered in the ScrollView and dismiss the complete view. It does not use native modal animations and uses the UIScrollView‘s scroll to content animation.

Pending

  • Orientation change support.
  • More…

Credits

Mostly done by myself – Ricardo Canales

I am still have many things to learn about iOS development so any suggestions and contributions are welcome.

Initial code inspired by this StackOverflow post. Credit to lbrendanl and Poql

GitHub

https://github.com/canalesb93/MantleModal