Giter Site home page Giter Site logo

spstorkcontroller's Introduction

Modal controller like in Mail or Apple Music application. Similar animation and transition. I tried to recreate all the animations, corner radius and frames. Controller supports gestures and Navigation Bar and works with ScrollView. You can watch how to use pod tutorial on YouTube.

Preview GIF is loading 3mb. Please, wait.

You can download example from AppStore or see video preview. If you want to buy source code of the full app (plus app for Apple Watch), please go to xcode-shop.com. Price: $200 only GitHub users!

I have a store where I sell applications and modules for Xcode projects. You can find source codes of applications or custom animations / UI. I regularly update the code. Visit my website to see all items for sale: xcode-shop.com. On the website you can find previews and for some items links to AppStore.

Requirements

Swift 4.2 & 5.0. Ready for use on iOS 10+

Installation

CocoaPods:

You can use CocoaPods to install SPStorkController by adding it to your Podfile:

pod 'SPStorkController'

Carthage

You can use Carthage to install SPStorkController by adding it to your Cartfile:

github "IvanVorobei/SPStorkController"

For now Carthage support may not work correctly. If you have any problems, create a new issue.

Manually

Put Source/SPStorkController folder in your Xcode project. Make sure to enable Copy items if needed and Create groups.

Usage

Create controller and call func presentAsStork:

import UIKit
import SPStorkController

class ViewController: UIViewController {
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        let controller = UIViewController()
        self.presentAsStork(controller)
    }
}

If you want customize controller (remove indicator, set custom height and other), create controller and set transitioningDelegate to SPStorkTransitioningDelegate object. Use present or dismiss functions:

let controller = UIViewController()
let transitionDelegate = SPStorkTransitioningDelegate()
controller.transitioningDelegate = transitionDelegate
controller.modalPresentationStyle = .custom
controller.modalPresentationCapturesStatusBarAppearance = true
self.present(controller, animated: true, completion: nil)

Please, do not init SPStorkTransitioningDelegate like this:

controller.transitioningDelegate = SPStorkTransitioningDelegate()

You will get an error about weak property.

Video Tutorial

You can see how to use SPStorkController and how to customize it in this video. For English speakers I’ve added subtitles, don’t forget to turn them on:

Tutorial on YouTube

On my YouTube channel you can find videos about Xcode and Design. I would appreciate it if you like and subscribe. If you do not want to watch the video, I wrote a small wiki below.

Light StatusBar

To set light status bar for presented controller, use preferredStatusBarStyle property. Also set modalPresentationCapturesStatusBarAppearance. See example:

import UIKit

class ModalViewController: UIViewController {
    
    override var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }
}

Parameters

  • Parameter customHeight sets custom height for modal controller. Default is nil:
transitionDelegate.customHeight = 350
  • Parameter swipeToDismissEnabled enables dismissal by swipe gesture. Default is true:
transitionDelegate.swipeToDismissEnabled = true
  • Parameter translateForDismiss sets how much need to swipe down to close the controller. Work only if swipeToDismissEnabled is true. Default is 240:
transitionDelegate.translateForDismiss = 100
  • Parameter tapAroundToDismissEnabled enables dismissal by tapping parent controller. Default is true:
transitionDelegate.tapAroundToDismissEnabled = true
  • Parameter showCloseButton added circle button with dismiss action. Default is false:
transitionDelegate.showCloseButton = false
  • Parameter showIndicator shows or hides top arrow indicator. Default is true:
transitionDelegate.showIndicator = true
  • Parameter indicatorColor for customize color of arrow. Default is gray:
transitionDelegate.indicatorColor = UIColor.white
  • Parameter hideIndicatorWhenScroll shows or hides indicator when scrolling. Default is false:
transitionDelegate.hideIndicatorWhenScroll = true
  • Parameter cornerRadius for customize corner radius of controller's view. Default is 10:
transitionDelegate.cornerRadius = 10
  • Parameter hapticMoments allow add taptic feedback for some moments. Default is .willDismissIfRelease:
transitionDelegate.hapticMoments = [.willPresent, .willDismiss]

Snapshots

The project uses a snapshot of the screen in order to avoid compatibility and customization issues. Before controller presentation, a snapshot of the parent view is made, and size and position are changed for the snapshot. Sometimes you will need to update the screenshot of the parent view, for that use static func:

SPStorkController.updatePresentingController(modal: controller)

and pass the controller, which is modal and uses SPStorkTransitioningDelegate

Add Navigation Bar

You may want to add a navigation bar to your modal controller. Since it became impossible to change or customize the native controller in swift 4 (I couldn’t even find a way to change the height of the bar), I had to recreate navigation bar from the ground up. Visually it looks real, but it doesn’t execute the necessary functions:

import UIKit
import SPFakeBar

class ModalController: UIViewController {
    
    let navBar = SPFakeBarView(style: .stork)
        
    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor.white

        self.navBar.titleLabel.text = "Title"
        self.navBar.leftButton.setTitle("Cancel", for: .normal)
        self.navBar.leftButton.addTarget(self, action: #selector(self.dismissAction), for: .touchUpInside)

        self.view.addSubview(self.navBar)
    }
}

You only need to add a navigation bar to the main view, it will automatically layout. Use style .stork in init of SPFakeBarView. Here is visual preview with Navigation Bar and without it:

To use SPFakeBarView you need to install SPFakeBar pod:

pod 'SPFakeBar'

Working with UIScrollView

If you use UIScrollView (or UITableView & UICollectionView) on your controller, I recommend making it more interactive. When scrolling reaches the top position, the controller will interactively drag down, simulating a closing animation. Also available close controller by drag down on UIScrollView. To do this, set the delegate and in the function scrollViewDidScroll call:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    SPStorkController.scrollViewDidScroll(scrollView)
}

Working with UITableView & UICollectionView

Working with a collections classes is not difficult. In the Example folder you can find an implementation. However, I will give a couple of tips for making the table look better.

Firstly, if you use SPFakeBarView, don't forget to set top insets for content & scroll indicator. Also, I recommend setting bottom insets (it optional):

tableView.contentInset.top = self.navBar.height
tableView.scrollIndicatorInsets.top = self.navBar.height

Please, also use SPStorkController.scrollViewDidScroll function in scroll delegate for more interactiveness with your collection or table view.

Delegate

You can check events by implement SPStorkControllerDelegate and set delegate for transitionDelegate:

transitionDelegate.storkDelegate = self

Modal presentation of different controller

If you want to present modal controller on SPStorkController, please set:

controller.modalPresentationStyle = .custom

It’s needed for correct presentation and dismissal of all modal controllers.

My projects

Here I would like to offer you my other projects.

SPPermission

Project SPPermission for managing permissions with customizable visual effects. Beautiful dialog increases the chance of approval (which is important when we request notification). Simple control of this module saves you hours of development. You can start using project with just two lines of code and easy customization!

License

SPStorkController is released under the MIT license. Check LICENSE.md for details.

Contact

If you need any application or UI to be developed, message me at [email protected]. I develop iOS apps and create designs, too. I use swift for development. To request more functionality, you should create a new issue. Here are my apps in AppStore: first account & second account.

spstorkcontroller's People

Contributors

ilia3546 avatar jobinsjohn avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.