Customizing Views

LAST EDIT May 17 2021

View Lifecycle Methods

Copied!

To make subclassing and customization simple, almost all view components in StreamChatUI has the following set of lifecycle methods:

Changing Main Color

Copied!

If suitable, UI elements respect UIView.tintColor as the main (brand) color. The current tintColor depends on the tint color of the view hierarchy the UI element is presented on.

For example, by changing the tint color of the UIWindow of the app, you can easily modify the brand color of the whole chat UI:

default tintcolor

tintcolor = .systempink

Image shows chat app with blue tint color

Image shows chat app with pink tint color

Changing Appearance

Copied!

StreamChatUI offers a simple way of customizing the default appearance of almost every UI element using the DefaultAppearance protocol. Elements conforming to this protocol expose the defaultAppearance property which allows adding custom appearance rules.

For example, this is the default appearance of the list of channels:

Image shows a  channels view

We can easily change the appearance of the channel list items using the defaultAppearance API:

Image shows a channel view with a yellow background

The unread count indicator now seems quite off. We can change its color, too:

Image shows a channel view with a yellow background and dark gray unread indicator

Changing Layout

Copied!

It is possible to adjust/customize the layout of any UI component in the following ways:

  • add a new subview

  • remove the existed subview

  • change spacing/margins/relative subviews arrangement

All the customizations can be done in 3 steps:

  1. Create a subclass of the UI component

  2. Override setUpLayout and apply custom layout

  3. Inject created subclass via UIConfig

Subclassing Components

Copied!

Adding a new subview to the UI component

Copied!

This type of customization is especially useful when working with custom extra-data. Whenever custom extra data contains the information that should be shown inside the UI component, it can be subclassed and extended with the new subview.

Read more about ExtraData here.

Before

after

Image shows chat messages

Image shows chat message with smiley face beside timestamp

Once the custom subclass is implemented, it should be injected via UIConfig so it is used instead of base UI component.

Refer to Injecting Custom Subclass chapter below for more information.

Changing component subview's relative arrangement, or removing subview

Copied!

Imagine you are not satisfied with some UI component default layout and you're looking for how to exclude a particular subview or change relative subviews arrangement.

Let's see how it can be done by the ChatMessageInteractiveAttachmentView example:

Default layout

updated layout

image shows message with action buttons arranged horizontally

image shows message with action buttons arranged vertically

As you see, in the updated layout:

  • action buttons are arranged vertically;

  • there is no GIF title label.

The code-snippet that does the job:

Once the custom subclass is implemented it should be injected via UIConfig so it is used instead of the base UI component.

Refer to Injecting Custom Subclass chapter below for more information.

Injecting Custom Subclass

Copied!

You can change UI behavior or add new elements by subclassing StreamChatUI views and injecting them in UIConfig.

UIConfig.default is used to inject custom UI component types.

Once the new type is injected it will is used instead of the base UI component.

In most cases the type injection should be done once and the application(_, didFinishLaunchingWithOptions) is the right place for it:

For example, this user really loves ducks and has a bad time without them.

Image shows chat message

Let's help him, by showing 🦆 near message view if it contains "duck" word. To achive this we would subclass ChatMessageContentView

Now to teach StreamChatUI sdk to use our 🦆 view, pass it inside UIConfig

Image shows chat message with a duck emoji beside it