collectionview with the horizontal scroll with mul

Question

I want to develop the screen(objective C) like this :

In this there are section names :

1. New Games we Love
2. New Apps We Love

Both have horizontal scroll and independent to each other.

My question is what is the possible way i should use to implement this from below two option. Please provide me any reference sample if available:

1. Can i achieve the same behaviour withe single UICollectionView and having different section (dynamic). But the scroll for different section should be independent. Because it may possible that section 1 may have different number of items(rows) and section 2 may have different number of items (rows)
2. Do i have to take multiple collectionview programmatically and insert then in the uiscrollview (vertical scrollview). abd then define the horizontal scroll and add the items in the cell by taging the collectionview.

I had done the collectionview with the horizontal scrolling by below code at present :

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
    _collectionView=[[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    [_collectionView setDataSource:self];
    [_collectionView setDelegate:self];

    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    [_collectionView setBackgroundColor:[UIColor redColor]];

    [self.view addSubview:_collectionView];

    // Do any additional setup after loading the view, typically from a nib.
}

#pragma mark Collection View Methods

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 15;
}

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    cell.backgroundColor=[UIColor greenColor];
    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(50, 50);
}

Please help.

Answer 1

Workaround (Using UICollectionView with Swift 4)

I am facing the same issue and can't find a way to make it work with UICollectionViewFlowLayout.

If you want to use UICollectionView, but the SupplementaryView is not flexible enough, you can do this workaround:

I have a fixed UILabel in the top-left side of the CollectionView and one floating UILabel that will move to the right accordingly. If there is only one section visible the second label will be hidden

We can intercept all cells being created/dequeued in the collectionView:cellForItemAt indexPath: method, but will will give you a lot of cell frames (many of them being prepared but still offscreen, and you will have to manage what frame corresponds to what section. This can be tricky if you have multiple rows in your horizontal scrolling collection view

You need to intercept the sections and the cell frames to found the lowest x coordinate, and the most reliable way is to inspect the .visibleCells property of the collectionView. This may be a lot of iterations (depending on the number of visible cells) and I'd love to identify a more efficient way. (a delegate method, a CollectionViewCellsDidAppear kind of notification, or being able to add an Observer to the .visibleCells property (not possible given that it is read-only)

So far this works (Swift 4), but has room for improvement:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CellID", for: indexPath) as! GalleryCell
    cell.label?.text = String((itemsArrays[indexPath.section][indexPath.row]))
    var pointsDict = Dictionary<Int, CGFloat>()
    for item in collectionView.visibleCells {
        let point = item.convert(CGPoint.zero, to: self.superview)
        let section = collectionView.indexPath(for: item)!.section
        if pointsDict[section] != nil {
            if point.x < pointsDict[section]! {
                pointsDict[section] = point.x
            }
        } else {
            pointsDict[section] = point.x
        }
    }
    updateLabels(dict: pointsDict)
    return cell
}

This code will give you a Dictionary with visible sections (keys) and the lowest x coordinate for each section (value) to align the floating label2 (my label1 has a fixed x at the left of the collectionView). You can also animate, hide/show the labels accordingly

This workaround is not optimal and I will post additional information if a solution using UICollectionViewFlowLayout

Answer 2

What you are trying to do is not that difficult. I have created a prototype of what you are look at. This is how would your storyboard's view controller and its document outline look like:

Here's the code for each component

TableViewController

class TableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

@IBOutlet weak var tableView: UITableView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func numberOfSections(in tableView: UITableView) -> Int {
    return 5
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "tableCell", for: indexPath) as! MyTableViewCell

    return cell
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 160
}

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return (section%2 == 0) ? "Games we love" : "Apps we love"
}
}

MyTableViewCell

class MyTableViewCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

@IBOutlet weak var collectionView: UICollectionView!

let imageNames = ["candy_crush", "cut_the_ropes", "game_1", "little_pet_shop", "zuba"]
let gameNames  = ["Candy Crush", "Cut the Ropes", "Arbitrary Game 1", "Littlest Pet Shop", "Zuba"]

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return imageNames.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath) as! MyCollectionViewCell
    cell.imageView.image  = UIImage.init(named: imageNames[indexPath.row])
    cell.titleLabel.text  = gameNames[indexPath.row]
    cell.detailLabel.text = "Games"

    return cell
}
}

MyCollectionViewCell

class MyCollectionViewCell: UICollectionViewCell {

@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var detailLabel: UILabel!
}

This is how it looks like on the simulator