分析饿了么详情页布局
2016-03-30 本文已影响1085人
李小争
饿了么详情页分析
分三层:
最底层:ViewController
上面包括背景视图:
- NVMRestaurantBackgroundView(灰色部分,显示头像,名称,费用,和优惠等)
- NVMRestaurantPromotionView(广播)
- View
NVMRestaurantBackgroundView
14580206756349.jpgNVMRestaurantPromotionView
14580207733752.jpgView
14580209838770.jpgView上面包含NVMSegmentView&NVMPanGestureScrollView.
NVMSegmentView 由3个button和一个View组成
NVMPanGestureScrollView包含3个View我猜测这3个View应该是由3各对应的控制器控制的.
其中商品对应的UIView布局
NVMFoodCategoryTableView
- 颜色:
- NVMCategoryInfoCell的组成
当选中的cell会有一个imageView
14580223339572.jpgNVMFoodListTableView
- NVMFoodListSectionHeaderView
NVMCategoryPromotionView 包含
14580268286552.jpg"特"不是一张专门的图片而是跟文本同属label
NVMFoodCell
14580276789561.jpgNVMFoodToolBar
14580289704878.jpg当如果在销售,即不显示"已售完"则点击加号按钮会显示减号按钮和数量label,左侧NVMCategoryInfoCell对应的NVMIconNumberView会显示相应的数量
14580290831295.jpg点击加号按钮之后
14580349352917.jpg