<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=254577&amp;fmt=gif">

How to build an iOS messaging app: Part 4, Selecting Operators for Open Channel

Part 4 and 5 of this series teach you how to implement a view controller to create an open channel. This view controller focuses on UI elements typical of open channels.

 In this tutorial, you will create the view controllers that accept user input and create an open channel. It will split them into two view controllers:

 

  • CreateOpenChannelViewControllerA - accepts a Cover Image and Channel Name
  • CreateOpenChannelViewControllerB - accepts a Channel URL and a list of operators

Create your iOS messaging app by signing up for the SendBird Dashboard

What is an Open Channel in SendBird?

 

An open channel is a public chat similar to an IRC channel. No one requires permission to participate in an open channel. Thousands of people can chat with each other simultaneously. Even though an open channel doesn’t require permissions, each channel has operators who can ban or mute other users or bad actors.

 

Implementing a view controller to create an open channel

 

Many iOS apps have a navigation bar directing users to different view controllers. To implement the navigation bar, you should use a navigation controller. The navigation controller has a navigation bar which supports iOS 11 and iPhone X, where the height of the navigation bar is higher than the previous iPhone. It is easy to implement the Large Titles in the navigation bar of the navigation controller.

 

To add a UINavigationController, select the view controller that you will use for the open channel view controller in the Interface Builder.

 

Open the view controller for open channel

 

Then, select Editor > Embed In > Navigation Controller.

 

Now, a navigation controller is inserted between the Main Tab Bar Controller and the UIViewController for open channels.

 

Now a navigation controller is inserted between the Man Tab Bar Controller and the UIViewController

 

Select Navigation Bar of the Navigation Controller. Turn on Prefers Large Titles in the Navigation Bar section of the Attributes Inspector.

 

Select Navigation Bar of the navigation controller

 

In the attribute inspector, select Navigation Bar and turn on Prefers Large Titles

 

 Select the Navigation Item of the open channel’s view controller. Change the Title to Open Channels in the Navigation Item section of the Attributes Inspector. Next, change the Large Title to Automatic.

 

Select the Navigation Item of the open channel's view controller

  

In the navigation item section, change the Title to Open Channels and change the Large Title to automatic

 

 Now, create a button to show the view controller for creating an open channel.

 

Drag a Bar Button Item in the Objective Library to the Navigation Bar of the Open Channels View Controller.

 

Find the Bar Button Item in the Objective Library and drag it to the Navigation bar of the Open Channels View controller

 

Notice the Bar Buttom Item in the top-right corner of the open channels view controller

 

Select the Bar Button Item and change the System Item to Custom in the Bar Button Item section of the Attributes Inspector.

  

In the Bar Button Item section of the Attributes Inspector, change the Bar Button Item's System Item to Custom

 

To set an image for the Bar Button Item, change the Image to the name of that image asset in Bar Item section of the Attributes Inspector.

 

Set the image of the Bar Button Item to the  ame of the image asset

  

Now, the navigation bar has the Bar Button Item with an image.

 

Now the Bar Button Item presents an image

 

There are some basic options required for an open channel. This project requires that the user input the following properties when creating an open channel:

 

  • Channel Name
  • Cover Image
  • Channel URL
  • Operators (users who have the privilege to ban or mute other users)

 

This sample project has two view controllers to accept the options for creating an open channel from the user. The first view controller has the views to accept a cover image and a channel name. The second view controller has the views to accept a channel URL and operators. The button to create the open channel is in the second view controller.

 

Drag a UIViewController to the Preview pane of the Interface Builder. Right-click the Bar Button Item to create an open channel and drag to the UIViewController.

 

Create a View Controller for the Bar Button Item that allows the user to create an open channel

  

Then, select Present As Popover in the context menu.

 

Select the UIViewController and choose Editor > Embed In > Navigation Controller. A navigation controller appears between the view controller for Open Channels and the UIViewController for creating an open channel.

 

Select the Navigation Item of the UIViewController that creates an open channel. Change the Title to Create Open Channel in the Navigation Item section of the Attributes Inspector. Next, change the Large Title to Never.

 

In the Navigation Item of the View Controller that creates an open channel, change the Title to Create Open Channel and change the Large Title to Never

 

Now, the Bar Button Item opens the Create Open Channel View Controller that allows users to create an open channel.

 

Add new files for the view controller to create an open channel.

 

Change class to CreateOpenChannelViewControllerA

 

Open Main.storyboard and select the view controller in the Interface Builder.

 

Change Class to CreateOpenChannelViewControllerA in the Custom Class section. Set Storyboard ID to CreateOpenChannelViewControllerA and turn on the Use Storyboard ID.

 

Add a UIImageView for a channel cover image. Set the constraints between the UIImageView and the Safe Area.

 

Change the name of the UIImageView to Channel Cover Image View.

 

To signal to users that the Channel Cover Image View can be changed, add a UIImageView for a camera icon to the corner of the Channel Cover Image View.

 

Add a camera icon to UIImageView to indicate that the image can be changed.

 

Add a UITextField for a channel name. Set the constraints between the UITextField and the Safe Area.

 

Change the name of the UITextField to Channel Name Text Field.

 

Set Clear Button to Is always visible in the Attributes Inspector, then the UITextField has X button to clear.

 

Set Placeholder to Open Channel Name.

 

Set placeholder to Open Channel Name

 

This text field displays the title of the open channel and the user can clear it by clicking on the X button

 

To add two bar button items to the both sides of the navigation bar, drag a Bar Button Item in the Objective Library to the left side of the Navigation Bar of the Create Open Channels View Controller A. The left button item is Cancel.

 

Drag a Bar Button Item in the Objective Library to the right side. The right button item is Next.

 

Create Two bar Button Items in the Navigation Bar: the left button is Cancel and the right button is Next

 

Now, add another UIViewController to get a channel URL and operators. The UIViewController creates an open channel with the cover image, channel name, channel URL, and the operators.

 

Drag a UIViewController to the Preview pane of the Interface Builder. Change the name of the view controller to Create Open Channel View Controller B.

 

Drag a UIViewController to the Preview pane of the Interface Builder and name it CreateOpenChannelViewControllerB

 

Drag the Next button of the Create Open Channel View Controller A to the Create Open Channel View Controller B. Select Show in the context menu.

  

Drag a Bar Button Item to the navigation bar and label it Done

  

Select the Navigation Item of the Create Open Channel View Controller B. Change Title to Create Open Channel in the Attributes Inspector. Change Large Title to Never.

 

Drag a Bar Button Item in the Objective Library to the right side. The right button item is Done.

  

Create Open Channel View Controller B has a UITextField which presents the channel URL and a Button that presents another view controller to selects users to be operators

 

The Create Open Channel View Controller B has UI elements for two options:

 

  • Channel URL
  • Operators

 

For the options, add UITextField and Button. The UITextField gets the channel URL. The UIButton presents another view controller to select users for operators. The UI elements has to be in UIScrollView, because the number of operators is dynamic.

 

The UI Elements must be in UIScrollView because the number of operators is dynamic

 

Add a UIViewController for selecting operators. Right-click the Add Operator Button and drag the the UIViewController. Select Show in the context menu. Change the title of the UIViewController to Select Operators. Drag a Bar Button Item in the Objective Library to the right side of the Navigation Bar. The right button item is OK(O). The OK button shows the number of selected users.

 

Drag a new Bar Button Item to the navigation bar and label it OK. It will show the number of selected users

 

To add a UITableView to present users on the Selector Operator View Controller, drag a UITableView in the Objective Library to the View of the Selector Operators View Controller.

  

Add a UITableView to the View of the Selector OPerators View Controller

 

Create a SelectorOperatorsViewController.m and SelectorOperatorsViewController.h as a subclass of UIViewController. Change the Class of Selector Operators View Controller to SelectorOperatorsViewController in the Custom Class section of Identity Inspector.

 

Open the Assistant Editor and select the Selector Operators View Controller in the Preview pane.

 

Connect OK button to okButtonItem outlet in SelectorOperatorsViewController.m.

 

To implement the UITableView, connect the UITableView to tableView outlet in SelectorOperatorsViewController.m. Add UITableViewDelegate and UITableViewDataSource to SelectorOperatorsViewController class in SelectorOperatorsViewContoller.h.

 

 

Before implementing the UITableViewDelegate and UITableViewDataSource, create UITableViewCell for each user.

 

Create a SelectorOperatorsTableViewCell.m and SelectorOperatorsTableViewCell.h as a subclass of UITableViewCell with a XIB file. The SelectorOperatorsTableViewCell must have two UIImageViews and UILabel. One of the UIImageViews is for the profile image of a user. The UILabel is for the user’s nickname. Another UIImageView shows whether the user is selected or not.

 

Notice that a single cell contains two UIIMages and one UILabel to display a radio button, a porfile image, and a label

 

Connect each UI element to properties in SelectorOperatorsTableViewCell.h.

 

 

This project has to load an image from a server and the image loading must not block UI. In order to prevent this, use an image loader.

 

Open Podfile in your project folder, and add `pod 'AFNetworking', '~> 3.0'` to the file. And then, run `pod update`.

 

 

Open SelectOperatorsViewController.m and import two header files for SelectorOperatorsTableViewCell and the image loader of AFNetworking. To manage the user list, add an NSMutableArray property to hold SBDUser object. To query the user list, add a SBDUserListQuery property. To implement pull-to-refresh for the tableView, add a UIRefreshControl property.

 

 

Initialize the properties in the viewDidLoad method.

 

 

The viewDidLoad invokes refreshUserList to load the first page of the user list.

 

 

The refreshUserList invokes the loadUserListNextPage method. The loadUserListNextPage has a parameter for refreshing the user list.

 

 

Implement delegates for the tableView.

 

The number of rows of the tableView is `send.users.count`.

 

 

The height of each cell is 64.

 

 

 

To draw each cell, implement `tableView:cellForRowAtIndexPath:`. The delegate is invoked when calling `self.tableView reloadData`. In this delegate, use the image loader of AFNetworking. If you scroll to the end of the rows, load the next page.

 

 

To manage the selected users, add an NSMutableDictionary to SelectOperatorsViewController in SelectOperatorsViewController.h. The key of the dictionary is a user ID and the value is a user object

 

 

When clicking the row of the tableView, add the user to the dictionary or remove the user from the dictionary. Besides, the okButtonItem shows how many users are selected.

 

 

Now, the SelectOperatorsViewController shows the user list.

  

This animation shows the user list in Scroll View and how the SelectOperatorsViewController presents selected operators

  

In the next tutorial, you will use Image Picker for selecting the cover image and create an open channel with the properties set by the user.

 

Start your own messaging app

 

 

Written by

Subscribe to Email Updates

Recent Posts