UICollectionView Assistance

Question

I am in the process of creating an App to take care of Maintenance Planning for Harley Davidson enthusiasts. The planned target is the iPad series at this point.

I wish do display a grid that shows detail for each fuel purchase. The following graphic hopefully shows what I am trying to achieve.

To get this, I’m using the UICollectionView as I don’t think there is another View that gives me what I am after. The code below illustrates how I have done this – but I believe it’s a pretty chunky way of doing it:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    FuelCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor lightTextColor];
    cell.cellLabel.text = [NSString stringWithFormat:@"  %@               %@                %@               %@",self.fuelDetailsForSelectedBike[indexPath.row][0],self.fuelDetailsForSelectedBike[indexPath.row][1],self.fuelDetailsForSelectedBike[indexPath.row][2],self.fuelDetailsForSelectedBike[indexPath.row][3]];
    return cell;
}

What I would prefer is have a cell for each piece of information but unsure how I would achieve this using the UICollectionView.

Answer 1

You already have created a custom cell FuelCollectionViewCell which is a good starting point. Probably you have a prototype cell in your Storyboard with subclass FuelCollectionViewCell right?

In this cell, add 4 UILabel aligned in one row as your design and 'link' them to your subclass .h file with a simple drag+alt (as you've done with cellLabel).

And update your cellForItemAtIndexPath method with something like:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    FuelCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    cell.backgroundColor    = [UIColor lightTextColor];
    cell.dateLabel.text     = self.fuelDetailsForSelectedBike[indexPath.row][0];
    cell.litresLabel.text   = self.fuelDetailsForSelectedBike[indexPath.row][1];
    cell.distanceLabel.text = self.fuelDetailsForSelectedBike[indexPath.row][2];
    cell.costLabel.text     = self.fuelDetailsForSelectedBike[indexPath.row][3];
    return cell;
}