How can I use UICollectionView to create a spreadsheet like layout where each row displays properties of a single object.
Example:
Customer Id First Name Last Name Social Address Phone
Here is what I came up with using UITableView:
funds = [[NSMutableArray alloc] init];
columnNames = [NSArray arrayWithObjects:@"fundNumber",@"fundName",@"unitPrice",@"fundBalance",@"percentageOfAccountValue",@"futureContributionAllocation", nil];
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"FundCell"];
Fund *fund = [funds objectAtIndex:[indexPath row]];
for(NSString *columnName in columnNames)
{
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(x, 0, 100, 44)];
label.backgroundColor = [UIColor clearColor];
label.text = [fund valueForKey:columnName];
x += label.bounds.size.width;
[cell addSubview:label];
}
x = 0;
return cell;
}
And here is the output:
I'm not sure if you'd be able to adapt the standard flow layout - you might need to create your own UICollectionViewLayout
class - but this should be fairly straightforward to do.
Like a table view, your collection view can have sections and items: each row of your spreadsheet could be a section, and then the individual elements (Last Name, Social, Address, etc) could be items.
If you want true spreadsheet like functionality (i.e, you can scroll both horizontally and vertically) then you're going to have to build your own layout class. Otherwise you may be able to adapt the existing flow layout, although arguably if you don't need to scroll you could basically achieve what you're after with a table view instead.
You can customize the layout of a UICollectionViewController
using the UICollectionViewFlowLayout
The idea behind what you want to do is this:
each column can be a section
each title will be the header for each section.
For your example:
– numberOfSectionsInCollectionView:
= 6 (Customer Id, First Name, Last Name, Social, Address, Phone)
– collectionView:numberOfItemsInSection:
= number of rows
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With