当前位置:网站首页>Using layout animation on recyclerview

Using layout animation on recyclerview

2021-10-22 10:29:27 Bird's nest

original text :Layout animations on RecyclerView
translate : stay RecyclerView Use layout animation on (Layout animation) by Days spent online
This paper can be combined with Android LayoutAnimation Use and expansion Read together .

Automatically Material Design Since its appearance , I was surprised by the mesh spread animation demonstrated in some videos . This is a diagonal animation , Give Way activity Spread out from top to bottom, from left to right . Very beautiful .

I've been trying all the ways to get that effect . One way is , Use RecyclerView::notifyItemInserted() Method , This is the method mentioned by many people . However, this method does not provide many methods to control the animation sequence , So it doesn't seem like a good way . The other is in onBind() Use animation for each element when necessary , This is indeed feasible . But then the code is fragile and too intrusive ( We are in adapter Animation added in ). It's hard to make it work properly .

Layout animation

Last , The solution is actually simpler than expected . I have to admit that I seldom use Layout animation (layout animation), So I didn't think of this immediately . But in the process of finding the answer , I found this great code : gist from Musenkishi , It showed me the solution . The problem here is RecyclerView It's not used by default layout animation, But this code can make it look like GridView Use like that GridLayoutAnimation. As we mentioned gist That's true :

       
       
       
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
       
       
       
/*
* Copyright (C) 2014 Freddie (Musenkishi) Lust-Hed
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.musenkishi.gists.view;
import android.content.Context;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.GridLayoutAnimationController;
/**
* An extension of RecyclerView, focused more on resembling a GridView.
* Unlike {@link android.support.v7.widget.RecyclerView}, this view can handle
* {@code <gridLayoutAnimation>} as long as you provide it a
* {@link android.support.v7.widget.GridLayoutManager} in
* {@code setLayoutManager(LayoutManager layout)}.
*
* Created by Freddie (Musenkishi) Lust-Hed.
*/
public class GridRecyclerView extends RecyclerView {
public GridRecyclerView(Context context) {
super(context);
}
public GridRecyclerView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public GridRecyclerView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
public void setLayoutManager(LayoutManager layout) {
if (layout instanceof GridLayoutManager){
super.setLayoutManager(layout);
} else {
throw new ClassCastException( "You should only use a GridLayoutManager with GridRecyclerView.");
}
}
@Override
protected void attachLayoutAnimationParameters(View child, ViewGroup.LayoutParams params, int index, int count) {
if (getAdapter() != null && getLayoutManager() instanceof GridLayoutManager){
GridLayoutAnimationController.AnimationParameters animationParams =
(GridLayoutAnimationController.AnimationParameters) params.layoutAnimationParameters;
if (animationParams == null) {
animationParams = new GridLayoutAnimationController.AnimationParameters();
params.layoutAnimationParameters = animationParams;
}
int columns = ((GridLayoutManager) getLayoutManager()).getSpanCount();
animationParams.count = count;
animationParams.index = index;
animationParams.columnsCount = columns;
animationParams.rowsCount = count / columns;
final int invertedIndex = count - 1 - index;
animationParams.column = columns - 1 - (invertedIndex % columns);
animationParams.row = animationParams.rowsCount - 1 - invertedIndex / columns;
} else {
super.attachLayoutAnimationParameters(child, params, index, count);
}
}
}

Configure layout animation

The good thing about layout animation is that we can use xml To define and deploy them , Therefore, our code will not be interspersed by animation . We just need the corresponding layout animation definition xml.

       
       
       
1
2
3
4
5
6
       
       
       
<gridLayoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:columnDelay= "15%"
android:rowDelay= "15%"
android:animation= "@anim/slide_in_bottom"
android:animationOrder= "normal"
android:direction= "top_to_bottom|left_to_right"/>

We can customize the animation according to our preferences :

  • columnDelay / rowDelay: Percentage of delay time of row and column elements in animation . So we can get the next row to the next column view One animation after another , Instead of animating together .
  • animation: view: The animation that appears on the screen , I use an animation that slides out from the bottom .
  • animationOrder: It can be normal, reverse perhaps random.
  • direction: Appoint item how Display based on column delay , Value for :top_to_bottom, left_to_right,bottom_to_top,right_to_left.

Here is slide The animation xml Code :

       
       
       
1
2
3
4
       
       
       
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator= "@android:anim/decelerate_interpolator"
android:fromYDelta= "100%p" android:toYDelta= "0"
android:duration= "@android:integer/config_mediumAnimTime"/>

Adjust the timing of the animation

If you execute the current code , You'll find that app While opening, the layout animation is also executing , So you don't actually see any effect . about Lollipop There's nothing you can do with the previous equipment , There is no effective way to know when the entry animation is completed ( At least I don't know ). But from Lollipop Start , We can use onEnterAnimationComplete To check . So in onCreate in , If SDK Version older than Lollipop,RecyclerView Settle directly :

       
       
       
1
2
3
       
       
       
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
setRecyclerAdapter(recyclerView);
}

stay Lollipop Or update the device ,onEnterAnimationComplete Will be called . This is settled RecyclerView With the timing of requesting a new layout animation :

       
       
       
1
2
3
4
5
       
       
       
@Override public void onEnterAnimationComplete() {
super.onEnterAnimationComplete();
setRecyclerAdapter(recyclerView);
recyclerView.scheduleLayoutAnimation();
}

summary

You can easily adjust this layout animation to produce other entry animations . You can try to animate and see what you can get .
The code of this example is in Github Of Materialize your App repository .

More information

  1. recyclerview-animators
  2. RecyclerView Drag and slide The first part : Basic ItemTouchHelper Example
  3. RecyclerView Drag and slide The second part : Drag block ,Grid And custom animation

版权声明
本文为[Bird's nest]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/10/20211009000611398w.html

随机推荐