Skip to end of metadata
Go to start of metadata

UIMessageInputView is an innovative input component that is specifically designed to comply with iOS human interface and user experiences guidelines. It provides a multitude of time-saving features that address the difficulties and challenges in iOS development. It allows you to easily attach a single input component atop of the keyboard, specifically targeting scrollable container.

Similar to Apple's Messages app, UIMessageInputView is built with thoughtfully-designed user experiences. It beautifully animates along when the keyboard is shown or hidden, in addition to smooth rotation support.

Key features include:

  • Easily plug-able to any scrolling container such as UIScrollView.
  • Integration support for UITableView through enhanced UITableViewController<TViewModel> provided in Crosslight.
  • Built-in resizable text view with customizable left button and right button.
  • Conforms to MVVM design pattern, allowing easy data binding to the text view and command binding to the buttons.
  • Automatic scroll to bottom when the input view enters editing mode.
  • Easily customizable appearance settings such as text color, text font, margins, placeholder, send caption, and much more.
  • Support max input height for different orientation.
  • Rotation support with smooth animation.
  • Rich API for programmatic access to the control.

On this page:

Using UIMessageInputView

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:

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.

The entry point of the initialization must be performed in the correct order such as shown in the above example.

Samples

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.