Subscribe
Subscribe to Email updates

Please use a valid email address.

SendBird's
Privacy Policy.
Search
How to build an iOS Messaging App: Part 2, Building a custom UI
Share

How to build an iOS Messaging App: Part 2, Building a custom UI

Dec 06, 2017

This tutorial walks you through the steps necessary to build a custom UI for an iOS messaging app. It revises the default login view from the first tutorial into your shiney new app UI, using SendBird as an example.

Improve the User Interface with a custom UI

The next stage is to improve the user interface. You already used the default UI elements without customizing them.

After you’re done, your iOS messaging app will look like the following image and animation.

An animation of the custom UI's final product

You can run our iOS sample code at any time in our docs section.

Adding the SendBird Logo

To display a logo with text underneath it, add a new UIImageView between SendBird Logo Image View and User ID Label. See the .gif above for an example of a UI that displays both a logo and the name associated with it. Change the new UIImageView’s name to SendBird Text Logo Image View. If you’d like to change the logo and name, you can do so in the Interface Builder.

Customize the UITextField

Create a custom text field and add a border line to the bottom of it. To accomplish this, add CustomTextField.m and CustomTextField.h

Right-click on the Project navigator and select New File.

Select new file in the project navigator

In the Choose a template for your new file dialog, choose Cocoa Touch Class and click Next.

Choose Cocoa Touch class

Set the Class to CustomTextField and the Subclass of to UITextField. Click Next and then Create.

Set class to CustomTextField and the Subclass to UITextField

Open CustomTextField.h and add ID_DESIGNABLE for the Interface Builder.

...waiting for Gist...

To add custom properties associated with the bottom border color and the bottom border width, declare them with IBInspectable.

...waiting for Gist...

You can create a custom property in the Interface Builder with the IBInspectable attribute.

Open CustomTextField.m.

Add a CAShapeLayer property to @interface for drawing the bottom border. When re-drawing the text field, the instance of the property will be removed from a super layer.

...waiting for Gist...

Edit the drawRect: method. The drawRect: method renders the custom UI in the Interface Builder in real-time.

...waiting for Gist...

Open Main.storyboard and select User ID Text Field. Click the identity inspector on the right pane. Change the Class field to CustomTextField in the Custom Class section.

Change the class to CustomTextField in the Custom Class section

Click the Attribute Inspector on the right pane. Then you will see the Custom Text Field section, the Bottom Border Color, and the Bottom Border Width in the Interface Builder.

In the View section of the Attribute inspector, change the Content Mode to Redraw. This option will redraw the text field when rotating a device.

Change the Content Mode to Redraw in the View Section

Now you’ll change the return key so it displays a different label for each location of the cursor in each text field (e.g. User ID or Nickname). In this tutorial, you’ll associate the Next label with the User Id text field and Go with the nickname text field. Clicking Go will connect to SendBird in the same way as clicking the Connect button will.

Change the Return Key in the Text Input Traits to Next on the Attribute Inspector. The return key in the User ID Text Field will move the cursor to the next text field.

Do the same thing to the Nickname Text Field. Change the Return Key in the Text Input Traits to Go on the Attribute inspector for the text field. The return key in the Nickname Text Field connects to SendBird.

Basic Customized login text fields

Customize the UIButton

Now we’ll create a rectangular Connect button with rounded corners.

For the custom button, create CustomButton.m and CustomButton.h like the CustomTextField.

Open CustomButton.h and add ID_DESIGNABLE for the Interface Builder.

...waiting for Gist...

Add a property for the corner radius with the IBInspectable attribute.

...waiting for Gist...

Open CustomButton.m and edit drawRect:.

...waiting for Gist...

Open Main.storyboard and select Connect Button. Click the identity inspector on the right pane. Change the Class field to CustomButton in the Custom Class section.

Login View with User ID and Nickname text fields

Set the Corner Radius. Now you will see the rounded corners on the button in the Interface Builder of Xcode.

Set the corner radius of your Custom Button

Add an animation effect to the UI

Next, you’ll add some animation effects when the keyboard appears.

Connect a constraint between the top of the Content View and the SendBird Logo Image View to the sendbirdLogoImageViewTop outlet.

Connect button with rounded corners
...waiting for Gist...

Connect the constraint between the bottom of the SendBird Logo Image View and the User ID Label to the userIdLabelTop outlet. Note that there is no constraint between the SendBird Text Logo Image View and the User ID Label.

Connect a constraint between the top of the Content View and the SendBird Logo Image View
...waiting for Gist...

Add a property for logo status. This will represent whether the text logo is hidden or visible.

...waiting for Gist...

Initialize the property in the viewDidLoad method.

...waiting for Gist...

Update the keyboardWillShow: method for the animation. The animation will hide the text logo and move the User ID Label up.

...waiting for Gist...

After you complete this section, the animation will look like it does below.

Login View hides the logo text when clicking the User ID and Nickname text field

Set the action of the Return key

Add UITextFieldDelegate for the return key action of the keyboard. Open LoginViewController.h and add UITextFieldDelegate.

...waiting for Gist...

Open LoginViewController.m and set the delegate of two text fields in the viewDidLoad method.

...waiting for Gist...

Implement the connect method. To save time, re-use the code block that you already wrote in the clickConnectButton: method. Create a new connect method and move the code-block from the clickConnectButton: method to this new connect method by cutting-and-pasting it. The clickConnectButton: method must call the connect method. Use [self connect].

...waiting for Gist...

To set the action for the keyboard’s return key for each text field, add a delegate method.

...waiting for Gist...

Display the version of the sample project and SendBird SDK

The final UI element that you’ll modify is the Version Info Label. Display the sample version and the SendBird SDK version on the label. Retrieve the sample version from the info.plist file and the SendBird SDK version from the getSDKVersion method of SBDMain.

...waiting for Gist...

Completing the Login View

After making these changes, your UI should look and function like this.

Animation for the completed custom UI

You’ve now installed the SendBird SDK, connected to SendBird, created a LogIn page, and customized its UI.

We're Hiring!
Help SendBird build the world's no. 1 messaging platform
We're Hiring!
Help SendBird build the world's no. 1 messaging platform
Related articles
Migrating chat made easy with Sync Server
Introduction Part of the challenge of migrating from one chat provider to another is not having a live migration solution ready. Building a live migration solution can be cost
ROMMEL SUNGA
Solutions Engineer
Don't try this at home: Why software engineers shouldn't build chat in-house
Before I helped co-found SendBird as the Chief Technology Officer, I built chat as a feature for two products. Both were consumer apps for families that required a real-time s
HARRY KIM
Chief Technology Officer
Extreme Optimization of AsyncStorage in React Native
 AsyncStorage is a unique built-in feature for storing data in React Native and a good way to store simple key-value data. To make the SendBird SDK less dependent on other pac
CHRIS HEO
Software Engineer - Applications
© SendBird 2019. All rights reserved.
Follow us