This article is contributed by wing who spins and jumps.
The blog address of Wing, who turns and jumps and disappears:
Yesterday there was a happy event, I think everyone knows it~~ If you don’t know, enter the following URL to understand:
I ordered a takeaway at night. I opened it. Are you hungry? I found that a version was pushed. After the update, I ordered a chicken drumstick.
But there are still points. I discovered that I could swipe left and right by accident. This. . . You don't tell me, how do I know that I can slide left and right.
https://github.com/githubwing/ZoomHeader
Directly on the picture:
Quite interesting, right? So I wanted to imitate it. Here is the effect I made:
amount. . But the picture is not long. It probably means the same thing. Next, I will share with you how this effect is achieved. Talk about ideas and problems encountered. But the details will not be discussed, please see the source code for specific details.
Is he one Activity or two?
I believe you must have such a question, and the answer is one.
The middle imageview you see is the viewpager. Above the Viewpager is a transparent View. Of course, the background of this Activity is also transparent.
1 Implementation ideas
I use CoordinatorLayout+Behavior to achieve. To be honest, Behavior is really powerful. .
viewpager+head
The idea of the whole realization is this. The overall layout from top to bottom is:
-
Transparent View
-
viewpager
- RecyclerView
The transparent View and Viewpager are combined into a custom Header. When the Header moves up, the picture zooms in, and the RecyclerView links the top to change from transparent to opaque.
So we must first customize a transparent and movable HeaderView.
Handle the gesture in onTouchEvent. .
Divide the header into three states:
-
Move up. It expands to the details page.
-
Move down to restore to viewpager.
- Move it down again to finish Activity.
In the process of moving up, I encountered a little challenge, share it here:
During the upward movement, the picture needs to be enlarged. But in the process of doing it, you cannot use LayoutParams. Here are some small details of animation.
Animation using LayoutParams is a taboo. It will cause non-stop requestLayout, thereby affecting UI performance.
So one of my solutions here is that I zoom in the image, instead of actually changing the ImageView size, I scale the image. Even if it looks bigger, the real size of his View will not change.
Therefore, there is a saying that is true is also false, and false is also true. Why should you take it seriously? As long as the animation effect follows this sentence, basically it can be achieved. The effects you see are all false. They are all blindfolds. View bigger is not really bigger. View suspension is not a real suspension (it may be explicit or hidden). It's like magic. . it's actually really easy.
Then I encountered a problem again. The picture is enlarged, how to align the text? Of course, the position of the text cannot really be changed. So here is implemented using TranslationX. In the process of image enlargement, the coefficient of scale is used to calculate a linear change with the two endpoint values. The main text alignment codes are as follows:
The second point. That is, the text at the bottom and the padding on the left and right of the buttons cannot be changed during the image enlargement process. This is also the reason why I did not encapsulate it into a ready-to-use View (in fact, it is still not level enough). Because these spaces need to be dynamically calculated in accordance with the above method. . So it is quite cheating. .
2 ViewPager
Take the effect of an online gallery. direct
setPageTransformer(true, new ZoomOutPageTransformer());
Note here that you need to change the drawing order of the view to ensure that the current view is drawn last at the top level
3 RecyclerView
RecyclerView is completely transparent at first. And follow the HeaderView to move up and up, gradually showing up in the process of moving up. Need to listen to RecyclerView scrolling when RecyclerView scrolls to the top. Inform the Header that it is time to restore the original state.
4 Behavior
The behavior that associates the header with RecyclerView is the Behavior. Behavior has written a few introductions before, so I won’t be wordy here.
denpendcy is HeaderView. And monitor the sliding of RecyclerView.
See the source code for specific details~
If you think it’s not bad, welcome to Star
Read the original