RecyclerView Animación de carga de elementos


El contenido del blog actualizado durante este período no es sistemático, pero también es una tecnología de uso común.

Hoy compartiré con ustedes un artículo sobre ReclcierView. Hablando de RecyclerView, todos deben estar familiarizados con él. Alguien me preguntó antes ¿cuál es la diferencia entre ListView y RecyclerView? Y mucha gente piensa que RecyclerView es mucho más fuerte que ListView. De hecho, RecyclerView es superior a ListView en el procesamiento de animación. Sin embargo, si no hay animación en la lista, el rendimiento del procesamiento de carga es comparable.

Acerca de RecyclerView, hay muchos proyectos de código abierto en Internet, que encapsulan sus funciones, como la actualización desplegable común, la carga desplegable más, el desplazamiento lateral, el arrastre, etc. Sin embargo, el efecto de animación de la visualización de la lista aún es relativamente pequeño, así que, hablemos sobre cómo implementar la animación de carga de la pantalla RecyclerView.

Primero ve a la imagen del efecto para suprimir el shock



                                                                                



1. Análisis de principios


RecyclerView es lo mismo que ListView, y los datos de visualización se basan en el Adaptador. La diferencia es que RecyclerView debe implementar ViewHolder para optimizar ConvertView. El método de vincular la vista del elemento en ListView ciertamente no es nuevo para todos, es decir, getView. RecyclerView es onCreateViewHolder. Habiendo dicho tanto, en realidad es para plantear una pregunta: ¿Dónde debemos implementar la animación de visualización? Así es, está en onCreateViewHolder
. El principio también es muy simple, porque en onCreateViewHolder, necesitamos vincular y cargar ItemView y Holder, y la animación de la pantalla obviamente se adjunta a ItemView. Por lo tanto, la realización final es agregar efectos de animación a ItemView. Después de analizar los principios básicos, el siguiente paso es codificar ~


En segundo lugar, la implementación central


(1) Introducir RecyclerView :


Hay dos formas de hacer referencia a la biblioteca RecyclerView en el proyecto:

1. Cita directamente RecyclerView:

compile ‘com.android.support:recyclerview-v7:24.1.0’
2. Consulte la biblioteca de diseño, que contiene todos los nuevos componentes de MD:

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

(2) Diseño XML para crear 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) La actividad obtiene RecyclerView y establece el Adaptador :

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);
    }
}
Se puede encontrar que en el código anterior, establecemos el efecto de animación en SlideInRightAnimation a través de setAnimation, que se desliza desde la derecha. ¿Cómo se implementa la animación específica? Mira el adaptador:


(4) Crear adaptador e incrustar efectos de animación :

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. Análisis de las funciones centrales.


(1) Si el indicador mOpenAnimationEnable activa el efecto de animación. OnBindViewHolder, en estado abierto (mOpenAnimationEnable es verdadero), ejecute addAnimation

(2) En el método addAnimation, se determina que la posición del elemento que se muestra actualmente es mayor que la anterior, y luego se activa el efecto de animación. Luego obtenga Animator, ejecute startAnimation para iniciar la animación, BaseAnimation es en realidad una interfaz:

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

    Animator[] getAnimators(View view);

}

(3) Al inicializar el Adaptador, llamamos al método setAnimation, puede ver que este método inicializa el efecto de animación, luego observamos la implementación de animación específica:

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


    @Override
    public Animator[] getAnimators(View view) {
        return new Animator[]{
                ObjectAnimator.ofFloat(view, "translationX", view.getRootView().getWidth(), 0)
        };
    }
}
El código anterior usa la animación de propiedades ObjectAnimator después de Android3.0 para inicializar el modo de animación específico.


(4) Llame a startAnimation para comenzar la animación


Después de los 4 pasos anteriores, se realiza el efecto de animación de visualización de RecyclerView ~~


Descarga del código fuente

 

214 artículos originales publicados · elogiados 371 · 920,000 visitas

Supongo que te gusta

Origin blog.csdn.net/u013718120/article/details/70854647
Recomendado
Clasificación