How to build an iOS messaging app: Part 5, Creating an Open Channel

This tutorial teaches you to implement a view controller to create an open channel. This view controller uses a channel name, operators, a channel URL, and a cover image. This tutorial also covers how to select an image with Image Picker and how to implement a custom activity indicator view.

Implementing the Image Picker

 In the previous tutorial, you created Create Open Channel View Controller A that had a UIImageView for the channel cover image. This section describes how to add a gesture to the UIImageView for presenting the UIImagePickerController to select an image.

 

In order to use a photo library or a camera, you have to add properties to info.plist file.

 

Open info.plist file and add the below keys and values for the properties:

 

add the key value pairs listed here to info.plist

 

Features covered in future tutorials will use “Privacy - Media Library Usage Description” and “Privacy - Microphone Usage Description.”

 

After the user takes a photo with a camera or selects an image from the photo library, it is useful to crop the image. To install the framework for cropping an image, update Podfile in your project.

 

 

The RSKImageCropper is a framework that provides a feature for cropping images.

 

Now, implement the Image Picker.

 

Open Main.storyboard and select Create Open Channel View Controller A.

 

Connect the UIImageView for the channel cover image to the coverImageView in CreateOpenChannelViewControllerA.m.


The UIImageView doesn’t have any actions for the user to interact with. To create one, add a gesture for user interaction to the UIImageView.

 

Create the UITapGestureRecognizer object and add it to the coverImageView in viewDidLoad. Enable the user interaction for the coverImageView.

 

 

Implement the clickCoverImage method. When clicking the coverImageView, present the UIAlertController. It has a menu to select the photo library or camera.

 

 

To manipulate the UIImagePickerController, add UIImagePickerControllerDelegate and UINavigationControllerDelegate to the CreateOpenChannelViewControllerA class in CreateOpenChannelViewControllerA.h.

 

To crop an image, import RSKImageCropper.h and add RSKImageCropViewControllerDelegate to the CreateOpenChannelViewControllerA class in CreateOpenChannelViewControllerA.h.

 

 

Implement the delegate methods of UIImagePickerControllerDelegate in the CreateOpenChannelViewControllerA.m. You can get the image data from the method.

 

 

After getting the image data, invoke the cropImage method and pass the data into the RSKImageCropViewController.

 

 

Implement the delegate methods of RSKImageCropViewControllerDelegate.

 

 

Now, you can choose a cover image for an open channel.

  

animation of the process for selecting your open channel's cover image

  

Creating an open channel

 

Gathering properties for an open channe

 

CreateOpenChannelViewControllerB creates an open channel. It means that the CreateOpenChannelViewControllerB must be able to access all properties required to create an open channel.

 

Add properties to save a channel name and cover image data to CreateOpenChannelViewControllerB class in CreateOpenChannelViewControllerB.h.

 

 

Implement prepareForSegue:sender: in the CreateOpenChannelViewControllerA.m method to set the properties in the CreateOpenChannelViewControllerB when presenting the view controller.

 

 

The CreateOpenChannelViewControllerB needs operators. In order to access the operators, create a delegate in SelectOperatorsViewController.h.

 

 

Add a property for the delegate to the SelectOperatorsViewController class.

 

 

Implement the delegate in CreateOpenChannelViewControllerB.m. When clicking the OK button in the SelectOperatorsViewController, the SelectOperatorsViewController gives the selected operators to the didSelectUsers: method of the delegate.

 

Open CreateOpenChannelViewControllerB.h, and add SelectOperatorsDelegate to CreateOpenChannelViewControllerB class.

 

 

Open CreateOpenChannelViewControllerB.m, and add a mutable dictionary property to save the selected operators in CreateOpenChannelViewControllerB class.

 

 

Implement the didSelectUsers: method of SelectOperatorsDelegate. The users has the selected operators. In this method, update the views for the selected operators. This view controller doesn’t use a UITableView for them. The addOperatorView: method adds a view for each operator.

 

 

Implement prepareForSegue:sender: in the CreateOpenChannelViewControllerB.m method to set the properties in the SelectOperatorsViewController before presenting the view controller.

 

 

Implementing the custom activity indicator view

Communication between a client and a server completes the creation of an open channel, so it takes a little time. To notify the user of any progress, most iOS apps use UIActivityIndicatorView. The UIActivityIndicatorView blocks every UI element and rotates an image.

 

This section covers how to customize the UIActivityIndicatorView and refers to CDActivityIndicatorView viewable at https://github.com/cncool/CDActivityIndicatorView

 

Create CustomActivityIndicatorView.m and CustomActivityIndicatorView.h as a subclass of UIActivityIndicatorView.

 

Create CustomActivityIndicatorView.m and .h to be a subclass of UIActivityIndicatorView

  

Open CustomActivityIndicatorView.m and implement the _init method to initialize the view. This project already has two image assets, loading and bg_loading. The CustomActivityIndicatorView rotates the loading image on the bg_loading image.

 

Add properties for the images and the animation.

 

 

Implement the _init method.

 

 

Next, override setHidesWhenStopped:, startAnimating, and stopAnimating.

 

 

 

This completes the implementation of CustomActivityIndicatorView.

 

Open Main.storyboard in the Interface Builder. Drag an Activity Indicator View in the Objective Library to the View of the Create Open Channel View Controller B. Add the leading, trailing, top, and bottom constraints between the Activity Indicator View and the View.

 

Change the Class of the Custom Class section to CustomActivityIndicatorView in the Identity Inspector.

 

 

Change the Custom Class to CustomActivityIndicatorView in the Identity Inspector

 

 

Open the CreateOpenChannelViewControllerB.m in the Assistant Editor. Connect the Activity Indicator View to activityIndicatorView outlet.

 

 

Update the viewDidLoad to initialize the activityIndicatorView.

 

 

Creating an open channel

 Open the Assistant Editor and select the Create Open Channel View Controller B in the Preview pane.

 

Connect the Done button to the clickDoneButton action and implement the action method.

 

 

In the 4th tutorial, you inserted a UINavigationController between the Open Channels View Controller and the Create Open Channel View Controller A. You need to implement a subclass for the UINavigationController from the 4th tutorial. Creating a subclass of UINavigationController allows other view controllers to access it and the additional properties that it contains.

 

Create CreateOpenChannelNavigationController.m and CreateOpenChannelNavigationController.h as a subclass of UINavigationController.

 

Implement the CreateOpenChannelDelegate to receive a new open channel in CreateOpenChannelNavigationController.h.

 

 

Open Main.storyboard and select UINavigationController. Change Class in Custom Class section to CreateOpenChannelNavigationController in the Identity Inspector.

 

And then, open CreateOpenChannelViewControllerB.m and update the clickDoneButton method.

 

 

A UIViewController that implements the CreateOpenChannelDelegate receives the new channel. The next tutorial covers the implementation of the CreateOpenChannelDelegate method.

 

For now, the app creates an open channel.

 

 

Animation showing how your iOS messaging app creates an open channel

 

 

The next tutorial will cover how to implement the list of open channels with UITableView.

Written by

Subscribe to Email Updates

Recent Posts