Skip to main content

Customising Components

The LikeMinds Feed UI components are fully customizable and interchangeable through the components configuration type that holds all the reusable views of the SDK. You can customize these views by subclassing them and replacing them in the configuration with your subclass. You should modify the values of the Components configuration from Components.default at the beginning of your application life-cycle.

Customising Components

  1. Create a new component class by subclassing the component you want to change.
  2. Make changes to layout, styling, behaviour as needed.
  3. Configure the SDK to use your custom component.

Components LifeCycle

To make subclassing and customization simple, LikeMindsFeed view components conform to the LMViewLifeCycle protocol.

@objc
public protocol LMViewLifeCycle {
/// This function handles the initialization of views.
func setupViews()

/// This function handles the initialization of autolayouts.
func setupLayouts()

/// This function handles the initialization of actions.
func setupActions()

/// This function handles the initialization of styles.
func setupAppearance()

/// This function handles the initialization of observers.
func setupObservers()
}

setupViews

This method is intended for the initial creation and configuration of views. When implementing this method, you would add UI Elements to the view hierarchy.

setupLayouts

This method focuses on arranging them within the parent view or view controller's view. This involves setting up constraints or defining frames to layout the UI elements properly, ensuring they are displayed correctly on different screen sizes and orientations.

setupActions

This method focuses on adding event listeners or gestures to your UI elements, defining what should happen when a user interacts with them.

setupAppearance

This method focuses on setting fonts, colors, borders, shadows, and other visual properties that affect how the UI elements look, ensuring consistent design throughout the app.

setupObservers

This method focuses on registering for notifications, Key-Value Observing, or other mechanisms to observe and respond to changes in data or state that might affect the UI.


Example of Customisation

The following example helps you setup border color to the imageView present in the header view of Post Component.

CustomHeaderView.swift
final class CustomHeaderView: LMFeedPostHeaderView {
override func setupAppearance() {
super.setupAppearance()

imageView.layer.borderColor = UIColor.red.cgColor
imageView.layer.borderWidth = 2
}
}
AppDelegate.swift
func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
// Code Initalisation
LikeMindsFeedUI.LMUIComponents.shared.headerView = CustomHeaderView.self
return true
}

Results

BeforeAfter
LightDark