search

Home  >  Q&A  >  body text

饿了么的ios客户端,商家顶栏的实现?

黄色部分的顶栏,下拉可以显示部分信息,上推的时候可以渐变消失,直到变成一个navigation controller的样式,同时ui的控件也会改变。

请问这个大概是如何实现的? 有思路就行。

高洛峰高洛峰2887 days ago517

reply all(2)I'll reply

  • 怪我咯

    怪我咯2017-04-17 17:57:38

    I didn’t do this part, but I’m here to show off.
    First of all, there are two NavigationBars, and the fading changes you see are not the same. After knowing this basic, you should be able to understand more things easily. The hierarchy of View is as follows:

    <ParentViewController.View>
       | <Container> //UIView
       |    | <SegmentView>
       |    | <ScrollView> //仅左右滑动(pagingEnabled)
       |    |    | <ChildViewController1.View>
       |    |    |    | <CategoryListView>
       |    |    |    | <FoodListView>
       |    |    | <ChildViewController2.View>
       |    |    |    | <RatingListView>
       |    |    | <ChildViewController3.View>
       |    |    |    | <SummaryListView>
       

    SegmentView is the view with the merchant icon that changes when you see it. ScrollView contains three ViewControllers: "products, reviews, merchants".
    The next step is the more difficult part: if the tableview of the product must be slidable, and the entire scrollview must slide upward appropriately and appropriately, this gesture is difficult to control. You can compare the corresponding interfaces of Meituan and Baidu. You should be able to find that the experience is different from Ele.me.
    What is the appropriate time: When the scrollview does not reach the top, the tableview will not move. When it reaches the top, the tableview should take over the scrollview speed of the scrollview and continue to scroll. Otherwise, it will pause and lead to a poor experience.

    The fading of the top segmentview you are concerned about changes through the overall position of the scrollview, which is just a simple relationship.

    Hidden behind the scenes is the connection between gestures and speeds of scrollview and tableview. So, our team members did a little hack on the tableview, turned off the original gestures, used our custom gestures to control it, and used UIDynamic to simulate the scrolling of the tableview, and finally let the tableview connect its acceleration when the scrollview reaches the top. scroll. Some parameters were fine-tuned to achieve seamless connection.
    That’s it.

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 17:57:38

    • (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
      Monitoring the position of tableview

    reply
    0
  • Cancelreply