iOS Cookbook

Tag: UIView

  • 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 custom UIViews

    Creating custom UIViews can be very useful for many reasons; code reusability, view controller code reduction and improve maintainability. It enables you to build one component and use it in multiple places around your application. This will reduce the total number of lines in your project and enable you to make changes to your component in one place as opposed to many. View controllers can often get bloated with code that can be delegated to the views of the controller.

    Tutorial

    Here is an example of a custom UIView XIB. The view contains one button, which when pressed fires a delegate method that should be handled inside your ViewController.

    Screen Shot 2018-01-31 at 15.54.42

    Here is the code for the TestView and the TestViewDelegate. The TestView has a container view, UIButton, and delegate. Ensure that the container view and UIButton are connected up to the XIB properly. You will need to create an IBAction to handle the button press on the TestView, inside this action method you will fire the delegate method which will be sent to the parent UIViewController that conforms to TestViewDelegate.

    https://gist.github.com/rtking1993/6cce0b7629c76bb113484c9754553d30

    Now that our TestView is set up correctly, we simply have to place it onto our UIViewController, create an IBOutlet to it and set its delegate properly. Once we have done those three steps, the TestView will fire back a delegate call every time its “Action” button is pressed. Enabling our TestViewController to handle that button press further, in this case by printing a simple statement.

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

     

    Here is the full source code for the project:

    https://github.com/rtking1993/CustomUIView