android - example - com alespero expandable cardview

Animación de RecyclerView en clic de artículo

Question

Estoy tratando de implementar mi propia animación recyclerview - Me gustaría lograr esto sin usar ninguna biblioteca externa. Aquí es cómo debería ser la animación teórica.

El usuario hace clic en un elemento en la Lista y se produce una animación que abre otra Vista.

En un nivel alto con un código mínimo, posiblemente solo un pseudocódigo, ¿cuál sería el proceso para crear una animación como esa?

También me gustaría señalar que la animación también se puede hacer en reversa si el usuario hace clic en el mismo elemento u otro elemento

No estoy tan familiarizado con la clase RecyclerView y me gustaría obtener más información acerca de ella y de las animaciones asociadas a ella.

Answer 1

Solución:

La forma en que resolvió este problema fue implementar un detector View.OnClickListener en la clase ViewHolder , que extends RecyclerView.ViewHolder . Entonces obtenemos el siguiente código:

public static class ExampleViewHolder extends RecyclerView.ViewHolder 
    implements View.OnClickListener {

    private int originalHeight = 0;
    private boolean isViewExpanded = false;
    private YourCustomView yourCustomView

    // ..... CODE ..... //

}

Las variables originalHeight e isViewExpanded se usan en el proceso de animación. En el constructor, inicializo la vista a View.OnClickListener así:

public ExampleViewHolder(View v) {
     super(v);
     v.setOnClickListener(this);

     // Initialize other views, like TextView, ImageView, etc. here

     // If isViewExpanded == false then set the visibility 
     // of whatever will be in the expanded to GONE

     if (isViewExpanded == false) {
         // Set Views to View.GONE and .setEnabled(false)
         yourCustomView.setVisibility(View.GONE);
         yourCustomView.setEnabled(false);
     }

 }

Ahora que el constructor se ha ocupado, queremos configurar lo que sucede cuando el usuario hace clic en un elemento RecyclerView individual. Las clases que serán útiles aquí serían ValueAnimator y los objetos de Animation . onClick método onClick como tal para lograr esto:

@Override
public void onClick(final View view) {
    // If the originalHeight is 0 then find the height of the View being used 
    // This would be the height of the cardview
    if (originalHeight == 0) {
            originalHeight = view.getHeight();
        }

    // Declare a ValueAnimator object
    ValueAnimator valueAnimator;
        if (!mIsViewExpanded) {
            yourCustomView.setVisibility(View.VISIBLE);
            yourCustomView.setEnabled(true);
            mIsViewExpanded = true;
            valueAnimator = ValueAnimator.ofInt(originalHeight, originalHeight + (int) (originalHeight * 2.0)); // These values in this method can be changed to expand however much you like
        } else {
            mIsViewExpanded = false;
            valueAnimator = ValueAnimator.ofInt(originalHeight + (int) (originalHeight * 2.0), originalHeight);

            Animation a = new AlphaAnimation(1.00f, 0.00f); // Fade out

            a.setDuration(200);
            // Set a listener to the animation and configure onAnimationEnd
            a.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {

                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    yourCustomView.setVisibility(View.INVISIBLE);
                    yourCustomView.setEnabled(false);
                }

                @Override
                public void onAnimationRepeat(Animation animation) {

                }
            });

            // Set the animation on the custom view
            yourCustomView.startAnimation(a);
        }
        valueAnimator.setDuration(200);
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                view.getLayoutParams().height = value.intValue();
                view.requestLayout();
            }
        });


        valueAnimator.start();

    }

Ahora, cuando tocas una vista de carta individual en el RecyclerView (suponiendo que tienes una configuración de CardView , entonces debería expandirse. Asegúrate de declarar tu CustomView correctamente en tu archivo xml (por ejemplo, si deseas que el CardView expanda cuando lo toques, entonces asigne la vista personalizada debajo de las otras vistas y configure la visibilidad como desaparecida cuando la declare y luego, cuando la animación comience de esta manera en el código anterior, configure la visibilidad en Visible y habilite la vista.

Espero que esto pueda ayudar a alguien.

Answer 2

Una alternativa más fácil para la respuesta de @ AndyRoid es usar la android:animateLayoutChanges="true" . De esta forma no es necesario escribir ningún código de animación; sin embargo, esto no es un camino a seguir si necesita tener control sobre la animación.

Aún necesita crear un OnClickListener :

class CardTapListener implements View.OnClickListener {
    @Override
    public void onClick(View v) {
        View someView = v.findViewById(R.id.view_to_expand);

        if (someView.getVisibility() == View.GONE) {
            someView.setVisibility(View.VISIBLE);
        }
        else if (someView.getVisibility() == View.VISIBLE){
            someView.setVisibility(View.GONE);
        }

    }
}

Adjuntarlo a cada ViewHolder :

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
    View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.view_holder_layout, viewGroup, false);
    v.setOnClickListener(new CardTapListener());
    return new ItemViewHolder(v);
}

No te olvides de colapsar las vistas al vincular un nuevo elemento:

@Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i) {
    ...
    // Collapse (probably opened by user previously) view
    ItemViewHolder itemHolder = (ItemViewHolder) viewHolder;
    itemHolder.description.setVisibility(View.GONE);
    ...

}

view_holder_layout.xml:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"
    android:orientation="vertical">

 ...

    <AnyViewHere
        android:visibility="gone"
        android:id="@+id/view_to_expand" />

 </LinearLayout>