UIView 或 UITableView 滚动等超可视化 iPhone 应用 [英] 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:

第一个 "cell" 为全高，而其他显示的单元格为常规大小.当用户向上滚动时，第一个单元格会慢慢动画到常规高度，而下一个单元格会慢慢变大.他们使用 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 :)

这实际上非常简单.此视图使用带有自定义 UICollectionViewLayout 的 UICollectionView.

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.

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