UI Components

GitHub version

Additional resources: GitHub Repo, API Reference, Code Samples

Getting Started

CocoaPods Setup

Version License Platform

Bit6UI is available from CocoaPods. To install it, simply add the following lines to your Podfile:

# Uncomment this line if you're using Swift
# use_frameworks!

target 'test' do
    pod 'Bit6UI'
end

Note Replace test with the name of the target of your Xcode project.

Manual Setup

Step 1. Follow the guide to add Bit6 to your project.

Step 2. Add Bit6UI.framework and Bit6UIResources.bundle to your project.

Localization

To localizate or modify the strings in the framework just add the following file to your project Bit6UI.strings.

Contacts

Contact Source

Class: BXUContactSource/BXUContact

Use these protocols to provide the display names and avatars for each identity.

See the Bit6UIFullDemo-ObjC and Bit6UIFullDemo-Swift sample apps for a complete example.

[BXU setContactSource:[DemoContactSource new]];
BXU.setContactSource(DemoContactSource())

Avatar

Class: BXUContactAvatarImageView

This UIImageView will show the avatar for an identity. The avatar image will be obtained using BXUContactSource. If the avatar is not in cache a filled circle with the name initials will be shown, until the avatar is downloaded.

contactAvatarImageView.address = bit6Address;

BXUContactAvatarImageView

Display Name

Class: BXUContactNameLabel

This UILabel will show the display name for an identity. The display name will be obtained using BXUContactSource.

contactNameLabel.address = bit6Address;

Conversations

Avatar

Class: BXUConversationAvatarView

This UIImageView will show the avatar for an identity. The difference with BXUContactAvatarImageView is that BXUConversationAvatarView will show two image views for group conversations.

conversationAvatarView.address = bit6Address;

BXUConversationAvatarView

TabBarItem

Class: BXUConversationsTabBarItem

This UITabBarItem will show at all times the number of unread messages in its badge.

ViewController

Class: BXUConversationTableViewController

This UIViewController can be used to show all the conversations, with avatar (using BXUConversationAvatarView), displayName (using BXUContactNameLabel), typing label (using BXUTypingLabel) and others controls for each conversation.

@interface ConversationsViewController : BXUConversationTableViewController
@end

@implementation ConversationsViewController
    - (void)didSelectConversation:(Bit6Conversation*)conversation {
        //handle the selected conversation
    }
@end
class ConversationsViewController: BXUConversationTableViewController {
    override func didSelectConversation(conversation: Bit6Conversation!) {
        //handle the selected conversation
    }
}

BXUConversationTableViewController

Messages

ViewController

Class: BXUMessageTableViewController

This UIViewController can be used to show all the messages in one conversation, or all the messages for all conversations at the same time. It includes support to send/receive messages with attachments and make calls.

@interface ChatsTableViewController : BXUMessageTableViewController
@end

@implementation ChatsTableViewController
    - (void)didSelectImageMessage:(nonnull Bit6Message*)message
    {
        ...
    }

    - (void)didSelectVideoMessage:(nonnull Bit6Message*)message
    {
        ...
    }

    - (void)didSelectLocationMessage:(nonnull Bit6Message*)message
    {
        ...
    }
@end
class ChatsTableViewController: BXUMessageTableViewController {
    override func didSelectImageMessage(message: Bit6Message) {
        ...
    }

    override func didSelectVideoMessage(message: Bit6Message) {
        ...
    }

    override func didSelectLocationMessage(message: Bit6Message) {
        ...
    }
}

BXUMessageTableViewController

Image ViewController

Class: BXUImageViewController

This UIViewController can be used to show an image attached to a message. It will allow the default sharing options.

BXUImageViewController *imageVC = [BXUImageViewController new];
imageVC.delegate = self;
[imageVC setMessage:message];
let imageVC = BXUImageViewController()
imageVC.delegate = self
imageVC.setMessage(message)

BXUImageViewController

Location ViewController

Class: BXULocationViewController

This UIViewController can be used to show a location attached to a message. It allows to open the location in Apple Maps. Many other services like Google Maps and waze can easily be configured.

BXULocationViewController *locationVC = [BXULocationViewController new];
locationVC.delegate = self;
locationVC.coordinate = message.location;

NSMutableArray *actions = [NSMutableArray arrayWithCapacity:2];
if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"comgooglemaps-x-callback://"]]) {
    [actions addObject:@"Google Maps"];
}
locationVC.actions = actions;

- (void)didSelectLocationAction:(nonnull NSString*)action coordinate:(CLLocationCoordinate2D)coordinate
{
    if ([action isEqualToString:@"Google Maps"]) {
        ...
    }
}
let locationVC = BXULocationViewController()
locationVC.delegate = self
locationVC.coordinate = message.location;

var actions = [String]()
if UIApplication.sharedApplication().canOpenURL(NSURL(string:"comgooglemaps-x-callback://")!) {
    actions.append("Google Maps")
}
locationVC.actions = actions;

func didSelectLocationAction(action: String, coordinate: CLLocationCoordinate2D) {
    if action == "Google Maps" {
        ...
    }
}

BXULocationViewController

Incoming Chat Banner

This component can be used to show a banner when a message arrives while inside the application.

[[NSNotificationCenter defaultCenter] addObserver:self
                                         selector:@selector(incomingMessageNotification:)
                                             name:Bit6IncomingMessageNotification
                                           object:nil];

- (void)incomingMessageNotification:(NSNotification*)notification
{
    UIApplicationState appState = [UIApplication sharedApplication].applicationState;
    Bit6Address *address = notification.userInfo[Bit6AddressKey];
    BOOL tapped = [notification.userInfo[Bit6TappedKey] boolValue];
    NSString *message = notification.userInfo[Bit6MessageKey];

    //the user is not inside the conversation
    if (![[Bit6 currentConversation].address isEqual:address]) {
        //the user tapped the notification
        if (tapped) {
            [[NSNotificationCenter defaultCenter] postNotificationName:BXUConversationSelectedNotification object:address];
        }
        //we were inside the app when the notification arrived, we show the banner
        else {
            if (appState != UIApplicationStateBackground) {
                [BXU showNotificationFrom:address message:message tappedHandler:nil];
            }
        }
    }
}
NSNotificationCenter.defaultCenter().addObserver(self,
                                selector:#selector(AppDelegate.incomingMessageNotification(_:)),
                                    name:Bit6IncomingMessageNotification,
                                  object:nil)

func incomingMessageNotification(notification:NSNotification)
{
    let appState = UIApplication.sharedApplication().applicationState
    let address = notification.userInfo![Bit6AddressKey] as! Bit6Address
    let tapped = notification.userInfo![Bit6MessageKey] as! Bool
    let message = notification.userInfo![Bit6MessageKey] as! String

    //the user is not inside the conversation
    if Bit6.currentConversation()?.address != address {
        //the user tapped the notification
        if tapped {
           NSNotificationCenter.defaultCenter().postNotificationName(BXUConversationSelectedNotification, object:address)
        }
        //we were inside the app when the notification arrived, we show the banner
        else {
            if appState != .Background {
                BXU.showNotificationFrom(address, message:message, tappedHandler:nil)
            }
        }
    }
}

Note On tapped, the banner will automatically call BXUConversationTableViewController.didSelectConversation()

BXUIncomingCallPrompt

Calls

Call Prompt

Class: BXUIncomingCallPrompt

This UIWindow can be used to show a prompt to answer an incoming call.

[[NSNotificationCenter defaultCenter] addObserver:self
                                         selector:@selector(incomingCallNotification:)
                                             name:Bit6IncomingCallNotification
                                           object:nil];

- (void)incomingCallNotification:(NSNotification*)notification {
    Bit6CallController *callController = notification.object;

    //there's a call prompt showing at the time
    if ([BXUIncomingCallPrompt callController]) {

        //if this is not the same call as the one being shown for Bit6IncomingCallPrompt we reject it
        if ( ![[BXUIncomingCallPrompt callController] isEqual:callController] ) {
            [callController hangup];
        }
    }
    else {
        //the call was answered by taping the push notification
        if (callController.incomingCallAnswered) {
            callController.remoteStreams = [BXU availableStreamsIn:callController.availableStreamsForIncomingCall];
            callController.localStreams = [BXU availableStreamsIn:callController.availableStreamsForIncomingCall];
            [callController start];
        }
        else {
            //we show the incoming call prompt
            [BXUIncomingCallPrompt showForCallController:callController];
        }
    }
}
NSNotificationCenter.defaultCenter().addObserver(self,
                                selector:#selector(AppDelegate.incomingCallNotification(_:)),
                                    name:Bit6IncomingCallNotification,
                                  object:nil)

func incomingCallNotification(notification : NSNotification){
    let callController = notification.object as! Bit6CallController

    //there's a call prompt showing at the time
    if (BXUIncomingCallPrompt.callController) {

        //if this is not the same call as the one being shown for Bit6IncomingCallPrompt we reject it
        if ( BXUIncomingCallPrompt.callController != callController ) {
            callController.hangup()
        }
    }
    else {
        //the call was answered by taping the push notification
        if (callController.incomingCallAnswered) {
            callController.remoteStreams = BXU.availableStreamsIn(callController.availableStreamsForIncomingCall)
                callController.localStreams = BXU.availableStreamsIn(callController.availableStreamsForIncomingCall)
            callController.start()
        }
        else {
            //we show the incoming call prompt
            BXUIncomingCallPrompt.showForCallController(callController)
        }
    }
}

BXUIncomingCallPrompt

NOTE: You can define your own UI for this component by using

[[BXUIncomingCallPrompt sharedInstance] setContentViewGenerator:...];
BXUIncomingCallPrompt.sharedInstance().setContentViewGenerator(...)

In-Call UI

Class: BXUCallViewController

Set BXUCallViewController class at the beginning of your AppDelegate as the in-call class to use.

[Bit6 setInCallClass:[BXUCallViewController class]];
Bit6.setInCallClass(BXUCallViewController)

BXUIncomingCallPrompt

Misc

Image Attachment

Class: BXUAttachmentImageView

This UIImageView is used to show the thumbnail for a message attachment (thumbnailMode=false) or to show an image attached to a message (thumbnailMode=true).

[thumbnailImageView setMessage:bit6Message thumbnailMode:YES];
thumbnailImageView.setMessage(bit6Message, thumbnailMode:true);

Typing

Class: BXUTypingLabel

This UILabel will show "Typing..." when the other user starts typing.

typingLabel.address = bit6Address;

You can implement BXUTypingLabelDelegate to do additional animations when the 'typing' process starts and ends.

WebSocket Status

Class: BXUWebSocketStatusLabel

This UILabel will show "Connected" when the Signaling websocket is ready to be use, and "Connecting..." if not.

You can implement BXUWebSocketStatusLabelDelegate to configure the transition when the status changes.

Progress Window

Class: BXUProgressWindow

This UIWindow can be used to block the user interaction when an operation is in progress.

[BXUProgressWindow showWithTitle:nil];
[BXUProgressWindow dismissWithHandler:^{...}];
BXUProgressWindow.showWithTitle(nil)
BXUProgressWindow.dismissWithHandler{...}

BXUProgressWindow