You are viewing Skygear v1 Documentation.Switch to Skygear v0 Documentation

Skygear Chat iOS UIKit

About UIKit
Prerequisite
Creating a conversation UI
Customizations
UICustomization
TextCustomization
SKYChatUIModelCustomization
Delegates

About UIKit

UIKit provides the SKYChatConversationViewController, the main UI of a conversation. The view of SKYChatConversationViewController is SKYChatConversationView. The view consists of the following components.

Title Bar
Avatar (Outgoing)
Message (Outgoing)
Avatar (Incoming)
Message (Incoming)
Camera Button
Text Input
Voice Button

ConversationView Overview

Prerequisite

Step 1: Add Skygear and Skygear Chat to your project

Please follow the steps at Quick Start.

Step 2: Add Skygear Chat UIKit to your project

add pod 'SKYKitChat/UI', '~> 1.5' in Podfile.

pod 'SKYKitChat/UI', '~> 1.5'

Save your Podfile and run pod install in the terminal.

pod install

Import UIKit in your source code as follows

Creating a conversation UI

The following code block creates a SKYChatConversationViewController of a conversation c.

Objective-C

SKYChatConversationViewController* conversationViewController = [[SKYChatConversationViewController alloc] init];
conversationViewController.conversation = c; // c is a SKYConversation
[self.navigationController pushViewController:conversationViewController animated:YES];

Swift

let conversationViewController = SKYChatConversationViewController()
conversationViewController.converation = c // c is a SKYConversation
self.navigationController?.pushViewController(conversationViewController, animated: true)

Customizations

SKYChatConversationView can be customized via

setting properties of

SKYChatConversationView.UICustomization()
SKYChatUIModelCustomization.default()
SKYChatConversationViewController

implementing delegates.

UICustomization

You can customize SKYChatConversationView properties in the following way.

Objective-C

[SKYChatConversationView UICustomization].messageSenderTextColor = [UIColor blackColor];
[SKYChatConversationView UICustomization].avatarHiddenForIncomingMessages = NO;

Swift

SKYChatConversationView.UICustomization().messageSenderTextColor = UIColor.black
SKYChatConversationView.UICustomization().avatarHiddenForIncomingMessages = false

The following properties are supported.

Avatar

Attribute	`Description`	Type
`avatarBackgroundColor`	Background color of the avatar	Color
`avatarTextColor`	Text color of the avatar	Color
`avatarType`	Avatar Type, either showing initial of the username field or image	`SKYChatConversationViewUserAvatarType`, "`initial`" or "`image`"
`avatarHiddenForIncomingMessages`	Hide incoming message avatar if true	Boolean, default False
`avatarHiddenForOutgoingMessages`	Hide outgoing message avatar if true	Boolean, default False

Background

Attribute	`Description`	Type
`backgroundColor`	Background color of the conversation view	Color
`backgroundImage`	Background image of the conversation view	UIImage
`backgroundImageURL`	Remote background image of the conversation view	NSURL

Title

Attribute	`Description`	Type
`titleDisplayType`	See below	`SKYChatConversationViewTitleOptions`

If default is set, then the title bar displays title field value of the conversation record. If otherParticipants is set, then the title bar displays participants' usernames (excluding the current user) in the title bar.

Objective-C

[SKYChatConversationView UICustomization].titleDisplayType = SKYChatConversationViewTitleOptionsOtherParticipants;

Swift

SKYChatConversationView.UICustomization().titleDisplayType = .otherParticipants

Date

Attribute	`Description`	Type
`messageDateFormatter`	Message delivery time date formatter	`DateFormatter`

Message

`attribute`	description	type
`messageSenderTextColor`	text color of the message sender	Color
`incomingMessageBubbleColor`	Incoming messages background color	Color
`outgoingMessageBubbleColor`	Outgoing messages background color	Color

Feature On/Off

Attribute	`Description`	Type
`cameraButtonShouldShow`	Show camera button if true	Bool, default: true
`voiceMessageButtonShouldShow`	Show voice message button if true	Bool, default: true
`typingIndicatorShouldShow`	Show typing indicators if true	Bool, default: true
`messageStatusShouldShow`	Show message status if true	Bool, default: true
`accessoryButtonShouldShow`	Show accessory button if true	Bool, default: true

TextCustomization

Texts such as message delivery status, date format and button label can be customized via textCustomization.

Objective-C

[[SKYChatConversationView UICustomization] textCustomization].sendButton = @"Send !";

Swift

SKYChatConversationView.UICustomization().textCustomization.sendButton = "Send !"

Supported attributes:

Attribute	`Description`	Type
`messageStatusDelivering`	Delivering text	String, default "Delivering"
`messageStatusDelivered`	Delivered text	String, default "Delivered"
`messageStatusSomeRead`	Some read text	String, default "Some Read"
`messageStatusAllRead`	All read text	String, default "All Read"
`messageSentFailed`	Failed text	String, default "Failed"
`sendButton`	Send Button Text	String, default "Send"

SKYChatUIModelCustomization

You can change userNameField and userAvatarField via SKYChatUIModelCustomization.default().

Objective-C

[[SKYChatUIModelCustomization default] updateWithUserNameField:@"name"];
[[SKYChatUIModelCustomization default] updateWithUserAvatarField:@"profile_pic"];

Swift

SKYChatUIModelCustomization.default().update(userNameField: "name")
SKYChatUIModelCustomization.default().update(userAvatarField: "profile_pic")

Attribute	`Description`	Type
`userNameField`	Field name of the username in `user` table	String, default "username"
`userAvatarField`	Field name of the avatar image in `user` table	String, default "avatar"

Delegates

You may also implement functions in SKYChatConversationViewControllerDelegate

Message Date

To customize date format

Objective-C

- (NSAttributedString *) conversationViewController:(SKYChatConversationViewController *)controller dateStringAt:(NSIndexPath *)indexPath

Swift

optional func conversationViewController(
    _ controller: SKYChatConversationViewController,
    dateStringAt indexPath: IndexPath) -> NSAttributedString

Example Code

Objective-C

- (NSAttributedString *) conversationViewController:(SKYChatConversationViewController *)controller dateStringAt:(NSIndexPath *)indexPath {
    SKYMessage* msg = [[controller messageList] messageAt: indexPath.row];
    NSDateFormatter * formatter = [[NSDateFormatter alloc] init];
    [formatter setDateFormat: @"yyyy-MM-dd"];
    NSString *dateString = [formatter stringFromDate: [msg creationDate]];
    NSDictionary *attrs = @{ NSForegroundColorAttributeName : [UIColor blueColor] };
    NSAttributedString *attrStr = [[NSAttributedString alloc] initWithString:dateString attributes:attrs];
    return attrStr;
}

Swift

func conversationViewController(_ controller: SKYChatConversationViewController, dateStringAt indexPath: IndexPath) -> NSAttributedString {
    let msg = controller.messageList.messageAt(indexPath.row)
    let formatter = DateFormatter()
    let attributedStringColor : NSDictionary = [NSForegroundColorAttributeName : UIColor.blue]
    formatter.dateFormat = "yyyy-MM-dd"
    return NSAttributedString(string: formatter.string(from: msg.creationDate()), attributes: attributedStringColor as? [String : AnyObject])
}

To enable or disable date

Objective-C

- (bool) conversationViewController:(SKYChatConversationViewController *)controller shouldShowDateAt:(NSIndexPath *)indexPath

Swift

optional func conversationViewController(
    _ controller: SKYChatConversationViewController,
    shouldShowDateAt indexPath: IndexPath) -> Bool

Feature On/Off

Accessory button

Objective-C

- (bool) accessoryButtonShouldShowInConversationViewController:(SKYChatConversationViewController *)controller

Swift

optional func accessoryButtonShouldShowInConversationViewController(
    _ controller: SKYChatConversationViewController) -> Bool

Camera button

Objective-C

- (bool) cameraButtonShouldShowInConversationViewController:(SKYChatConversationViewController *)controller

Swift

optional func cameraButtonShouldShowInConversationViewController(
    _ controller: SKYChatConversationViewController) -> Bool

Voice message button

Objective-C

- (bool) voiceMessageButtonShouldShowInConversationViewController:(SKYChatConversationViewController *)controller

Swift

optional func voiceMessageButtonShouldShowInConversationViewController(
    _ controller: SKYChatConversationViewController) -> Bool

Typing indicator

Objective-C

- (bool) typingIndicatorShouldShowInConversationViewController:(SKYChatConversationViewController *)controller

Swift

optional func typingIndicatorShouldShowInConversationViewController(
    _ controller: SKYChatConversationViewController) -> Bool

Message status

Objective-C

- (bool) messageStatusShouldShowInConversationViewController:(SKYChatConversationViewController *)controller

Swift

optional func messageStatusShouldShowInConversationViewController(
    _ controller: SKYChatConversationViewController) -> Bool

Background Image

Background color

Objective-C

- (UIColor*) backgroundColorForConversationViewController:(SKYChatConversationViewController *)controller

Swift

func backgroundColorForConversationViewController(_ controller: SKYChatConversationViewController) -> UIColor

Background image

Objective-C

- (UIImage*) backgroundImageForConversationViewController:(SKYChatConversationViewController *)controller

Swift

func backgroundImageForConversationViewController(_ controller: SKYChatConversationViewController) -> UIImage

Remote background image

Objective-C

- (NSURL*) backgroundImageURLForConversationViewController:(SKYChatConversationViewController *)controller

Swift

func backgroundImageURLForConversationViewController(_ controller: SKYChatConversationViewController)