RecyclerView Item loading animation

The content of the blog updated during this period is not systematic, but it is also a commonly used technology.

Today I will share with you an article about ReclcierView. Speaking of RecyclerView, everyone must be familiar with it. Someone asked me before what is the difference between ListView and RecyclerView? And many people think that RecyclerView is much stronger than ListView. Indeed, RecyclerView is superior to ListView in animation processing. However, if there is no animation in the list, the loading processing performance is comparable.

About RecyclerView, there are many open source projects on the Internet, which encapsulate their functions, such as the common pull-down refresh, pull-up load more, side-slide, drag and so on. However, the animation effect of the list display is still relatively small, ok. Since that is the case, let's talk about how to implement the RecyclerView display loading animation.

First come to the effect picture to suppress the shock

                                                                                

1. Principle analysis

RecyclerView is the same as ListView, and the display data is based on Adapter. The difference is that RecyclerView must implement ViewHolder in order to optimize ConvertView. The method of binding Item View in ListView is certainly not new to everyone, namely getView. The RecyclerView is onCreateViewHolder. Having said so much, it is actually to elicit a question: Where should we implement the display animation? That's right, it's in onCreateViewHolder
. The principle is also very simple, because in onCreateViewHolder, we need to bind and load ItemView and Holder, and the display animation is obviously attached to ItemView. Therefore, the final realization is to add animation effects to ItemView. After analyzing the core principles, the next step is to code ~

Second, the core implementation

(1) Introduce RecyclerView :

There are two ways to reference the RecyclerView library in the project:

1. Directly quote RecyclerView:

compile ‘com.android.support:recyclerview-v7:24.1.0’

2. Reference the design library, which contains all the new MD components:

compile 'com.android.support:design:24.0.0'

(2) XML layout to create RecyclerView :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.song.recyclerv.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

(3) Activity gets RecyclerView and sets Adapter :

package com.song.recyclerv;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import com.song.recyclerv.animation.SlideInBottomAnimation;
import com.song.recyclerv.animation.SlideInLeftAnimation;
import com.song.recyclerv.animation.SlideInRightAnimation;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    RecyclerView rv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rv = (RecyclerView) findViewById(R.id.rv);

        // 初始化列表数据
        List<String> data = new ArrayList<>();
        for (int i = 0; i < 300; i++) {
            data.add(""+i);
        }

        // 竖向列表布局
        rv.setLayoutManager(new LinearLayoutManager(this));
        // 创建Adapter
        BaseRecyclerViewAdapter  adapter = new BaseRecyclerViewAdapter(this,data);
        // 设置展示动画
        adapter.setAnimation(new SlideInRightAnimation());
        // 设置Adapter
        rv.setAdapter(adapter);
    }
}

It can be found that in the above code, we set the animation effect to SlideInRightAnimation through setAnimation, which slides in from the right. How is the specific animation implemented? Look at Adapter:

(4) Create Adapter and embed animation effects :

package com.song.recyclerv;

import android.animation.Animator;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;
import android.widget.TextView;

import com.song.recyclerv.animation.AlphaInAnimation;
import com.song.recyclerv.animation.BaseAnimation;

import java.util.List;

/**
 * Created by Song on 2017/4/27.
 */
public class BaseRecyclerViewAdapter extends RecyclerView.Adapter<BaseRecyclerViewAdapter.BaseHolder>{

    private Context mContext;
    private List<String> data;
    private LayoutInflater inflater;
    private int mLastPosition = -1;
    private int mPosition = 0;
    private Interpolator mInterpolator = new LinearInterpolator();
    private int mDuration = 300;
    private BaseAnimation mSelectAnimation = new AlphaInAnimation();
    private boolean mOpenAnimationEnable = true;

    public BaseRecyclerViewAdapter(Context context,List<String> datas){

        this.data = datas;
        this.mContext = context;
        inflater = LayoutInflater.from(mContext);
    }

    @Override
    public BaseHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = inflater.inflate(R.layout.item_layout,parent,false);
        BaseHolder b = new BaseHolder(itemView);
//        ViewHolderHelper holder = ViewHolderHelper.get(mContext, null, parent, R.layout.item_layout, -1);
        return b;
    }

    @Override
    public void onBindViewHolder(BaseHolder holder, int position) {

        holder.tv.setText(data.get(position));
        if(mOpenAnimationEnable) {
            addAnimation(holder);
        }
    }

    public void updatePosition(int position) {
        mPosition = position;
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    /**
     * 添加动画
     * @param holder
     */
    public void addAnimation(RecyclerView.ViewHolder holder) {
        if (mOpenAnimationEnable) {
            if (holder.getLayoutPosition() > mLastPosition) {
                BaseAnimation animation = null;
                if (mSelectAnimation != null) {
                    animation = mSelectAnimation;
                }
                for (Animator anim : animation.getAnimators(holder.itemView)) {
                    startAnim(anim);

                }
                mLastPosition = holder.getLayoutPosition();
            }
        }
    }

    /**
     * 开启动画
     * @param animator
     */
    private void startAnim(Animator animator) {
        animator.setDuration(mDuration).start();
        animator.setInterpolator(mInterpolator);
    }
    
    /**
     * 设置动画效果
     * @param animation
     */
    public void setAnimation(BaseAnimation animation){
        this.mOpenAnimationEnable = true;
        this.mSelectAnimation = animation;
    }

    static class BaseHolder extends RecyclerView.ViewHolder {

        private TextView tv;

        public BaseHolder(View itemView) {
            super(itemView);
            tv = (TextView) itemView.findViewById(R.id.tv);
        }
    }
}

3. Analysis of core functions

(1) Whether the mOpenAnimationEnable flag turns on the animation effect. OnBindViewHolder, in the open state (mOpenAnimationEnable is true), addAnimation

(2) In the addAnimation method, it is determined that the currently displayed Item position is greater than the previous one, and then the animation effect is turned on. Then get Animator, execute startAnimation to start the animation, BaseAnimation is actually an interface:

/**
 * 动画接口
 */
public interface  BaseAnimation {

    Animator[] getAnimators(View view);

}

(3) When initializing the Adapter, we called the setAnimation method, you can see that this method initializes the animation effect, then let's look at the specific animation implementation:

/**
 * 右侧滑入动画
 */
public class SlideInRightAnimation implements BaseAnimation {


    @Override
    public Animator[] getAnimators(View view) {
        return new Animator[]{
                ObjectAnimator.ofFloat(view, "translationX", view.getRootView().getWidth(), 0)
        };
    }
}

The above code uses the property animation ObjectAnimator after Android3.0 to initialize the specific animation mode.

(4) Call startAnimation to start animation

After 4 steps above, the display animation effect of RecyclerView is realized ~~

Source code download