How i can use uicollectionview for displaying data in tables - ios

Question

I am new in ios development .I have searched many tutorials that are using framework for data-grid with License key.I want to show data like this table at given link . How i can use uicollection view to display tabular data like in link ?
In code in gridview.h file is :
import
#interface GridViewCell : UITableViewCell
#property (nonatomic, strong) UIButton *column1;
#property (nonatomic, strong) UIButton *column2;
#property (nonatomic, strong) UIButton *column3;
#end
The code in gridview.m file is :
//
// GridViewCell.m
// SQLite3DBSample
//
// Created by Dezine House on 22/12/2014.
// Copyright (c) 2014 Bilal ARSLAN. All rights reserved.
//
#define CELL_WIDTH 100
#define CELL_HEIGHT 80
#import "GridViewCell.h"
#implementation GridViewCell
#synthesize column1, column2, column3;
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// Initialization code
column1 = [[UIButton alloc] initWithFrame:CGRectMake(5, 5, CELL_WIDTH, CELL_HEIGHT)];
[self addSubview:column1];
column2 = [[UIButton alloc] initWithFrame:CGRectMake(CELL_WIDTH+ 10, 5, CELL_WIDTH, CELL_HEIGHT)];
[self addSubview:column2];
column3 = [[UIButton alloc] initWithFrame:CGRectMake(CELL_WIDTH + CELL_WIDTH + 15, 5, CELL_WIDTH, CELL_HEIGHT)];
[self addSubview:column3];
}
return self;
}
- (void)awakeFromNib
{
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
GridViewCell *cell = (GridViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[GridViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
[cell.column1 setBackgroundColor:[UIColor blackColor]];
[cell.column2 setBackgroundColor:[UIColor blackColor]];
[cell.column3 setBackgroundColor:[UIColor blackColor]];
return cell;
}
#end

Answer 1

For creating the grid of n X m use the collectionView delegates
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return n;
}
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return m;
}
Then for creating them of specific size use the delegate method of CollectionView which returns the layout for each cell in collectionView
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
//for bigger cell
if (indexPath.row == 0) {
return CGSizeMake(120, 44);
}
//for smaller ones
else{
return CGSizeMake(44, 44);
}
}
Hope you know how to use collectionView in ios

Answer 2

I've been working on doing something like this and while I'm not finished tinkering with it, it isn't that hard to do. It may be cleanest to subclass the UICollectionViewCell and the UICollectionViewFlowLayout, but I've not found it necessary as yet. My biggest problem thus far is getting cell borders to look like I want them to. I envision that it may be necessary to subclass one or both of these but thus far it isn't requiring that much code in my VC so I've not done it yet.
In addition to the usual UICollectionView data source/delegate, you want to add UICollectionViewDelegateFlowLayout. In my case, I made each section in my data correspond with a row in the table and each "row" in the indexPath to coincide with a column in the table. It seems to work. Then, implement the following method to give you the size of the cell for each column in a section (looking at the indexPath.row value to determine which column you're working with):
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
In your cellForItemAtIndexPath for my application it was simple enough to compute the column number as follows (my table has six columns):
NSInteger col = indexPath.row % 6;
So, col==0 is the first column, col==5 is the sixth column. Then, create a label to put in the cell:
UILabel *label = [[UILabel alloc] initWithFrame:cell.bounds;
Fill in the label as required and add it as a subview of the cell's content view.
I have a good deal of tweaking to do, but it is reasonably close after just a couple hours of looking around.