Reveal 分析App Store 页面布局

最新推荐文章于 2024-06-04 19:06:36 发布

sanjunsheng

最新推荐文章于 2024-06-04 19:06:36 发布

阅读量1.5k

点赞数

分类专栏： iOS 学习文章标签： iOS

本文链接：https://blog.csdn.net/sanjunsheng/article/details/49310269

版权

本文详细介绍了如何使用Reveal工具分析App Store的页面布局，从精品推荐到各个板块，如优秀新App、本周限免、排行榜等。每个页面都由复杂的UICollectionView构成，包含多种自定义Cell，如SKUIShelfCollectionViewCell、SKUIVerticalLockupCollectionViewCell等，内部还有嵌套的UICollectionView和各种自定义视图，如SKUISectionHeaderCollectionViewCell、SKUIVerticalLockupView等。文章揭示了Apple在设计和构建App Store界面时的精细程度。

摘要由CSDN通过智能技术生成

使用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（SKUIVerticalLo