Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a layout like Featured page in App Store?

I'm new in iOS development. Based on my assumption, Feature page in App Store was created using a combination of UITableView and UICollectionView. But how to do that in theory and code? I know it's a bit vague, because it's quite hard to describe it, but I just need some people to help me explain it.

For this case I will try to use these naming:

1. Top section, it's a view which showing banners of apps, people can swipe it to view another banner.
2. Middle section, views which can be scrolled horizontally. (Best New Apps, Best New Games, etc).
3. Bottom section, starts from Quick Links to the bottom.

Questions:

1. The scroll indicator is starts from the root view's top guide, that's normal, but:
a. When we scroll it up, the bounciness is start from the middle section. How to do that? Is the top section and middle section is a separated view? But how can the scroll indicator is started from the root view's top guide if top and middle section is a separated view? (Separated view means that the views should have different scroll indicator unless it's actually subviews of UIScrollView).
b. When we scroll it down, there is nothing that floating. So it looks like that the whole page is a subview of a single scroll view but the bounciness is starts from the middle section. How to create that bounciness effect while only have one scroll indicator for the whole page?

2. In the middle section, there's a several collection view that has horizontal scroll direction. Is it the best way to create it like that is to use UITableView with cell that has UICollectionView inside it? It looks like it was created that way, but:
a. Is it the most efficient way to do that?
b. Because of the case in my first question is my source of confusion.

3. The bottoms section has a different separator from the middle section. The middle section has indentation while the bottom section doesn't. How can I do that if the case is it's a UITableView?

My whole question is just how to create a layout like that. If you cannot help me by providing me some sample codes that's fine, please just explain me the concept or theory of how to do that.

If the whole answer is just I have to create it using vertical/horizontal UIScrollView from scratch that's fine. I just want to make sure of that since I tried to avoid dealing with creating manual tiling.

like image 433
user3620251 Avatar asked May 09 '14 12:05

user3620251


2 Answers

OK, I think I finally found my own answer.

  1. First, I need a UIScrollView to be root of the view. Then I set the contentSize to be a specific value.
  2. The top section can be a UIPageController or a horizontal UIScrollView.
  3. The middle section is a UITableView with scrollEnabled to NO and cells are static. The static cells (could also be dynamic cells) will contains UICollectionView. Since the scroll is disable, it will use the scroll from the parent UIScrollView. So that's why I can get the same bouncy effect in the middle section.
  4. The bottom section is just another cell of a UITableView.

Thanks.

like image 119
user3620251 Avatar answered Nov 17 '22 00:11

user3620251


This might help you with implementing UICollectionViews in your UITableViewCell: http://ashfurrow.com/blog/putting-a-uicollectionview-in-a-uitableviewcell

To make the first cell "float" in the TableView you could make sure that cell never goes out of screen in scrollViewDidScroll

like image 36
Lord Vermillion Avatar answered Nov 16 '22 23:11

Lord Vermillion