36

Tengo ListView. Inicialmente, el ListView contiene algunos datos. Cuando el usuario hace clic en un elemento, otro diseño se agregará dinámicamente a ese elemento para aumentar su altura.Expandir listaVer elemento con animación

En este momento, cuando se aumenta la altura del elemento, muestra el elemento modificado al instante. Sin embargo, lo que quiero es animarlo para que aumente gradualmente la altura del elemento.

Respuesta

33

Creo que estaba buscando lo mismo que me pidieron, estaba buscando una manera de animar la expansión del elemento listview como algo nuevo se muestra el contenido (solo estaba cambiando la visibilidad en algunas vistas desde GONE hasta VISIBLE). Había utilizado la respuesta por mirroredAbstraction que me ayude a aplicar una animación traducir (que no quería una animación girar):

<translate xmlns:android="http://schemas.android.com/apk/res/android" 
android:interpolator="@android:anim/linear_interpolator" 
android:fromYDelta="0" 
android:toYDelta="-100%p" 
android:duration="500" 
/> 

a cada uno de los puntos de vista. Se creó un efecto agradable, pero al mirar de cerca, el elemento de la vista de lista se expandió repentinamente al tamaño completo que se necesitaría, luego la animación dejó caer las vistas en su lugar. Pero lo que quería era el efecto del elemento de vista de lista que crecía a medida que las vistas entraban en visibilidad.

me encontré exactamente lo que estaba buscando aquí: expanding-listview-items

El blogger tiene un enlace a su muestra github, aquí: ExpandAnimationExample

Si encuentra estos sitios han ido, por favor, y me informan Haré que mi copia esté disponible.

puso un margen negativo sobre el contenido de entrar en la visibilidad, así como el establecimiento de visibilidad a GONE:

android:layout_marginBottom="-50dip" 

y escribió una animación manipular el margen inferior:

public class ExpandAnimation extends Animation { 
... 
    @Override 
    protected void applyTransformation(float interpolatedTime, Transformation t) { 
     super.applyTransformation(interpolatedTime, t); 

     if (interpolatedTime < 1.0f) { 

      // Calculating the new bottom margin, and setting it 
      mViewLayoutParams.bottomMargin = mMarginStart 
        + (int) ((mMarginEnd - mMarginStart) * interpolatedTime); 

      // Invalidating the layout, making us seeing the changes we made 
      mAnimatedView.requestLayout(); 
     } 
     ... 
    } 
} 

y parece muy agradable. He encontrado la respuesta a esta cuestión de forma (posible duplicado?):

Adding animation to a ListView in order to expand/collapse content

También, por favor, hágamelo saber si usted sabe otra manera de hacer la misma cosa.

+1

En este caso, la altura del elemento ListView se conoce de antemano. Pero, en mi caso, es dinámico. Quiero decir, la altura del diseño expandido se conocerá en tiempo de ejecución. – Manjunath

+1

Sí, veo ... Creo que puedo necesitar la capacidad de tener ese efecto sobre el contenido agregado/creado dinámicamente. Entonces, yo todavía estoy buscando. Me gustaría recitar su pregunta para que más gente la vea, pero no ha sido demasiado detallada (es decir, ha omitido la parte dinámica), y al menos, debería reformular la confusa declaración: "Entonces, ¿ahora qué? Lo que quiero es: cuando se aumenta la altura del elemento, muestra el elemento modificado de repente, pero necesito animar cuando aumenta la altura del elemento ". – David

6

Usted tendrá que aplicar animación en Adapter de que ListView para conseguir lo que quiere,

En primer lugar crear un archivo básico animation.xml, crear una carpeta llamada anim en la carpeta res y luego poner su archivo animation.xml en ella .

Por ej. He creado una animación de ejemplo denominado rotate_animation.xml

<?xml version="1.0" encoding="UTF-8"?> 
<rotate 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:fromDegrees="0" 
    android:toDegrees="360" 
    android:pivotX="50%" 
    android:pivotY="50%" 
    android:duration="400" /> 

A continuación, cree una instancia de AnimationObject como esto

private Animation animation; 

A continuación, en el método de la implementación getView Adaptador hacer algo como esto

public View getView(int position, View convertView, ViewGroup parent) { 
     View v = convertView; 
     ViewHolder viewHolder; 
     if (convertView == null) { 
      LayoutInflater li = (LayoutInflater) mContext 
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
      v = li.inflate(R.layout.my_layout, null); 
      viewHolder = new ViewHolder(v); 
      v.setTag(viewHolder); 

     } else { 
      viewHolder = (ViewHolder) v.getTag(); 
     } 

     viewHolder.mAppName.setText("SomeText"); 
     viewHolder.mAppImage.setImageDrawable(R.drawable.someImage); 
     animation = AnimationUtils.loadAnimation(mContext, R.anim.my_animation); 
     v.startAnimation(animation); 
     return v; 
    } 
15

Implementé un código simple que funciona en todas las versiones sdk de Android.

Consulte a continuación su funcionamiento y el código. código

Github: https://github.com/LeonardoCardoso/Animated-Expanding-ListView

Para obtener información en mi sitio web: http://android.leocardz.com/animated-expanding-listview/

normalaccordion

Básicamente, usted tiene que crear un TranslateAnimation costumbre y un adaptador lista personalizada y, mientras se está animando, se tiene que actualizar la altura actual del elemento listview y notificar al adaptador sobre este cambio.

Vamos al código.

  1. diseño de elemento de lista

    <?xml version="1.0" encoding="utf-8"?> 
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
         android:id="@+id/text_wrap" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:orientation="horizontal" 
         android:paddingBottom="@dimen/activity_vertical_margin" 
         android:paddingLeft="@dimen/activity_horizontal_margin" 
         android:paddingRight="@dimen/activity_horizontal_margin" 
         android:paddingTop="@dimen/activity_vertical_margin" > 
    
         <TextView 
          android:id="@+id/text" 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:textSize="18sp" > 
         </TextView> 
    
    </LinearLayout> 
    
  2. Disposición Actividad

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
          xmlns:tools="http://schemas.android.com/tools" 
          android:layout_width="match_parent" 
          android:layout_height="match_parent" 
          tools:context=".MainActivity" > 
    
          <ListView 
           android:id="@+id/list" 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:divider="@android:color/black" 
           android:dividerHeight="3dp" > 
          </ListView> 
    
         </RelativeLayout> 
    
  3. clase de elemento de lista

    public class ListItem { 
    
    private String text; 
    private int collapsedHeight, currentHeight, expandedHeight; 
    private boolean isOpen; 
    private ListViewHolder holder; 
    private int drawable; 
    
    public ListItem(String text, int collapsedHeight, int currentHeight, 
         int expandedHeight) { 
        super(); 
        this.text = text; 
        this.collapsedHeight = collapsedHeight; 
        this.currentHeight = currentHeight; 
        this.expandedHeight = expandedHeight; 
        this.isOpen = false; 
        this.drawable = R.drawable.down; 
    } 
    
    public String getText() { 
        return text; 
    } 
    
    public void setText(String text) { 
        this.text = text; 
    } 
    
    public int getCollapsedHeight() { 
        return collapsedHeight; 
    } 
    
    public void setCollapsedHeight(int collapsedHeight) { 
        this.collapsedHeight = collapsedHeight; 
    } 
    
    public int getCurrentHeight() { 
        return currentHeight; 
    } 
    
    public void setCurrentHeight(int currentHeight) { 
        this.currentHeight = currentHeight; 
    } 
    
    public int getExpandedHeight() { 
        return expandedHeight; 
    } 
    
    public void setExpandedHeight(int expandedHeight) { 
        this.expandedHeight = expandedHeight; 
    } 
    
    public boolean isOpen() { 
        return isOpen; 
    } 
    
    public void setOpen(boolean isOpen) { 
        this.isOpen = isOpen; 
    } 
    
    public ListViewHolder getHolder() { 
        return holder; 
    } 
    
    public void setHolder(ListViewHolder holder) { 
        this.holder = holder; 
    } 
    
    public int getDrawable() { 
        return drawable; 
    } 
    
    public void setDrawable(int drawable) { 
        this.drawable = drawable; 
    } 
    } 
    
  4. clase View titular

    public class ListViewHolder { 
    private LinearLayout textViewWrap; 
    private TextView textView; 
    
    public ListViewHolder(LinearLayout textViewWrap, TextView textView) { 
        super(); 
        this.textViewWrap = textViewWrap; 
        this.textView = textView; 
    } 
    
    public TextView getTextView() { 
         return textView; 
    } 
    
    public void setTextView(TextView textView) { 
        this.textView = textView; 
    } 
    
    public LinearLayout getTextViewWrap() { 
        return textViewWrap; 
    } 
    
    public void setTextViewWrap(LinearLayout textViewWrap) { 
        this.textViewWrap = textViewWrap; 
    } 
    } 
    
  5. Personalizar animación clase clase

    public class ResizeAnimation extends Animation { 
        private View mView; 
        private float mToHeight; 
        private float mFromHeight; 
    
        private float mToWidth; 
        private float mFromWidth; 
    
        private ListAdapter mListAdapter; 
        private ListItem mListItem; 
    
        public ResizeAnimation(ListAdapter listAdapter, ListItem listItem, 
          float fromWidth, float fromHeight, float toWidth, float toHeight) { 
         mToHeight = toHeight; 
         mToWidth = toWidth; 
         mFromHeight = fromHeight; 
         mFromWidth = fromWidth; 
         mView = listItem.getHolder().getTextViewWrap(); 
         mListAdapter = listAdapter; 
         mListItem = listItem; 
         setDuration(200); 
        } 
    
        @Override 
        protected void applyTransformation(float interpolatedTime, Transformation t) { 
         float height = (mToHeight - mFromHeight) * interpolatedTime 
           + mFromHeight; 
         float width = (mToWidth - mFromWidth) * interpolatedTime + mFromWidth; 
         LayoutParams p = (LayoutParams) mView.getLayoutParams(); 
         p.height = (int) height; 
         p.width = (int) width; 
         mListItem.setCurrentHeight(p.height); 
         mListAdapter.notifyDataSetChanged(); 
        } 
        } 
    
  6. adaptador lista personalizada

    public class ListAdapter extends ArrayAdapter<ListItem> { 
    private ArrayList<ListItem> listItems; 
    private Context context; 
    
    public ListAdapter(Context context, int textViewResourceId, 
        ArrayList<ListItem> listItems) { 
    super(context, textViewResourceId, listItems); 
    this.listItems = listItems; 
    this.context = context; 
    } 
    
    @Override 
    @SuppressWarnings("deprecation") 
    public View getView(int position, View convertView, ViewGroup parent) { 
    ListViewHolder holder = null; 
    ListItem listItem = listItems.get(position); 
    
    if (convertView == null) { 
        LayoutInflater vi = (LayoutInflater) context 
          .getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
        convertView = vi.inflate(R.layout.list_item, null); 
    
        LinearLayout textViewWrap = (LinearLayout) convertView 
          .findViewById(R.id.text_wrap); 
        TextView text = (TextView) convertView.findViewById(R.id.text); 
    
        holder = new ListViewHolder(textViewWrap, text); 
    } else 
        holder = (ListViewHolder) convertView.getTag(); 
    
    holder.getTextView().setText(listItem.getText()); 
    
    LayoutParams layoutParams = new LayoutParams(LayoutParams.FILL_PARENT, 
         listItem.getCurrentHeight()); 
    holder.getTextViewWrap().setLayoutParams(layoutParams); 
    
    holder.getTextView().setCompoundDrawablesWithIntrinsicBounds(
         listItem.getDrawable(), 0, 0, 0); 
    
    convertView.setTag(holder); 
    
    listItem.setHolder(holder); 
    
    return convertView; 
    } 
    
    } 
    
  7. Actividad Principal

    public class MainActivity extends Activity { 
    
    private ListView listView; 
    private ArrayList<ListItem> listItems; 
    private ListAdapter adapter; 
    
    private final int COLLAPSED_HEIGHT_1 = 150, COLLAPSED_HEIGHT_2 = 200, 
        COLLAPSED_HEIGHT_3 = 250; 
    
    private final int EXPANDED_HEIGHT_1 = 250, EXPANDED_HEIGHT_2 = 300, 
        EXPANDED_HEIGHT_3 = 350, EXPANDED_HEIGHT_4 = 400; 
    
    private boolean accordion = true; 
    
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
    
    listView = (ListView) findViewById(R.id.list); 
    
    listItems = new ArrayList<ListItem>(); 
    mockItems(); 
    
    adapter = new ListAdapter(this, R.layout.list_item, listItems); 
    
    listView.setAdapter(adapter); 
    
    listView.setOnItemClickListener(new OnItemClickListener() { 
    
        @Override 
        public void onItemClick(AdapterView<?> parent, View view, 
          int position, long id) { 
         toggle(view, position); 
        } 
    }); 
    } 
    
    private void toggle(View view, final int position) { 
    ListItem listItem = listItems.get(position); 
    listItem.getHolder().setTextViewWrap((LinearLayout) view); 
    
    int fromHeight = 0; 
    int toHeight = 0; 
    
    if (listItem.isOpen()) { 
        fromHeight = listItem.getExpandedHeight(); 
        toHeight = listItem.getCollapsedHeight(); 
    } else { 
        fromHeight = listItem.getCollapsedHeight(); 
        toHeight = listItem.getExpandedHeight(); 
    
        // This closes all item before the selected one opens 
        if (accordion) { 
         closeAll(); 
        } 
    } 
    
    toggleAnimation(listItem, position, fromHeight, toHeight, true); 
    } 
    
    private void closeAll() { 
    int i = 0; 
    for (ListItem listItem : listItems) { 
        if (listItem.isOpen()) { 
         toggleAnimation(listItem, i, listItem.getExpandedHeight(), 
           listItem.getCollapsedHeight(), false); 
        } 
        i++; 
    } 
    } 
    
    private void toggleAnimation(final ListItem listItem, final int position, 
        final int fromHeight, final int toHeight, final boolean goToItem) { 
    
    ResizeAnimation resizeAnimation = new ResizeAnimation(adapter, 
         listItem, 0, fromHeight, 0, toHeight); 
    resizeAnimation.setAnimationListener(new AnimationListener() { 
    
        @Override 
        public void onAnimationStart(Animation animation) { 
        } 
    
        @Override 
        public void onAnimationRepeat(Animation animation) { 
        } 
    
        @Override 
        public void onAnimationEnd(Animation animation) { 
         listItem.setOpen(!listItem.isOpen()); 
         listItem.setDrawable(listItem.isOpen() ? R.drawable.up 
           : R.drawable.down); 
         listItem.setCurrentHeight(toHeight); 
         adapter.notifyDataSetChanged(); 
    
         if (goToItem) 
          goToItem(position); 
        } 
    }); 
    
    listItem.getHolder().getTextViewWrap().startAnimation(resizeAnimation); 
    } 
    
    private void goToItem(final int position) { 
    listView.post(new Runnable() { 
        @Override 
        public void run() { 
         try { 
          listView.smoothScrollToPosition(position); 
         } catch (Exception e) { 
          listView.setSelection(position); 
         } 
        } 
    }); 
    } 
    
    private void mockItems() { 
    listItems 
         .add(new ListItem(
           "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", 
           COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1, 
           EXPANDED_HEIGHT_1)); 
    
    listItems 
         .add(new ListItem(
           "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 
           COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2, 
           EXPANDED_HEIGHT_2)); 
    
    listItems 
         .add(new ListItem(
           "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
           COLLAPSED_HEIGHT_3, COLLAPSED_HEIGHT_3, 
           EXPANDED_HEIGHT_3)); 
    
    listItems 
         .add(new ListItem(
           "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.", 
           COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2, 
           EXPANDED_HEIGHT_4)); 
    
    listItems 
         .add(new ListItem(
           "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.", 
           COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1, 
           EXPANDED_HEIGHT_4)); 
    
    listItems 
         .add(new ListItem(
           "Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.", 
           COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2, 
           EXPANDED_HEIGHT_4)); 
    
    listItems 
         .add(new ListItem(
           "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.", 
           COLLAPSED_HEIGHT_3, COLLAPSED_HEIGHT_3, 
           EXPANDED_HEIGHT_3)); 
    
    listItems 
         .add(new ListItem(
           "Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.", 
           COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1, 
           EXPANDED_HEIGHT_4)); 
    
        } 
    
    } 
    
+1

¿Qué tan bien funciona este código? Viendo cómo notifica tan a menudo, parece bastante pesado procesar con vistas complejas ... – Pkmmte

+0

De hecho. Pero AFAIK sin notificar tan a menudo, la vista de lista se pierde si se desplaza mientras se anima. –

7

Utilización del valor de animador de la solución se ve bien:

ValueAnimator animator = ValueAnimator.ofInt(100, 300); 
animator.setDuration(1000); 
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
    @Override 
    public void onAnimationUpdate(ValueAnimator animation) { 
    listViewItem.getLayoutParams().height = (Integer) animation.getAnimatedValue(); 
    listViewItem.requestLayout(); 
    } 
}); 
animator.start(); 

acaba de leer la guía para desarrolladores de Android, vale la pena leer: http://developer.android.com/guide/topics/graphics/prop-animation.html

Pero hay que tener en cuenta, que requestLayout() el tratamiento es pesado. Debido a que una llamada de requestLayout() hace que cada elemento cercano, que se ve afectado visualmente, recalcule su diseño. Puede ser mejor usar margen inferior negativo (para ocultar alguna parte de su elemento bajo otro) y use el siguiente mostrarlo:

listViewItem.setTranslationY((Integer) animation.getAnimatedValue()); 

Por supuesto, puede animar solamente margen inferior, como se propone en otra responde a esta pregunta

0

Mi caso de uso es simplemente para mostrar más o menos texto. Por lo tanto, para alternar el estado de un elemento de vista de lista de 2 a 6 líneas máximas, por ejemplo, uno puede hacer esto. Y también está animado. La animación no se ve exactamente suave, pero ...

      if(!textDescriptionLenghtToggle) { // simple boolean toggle 
           ObjectAnimator animation = ObjectAnimator.ofInt(
             textViewContainingDescription, 
             "maxLines", 
             6); 
           animation.setDuration(300); 
           animation.start(); 
          } else { 
           ObjectAnimator animation = ObjectAnimator.ofInt(
             textViewContainingDescription, 
             "maxLines", 
             2); 
           animation.setDuration(300); 
           animation.start(); 
          } 
Cuestiones relacionadas