Get Visible Cell Index Path in CollectionView

Question

I am having a vertical UICollectionView I am having two indicators in the top and bottom of UICollectionView . I am having 15 cells. But only 10 is visible in the current time. If cell 0 is not visible I want to show top vertical indicator that there are some cells in the top. If cell zero is visible No Indicator needed in the top

Similarly I want to have the Bottom Indicator if the cells in Bottom is not visible in the current time.

Answer 1

I have create a sample view controller for this. hope this will help to you. I added two buttons as indicators( top and bottom). hope this will help to you.

This is how ViewController looks like

Code :

//
//  ViewController.swift
//  Assignment
//
//  Created by Anuradh Caldera on 4/16/19.
//  Copyright © 2019 All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    private var customtableView: UITableView!
    private var cellidentifier = "cellIdentifier"
    private var topButton: UIButton!
    private var bottomButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        setuptableview()
        setupButtons()
    }
}

extension ViewController {
    fileprivate func setuptableview() {
        customtableView = UITableView(frame: .zero, style: .plain)
        customtableView.translatesAutoresizingMaskIntoConstraints = false
        customtableView.register(UITableViewCell.self, forCellReuseIdentifier: cellidentifier)
        customtableView.dataSource = self
        customtableView.delegate = self
        view.addSubview(customtableView)
        let customtableviewConstraints = [customtableView.leftAnchor.constraint(equalTo: view.leftAnchor),
                                          customtableView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50),
                                          customtableView.rightAnchor.constraint(equalTo: view.rightAnchor),
                                          customtableView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -50)]
        NSLayoutConstraint.activate(customtableviewConstraints)

    }
}

extension ViewController {
    fileprivate func setupButtons() {
        topButton = UIButton()
        topButton.translatesAutoresizingMaskIntoConstraints = false
        topButton.setTitle("Go Top", for: .normal)
        topButton.backgroundColor = .purple
        topButton.setTitleColor(.white, for: .normal)
        topButton.isHidden = true
        view.addSubview(topButton)
        let topbuttonConstraints = [topButton.leftAnchor.constraint(equalTo: view.leftAnchor),
                                    topButton.topAnchor.constraint(equalTo: view.topAnchor),
                                    topButton.rightAnchor.constraint(equalTo: view.rightAnchor),
                                    topButton.heightAnchor.constraint(equalToConstant: 50)]
        NSLayoutConstraint.activate(topbuttonConstraints)

        bottomButton = UIButton()
        bottomButton.translatesAutoresizingMaskIntoConstraints = false
        bottomButton.setTitle("Go Bottom", for: .normal)
        bottomButton.backgroundColor = .purple
        bottomButton.setTitleColor(.white, for: .normal)
        bottomButton.isHidden = false
        view.addSubview(bottomButton)
        let bottomButtonConstraints = [bottomButton.leftAnchor.constraint(equalTo: view.leftAnchor),
                                       bottomButton.bottomAnchor.constraint(equalTo: view.bottomAnchor),
                                       bottomButton.rightAnchor.constraint(equalTo: view.rightAnchor),
                                       bottomButton.heightAnchor.constraint(equalToConstant: 50)]
        NSLayoutConstraint.activate(bottomButtonConstraints)
    }
}

extension ViewController: UITableViewDataSource {
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 30 // use your desired number of cells here and change other according to the cell count.
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: cellidentifier)
        cell?.textLabel?.text = "cell \(indexPath.row)"
        return cell!
    }
}


extension ViewController: UITableViewDelegate, UIScrollViewDelegate {

    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        topButton.isHidden = true
        bottomButton.isHidden = false
    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {

        let visiblerect = CGRect(origin: customtableView.contentOffset, size: customtableView.bounds.size)
        let visiblepoint = CGPoint(x: visiblerect.minX, y: visiblerect.minY)
        if let visibleindexpath = customtableView.indexPathForRow(at: visiblepoint) {
            if visibleindexpath.row == 0 {
                topButton.isHidden = true
            } else {
                topButton.isHidden = false
            }
        }

        for cell in customtableView.visibleCells {
            if let indexpath = customtableView.indexPath(for: cell) {
                print("visible cell from cell : \(indexpath.row)")
                if indexpath.row == 29 {
                    bottomButton.isHidden = true
                } else {
                    bottomButton.isHidden = false
                }
            }
        }
    }
}

I have create the UI programmatically to make it understandable. you can use either this or storyboard. cheers and have a nice day.

Answer 2

 [![you need to take one button inside a UIView][1]][1]

 @IBOutlet weak var topMoveView: ViewDesign!
 @IBOutlet weak var topMoveButton: ButtonDesign! 

override func viewWillAppear(_ animated: Bool) {

        topMoveView.isHidden = true
        topMoveButton.isHidden = true
    }

extension testViewController : UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

 func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if (testCollectionView.contentOffset.y <= 0) {
            topMoveView.isHidden = true
            topMoveButton.isHidden = true
        }else{
            topMoveView.isHidden = false
            topMoveButton.isHidden = false
        }
    }

}


@IBAction func topMoveButtonPressed(_ sender: ButtonDesign) {
        self.testCollectionView.setContentOffset(.zero, animated: true)
    }

Answer 3

let arrayOfVisibleItems = collectionView.indexPathsForVisibleItems.sorted()
let lastIndexPath = arrayOfVisibleItems.last
let firstIndexPath = arrayOfVisibleItems.first

You can then deduce your own logic to show the whatever you want to show