Building iOS apps with single input view attached to the keyboard has been one of the most frequent scenarios in today's popular apps such as reply and comment in Facebook and Twitter app. It's also well suited for messaging apps like Message and WhatsApp. However, achieving this scenario with native iOS approach is fairly tedious and complex as it requires dozens to hundreds line of code. Thanks to the UIMessageInputView component, you can now achieve this scenario with just a few line of code.
The input view component comes with a specialized built-in container called UIKeyboardScrollView. It manages the activity of the keyboard, and synchronize the view state between the content and the input view. In most cases, you will use the input view along with the keyboard scroll view component for the best user experience.
To understand the relation between the keyboard scroll view, input view and the content view, please see the following illustration.
At the simplest, you can use the input view component by creating a new instance of UIMessageInputView and add it to the keyboard scroll view which should the root view in the controller. See the following code example for more details.
The code above is pretty self explanatory. The important points to note are:
- UIKeyboardScrollView should be the root view in the controller.
- UIKeyboardScrollView ties the content and the input view together in the Initialize method.
Integrating UIMessageInputView to UITableViewController
In most cases, you may want to integrate the input view into a table view which displays a list of data such as comments or messages. Crosslight supports this scenario through the advanced table view controller which allows you to simply set the keyboard view to the controller with a property set.
The advanced table view controller available in Crosslight provides several features to accommodate this scenario such as:
- UseCustomRootView property – determines whether a custom root view should be used.
- GetCustomRootView method – if UseCustomRootView returns true, then you should implement this method to return the view instance to be injected as the root view.
With the above features, integrating the input view component to the table view is made simple and straightforward. The following code example shows how to implement the input view component in a table view controller.
The explanation of the above code is as follows:
- The UseCustomRootView is overridden to return true. Consequently, the controller will call GetCustomRootView method to obtain the view instance to be injected.
- The GetCustomRootView is overridden to return the UIKeyboardScrollView instance which is initialized and configured in the InitializeKeyboardView method.
- Finally, the UIKeyboardScrollView is initialized in the OnViewCreated method. It is important to note that the initialization should be performed before the base implementation of the method.
Download the samples from Intersoft Git server here to quickly getting started with the input view component. Prior to running the samples, make sure to set the iOS project as the startup project.