Chapter 5. XamSnap for iOS

To begin writing the iOS version of XamSnap, open the solution we created in the previous chapter. We will be working mostly in the XamSnap.iOS project in this chapter. The project template will have automatically created a controller named ViewController; go ahead and delete it. We will create our own controllers as we go.

In this chapter, we will cover the following:

• The basics of an iOS application

• Using UINavigationController

• Implementing a login screen

• Segues and UITableView

• Adding a friends list

• Adding a list of messages

• Composing messages

Understanding the basics of an iOS app

Before we start developing our app, let's review the main settings of the application. Apple uses a file named Info.plist to store important information about any iOS app. These settings are used by the OS itself and when an iOS application is installed on a device by the Apple App Store. Begin development of any new iOS application by filling out the information in this file.

Xamarin Studio provides a neat menu to modify values in the Info.plist file, as shown in the following screenshot:

The most important settings are as follows:

• Application Name: This is the title below an app's icon in iOS. Note that this is not the same as the official name of your app in the iOS App Store.

• Bundle Identifier: This is your app's bundle identifier or bundle ID. It is a unique name to identify your application. The convention is to use a reverse domain naming style beginning with your company name, such as com.jonathanpeppers.xamsnap.

• Version: This is the version number...

Xamarin.iOS Build Options

You can find some additional settings for Xamarin iOS applications if you right-click on your project and select Options, as shown in the following screenshot. It is a good idea to know what is available for iOS-specific projects in Xamarin Studio. A lot is going on here, but the defaults will get you by in most situations.

Let's discuss some of the most important options, as follows:

iOS Build

• SDK version: This is the version of the iOS SDK to compile your application with. It is generally best to use Default.

• Linker behavior: Xamarin has implemented a feature called linking. The linker will strip any code that will never be called within your assemblies. This keeps your application small, and allows them to ship a stripped-down version of the core Mono runtime with your app. Except for debug builds, it is best to use the Link SDK assemblies only option. We will cover linking in a future chapter.

• Supported Architectures: These are the types of processors. i386 is...

Using UINavigationController

In iOS applications, the key class for managing navigation between different controllers is the UINavigationController class. It is a parent controller that contains several child controllers in a stack. Users can move forward by putting new controllers on top of the stack, or using a built-in back button to pop a controller off the stack and navigate to the previous screen.

The developer can manipulate the navigation controller's stack with the following methods:

• SetViewControllers: This sets an array of child controllers. It has a value to optionally animate the transition.

• ViewControllers: This is a property for getting or setting the array of child controllers without an option for animation.

• PushViewController: This places a new child controller at the top of the stack and has an option to display an animation.

• PopViewController: This pops off the child controller at the top of the stack and has an option to animate the transition.

• PopToViewController: This...

Implementing the login screen

Since the first screen of our application will be a login screen, let's begin by setting up the appropriate views in the storyboard file. We will implement the login screen by using Xamarin Studio to write the C# code, and its iOS designer to create iOS layouts in our storyboard file.

Return to the project in Xamarin Studio and perform the following steps:

1. Double-click on the Main.storyboard file to open it in the iOS designer.

2. Select your view controller, click on the Properties pane and select the Widget tab.

3. Enter LoginController into the Class field.

4. Notice that the LoginController class is generated for you. You may create a Controllers folder and move the file into it if you wish.

The following screenshot shows what the controller's settings will look like in Xamarin Studio after the changes have been made:

Now let's modify the layout of the controller by performing the following steps:

1. Double-click on the Main.storyboard file a second time to return to the iOS...

Using segues for navigation

A segue is a transition from one controller to another. In the same way, a storyboard file is a collection of controllers and their views attached together by segues. This, in turn, allows you to see the layouts of each controller and the general flow of your application at the same time.

There are just a few categories of segue, which are as follows:

• Push: This is used within a navigation controller. It pushes a new controller to the top of the navigation controller's stack. Push uses the standard animation technique for navigation controllers and is generally the most commonly used segue.

• Relationship: This is used to set a child controller for another controller. For example, the root controller of a navigation controller, container views, or split view controllers in an iPad application.

• Modal: On using this, a controller presented modally will appear on top of the parent controller. It will cover the entire screen until dismissed. There are several types of...

Setting up UITableView

Next, let's set up the table view on the second controller. We are using a powerful class on iOS called UITableView. It is used in many situations and is very similar to the concept of a list view on other platforms. The UITableView class is controlled by another class called UITableViewSource. It has methods that you need to override to set up how many rows should exist and how those rows should be displayed on the screen.

Tip

Note that UITableViewSource is a combination of UITableViewDelegate and UITableViewDataSource. I prefer to use UITableViewSource for simplicity, since using both of the other two classes would often be required.

Before we jump in and start coding, let's review the most commonly used methods on UITableViewSource, which are as follows:

• RowsInSection: This method allows you to define the number of rows in a section. All table views have a number of sections and rows. By default, there is only one section; however, it is a requirement to return the...

Adding a friends list screen

The next screen we need for our XamSnap app is our friends list. When creating a new conversation, the app will load a list of friends to start a conversation with. We'll follow a very similar pattern to load our list of conversations.

To begin, we'll create UIBarButtonItem, which navigates to a new controller named FriendsController, by performing the following steps:

1. Double-click on the Main.storyboard file to open it in the iOS designer.

2. Add a new Table View Controller to the storyboard.

3. Select your view controller, click on the Properties pane and make sure you have selected the Widget tab.

4. Enter FriendsController into the Class field.

5. Scroll down to the View Controller section and enter Friends in the Title field.

6. Drag a Navigation Item from the Toolbox onto the ConversationsController.

7. Create a new Bar Button Item element and place it on the top-right of the new navigation bar.

8. In the Properties pane of the bar button, set its Identifier to Add. This will use the...

Adding a list of messages

Now let's implement the screen to view a conversation or list of messages. We will try to model the screen on the built-in text message application in iOS. To do so, we will also cover the basics of how to create custom table view cells.

To start, we'll need a new MessagesController class; perform the following steps:

1. Double-click on the Main.storyboard file to open it in the iOS designer.

2. Add a new Table View Controller to the storyboard.

3. Select your view controller, click on the Properties pane and make sure you have selected the Widget tab.

4. Enter MessagesController into the Class field.

5. Scroll down to the View Controller section and enter Messages in the Title field.

6. Create a segue from ConversationsController to MessagesController by holding Ctrl and dragging the blue line from one controller to the other.

7. Select the Show segue from the pop up that appears. Enter the Identifier OnConversation in the Properties pane.

8. Now create two Table View Cells in the table view...

Composing messages

For the final piece of our application, we need to implement some custom functionality that Apple doesn't provide with their APIs. We need to add a text field with a button that appears to be attached to the bottom of the table view. Most of this will require writing some simple C# code and wiring up events.

Let's begin by adding some new member variables to our MessagesController class, as follows:

UIToolbar toolbar; 
UITextField message; 
UIBarButtonItem send; 

We will place the text field and bar buttons inside the toolbar, as in the following code in ViewDidLoad:

public override void ViewDidLoad() 
{ 
  base.ViewDidLoad(); 
 
  //Text Field 
  message = new UITextField( 
    new CGRect(0, 0, TableView.Frame.Width - 88, 32)) 
  { 
    BorderStyle = UITextBorderStyle.RoundedRect, 
    ReturnKeyType = UIReturnKeyType.Send, 
    ShouldReturn = _ => 
    { 
        Send(); 
        return false...

Summary

In this chapter, we covered the basic settings that Apple and Xamarin provide for developing iOS applications. This includes the Info.plist file and project options in Xamarin Studio. We covered UINavigationController, the basic building block for navigation in iOS applications, and implemented a login screen complete with username and password fields. Next, we covered iOS segues and the UITableView class. We implemented the friends list screen using UITableView, and the messages list screen, also using UITableView. Lastly, we added a custom UI functionality: a custom toolbar floating at the bottom of the messages list.

Upon completing this chapter, you will have a partially functional iOS version of XamSnap. You will have a deeper understanding of the iOS platform and tools, and fairly good knowledge to apply to building your own iOS applications. Take it upon yourself to implement the remaining screens that we did not cover in this chapter. If you get lost, feel free to review the...