Code Monkey home page Code Monkey logo

mediapicker's Introduction

Media Picker

SwiftUI library for a customizable media picker.


We are a development agency building phenomenal apps.

SPM Compatible Cocoapods Compatible Carthage Compatible License: MIT

Features

  • Photo and video picker
  • Single and multiple selection
  • Full-screen view
  • Live photo preview & capture
  • Full customization

MediaPicker vs PhotosPicker

  • The iOS 16 PhotosPicker only provides you with a button, while this library gives you the whole view, meaning you can build it into you own screens and customize it as you see fit.
  • PhotosPicker only lets you pick photos from the library - no camera.
  • MediaPicker provides a default looking library picker, with ability to manage albums, and also a camera view to take photos/video

!SPM Renaming!

SPM package is now called ExyteMediaPicker instead of MediaPicker, sorry for any inconveniences.

Usage

  1. Add a binding Bool to control the picker presentation state.
  2. Add Media array to save selection ([Media]).
  3. Initialize the media picker and present it however you like - for example, using the .sheet modifier
.sheet(isPresented: $showMediaPicker) {
    MediaPicker(
        isPresented: $showMediaPicker,
        onChange: { medias = $0 }
    )
}

Media model

The lbrary will return an array of Media structs for you to use as you see fit. It has the following fields and methods (all the methods use async/await API):

  • type - .image or .video
  • duration - nil for .image
  • getURL() - returns URL to media (automatically stores in temporary directory if needed)
  • getThumbnailURL() - returns URL to media's thumbnail (for image just returns the image itself)
  • getData() - returns media's Data representation
  • getThumbnailData() - returns media's thumbnail Data representation

Modes

This library lets you use both photo library and camera

Photos grid

Default photos grid screen has a standard header which contains the 'Done' and 'Cancel' buttons, and a simple switcher between Photos and Albums. Use it for a basic out-of-the box picker (see default picker in example project for an usage example). This can be customized (see "Init - view builders" section)

Camera

After making one photo, you see a preview of it and a little plus icon, by tapping it you return back to camera mode and can continue making as many photos as you like. Press "Done" once you're finished and you will be able to scroll through all the photos you've taken before confirming you'd like to use them. This preview screen of photos you've taken can also be customized (see "Init - view builders" section)

Init - required parameters

isPresented - a binding to determine whether the picker should be displayed or not
onChange - a closure that returns the selected media every time the selection changes

Init - optional parameters

limit - the maximum selection quantity allowed, 'nil' for unlimited selection

Init - screen rotation

If your app restricts screen rotation, you can skip this section.

We recommend locking orientation for MediaPicker, because default rotation animations don't look good on the camera screen. At the moment SwiftUI doesn't provide a way of locking screen orientation, so the library has an initializer with an orientationHandler parameter - a closure that is called when you enter/leave the camera screen inside MediaPicker. In this closure you need to use AppDelegate to lock/unlock the rotation - see example project for implementation.

Init - view builders

You can pass two view builders in order to add your own buttons and other elements to media picker screens. First screen you can customize is default photos grid view. Pass albumSelectionBuilder closure like this to replace the standard one with your own view:

MediaPicker(
    isPresented: $isPresented,
    onChange: { selectedMedia = $0 },
    albumSelectionBuilder: { defaultHeaderView, albumSelectionView in
        VStack {
            defaultHeaderView
            albumSelectionView
            Spacer()
            footerView
        }
        .background(Color.black)
    }
)

albumSelectionBuilder gives you two views to work with:

  • defaultHeaderView - a default looking header with photos/albums mode switcher
  • albumSelectionView - the photos grid itself

The second customizable screen is the one you see after taking a photo. Pass cameraSelectionBuilder like this:

MediaPicker(
    isPresented: $isPresented,
    onChange: { selectedMedia = $0 },
    cameraSelectionBuilder: { addMoreClosure, cancelClosure, cameraSelectionView in
        VStack {
            HStack {
                Spacer()
                Button("Done", action: { isPresented = false })
            }
            cameraSelectionView
            HStack {
                Button("Cancel", action: cancelClosure)
                Spacer()
                Button(action: addMoreClosure) {
                    Text("Take more photos")
                }
            }
        }
    }
)

cameraSelectionBuilder gives you these parameters:

  • addMoreClosure - you can call this closure on tap of your own button, it will work same as default plus icon on camera selection preview screen
  • cancelClosure - show confirmation and return to photos grid screen if confirmed
  • cameraSelectionView - swipable camera photos preview collection itself

You can pass one, both or none of these when creating your MediaPicker. (see the custom picker in the example project for usage example)

Available modifiers

selectionStyle - a way to display selected/unselected media state: either a counter or a simple checkmark
showingLiveCameraCell - show live camera feed cell in the top left corner of the gallery grid
mediaPickerTheme - color settings. Example usage (see MediaPickerTheme for all available settings):

MediaPicker(...)
  .mediaPickerTheme(
      main: .init(
          background: .black
      ),
      selection: .init(
          emptyTint: .white,
          emptyBackground: .black.opacity(0.25),
          selectedTint: Color("CustomPurple")
      )
  )

Here is an example of how you can customize colors and elements to create a custom looking picker:

Available modifiers: managing albums

albums - a list of user's albums (like in Photos app), if you want to display them differently than showingDefaultHeader does.
pickerMode - set this if you don't plan to use the default header. Available options are:
* .photos - displays the default photos grid
* .albums - displays a list of albums with one preview photo for each
* .album(Album) - displays one album
* .camera - shows a fullscreen cover camera sheet * .cameraSelection - displays a preview of photos taken with camera (see the custom picker in the example project for implementation)

Examples

To try out the MediaPicker examples:

  • Clone the repo https://github.com/exyte/MediaPicker.git
  • Open Examples/Examples.xcworkspace in the Xcode
  • Run it!

Installation

dependencies: [
    .package(url: "https://github.com/exyte/ExyteMediaPicker.git")
]

CocoaPods

pod 'ExyteMediaPicker'

Carthage

github "Exyte/MediaPicker"

Requirements

  • iOS 15+
  • Xcode 13+

Our other open source SwiftUI libraries

PopupView - Toasts and popups library
Grid - The most powerful Grid container
ScalingHeaderScrollView - A scroll view with a sticky header which shrinks as you scroll
AnimatedTabBar - A tabbar with number of preset animations
Chat - Chat UI framework with fully customizable message cells, input view, and a built-in media picker
ConcentricOnboarding - Animated onboarding flow
FloatingButton - Floating button menu
ActivityIndicatorView - A number of animated loading indicators
ProgressIndicatorView - A number of animated progress indicators
SVGView - SVG parser
LiquidSwipe - Liquid navigation animation

mediapicker's People

Contributors

f3dm76 avatar denis-obukhov avatar alex-m-b95 avatar alexandra-afonasova avatar zapletnev avatar nikita-afonasov 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.