如何在 App Store 中创建类似特色页面的布局? [英] How to create a layout like Featured page in App Store?

问题描述

我是 iOS 开发的新手.根据我的假设，App Store 中的 Feature 页面是使用 UITableView 和 UICollectionView 的组合创建的.但是如何在理论上和代码上做到这一点?我知道这有点模糊，因为很难描述它，但我只是需要一些人来帮助我解释它.

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. 顶部，这是一个显示应用程序横幅的视图，人们可以滑动它来查看另一个横幅.
2. 中间部分，可以水平滚动的视图.(最佳新应用、最佳新游戏等).
3. 底部，从快速链接开始到底部.

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.

问题:

1.滚动指示器从根视图的顶部指南开始，这是正常的，但是:
a. 当我们向上滚动时，弹性从中间部分开始.怎么做?顶部和中间部分是分开的视图吗?但是，如果顶部和中间部分是分开的视图，如何从根视图的顶部指南开始滚动指示器?(分离视图意味着视图应该有不同的滚动指示器，除非它实际上是 UIScrollView 的子视图).
b. 当我们向下滚动它时，没有任何东西漂浮.所以看起来整个页面是单个滚动视图的子视图，但弹性是从中间部分开始的.如何在整个页面只有一个滚动指示器的情况下创建这种弹性效果?

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. 在中间部分，有几个具有水平滚动方向的集合视图.像这样创建它的最好方法是使用 UITableView 和里面有 UICollectionView 的单元格吗?看起来它是这样创建的，但是:
a. 这是最有效的方法吗?
b. 因为我第一个问题中的情况是我困惑的根源.

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. 底部部分与中间部分有不同的分隔符.中间部分有缩进，而底部没有.如果是 UITableView，我该怎么做?

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?

我的整个问题就是如何创建这样的布局.如果您不能通过提供一些示例代码来帮助我，请向我解释如何做到这一点的概念或理论.

如果整个答案只是我必须使用垂直/水平 UIScrollView 从头开始​​创建它，那很好.我只是想确保这一点，因为我试图避免处理创建手动平铺.

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.

推荐答案

好吧，我想我终于找到了自己的答案.

OK, I think I finally found my own answer.

1. 首先，我需要一个 UIScrollView 作为视图的根.然后我将 contentSize 设置为特定值.
2. 顶部可以是 UIPageController 或水平 UIScrollView.
3. 中间部分是一个 UITableView，滚动启用为 NO，单元格是静态的.静态单元格(也可以是动态单元格)将包含 UICollectionView.由于滚动被禁用，它将使用来自父 UIScrollView 的滚动.所以这就是为什么我可以在中间部分获得相同的弹性效果.
4. 底部只是 UITableView 的另一个单元格.

谢谢.

这篇关于如何在 App Store 中创建类似特色页面的布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！