This interaction blew up. (b): How to make the detail page narrow to a horizontal list

Write in front:
It was already 3 o'clock in the night when I wrote this passage. Don't ask me why I spell, everything to share with you dry!!!! Don't be so touched, wipe your tears and keep looking down.

This open Source Library link Expandableviewpager

Always wanted to write "interactive bombing" the second, but there seems to be no good interaction. At 11 o'clock last evening, the pony classmate put forward love fan son inside of the interaction quite fried. Me a bit, and it really was great. So overnight write code, encapsulated into a library, and then the article. For you who can dedicate to love technology in the early Monday 7:00.

"Interactive fried" may be a series of high-end special effects tutorials, the text will introduce some of the more cool special effects and ideas to achieve. The effect itself may not be much more difficult to implement. The difficulty lies in the idea of realization. Once the idea is opened, the effects will be very simple to implement. Let's take a look at the effect today:

At first glance, wow is awesome. In the end how to achieve, there is no train of thought. Actually very simple, of course, for convenience, I have encapsulated him into a library. Links are as follows: Https://github.com/githubwing/ExpandableViewpager

Let's look at how the library is used:

Add Dependencies in Gradle,

allprojects {        repositories {            ...            ‘https://jitpack.io‘ }        }    }    dependencies {            ‘com.github.githubwing:ExpandableViewpager:1.0.0‘    }

Next, add the Expandableviewpager to the layout.

Expandviewpager provides Viewpager common methods. There are several additional ways to do this:

//设置背景布局 mViewpager.setBackgroundView(int resId);//设置展开关闭监听器mViewpager.setOnStateChangedListener(OnStateChangedListener listener);//展开以及缩小mViewpager.expand();mViewpager.collaps();

Just make these settings in your code to achieve the results! What do you think! Very convenient ~

How to Achieve

Personal feeling effects are almost as good as magic. Anyway is a camouflage, as long as the pattern, want to achieve or improve also is not what difficult. Here, I will tell you the routine of my own groping.

First, in the interactive bombing of the first article, a friend said that the shared elements can be achieved, and posted to me a few projects. I would like to say here that sharing elements is not possible. Because the shared element cannot be touched all the way through the transition from state one to state two.

Besides, the effect in the second article is very similar to the first one, but no gesture processing. And how did he do it? Hey, the principle is particularly simple, I am embarrassed to write. This is like magic, not exposed before the inscrutable, after exposing it as if IQ was insulted. In fact, as long as the routine, these are not difficult. The nonsense does not say directly to see how to achieve:

The overall interface is actually a background view + a viewpager. This viewpager unfold is normal situation. If the smaller, in fact, is the Viewpager scaling ~ ~ As long as Clipchildren, then scale a bit on it. It's so simple. I was embarrassed to write ... The core code is as follows:

   collapsVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            publicvoidonAnimationUpdate(ValueAnimator valueAnimator) {                float percent = (Float) valueAnimator.getAnimatedValue();                mViewpager.setScaleX(percent);                mViewpager.setScaleY(percent);                mViewpager.setY((12 * mViewpager.getHeight());            }        });

Change the scale and change the height of Y. It's gone.

If you feel good, please star, this is the best encouragement for me ~ ~

Https://github.com/githubwing/ExpandableViewpager

Welcome to join my Android discussion group: 425983695

This interaction is fried (b): How to make the detail page smaller than the horizontal list