What is the best way to do a page like the album page of iTunes?

Question

I am trying to imitate the album page of iTunes using uitableviewcontroller, but then I think I might have been going in a wrong direction.

My plan is to do something in tableView: cellForRowAtIndexPath:. When indexPath.row == 0, I do the description of album (i.e. the upper part), else I do the description of songs (i.e. the lower part).

Here is my code:

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (!cell){
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}

if (indexPath.row == 0 ){
    CGRect imageFrame = CGRectMake(5, 5, 69, 69);

    UIImageView *coverFram = [[UIImageView alloc] initWithFrame:imageFrame];
    NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"cover" ofType:@"jpg"];
    coverFram.image = [[UIImage alloc] initWithContentsOfFile:imagePath];

    [cell.contentView addSubview:coverFram];
}else{
    NSInteger adjustedIndexPathRow = indexPath.row - 1;

    cell.textLabel.text = [self.cellRow objectAtIndex:adjustedIndexPathRow];
}

return cell;
}

There are two places That I don't have simple idea to implement it:

Firstly, in the album page of iTunes, there is a segmented control (see the image). When I press other segment, say "review", the upper part remains there while the whole lower parts has been changed.

Secondly, I don't know how to close the gap show in the image (circle in red).

So, I think may be there are some other smarter(or easier) way to do it. Like, is it possible to divide the page into two part: then the do the upper part by a view; and do the lower part by a table view? (just my guess)

Please advice. Thank you.

enter image description here

It looks to me that the top most view with the image is a table header view (which has a horizontally scrolling scroll view or maybe a collection view in it). The segmented control appears to be in a section header, since it sticks to the top of the screen when you scroll. When you click one of the buttons, you just change the content that the table view displays. — rdelmar, Nov 25 '13 at 06:19

score 2 · Accepted Answer · answered Nov 25 '13 at 06:22

2

Your assumption is perfectly right. That is the way to go in your case. Refer to the following image.

enter image description here

Construct the top part of the view containing the album cover, it's details and the segmented control. The bottom part of the view will be reserved for views which will be loaded by instantiating other view controllers based on selected segment.

answered Nov 25 '13 at 06:22

Suhas

1,500
11
15

Thanks for letting me know the correct direction. I will appreciate it if you can also provide me some link/sample_code about 'subviewing' a table view, as I have no idea how to construct a table other than dragging a uitableviewcontroller out and 'answering' the required protocol function. – Newbie Nov 25 '13 at 06:38
1

Again you are on the right track! The 1st step is to Drag a UITableViewController and respond to datasource and delegate methods. The next step is called viewContainment, this stackoverflow thread has wealth of information in it http://stackoverflow.com/questions/8379759/how-does-view-controller-containment-work-in-ios-5 – Suhas Nov 25 '13 at 06:46

score 1 · Answer 2 · answered Nov 25 '13 at 06:17

1

You can remove this white space by two way, in ios 7 set separatorInset in UITableView

1) set by Pragmatically

table.separatorInset=UIEdgeInsetsZero;

2) Or u can do this way

Screen Shot

answered Nov 25 '13 at 06:17

Jignesh Mayani

6,937
1
20
36

1

Thanks for your suggestion. For those who will read this post, if you want to close the 'gap' of the first row only (in my case), use cell.separatorInset = UIEdgeInsetsZero instead. – Newbie Nov 25 '13 at 06:42

score 1 · Answer 3 · answered Nov 25 '13 at 06:17

Your guess is right. The easier way(probably the right way) is to divide the entire view into two parts. The upper part consist of an image view, segmented control whatever else. and bottom part can have a table view. Now depending upon the selection of a segment in the segmented control you can easly reload the table view with appropraite content

What is the best way to do a page like the album page of iTunes?

3 Answers3