Code Monkey home page Code Monkey logo

quicksheet's Introduction

QuickSheet

What is it?

QuickSheet is a wrapper for UIViewController to handle bottom sheet presentation (a.k.a pop-ups) with low code footprint and a high degree of customisation.

Why do you need it?

Bottom Sheet / Pop-up view presentation in iOS is only available (natively) in iOS 15 with limited functionality that's only expanded upon in iOS 16. Attempting to replicate the effect in prior versions of iOS could include adding multiple modifications to how you build your views and view controllers that might make it more difficult to migrate to the native soultion when it hits the mainstream especially in large scale applications.

CI Status Version License Platform

Usage

You can present the target view controller without any modifications to it by calling self.presentQuickSheet method with the standard options

self.presentQuickSheet(targetVC, options: .standard)

You can customise the standard options at the app delegate after the app launch

    func application(_ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        QuickSheetOptions.standard = QuickSheetOptions(
                                    fraction: 0.75,
                                    presentationStyle: .regular,
                                    cornerRadius: 10,
                                    blurEffect: .regular,
                                    shadowStyle: .standard
                                    )
        return true
    }

Most of the settings you'd only need to change once. only the fraction and the presentation style depend on what kind of view you're presenting. So, now you have direct access to them without needing to create a custom options object to modify one or two parameters.

self.presentQuickSheet(targetVC, fraction: 0.5)
self.presentQuickSheet(targetVC, fraction: 0.5, presentationStyle: .scrollable)

Customisations

You can customise the presentation by creating a new options constant

let customOptions = QuickSheetOptions(fraction: 0.3,
                                      presentationStyle: .expandable,
                                      cornerRadius: 10,
                                      blurEffect: .systemMaterial,
                                      shadowStyle: .standard)
self.presentQuickSheet(targetVC, options: customOptions)

Here's how you can use QuickSheetOptions to customise your pop-up

  • fraction: Represents the height of the sheet as a percentage of the screen height
  • presentationStyle: The sheet's presentation style; regular, expandable or scrollable.
  • cornerRadius: Changing this value determines the radius of the top left and right corners
  • blurEffect: Choose a background effect from a system-defined list UIBlurEffect.Style. Setting this to nil removes the blur effect and replaces it with a 75% opaque black background
  • shadowStyle: Determines the shadow style of the pop-up. Set to .standard to use the default configuration or create your own QuickSheetOptions.ShadowStyle constant as follows
let shadowStyle = QuickSheetOptions.ShadowStyle(shadowRadius: 10.0,
                                                shadowColor: .black,
                                                shadowOpacity: 0.25)

Demo

  • You can view the QuickSheet demo here
  • To run the example project, clone the repo, and run pod install from the Example directory first.

Installation

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

pod 'QuickSheet'

Contact Me

Email LinkedIn

License

QuickSheet is available under the MIT license. See the LICENSE file for more info.

quicksheet's People

Contributors

ahmedfathy-m avatar

Stargazers

Mahmoud Hassanein avatar  avatar Ahmed Raslan avatar  avatar  avatar Ahmed Yamany avatar Ahmed Mostafa avatar Ibrahim Hamed avatar

Watchers

 avatar

Forkers

ahmed-yamany

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.