Layer’s UI Libraries

As part of Layer’s eXperience Development Kit (XDK), a library of UI widgets is provided to streamline building your applications. UI Libraries serve the following goals:

  • Provide commonly used high level UI Components such as the Conversation View and Conversation List
  • Provide a library of customizable lower level UI Components such as Avatars, Presence, Compose Bar, Typing Indicators, etc…
  • Enable application developers to focus on their business logic and customizations rather than focusing on providing, debugging and maintaining basic building blocks of a messaging application.
  • Provide a library of different types of messages that can be sent among users, and provide enhanced interactivity to your application.

Using the iOS XDK UI Library

Setting up the UI Components Library is as simple as importing the framework header:

#import <LayerXDK/LayerXDKUI.h>

And initializing an LYRUIConfiguration object with LYRClient, and using it with the components:

// Initializes a LYRClient object
NSURL *appID = [NSURL URLWithString:@"layer:///apps/staging/cf10048c-d9ab-11e5-b6a9-c01d00006542"];
self.layerClient = [LYRClient clientWithAppID:appID delegate:self options:nil];

// Creates LYRUIConfiguration objective
self.layerUIConfiguration = [[LYRUIConfiguration alloc] initWithClient:self.layerClient];

Working With iOS XDK UI Components

There are 11 main components in Layer XDK UI:

  • LYRUIPresenceView: Represents the online status of an LYRIdentity
  • LYRUIAvatarView: Shows an avatar of single or multiple identities
  • LYRUIIdentityItemView: Presents the name, avatar, and last seen at date of LYRIdentity
  • LYRUIIdentityListView: List of LYRIdentity objects. Can be used to present participants of LYRConversation
  • LYRUIConversationItemView: Presents the name of LYRConversation, avatars of participants, and the last message
  • LYRUIConversationListView: List of conversations
  • LYRUIMessageItemView: Presents the avatar of sender of a message (an subclass of LYRUIMessageType)
  • LYRUIMessageListView: List of messages.
  • LYRUIComposeBar: Provides an input field for typing messages, and sending button. It can be customized with additional items, for example an button for sending attachments.
  • LYRUIConversationView: An view that contains both LYRUIMessageListView and LYRUIComposeBar, used for presetting and sending messages in a LYRConversation

Common LayerKit Classes

LayerKit classes commonly seen with UI components are described below.

The Layer Client

Most components require access to your single instance of the LYRClient (LayerKit) class. You are required to initialize your client before interacting with Layer XDK UI components, however, they will remain responsive even if the client is neither connected nor authenticated. The LYRClient is passed to the LYRUIConfiguration, which is then passed to every UI component.

The Query Controller

All the List components list data in some form. Layer XDK UI utilizes the LYRQueryController (LayerKit) class to manage and present the data within a list.

  • Layer XDK UI List Views are designed to pass the query controller to them after initialization.
  • The List Views are updated with changes via the LYRQueryControllerDelegate methods.

Note

Each query controller should only be created once for the lifetime of it’s view. If you want to change the results (such as with a filter or toggle button) you can create a separate function to update the underlying query properties and re-execute the query controller. This will ensure your data source stays in-sync with your List View.

Privacy Core Components