Reveal 分析App Store 页面布局

使用Reveal 。切换到精品推荐页面。点击Reveal 上右上角的刷新按钮，可以看到页面结构组成。

精品推荐页面



顶部的定时自动滚动图是由UICollectionView（SKUICollectionView）组成的，只有一个一个SKUIShelfCollectionViewCell（重用标示符SKUIShelfReuseIdentifier） ,可神奇的是这UICollectionViewCell里面的子视图竟然也有一个UICollectionView，这里面有一个或者两个SKUIShelfCollectionViewCell（重用标示符SKUIImageReuseIdentifier）（如果正好滑动到一半可以显示两张图片的时候）。如下图。



下面的UICollectionView的section header 是一个SKUISectionHeaderCollectionViewCell,重用标示符是SKUISectionHeaderReuseIdentifier，它子视图包含了SKUISectionHeaderView，它下面又包含了一个UIbutton(底下有一个SKUIAttributedString -显示全部和一个UIImageView)和一个SKUIAttributedString-写着优秀新 App。

优秀App 下面的那一行也是一个SKUIShelfCollectionViewCell 底下也是一个UICollectionView,它的cell 是SKUIVerticalLockupCollectionViewCell（SKUIVerticalLockupReuseIdentifier）后者的子视图是一个SKUIVerticalLockupView，包含一个UIImageView 和三个SKUIAttributedString。结构如下图。



接下来是一条分隔线。

它也是一个cell.SKUIPageDividerCollectionViewCell(重用SKUIPDCVCRI)，它只有一个CGRect是{15,0,315,0.5}的UIView.

接下来是优秀新游戏APP，页面如下：



这个和上面的优秀新应用一样，重用了SKUIShelfCollectionViewCell。

接下来的本周限免，银联支付这个界面。

这也是一个SKUIShelfCollectionViewCell，里面也是装了一个

UICollectionView，后者是SKUIVerticalLockupCollectionViewCell（SKUIVerticalLockupReuseIdentifier）组成这个cell 由SKUIVerticalLockupView（装着SKUIImageView）。

接下来的都一样啦。

然后就是底部了：



进一步了解App 内购项目这些行都是CollectionViewCel。

SKUIButtonCollectionViewCell。底下是SKUIStyledButton，这个button 子视图下是SKUIAttributedStringView。



底部的全部是 SKUISimpleCollectionViewCell，子视图底层是SKUIAccountButtonsView，包含两个SKUIRoundedRectButton（）和一个SKUILinkButton。

接下来是排行榜页面：



通过下列图可以发现都是SKUIHorizontalLockupCollectionViewCell本质上还是CollectionViewCell


接下来是探索界面：



这个界面居然也是CollectionViewCell



接下来的搜索页面



解析如下，这不是tableview，只是一个个按钮


更新页面



这里居然用回tableview 和前面collectionView 不同

已购项目：SKUITableViewCell

待更新项目是一个UITableViewHeaderFooterView。

待更新的cell 是ASUpdateTableViewCell（重用identifier 是2）

进去软件详情列表页面



这是一个collectionView，cell 是

SKUICardViewElementCollectionViewCell（SKUICardViewElementReuseIdentifier）

如下



SKUIHorizontalLockupView就是两张图片上面的view

点击进去后的详情页面：



分析：整体就是一个collectionView

顶部第一部分是SKUIProductLockupCollectionViewCell（SKUIProductLockupReuseIdentifier）



第二部分是SKUISegmentedControlCollectionViewCell（SKUISegmentedControlReuseIdentifier）



往下又回到熟悉的SKUIShelfCollectionViewCell里面有collectionView，SKUIVerticalLockupCollectionViewCell（SKUIVerticalLockupReuseIdentifier）组成



下面就是CollectionViewCell了没什么说的，最后说下



这个信息页面我还以为只是一个cell，结果苹果竟然是很多个小的cell如下图。