iOS Cookbook

Tag: UIImage

  • Code Snippet: Creating a custom ImagePickerViewController, like Instagram

    The standard iOS UIImagePickerViewController is a great way for beginners to get started to accessing the camera and photo library. However, it isn’t used by any of the major photo sharing apps, they all have custom ImagePickers. It is possible to create your own ImagePickerViewController and improve the aesthetics of your photo application. It will improve the engagement levels of your app as a well done ImagePickerViewController can be much more user-friendly and painless than the default UIImagePickerViewController. I have created an ImagePicker that you can use.

    Code Snippet:

    The first screen is the custom ImagePicker. The ImagePicker gives the user the ability to select images from their photo album.

    Simulator Screen Shot - iPhone 8 Plus - 2018-04-21 at 23.54.56

    On this screen, there is also a filter button that will take you to a second screen where you can apply filters to the original image.

    Simulator Screen Shot - iPhone 8 Plus - 2018-04-21 at 23.55.14

    The source code for the finished ImagePickerViewController example project is available here:

    https://github.com/rtking1993/RTKImagePickerViewController

     

  • Tutorial: iOS Photo Slider View

    This is an effective image slider that you can use to show your users multiple images inside a single window. This the user can swipe the Photo Slider or use the UIPageControl to change the current image.

    Tutorial:

    Start with an empty single application template. First, we put a UIView into the UIViewController in the main storyboard file. This UIView will become our Photo Slider. It needs to be constrained to the center of the UIViewController, have an aspect ratio of 1:1 and bound to the horizontal edges.

    Screen Shot 2018-02-12 at 6.54.10 PM

    Then we want to make our custom photo slider view. We need to create the XIB and swift file for this view. The XIB will look something like this, with a UIScrollView, UIView for our content and a UIPageControl.

    Screen Shot 2018-02-12 at 6.52.13 PM

    Now we want to create the PhotoSliderView.swift file. This is going allow us to configure our slider with as many images as we want. It will also be responsible for handling the tap event on the UIPageControl, allowing the user to tap it to change the picture. Most of the magic happens inside the configure method. This is where we will iterate through the images that we are passed and add a UIImageView to the correct frame.

    https://gist.github.com/rtking1993/6990bb1a3220cc023ad62cf46e967404

    We need to call the configure method in the UIViewController. We have defined an array of six images, which we pass into the configure method. We are going to call this configure method inside of viewDidAppear so that we are sure of the photo sliders frame before we start manipulating the frames inside the photoSliderView. If we try to do this inside viewDidLoad, we could get unexpected behavior.

    Screen Shot 2018-02-12 at 7.04.48 PM

    The last thing we need to do is set up our outlet in the main ViewController and don’t forget to change your UIView class to the PhotoSliderView. Now it is time to build and run and you should see a great result.

    Screen Shot 2018-02-12 at 7.08.26 PM

    The full source code for a test project I have created for creating this photo slider is available:

    https://github.com/rtking1993/PhotoSlider

  • Tutorial: Creating a UIImagePickerController

    Taking and sharing photos is an important feature of many apps. Using the UIImagePickerViewController is a simple and easy way of enabling your user to either take a new photo or get an existing one from the user’s photo library.

    Tutorial:

    First of all, we want to start a new single application template project. We want to set up our main view controller, with the main image view, camera and library button.

    Screen Shot 2018-02-04 at 6.10.30 PM.png

    Then we want to add an important string to our info.plist. We need to add an NSCameraUsageDescription so that we can access the devices’ camera. This is a small sentence that describes to the user why your app requires access to the camera. My sentence is only an example, you can replace it with any description you’d like.

    Screen Shot 2018-02-04 at 6.04.35 PM

    Then we have to implement the code within our UIViewController to handle the button presses, present the UIImagePickerViewController and then handle the UIImagePickerViewControllerDelegate.

    https://gist.github.com/rtking1993/a402e3b4e217a34bc44003f55f7c3f97

    Here is the full source code for the project:

    https://github.com/rtking1993/UIImagePickerViewController