CODEWITHSUNDEEP
iosswiftuicollectionview
rednaxela
rednaxela

Reputation: 791

How do I attach a UI View below the elementKindSectionHeader of a Collection View?

I have created a Collection View and have made good use of the UICollectionView.elementKindSectionHeader by registering a Header class. See my code below:

override func viewDidLoad() {
        super.viewDidLoad()           
        setupCollectionViewLayout()
        setupCollectionView()
        setupMenuBar()
    }

    var headerView: HeaderView?

    fileprivate func setupCollectionViewLayout() {
        if let layout = collectionViewLayout as? UICollectionViewFlowLayout {
            layout.sectionInset = .init(top: padding, left: padding, bottom: padding, right: padding)
        }
    }

    fileprivate func setupCollectionView() {
        self.collectionView.backgroundColor = .white

        //For iPhone X's make sure it doesn't cover the swipe bar at bottom
        self.collectionView.contentInsetAdjustmentBehavior = .never

        // Register cell classes
        self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellId)

        self.collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: headerId)

        self.collectionView.contentInset = UIEdgeInsets(top: 60, left: 0, bottom: 0, right: 0)
        self.collectionView?.scrollIndicatorInsets = UIEdgeInsets(top: 60, left: 0, bottom: 0, right: 0)
    }

which gives me a nice Header like: enter image description here

But now I want a menu bar beneath the header, but above the main section of the collection view. I have created a MenuBar with the correct dimensions but I can't think what to constrain it to? See my code below to add a Menu Bar currently:

let menuBar: MenuBar = {
    let mb = MenuBar()
    return mb
}()
fileprivate func setupMenuBar() {
    view.addSubview(menuBar)
    view.addConstraintWithFormat(format: "H:|[v0]|", views: menuBar)
    view.addConstraintWithFormat(format: "V:|-400-[v0(50)]|", views: menuBar)
}

..but this literally just pins the bar 400px down the entire view and does not move if you scroll up or down

enter image description here

Does anybody have an idea for this?

Upvotes: 0

Views: 139

Answers (1)

Gustavo Vollbrecht
Gustavo Vollbrecht

Reputation: 3256

if you want this menu bar to move with the UITableView scrolling, it should be placed inside the header, below the "main header".

This approach abstraction is considering your header + menu bar as just one header.

Upvotes: 1

Related Questions