Skip to main content

Topic View

Overview​

LMFeedTopicView is a custom view for displaying a list of topics in a feed. It supports various display modes such as edit and select flows and includes an optional separator. This view uses a collection view to present topics and manages interactions through a delegate protocol.

LMFeedPostTopicCell

Protocols​

LMFeedTopicViewCellProtocol​

This protocol defines methods for handling user interactions within the topic view:

  • didTapCrossButton(for topicId: String): Called when the cross button is tapped, passing the topic ID as a parameter.
  • didTapEditButton(): Called when the edit button is tapped.
  • didTapSelectTopicButton(): Called when the select topic button is tapped.

UI Components​

  • containerView: The main container view that holds all other subviews.
  • stackView: A vertical LMStackView that arranges the collection view and the separator view.
  • collectionView: An LMFeedTopicCollectionView that displays the topics. It is configured with different cell types for display, editing, and selection.
  • sepratorView: An LMView that acts as a separator and is shown or hidden based on the configuration.

Data Variables​

  • topics: An array of LMFeedTopicCollectionCellDataModel representing the topics to be displayed.
  • isEditFlow: A boolean indicating whether the view is in edit mode.
  • isSelectFlow: A boolean indicating whether the view is in select mode.
  • delegate: A weak reference to an instance conforming to LMFeedTopicViewCellProtocol for handling user interactions.

Methods​

  • configure(with data: ContentModel): Configures the view with the given ContentModel, including topics, flow modes, and separator visibility. Reloads the collection view and updates the layout accordingly.

Action Handlers​

  • collectionView(_:cellForItemAt:): Configures and returns the appropriate cell for the given index path based on the current flow mode and topic data.
  • collectionView(_:layout:sizeForItemAt:): Provides the size for each item in the collection view based on the topic text size.

Customization​

Creating a Custom Topic View​

To create a custom topic view, subclass LMFeedTopicView and override the necessary methods to adjust the appearance and layout as needed.

CustomTopicView.swift
class CustomTopicView: LMFeedTopicView {
    override func setupAppearance() {
        super.setupAppearance()
        containerView.backgroundColor = .blue
    }
}

Replacing the Default Topic View​

To use your custom topic view in the application, update the LMUIComponents in the AppDelegate.

AppDelegate.swift
func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
    LMUIComponents.shared.topicFeedView = CustomTopicView.self
    // ...
    return true
}

Feel free to let me know if there are any changes or additions you'd like!