iOS app view choice - ios

Question

I want to develop an iOS app that takes all of the articles from my wordpress blog and lays them out properly. Every article has a title, an image and some content. For the first screen I want to make something like a customized UITableView, but I am not sure if this is the proper way to implement it.
http://a2.mzstatic.com/us/r30/Purple2/v4/5c/70/05/5c7005b2-ab76-33ab-e32f-5f7e861ef5e9/screen568x568.jpeg
Here is the kind of thing I want to do without the search bar. But every article would have its image layed out this way and the have its title (no need for a content preview) under the image. If I use a UITableView I will have a "separation" between all the images which is not exactly the way it is done here. Do you know how I could achieve something like this ? Would I have to create my graphical objects programmatically or is this feasible with the storyboard/interface builder tools?

Answer 1

You should use customized UITableViewCell. Here are the resources:
https://developer.apple.com/library/ios/documentation/userexperience/Conceptual/TableView_iPhone/TableViewCells/TableViewCells.html
http://www.idev101.com/code/User_Interface/UITableView/customizing.html
http://www.appcoda.com/customize-table-view-cells-for-uitableview/
You can create CustomCell class with XIB that is inherited from UITableViewCell. We will just add category in tableview class .m file in following way. I think this is the easiest method which an be applied for custom cell creation.
#interface UITableViewCell(NIB)
#property(nonatomic,readwrite,copy) NSString *reuseIdentifier;
#end
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 30;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *identifier=#"cell";
CustomCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
if(cell==nil)
{
NSLog(#"New Cell");
NSArray *nib=[[NSBundle mainBundle] loadNibNamed:#"CustomCell" owner:self options:nil];
cell=[nib objectAtIndex:0];
cell.reuseIdentifier=identifier;
}else{
NSLog(#"Reuse Cell");
}
cell.lbltitle.text=[NSString stringWithFormat:#"Level %d",indexPath.row];
id num=[_arrslidervalues objectAtIndex:indexPath.row];
cell.slider.value=[num floatValue];
return cell;
}
#end

Answer 2

For this kind of thing, UICollectionView is the best. Exact same delegate as UITableView, just more flexible and configurable. You can have square cells, you can set cell width, you can scroll left or right etc. It is used in the screenshot above, and instagram etc. Here's how to implement it.
In .h :
#interface MyViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
In .m :
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
UICollectionView *myCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 320, 480) collectionViewLayout:flowLayout];
[myCollectionView setDelegate:self];
[myCollectionView setDataSource:self];
[myCollectionView setIndicatorStyle:UIScrollViewIndicatorStyleBlack];
[myCollectionView setScrollIndicatorInsets:UIEdgeInsetsMake(0, 0, 0, -4)];
[myCollectionView setBackgroundColor:[UIColor whiteColor]];
[myCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"CustomCell"];
[self.view addSubview:myCollectionView];
Then for the delegate methods:
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;