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

[tezpark]

Summary

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

Guide & Snippet

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

• Create a CustomChannelListHeaderView 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 CustomChannelListHeaderView: 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 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 listComponent.

class CustomGroupChannelModule {
    class List: SBUGroupChannelListModule.List {
        // You can create a CustomView based on a UIView like this and use it.
        public lazy var customHeaderView = CustomChannelListHeaderView()
        
        override func setupViews() {
            super.setupViews()
            
            // Creates the `customHeaderView`
            self.addSubview(self.customHeaderView)
        }
        
        override func setupLayouts() {
            super.setupLayouts()
            
            // Sets the `customHeaderView` layout
            self.customHeaderView
                .sbu_constraint(equalTo: self, leading: 0, trailing: 0, top: 0)
                .sbu_constraint(height: 50)
            
            // Deactivates the existing topConstraint of the tableView.
            if let tableViewTopConstraint = self.constraints.first(where: {
                $0.firstAttribute == .top && $0.firstItem === self.tableView
            }) {
                tableViewTopConstraint.isActive = false
            }
            
            // Set the tableView's topConstraint to customHeaderView
            self.tableView.sbu_constraint_equalTo(
                topAnchor: self.customHeaderView.bottomAnchor,
                top: 0
            )
        }
    }
}

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

SBUModuleSet.GroupChannelListModule.ListComponent = CustomGroupChannelModule.List.self

Result

Reference