How to add custom header view on channel list? (UITableViewHeaderFooterView ver.)

[tezpark]

Summary

• How to add custom header view on channel list? (UITableViewHeaderFooterView ver.)

Guide & Snippet

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

• Create a CustomChannelListHeaderView class that inherits from UITableViewHeaderFooterView.

  • 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 CustomChannelListHeaderView: UITableViewHeaderFooterView, SBUViewLifeCycle {
    let titleLabel = UILabel()
    let contentStackView = SBUStackView(axis: .horizontal, spacing: 8)
        
    // MARK: - Apple UIKit Lifecycle
    override init(reuseIdentifier: String?) {
        super.init(reuseIdentifier: reuseIdentifier)
        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 header"
        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 CustomChannelListHeaderView in the tableView header.

class CustomGroupChannelModule {
    class List: SBUGroupChannelListModule.List {
        override func configure(
            delegate: SBUGroupChannelListModuleListDelegate,
            dataSource: SBUGroupChannelListModuleListDataSource,
            theme: SBUGroupChannelListTheme
        ) {
            super.configure(delegate: delegate, dataSource: dataSource, theme: theme)
            
            // 1. register header
            tableView.register(CustomChannelListHeaderView.self, forHeaderFooterViewReuseIdentifier: "customHeader")
        }
        
        // 2. Implement `viewForHeaderInSection` delegate method
        override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
            guard let view = tableView.dequeueReusableHeaderFooterView(withIdentifier: "customHeader")
            else { return nil }
            return view
        }
        
        // 3. Implement `heightForHeaderInSection` delegate method
        override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
            return 64 // HEIGHT_OF_HEADER
        }
    }
}

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

SBUModuleSet.GroupChannelListModule.ListComponent = CustomGroupChannelModule.List.self

Result

Reference