Customizing 3rd party frameworks: Leveraging Xcode’s debug view hierarchy and open source code for a customized chat UI

Customizing a chat UI

Customizing UI components can present a unique challenge when integrating third-party UI frameworks into your iOS projects. How do you identify which chat UI components are being used, and how can you customize them to fit the needs of your application?

In this post, we will learn how to leverage Xcode's Debug View Hierarchy and open-source code when customizing Sendbird UIKit SDK in your iOS app.

Customizing Sendbird UIKit: A step-by-step guide

1. Prepare your environment

• Your app: Ensure your iOS app integrates Sendbird UIKit and is capable of displaying a Group Channel view. (To learn how to integrate Sendbird UIKit into your app, see Send Your First Message tutorial.)
  
  

• Open-source code: Clone the Sendbird UIKit repository to access its source code.
• Customization goal: At the end of this post, you will have a customized Group Channel view with a mint border around the channel title text.
  

2. Open debug view hierarchy and navigate

• Run your app (cmd + R). On your simulator or device, navigate to the screen you wish to inspect, which is the Group Channel view.
• On Xcode, click on the Debug View Hierarchy button in the debug area’s top bar.
  
  
• To specifically identify the class of the channel title view,
  • Right-click on your target component, 
  • Then click on “Reveal in Debug Navigator.”
    
    

• This reveals the view’s class name on View Hierarchy (the left plane of Xcode).
  • The channel title view is a UILabel inside SBUChannelTitleView
  • SBUChannelTitleView is inside the UINavigationBar of SBUGroupChannelViewController

3. Identify components

• As you explore the View Hierarchy, you'll start to notice SendBird UIKit's components, distinguishable by their class names prefixed with SBU. SBUChannelTitleView is one of them.
• Finding Sendbird UIKit components related to your target UI view gives you a starting point for exploring the Sendbird UIKit source code or documentation to find customization hooks or subclassing options.

4. Access source code & find customization points

• Open the cloned Sendbird UIKit source code. Search in the Xcode project (cmd + shift + O) to find the SBUChannelTitleView class.
• In SBUChannelTitleView class, you will find the UILabel property as titleLabel. This is the view you will need to modify.
  
  
• Where is the SBUChannelTitleView used? Search SBUChannelTitleView in the project (cmd + shft + F). You will find it being used as var defaultTitleView, which is one of the view properties of SBUBaseChannelModule.Header. Open SBUBaseChannelModule.Header.swift file.
  
  
• In SBUBaseChannelModule.Header, you can find defaultTitleView being assigned to titleView in setupViews(). This means that the titleView of a SBUBaseChannelModule.Header instance is type SBUChannelTitleView by default. (This can also be confirmed in the titleView’s documentation, which reads “for SBUBaseChannelModule.Header and its subclasses, the default view type is SBUChannelTitleView")
• Since titleView of SBUChannelTitleView is public, which means you can access titleView from SBUBaseChannelModule.Header.

5. Customizing identified components

Now that you have identified which part of Sendbird UIKit you want to modify, create a custom class to customize the component to your needs.

• Create your custom channel module header component by subclassing SBUBaseChannelModule.Header to access the titleView inside it.
• Based on the module component's lifecycle, override the setupStyles(theme:) method.
• Set your custom component into Sendbird UIKit module anywhere before presenting the Group Channel View. (Note: to learn more about customizing modules, see this guide.)

6. Result

And that’s it! Now you have a customized channel title view.

You can use the above method to easily customize other parts of Sendbird UIKit.

Start building and customizing a chat UI today

Building a chat app into your offerings or operations might be a huge game-changer for your business, but the undertaking doesn’t need to be intimidating. By leveraging Sendbird’s chat SDKs, APIs, and UIKits, you can jumpstart your development and get to market quickly while keeping your costs low.

In this tutorial, we learned how to customize a chat UI using Xcode’s debug view hierarchy and open source code. For more hands-on tutorials and guides tailored to specific platforms, frameworks, and languages, please visit the developer portal.

When your business decides that the time is right to build chat capabilities, Sendbird is ready to provide communications solutions that you can build on. You can send your first message today by creating a Sendbird account to get access to valuable (free) resources with the Developer plan. Become a part of the Sendbird developer community to tap into more resources and learn from the expertise of others. You can also browse our demos to see Sendbird Chat in action. If you have any other questions, please contact us. Our experts are always happy to help!

Happy chat building! 💬