How to add custom footer view on channel list? (UIView ver.)

[tezpark]

Summary

• How to add custom footer view on channel list? (UIView ver.)

Customer request

• Please provide a code sample that demonstrates to the customer how to extend the ChannelListViewController to add a custom component to the bottom of the view controller.

Guide & Snippet

• The logic below is a custom snippet with a simple example.

• Create a CustomChannelListFooterView class that inherits from UIView.

  • SBUViewLifeCycle is used for the view life cycle used by SendbirdUIKit. It is not required, so you can configure your view without it if you want.

class CustomChannelListFooterView: UIView, SBUViewLifeCycle {
    let titleLabel = UILabel()
    let contentStackView = SBUStackView(axis: .horizontal, spacing: 8)
        
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
        setupLayouts()
        setupActions()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
        setupLayouts()
        setupActions()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        setupStyles()
    }
    
    // MARK: -Sendbird UIKit Lifecycle
    func setupViews() {
        self.addSubview(contentStackView)
        contentStackView.setHStack([
            titleLabel
        ])
    }
    
    func setupLayouts() {
        contentStackView.sbu_constraint(
            equalTo: self,
            leading: 0,
            trailing: 0,
            top: 0,
            bottom: 0
        )
    }
    
    func updateLayouts() {}
    
    func setupStyles() {
        titleLabel.text = "Custom footer"
        titleLabel.textAlignment = .center
        titleLabel.font = UIFont.preferredFont(forTextStyle: .headline)
        titleLabel.textColor = .white
        
        contentStackView.backgroundColor = .red
    }
    
    func updateStyles() {}
    
    func setupActions() {}
}

• To customize SBUGroupChannelListModule.List, inherit from this class to create a CustomGroupChannelModule.List class.
  • The CustomGroupChannelModule.List class is configured to put a CustomChannelListFooterView in the listComponent.

class CustomGroupChannelModule {
    class List: SBUGroupChannelListModule.List {
        // You can create a CustomView based on a UIView like this and use it.
        public lazy var customFooterView = CustomChannelListFooterView()

        override func setupViews() {
            super.setupViews()

            // Creates the `customFooterView`
            self.addSubview(self.customFooterView)
        }

        override func setupLayouts() {
            super.setupLayouts()

            // Sets the `customFooterView` layout
            self.customFooterView
                .sbu_constraint(equalTo: self, leading: 0, trailing: 0, bottom: 0)
                .sbu_constraint(height: 50)
            
            // Deactivates the existing bottonConstraint of the tableView.
            if let tableViewBottomConstraint = self.constraints.first(where: {
                $0.firstAttribute == .bottom && $0.firstItem === self.tableView
            }) {
                tableViewBottomConstraint.isActive = false
            }
            
            // Set the tableView's bottonConstraint to tableViewBottomConstraint
            self.tableView.sbu_constraint_equalTo(
                bottomAnchor: self.customFooterView.topAnchor,
                bottom: 0
            )
        }
    }
}

• Before using a customized viewController class, please set it in the SBUModuleSet.

SBUModuleSet.GroupChannelListModule.ListComponent = CustomGroupChannelModule.List.self

Result

Reference

• SBISSUE-14142