超视觉iPhone应用程序，如UIView或UITableView滚动 [英] Ultravisual iPhone app like UIView or UITableView scroll

问题描述

有人可以给我一个关于如何重新创建UltraVisual iPhone应用程序中使用的滚动效果的提示吗？这是一个用来说明效果的gif：

Can someone please give me a hint on how to recreate the scrolling effect used in the UltraVisual iPhone app? Here's a gif to illustrate the effect:

第一个单元格是全高，而其他显示的单元格是常规尺寸。当用户向上滚动时，第一个单元格慢慢地动画到常规高度，而下一个单元格慢慢变大。他们使用 UITableView吗？或者 UIScrollView？我不知道它是如何制作的......

The first "cell" is full height while the other displayed cells are regular sized. While the user scrolls up, the first cell slowly animates to the regular height, while the next one slowly gets bigger. Do they use an UITableView? Or an UIScrollView? I have no idea how it's made...

推荐答案

哈，你结束了我的一天！我实际上写了那个观点：）

Ha, you made my day! I actually wrote that view :)

这实际上非常简单。此视图使用UICollectionView和自定义UICollectionViewLayout。

This is actually very straightforward. This view uses UICollectionView with a custom UICollectionViewLayout.

一般原则是这样的。我组成了一个拖动间隔 - 这是每个单元格之间拖动所需的距离。此值是任意的，但会影响用户拖动切换单元格的程度。集合视图的总高度是拖动间隔*视图中的项目数。然后我将布局设置为自动分页到最近的拖动间隔（这使它具有捕捉行为）。这与coverflow的工作方式非常相似。通过这个，您可以通过将contentOffset.y除以高度来计算顶部单元格的索引。

The general principle is this. I make up a 'drag interval' – that is the required distance to drag between each cell. This value is arbitrary but affects how much the user has to drag to switch cells. The total height of the collection view is the 'drag interval' * the number of items in the view. Then I set the layout to automatically paginate to the nearest drag interval (which gives it the snapping behavior). This is very similar to how coverflow works. From this you can calculate the index of the 'top cell' by dividing the contentOffset.y by the height.

使用顶部单元格索引，您可以非常轻松地为每个单元格生成帧。顶部单元格的框架是{0，contentOffset.y，320,176}，从那里你可以计算下一个单元格框架等等。

With the 'top cell' index you can generate the frames for each cell pretty easily. The top cell's frame is { 0, contentOffset.y, 320, 176 }, and from there you can calculate the next cells frame and so forth.

然后是最后一招正在计算页面索引的插值。这基本上是当前单元格索引的小数部分。这将给出一个介于0和1之间的数字，可用于计算顶部帧和下面帧之间的插值。

Then the last trick is calculating the interpolation of the page index. This is basically the decimal part of the current cell index. This will give a number between 0 and 1 that can be used to calculate the interpolation between the top frame and the frame below.

每个'prepareLayout'计算帧的帧数屏幕上的单元格，然后在layoutAttributesForElementsInRect：中，根据生成的帧生成所有layoutAttributes。

Every 'prepareLayout' calculates the frames of the cells on screen, and then in layoutAttributesForElementsInRect:, generate all the layoutAttributes based on the generated frames.

使用此技巧可以创建各种复杂的布局。 UICollectionView可以是一个强大的野兽，但绝对需要一点点来围绕它。

Using this trick you can create all sorts of complicated layouts. UICollectionView can be a powerful beast, but definitely takes a bit to wrap your head around it.

这篇关于超视觉iPhone应用程序，如UIView或UITableView滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！