分析饿了么详情页布局

作者: 李小争 | 来源:发表于2016-03-30 14:27 被阅读1085次

    饿了么详情页分析

    分三层:
    最底层: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

    相关文章

      网友评论

        本文标题:分析饿了么详情页布局

        本文链接:https://www.haomeiwen.com/subject/nhtelttx.html