这交互炸了(二):爱范儿是如何让详情页缩小为横向列表的

本文同步自wing的地方酒馆

写在前面:
写这段话的时候,已经是夜里3点了。别问我为什么这么拼,一切为了与你分享干货!!!! 不要太感动,擦擦眼泪继续往下看。

本开源库链接 ExpandableViewpager

一直想写《交互炸了》第二篇,但是好像没什么好的交互。就在昨晚11点,小马同学提出 爱范儿 里面的交互挺炸的。我一下,果然很赞。于是连夜写代码,封装成库,再撸文章。只为在周一早7:00能献给爱技术的你。。

《交互炸了》或许是一系列高端特效教程, 文中会介绍一些比较炫酷的特效以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打开,特效将很简单实现。先来看看今天要实现的效果:

乍一看,哇塞很炫酷。到底怎么实现的,根本没有思路。。 其实很简单,当然为了方便,我已经把他封装成一个库。链接如下:https://github.com/githubwing/ExpandableViewpager

先来看看库如何使用:

在gradle添加依赖,

其次将ExpandableViewpager添加到布局。

ExpandViewPager提供了Viewpager常用方法以外。还有几个额外的方法:

只需要在代码中进行这几样设置就可以实现如图效果了! 怎么样! 很方便吧~

如何实现

个人感觉特效跟变魔术差不多。反正都是障眼法,只要摸清了套路,想要实现或者改进也都不是什么难事了。这里把我自己摸索的套路告诉大家。

首先,在交互炸了第一篇,有朋友说共享元素可以实现,并且贴给我了几个项目。我在这里想说一下,共享元素是不可以的。因为共享元素不能全程触摸完成由状态一到状态二的转变。

再说说第二篇里的效果,其实跟第一篇很像,只不过是没了手势处理。那他是怎么实现的呢?嘿嘿,原理特别简单,我都不好意思写了。。 这就好比魔术,没揭穿前高深莫测,揭穿之后就好像智商被侮辱。。 其实只要摸清套路,这些都不难。废话不说了 直接看怎么实现的:

整体界面其实是一个background view + 一个Viewpager。 这个Viewpager 展开就是正常情况。如果变小,其实就是把Viewpager缩放了~~ 只要clipChildren一下,再Scale一下就可以了。。 就是这么简单。。我都不好意思写了。。。 核心的代码如下:

改变一下scale 然后改变一下Y的高度。。没了。。

如果你觉得还不错,请star一下,这是对我的最好鼓励~~

https://github.com/githubwing/ExpandableViewpager

欢迎加入我的Android讨论群:425983695

这交互炸了(二):爱范儿是如何让详情页缩小为横向列表的》有66个想法

  1. I simply want to mention I am just new to weblog and absolutely savored this web-site. Probably I’m want to bookmark your site . You surely have excellent article content. Appreciate it for sharing your blog.

  2. I want to convey my admiration for your kind-heartedness in support of people that have the need for help with this particular theme. Your real commitment to getting the solution along came to be quite good and have without exception helped ladies just like me to get to their dreams. Your new important help and advice implies so much to me and a whole lot more to my office workers. Thanks a lot; from everyone of us.

  3. My spouse and i got quite happy John could do his reports via the ideas he grabbed in your web pages. It is now and again perplexing to simply be handing out information which often most people could have been trying to sell. So we consider we’ve got the website owner to appreciate for that. The type of illustrations you made, the straightforward blog menu, the friendships your site aid to instill – it’s mostly fantastic, and it’s really letting our son in addition to us reckon that that subject is fun, which is seriously important. Thank you for all the pieces!

  4. I wish to voice my love for your generosity for people that really want assistance with that study. Your real dedication to passing the solution all through had been really beneficial and has always encouraged guys like me to achieve their desired goals. Your entire informative hints and tips denotes a great deal to me and still more to my colleagues. Thanks a ton; from each one of us.

  5. I must point out my gratitude for your generosity for women who must have help with that idea. Your special dedication to getting the message all around appeared to be incredibly effective and has helped ladies like me to reach their objectives. Your own useful help implies this much a person like me and substantially more to my peers. Thanks a lot; from everyone of us.

  6. I wanted to post a remark to say thanks to you for these amazing pointers you are giving out on this website. My prolonged internet look up has at the end of the day been rewarded with pleasant strategies to go over with my family. I ‘d assume that we website visitors actually are quite lucky to exist in a fabulous community with so many awesome people with helpful tricks. I feel extremely lucky to have come across your entire web page and look forward to really more thrilling minutes reading here. Thank you once again for all the details.

  7. My spouse and i were joyous when Michael managed to conclude his studies through the precious recommendations he had from your site. It’s not at all simplistic just to always be giving freely tips and tricks which often other folks may have been making money from. We really recognize we have the blog owner to give thanks to for that. The main explanations you have made, the simple website menu, the relationships you make it possible to instill – it’s got mostly astounding, and it is making our son in addition to our family do think that topic is enjoyable, which is certainly pretty important. Thanks for all!

  8. I really wanted to post a brief message in order to thank you for all the wonderful recommendations you are placing here. My time-consuming internet lookup has at the end of the day been compensated with high-quality information to exchange with my companions. I ‘d repeat that many of us readers actually are definitely lucky to exist in a fantastic site with many lovely individuals with interesting tips. I feel extremely lucky to have used your webpage and look forward to many more cool moments reading here. Thanks a lot again for all the details.

  9. I needed to draft you this bit of observation to thank you very much yet again considering the gorgeous views you’ve featured on this site. This is quite seriously generous of people like you to supply publicly all a lot of folks would’ve advertised as an e-book to end up making some bucks on their own, and in particular considering that you could have done it in case you considered necessary. Those techniques additionally acted as a fantastic way to be certain that other people online have the same zeal much like my own to understand much more when considering this matter. Certainly there are numerous more fun sessions up front for individuals that check out your blog post.

  10. I definitely wanted to construct a brief remark to be able to appreciate you for those lovely hints you are giving out at this website. My time-consuming internet search has finally been paid with really good points to write about with my guests. I ‘d mention that we readers actually are undoubtedly blessed to exist in a fantastic place with so many lovely professionals with good tactics. I feel very fortunate to have used the site and look forward to plenty of more fabulous minutes reading here. Thanks once again for all the details.

  11. Thank you so much for giving everyone remarkably marvellous chance to read articles and blog posts from this website. It is usually so ideal plus jam-packed with amusement for me and my office fellow workers to visit your site particularly thrice in 7 days to find out the latest tips you have got. And lastly, I’m also certainly motivated with all the awesome opinions you give. Selected 4 areas in this article are unquestionably the simplest we’ve ever had.

  12. My partner and I stumbled over here coming from a different web address and thought I should check things out. I like what I see so now i’m following you. Look forward to looking into your web page for a second time.

  13. I merely want to notify you that I am new to blog posting and genuinely enjoyed your work. Likely I am probably to remember your blog post . You absolutely have outstanding article materials. Admire it for share-out with us your main blog document

  14. I needed to compose you one very small remark in order to say thank you again relating to the lovely guidelines you have contributed in this article. This has been tremendously open-handed of people like you to supply publicly what a few individuals could have offered for sale for an ebook to generate some bucks on their own, even more so now that you could possibly have done it in the event you considered necessary. The techniques in addition worked like the good way to be certain that other people have the same passion really like my very own to know a good deal more around this matter. I believe there are lots of more pleasant moments ahead for those who looked over your blog post.

  15. Be sure that you have Silhouette Studio Designer Edition running and adhere to these easy actions to start! While it is crucial to have Silhouette Studio Designer Edition to import SVGs there is yet another step you’ve got to take to receive them actually cut. I am aware I’ve missed lots of nice anime collection, so should you have any suggestion, don’t hesitate to share about it in the comment section!

  16. I just desire to show you that I am new to writing and pretty much loved your post. Likely I am most likely to bookmark your blog post . You certainly have fabulous article information. Acknowledge it for telling with us your main internet article

  17. My husband and i were now relieved that Michael managed to round up his research out of the ideas he received from your very own web site. It’s not at all simplistic to simply happen to be giving out key points which usually people may have been making money from. And now we fully understand we have you to give thanks to for that. Those illustrations you made, the simple website navigation, the friendships you will give support to create – it is all awesome, and it’s really leading our son in addition to the family know that this issue is satisfying, and that is highly serious. Thanks for everything!

  18. I wish to get across my appreciation for your kind-heartedness supporting folks who have the need for guidance on this subject. Your real commitment to getting the solution around had been definitely important and has truly permitted most people like me to achieve their targets. Your entire interesting help entails this much to me and somewhat more to my peers. Thanks a lot; from each one of us.

  19. certainly like your web site however you need to take a look at the spelling on several of your posts. Many of them are rife with spelling issues and I find it very troublesome to inform the reality then again I will certainly come back again.

  20. I am just commenting to let you be aware of of the exceptional discovery my cousin’s princess had checking the blog. She realized a wide variety of things, not to mention how it is like to have an ideal helping style to have most people effortlessly know a variety of specialized subject areas. You actually surpassed visitors’ desires. Thanks for showing such priceless, healthy, revealing and also cool guidance on this topic to Gloria.

  21. I not to mention my friends have already been looking at the great helpful hints found on the blog while quickly I had a terrible feeling I never expressed respect to the web blog owner for those strategies. All of the young boys ended up as a consequence passionate to see them and have now simply been using them. Thanks for actually being quite helpful as well as for pick out this sort of cool issues most people are really desirous to be informed on. My honest regret for not saying thanks to sooner.

  22. I do believe all the concepts you’ve offered in your post. They are really convincing and will certainly work. Still, the posts are too quick for novices. May just you please lengthen them a bit from subsequent time? Thank you for the post.

  23. I am only commenting to make you be aware of what a remarkable discovery my friend’s princess experienced visiting your web page. She came to find a wide variety of pieces, most notably how it is like to possess an incredible teaching heart to make the others without hassle know just exactly several specialized issues. You truly surpassed people’s expected results. Many thanks for showing these practical, healthy, explanatory and as well as cool tips about the topic to Mary.

  24. I was just seeking this information for a while. After six hours of continuous Googleing, at last I got it in your web site. I wonder what is the lack of Google strategy that don’t rank this kind of informative web sites in top of the list. Normally the top websites are full of garbage.

  25. I simply wish to reveal to you that I am new to posting and very much adored your post. Most likely I am likely to save your blog post . You indeed have fantastic article blog posts. Value it for expressing with us your main blog post

  26. Thanks a lot for providing individuals with remarkably superb possiblity to read articles and blog posts from this site. It’s usually very beneficial plus stuffed with a great time for me personally and my office acquaintances to search your web site minimum 3 times in 7 days to study the latest items you will have. Of course, I am certainly satisfied concerning the impressive methods you serve. Some two facts in this article are really the most efficient we’ve ever had.

  27. I and my pals ended up digesting the great thoughts found on the blog then all of the sudden I had a terrible feeling I had not expressed respect to the blog owner for those techniques. These young boys were as a result thrilled to study all of them and have in effect in fact been making the most of them. We appreciate you simply being really accommodating as well as for selecting such marvelous guides millions of individuals are really desperate to know about. My very own sincere regret for not expressing appreciation to you earlier.

  28. I just desire to notify you that I am new to putting up a blog and genuinely admired your post. Most likely I am most likely to remember your blog post . You literally have fantastic article blog posts. Get Pleasure From it for discussing with us your very own domain webpage

  29. Thanks so much for giving everyone a very wonderful opportunity to check tips from this site. It’s usually very enjoyable and also packed with amusement for me personally and my office friends to visit your blog not less than thrice a week to read the new guidance you have got. And indeed, I am actually contented concerning the fantastic tricks you serve. Some 4 facts on this page are in reality the most beneficial I have ever had.

  30. Great post. I was checking constantly this blog and I am impressed! Very useful information particularly the last part 🙂 I care for such info a lot. I was looking for this certain information for a very long time. Thank you and best of luck.

  31. Thank you so much for giving everyone an extraordinarily spectacular chance to read articles and blog posts from this site. It is often very lovely plus full of a good time for me personally and my office acquaintances to visit the blog really 3 times in 7 days to learn the new tips you will have. Not to mention, I’m just actually contented with all the exceptional concepts served by you. Certain 1 tips in this article are undeniably the very best we have had.

  32. I enjoy you because of each of your hard work on this website. Ellie enjoys getting into research and it’s simple to grasp why. A lot of people learn all about the lively tactic you deliver both useful and interesting items via the web site and even cause response from visitors about this area and our favorite simple princess has always been starting to learn so much. Have fun with the rest of the year. You’re the one performing a fantastic job.

  33. Pretty section of content. I just stumbled upon your site and in accession capital to assert that I acquire actually enjoyed account your blog posts. Any way I will be subscribing to your augment and even I achievement you access consistently quickly.

  34. Whats Going down i’m new to this, I stumbled upon this I have discovered It absolutely useful and it has helped me out loads. I am hoping to contribute & help different customers like its helped me. Great job.

  35. Good web site! I truly love how it is simple on my eyes and the data are well written. I am wondering how I could be notified whenever a new post has been made. I have subscribed to your RSS feed which must do the trick! Have a great day!

  36. My husband and i ended up being quite glad when Chris could complete his homework while using the ideas he discovered through the site. It’s not at all simplistic to just continually be releasing secrets and techniques which often people today may have been trying to sell. And we also see we have the writer to give thanks to for this. These explanations you made, the easy website navigation, the friendships you will help to foster – it’s many great, and it’s making our son in addition to our family believe that the situation is interesting, and that’s tremendously essential. Thank you for the whole lot!

  37. I have recently started a website, the info you provide on this web site has helped me tremendously. Thanks for all of your time & work. “My dear and old country, here we are once again together faced with a heavy trial.” by Charles De Gaulle.

  38. My brother suggested I might like this website. He was totally right. This post truly made my day. You can not imagine simply how much time I had spent for this info! Thanks!

  39. I want to get across my passion for your generosity supporting people who need help with this important idea. Your very own dedication to getting the solution all-around ended up being really functional and have all the time helped folks just like me to get to their targets. Your new informative publication signifies a great deal to me and somewhat more to my peers. With thanks; from all of us.

发表评论

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