这交互炸了:饿了么是怎么让Image变成详情页的

晚上叫外卖,打开饿了么,发现推了一个版本,更新以后,点开了个鸡腿,哇,交互炫炸了。

本文同步自wing的地方酒馆

不过还是有槽点。我是无意中才发现可以左右滑动的。这。。。你不告诉我,我怎么知道左右可以滑。

https://github.com/githubwing/ZoomHeader

直接上图啊:

挺有意思的,对吧? 所以我就想模仿一下。下面是我做出来的效果:

额。。不过图片不是长条的哈。大概意思一样就行了。接下来将和大家分享这个效果是如何实现的。讲思路以及遇到的问题。但是不会讨论细节,具体的细节请看源码。

他是一个Activity还是两个?

相信你肯定有这样的疑问,答案是一个。你看到的中间imageview是viewpager。在Viewpager上面是一个透明的View。当然,这个Activity的背景也是透明的。

实现思路

我使用CoordinatorLayout+Behavior实现的。说实话,Behavior真心强大。。

viewpager+头部

整个实现的思路是这样的。整体布局从上到下依次是:

  • 透明View
  • viewpager
  • RecyclerView

其中透明View和Viewpager 合并成一个自定义的Header。当这个Header上移的时候,图片放大,并且RecyclerView联动上衣,从透明转向并且不透明。

所以首先要定制一个透明的可移动的HeaderView。

在onTouchEvent处理一下手势。。

将header分为三种状态:

  • 上移。则展开为详情页。
  • 下移,则恢复为viewpager。
  • 再下移,则finish Activity。

在上移的过程中,遇到了一点小挑战,这里分享下:

上移的过程中,图片需要放大。但是在做的过程中,不能使用LayoutParams实现。这里就关系到一些动画的小细节。

动画使用LayoutParams实现是一个禁忌。他会导致不停requestLayout,从而影响UI性能。

所以这里我的一个解法就是,我放大图片,不是真正的改变ImageView大小,而是去Scale图片。即使看起来变大了,他的View真正大小也不会变。

所以,有一句话叫做真亦是假、假亦是真 真真假假,你又何必当真呢?动画效果只要遵循这句话,基本上都是可以实现的。你所看到的效果都是假的。都是障眼法。View变大不是真正的变大。View悬浮不是真正的悬浮(有可能是显隐)。就像变魔术一样。。其实很简单。

接下来又遇到问题了。图片放大了,文字如何对齐? 文字的位置当然也不能真正改变。所以这里使用TranslationX实现。在图片放大的过程中,使用scale的系数,与两个端点值进行一个线性变化计算。主要文字对齐代码如下:

第二个点。就是在图片放大过程中,底部文字和按钮左右padding不能变。这也是我没有封装成一个拿来就用的View的原因(其实还是水平不够)。因为这些空间需要全部按照上方的方法进行动态计算。。所以也是比较坑爹的。。

ViewPager

拿了网上一个画廊的效果。直接

这里注意,需要改变一下view的绘制顺序,保证当前view是最后绘制处于最上层

RecyclerView

RecyclerView最开始是完全透明的。并且跟随HeaderView上移而上移,在上移的过程中渐渐显示出来。 需要监听RecyclerView滚动,当RecyclerView滚动到顶部的时候。告知Header,该恢复最初原样了。

Behavior

让header和RecyclerView关联起来的就是Behavior了。Behavior之前写过几篇介绍过了,这里就不再啰嗦。

denpendcy为HeaderView。并且监听RecyclerView的滑动。

具体的细节还是看源码吧~

如果你觉得还不错,欢迎Star
本项目地址

欢迎加入我的qq群: 425983695

这交互炸了:饿了么是怎么让Image变成详情页的》有80个想法

  1. I just want to tell you that I’m beginner to weblog and really savored you’re web-site. More than likely I’m likely to bookmark your blog . You actually come with exceptional articles. Thanks for sharing with us your website page.

  2. I just wanted to write a quick message in order to thank you for these lovely tricks you are giving on this site. My prolonged internet investigation has now been compensated with reputable tips to talk about with my close friends. I would assert that most of us website visitors actually are unequivocally lucky to dwell in a good place with very many lovely professionals with interesting ideas. I feel really blessed to have come across the weblog and look forward to plenty of more brilliant minutes reading here. Thanks a lot once more for everything.

  3. I simply needed to appreciate you once more. I am not sure the things that I could possibly have implemented in the absence of the tips provided by you over such a concern. Completely was an absolute challenging concern in my position, nevertheless spending time with the very specialised form you handled that forced me to jump over gladness. Now i’m thankful for your service and as well , hope that you are aware of a great job you are carrying out training the others using your webblog. Most likely you have never met any of us.

  4. I must express my affection for your kind-heartedness in support of persons that should have help with your question. Your very own dedication to passing the message all-around ended up being extraordinarily productive and have without exception permitted women just like me to attain their endeavors. Your invaluable guidelines implies much a person like me and especially to my fellow workers. Thank you; from each one of us.

  5. Thank you a lot for providing individuals with a very marvellous chance to read articles and blog posts from here. It’s always so pleasurable and packed with a lot of fun for me personally and my office friends to visit the blog particularly 3 times weekly to find out the new items you have got. And lastly, I am certainly pleased for the surprising tips you give. Certain 2 areas in this article are in truth the finest we have ever had.

  6. I actually wanted to make a note to be able to appreciate you for all the fantastic tips you are writing at this website. My prolonged internet research has now been paid with pleasant strategies to go over with my guests. I would mention that many of us website visitors actually are very much lucky to exist in a fantastic website with many awesome professionals with beneficial guidelines. I feel extremely privileged to have used your webpages and look forward to tons of more fabulous times reading here. Thank you once again for all the details.

  7. A lot of thanks for all your valuable hard work on this web site. Kate really likes going through internet research and it is obvious why. Almost all hear all about the lively manner you render very useful ideas through the web site and even welcome participation from some others about this concern so our simple princess is now understanding a lot of things. Enjoy the remaining portion of the year. You’re the one performing a pretty cool job.

  8. I would like to express thanks to this writer for bailing me out of such a dilemma. Just after looking out throughout the world-wide-web and coming across techniques that were not beneficial, I believed my life was well over. Existing without the presence of solutions to the problems you’ve sorted out all through this guideline is a critical case, and those which might have in a negative way damaged my entire career if I hadn’t encountered the blog. Your knowledge and kindness in maneuvering all areas was very useful. I’m not sure what I would’ve done if I hadn’t discovered such a point like this. It’s possible to at this point look ahead to my future. Thanks for your time very much for the specialized and result oriented guide. I will not hesitate to recommend the website to anyone who should have guidance about this topic.

  9. I really wanted to construct a quick note so as to express gratitude to you for some of the wonderful ideas you are placing at this site. My time consuming internet investigation has now been recognized with beneficial know-how to share with my great friends. I would admit that many of us site visitors actually are extremely fortunate to be in a fabulous place with many wonderful professionals with beneficial hints. I feel very much grateful to have come across your weblog and look forward to tons of more fun moments reading here. Thanks again for everything.

  10. I simply desired to thank you very much yet again. I’m not certain what I might have carried out in the absence of the hints shared by you directly on such a subject. Completely was a very frightening issue in my opinion, but understanding a skilled strategy you treated that made me to weep for happiness. Now i’m happy for this information and as well , wish you really know what an amazing job you are always carrying out teaching people via your websites. Most probably you’ve never got to know any of us.

  11. All absolutely free clipart is created by an identical designer. Nowadays you know the best place to locate totally free clipart, you can save a good deal of Googling! AAA Clipart is a superb site on account of the substantial selection of completely free clipart images available there.

  12. This is appropriate day to make some desires for the forthcoming future. I’ve browsed this article and if I may possibly, I want to encourage you handful important tips.

  13. I’m also commenting to make you be aware of what a helpful discovery my princess experienced visiting your web page. She picked up numerous pieces, with the inclusion of what it is like to have a wonderful helping mindset to get certain people quite simply learn about specific specialized subject areas. You truly surpassed visitors’ expectations. Thanks for offering these warm and helpful, trustworthy, edifying and in addition fun guidance on that topic to Evelyn.

  14. I simply wish to reveal to you that I am new to writing and certainly adored your website. Very likely I am likely to store your blog post . You undoubtedly have memorable article content. Admire it for share-out with us your main web post

  15. I must express my affection for your kindness supporting those people who need guidance on the theme. Your real commitment to passing the message all through ended up being particularly beneficial and has usually permitted men and women just like me to achieve their ambitions. This warm and helpful help and advice means this much to me and even further to my office colleagues. Many thanks; from everyone of us.

  16. I merely desire to inform you you that I am new to having a blog and thoroughly valued your page. Most likely I am most likely to remember your blog post . You indeed have extraordinary article information. Be Thankful For it for expressing with us the best website document

  17. whoah this weblog is fantastic i really like reading your articles. Stay up the great work! You already know, lots of persons are searching round for this info, you can help them greatly.

  18. Thanks for all your valuable effort on this website. Kim loves engaging in research and it’s simple to grasp why. Many of us learn all relating to the dynamic manner you offer effective tips and hints through this blog and in addition boost participation from other ones on the situation while our favorite girl has been discovering a lot. Enjoy the remaining portion of the new year. You are always conducting a great job.

  19. What i don’t realize is in truth how you are no longer really a lot more smartly-preferred than you might be now. You’re so intelligent. You understand thus considerably in the case of this matter, produced me individually consider it from so many varied angles. Its like men and women don’t seem to be fascinated unless it¡¦s something to accomplish with Lady gaga! Your own stuffs excellent. All the time care for it up!

  20. I like the helpful information you provide in your articles. I’ll bookmark your weblog and check again here frequently. I’m quite sure I’ll learn a lot of new stuff right here! Good luck for the next!

  21. Thank you a lot for giving everyone remarkably splendid possiblity to read critical reviews from this web site. It really is very brilliant and as well , jam-packed with a great time for me and my office fellow workers to visit the blog a minimum of 3 times per week to find out the fresh stuff you will have. Of course, we are always contented for the striking creative concepts served by you. Some 2 areas in this posting are easily the very best I have ever had.

  22. I am not positive where you are getting your info, however good topic. I must spend some time studying much more or working out more. Thanks for wonderful info I was on the lookout for this info for my mission.

  23. Unquestionably believe that which you stated. Your favorite reason seemed to be on the internet the simplest thing to be aware of. I say to you, I certainly get irked while people think about worries that they plainly do not know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side-effects , people could take a signal. Will likely be back to get more. Thanks

  24. I would like to voice my affection for your generosity giving support to folks who require help with this one study. Your special commitment to getting the solution all over appeared to be incredibly effective and have always helped guys and women much like me to arrive at their aims. Your new interesting useful information implies a great deal to me and additionally to my office workers. Many thanks; from all of us.

  25. Thanks a lot for providing individuals with a very memorable opportunity to read from this blog. It really is so sweet and stuffed with a great time for me personally and my office mates to visit your website a minimum of 3 times every week to learn the newest things you have got. And indeed, I’m at all times impressed with the excellent points served by you. Some 2 points on this page are essentially the simplest we have had.

  26. Hello there, just became aware of your blog through Google, and found that it’s truly informative. I am going to watch out for brussels. I will be grateful if you continue this in future. Many people will be benefited from your writing. Cheers!

  27. I have been browsing on-line more than 3 hours today, yet I never found any attention-grabbing article like yours. It is lovely value enough for me. In my view, if all webmasters and bloggers made just right content as you probably did, the net can be much more helpful than ever before.

  28. I am also commenting to let you understand of the magnificent experience our princess developed reading the blog. She figured out a good number of issues, with the inclusion of what it is like to possess a very effective helping character to get folks with no trouble gain knowledge of various tortuous subject areas. You really surpassed our expectations. Many thanks for providing these interesting, dependable, revealing and as well as fun guidance on the topic to Tanya.

  29. I want to express my appreciation for your generosity giving support to folks that should have help on the idea. Your personal commitment to getting the solution across turned out to be rather insightful and has usually empowered men and women just like me to attain their ambitions. The interesting tutorial can mean so much to me and a whole lot more to my fellow workers. Thank you; from each one of us.

  30. I enjoy you because of your own effort on this site. Betty really likes engaging in investigation and it is simple to grasp why. Most of us know all concerning the lively means you give helpful strategies on this blog and cause contribution from other ones about this idea while our princess is actually learning a whole lot. Have fun with the rest of the new year. You have been performing a powerful job.

  31. I just want to inform you that I am new to posting and pretty much valued your work. Very likely I am prone to save your blog post . You absolutely have stunning article blog posts. Acknowledge it for share-out with us all of your domain page

  32. Excellent read, I just passed this onto a colleague who was doing some research on that. And he just bought me lunch because I found it for him smile So let me rephrase that: Thanks for lunch!

  33. This could be the appropriate blog for wants to discover this topic. You are aware of much its virtually tough to argue along (not that I actually would want…HaHa). You definitely put a new spin on a topic thats been written about for some time. Great stuff, just wonderful!

  34. I am only writing to let you be aware of of the nice encounter my wife’s daughter experienced reading yuor web blog. She discovered many pieces, with the inclusion of what it’s like to possess an excellent teaching mood to let many others with ease fully grasp several grueling matters. You really surpassed our own expectations. I appreciate you for coming up with the warm and friendly, healthy, edifying as well as unique tips on the topic to Gloria.

  35. Needed to create you this very small observation to thank you very much as before about the wonderful strategies you have documented on this site. It is so incredibly open-handed with you to allow unhampered precisely what a few individuals could have offered for sale as an electronic book to help with making some dough for their own end, specifically since you might well have tried it if you ever desired. The basics in addition served to be a great way to realize that other people online have the same interest just as my personal own to know the truth more and more regarding this condition. I am certain there are thousands of more enjoyable periods in the future for people who scan through your blog post.

  36. Greetings here, just became aware about your blog page through Search engines like google, and have found that it’s quite educational. I’ll like if you continue these.

  37. I would like to voice my respect for your kind-heartedness for those people who have the need for help with this question. Your personal dedication to passing the solution throughout ended up being remarkably practical and has regularly allowed guys and women like me to attain their ambitions. The useful publication can mean so much a person like me and additionally to my peers. Best wishes; from everyone of us.

  38. I’m not sure where you are getting your info, but good topic. I needs to spend some time learning more or understanding more. Thanks for great information I was looking for this info for my mission.

  39. Thanks , I’ve recently been searching for info approximately this topic for a long time and yours is the greatest I have discovered so far. However, what in regards to the bottom line? Are you positive in regards to the source?

  40. I would like to express appreciation to this writer just for bailing me out of such a trouble. As a result of surfing around throughout the internet and obtaining proposals which are not helpful, I believed my life was well over. Being alive without the answers to the difficulties you have fixed by means of the short article is a serious case, and ones that would have adversely damaged my entire career if I hadn’t noticed your site. Your own personal talents and kindness in handling everything was valuable. I am not sure what I would have done if I had not encountered such a solution like this. I can at this time look forward to my future. Thanks for your time so much for your impressive and sensible help. I won’t think twice to propose the blog to anyone who needs and wants direction on this topic.

  41. Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! By the way, how can we communicate?

  42. Great ¡V I should certainly pronounce, impressed with your site. I had no trouble navigating through all the tabs as well as related information ended up being truly easy to do to access. I recently found what I hoped for before you know it in the least. Reasonably unusual. Is likely to appreciate it for those who add forums or anything, web site theme . a tones way for your customer to communicate. Nice task..

  43. We’re a group of volunteers and starting a new scheme in our community. Your site offered us with valuable info to work on. You have done a formidable job and our entire community will be grateful to you.

  44. I would like to show thanks to this writer for bailing me out of this dilemma. Right after exploring through the online world and coming across views which are not beneficial, I assumed my entire life was over. Living devoid of the strategies to the problems you have solved as a result of your main guideline is a crucial case, and those which could have negatively affected my entire career if I hadn’t discovered your site. Your main ability and kindness in controlling all things was vital. I am not sure what I would’ve done if I hadn’t encountered such a solution like this. It’s possible to now relish my future. Thanks so much for this specialized and result oriented help. I will not hesitate to endorse your web blog to any person who should get care on this situation.

  45. It’s perfect time to make some plans for the future and it’s time to be happy. I have read this post and if I could I want to suggest you few interesting things or tips. Maybe you can write next articles referring to this article. I desire to read even more things about it!

  46. I’ll immediately snatch your rss feed as I can’t to find your e-mail subscription hyperlink or newsletter service. Do you’ve any? Kindly allow me recognize in order that I may subscribe. Thanks.

发表评论

电子邮件地址不会被公开。