分析饿了么详情页布局

饿了么详情页分析

分三层:
最底层:ViewController

上面包括背景视图:

  1. NVMRestaurantBackgroundView(灰色部分,显示头像,名称,费用,和优惠等)
  2. NVMRestaurantPromotionView(广播)
  3. View

NVMRestaurantBackgroundView

14580206756349.jpg

NVMRestaurantPromotionView

14580207733752.jpg

View

14580209838770.jpg

View上面包含NVMSegmentView&NVMPanGestureScrollView.
NVMSegmentView 由3个button和一个View组成
NVMPanGestureScrollView包含3个View我猜测这3个View应该是由3各对应的控制器控制的.

其中商品对应的UIView布局

NVMFoodCategoryTableView

  1. 颜色:
14580216404590.jpg
  1. NVMCategoryInfoCell的组成
14580222336606.jpg

当选中的cell会有一个imageView

14580223339572.jpg

NVMFoodListTableView

  1. NVMFoodListSectionHeaderView
14580266448815.jpg

NVMCategoryPromotionView 包含

14580268286552.jpg

"特"不是一张专门的图片而是跟文本同属label

NVMFoodCell

14580276789561.jpg

NVMFoodToolBar

14580289704878.jpg

当如果在销售,即不显示"已售完"则点击加号按钮会显示减号按钮和数量label,左侧NVMCategoryInfoCell对应的NVMIconNumberView会显示相应的数量

14580290831295.jpg

点击加号按钮之后

14580349352917.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容