¿Cómo puedo hacer que una celda en un ListView en Android se expanda y contraiga verticalmente cuando se toca?

Tengo una celda en un ListView que tiene un montón de texto. Muestro las primeras dos filas de texto y luego termino con un “…” si va más allá. Quiero que un usuario pueda tocar la celda y expandirla dinámicamente dentro de la vista, mostrando todos los datos. Luego, cuando tocan la celda nuevamente, se contrae de nuevo a su tamaño normal.

He visto una aplicación para iOS hacer esto y es genial. ¿Hay alguna manera de hacer esto con Android? ¿Cómo?

Cerrado

Abrió

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

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

Código de Github: https://github.com/LeonardoCardoso/Animated-Expanding-ListView

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

normalacordeón

Básicamente, debe crear una Animación de traducción personalizada y un Adaptador de lista personalizado y, mientras se está animando, debe actualizar la altura actual de la vista de lista y notificar al adaptador acerca de este cambio.

Vayamos al código.

  1. Diseño del elemento de lista

         
  2. Diseño de la actividad

          
  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. Ver clase Holder

     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. Clase de animación personalizada

      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. Clase de adaptador de lista personalizada

     public class ListAdapter extends ArrayAdapter { private ArrayList listItems; private Context context; public ListAdapter(Context context, int textViewResourceId, ArrayList 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 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(); 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)); } } 

Aquí hay un ejemplo de Udinic. Se ha expandido el elemento listview con animación y requiere nivel de API solo 4+

ExpandirAnimaciónEjemplo

en el evento onItemClick use ExpandAnimation

 /** * This animation class is animating the expanding and reducing the size of a view. * The animation toggles between the Expand and Reduce, depending on the current state of the view * @author Udinic * */ public class ExpandAnimation extends Animation { private View mAnimatedView; private LayoutParams mViewLayoutParams; private int mMarginStart, mMarginEnd; private boolean mIsVisibleAfter = false; private boolean mWasEndedAlready = false; /** * Initialize the animation * @param view The layout we want to animate * @param duration The duration of the animation, in ms */ public ExpandAnimation(View view, int duration) { setDuration(duration); mAnimatedView = view; mViewLayoutParams = (LayoutParams) view.getLayoutParams(); // decide to show or hide the view mIsVisibleAfter = (view.getVisibility() == View.VISIBLE); mMarginStart = mViewLayoutParams.bottomMargin; mMarginEnd = (mMarginStart == 0 ? (0- view.getHeight()) : 0); view.setVisibility(View.VISIBLE); } @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(); // Making sure we didn't run the ending before (it happens!) } else if (!mWasEndedAlready) { mViewLayoutParams.bottomMargin = mMarginEnd; mAnimatedView.requestLayout(); if (mIsVisibleAfter) { mAnimatedView.setVisibility(View.GONE); } mWasEndedAlready = true; } } } 

El uso detallado está en proyecto.

Hay una muestra en el SDK, podría ayudarte.

Se llama, obviamente, ExpandableList . Ubicada en las demostraciones API (/ docs / resources / samples / ApiDemos / src / com / example / android / apis / view)

Aquí hay una opción que haría:

Agregue una statement if al BaseAdapter de ListView que consultará su ListView para los elementos seleccionados actualmente. Si el elemento actual que está dibujando (en su BaseAdapter) es la posición del elemento seleccionado, entonces cree su vista expandida en su lugar. Luego reanuda la creación de vista normal.

Editar:

Hice esto como una opción bajo la suposición de que desea expandir un (1) elemento a la vez y no, por ejemplo, una lista completa.

Nunca he usado ExpandableListViews, pero creo que es bastante simple hacer una implementación “manual” de eso. Extendiendo un ArrayAdapter podemos manipular el diseño de fila como queramos. Por lo tanto, crea tu adaptador extendido y dos OnClickListeners, uno para expandir y otro para contratar. He pegado toda la clase aquí.

Si no desea que algunos de los elementos sean extensibles, ajuste los oyentes según sus necesidades. Si quieres que se vea mejor, puedes agregar algunas animaciones deslizantes, ¡pero desde aquí deberías tener suficiente para hacer lo que necesites!

 public class ExtendedAdapter extends BaseAdapter { public static final String TAG = "TodoAdapter"; private Context mContext; private int layoutResource; private List items; private OnClickListener expand; private OnClickListener contract; public ExtendedAdapter(Context context, int textViewResourceId, List items) { this.items = items; this.mContext = context; this.layoutResource = textViewResourceId; expand = new OnClickListener() { @Override public void onClick(View v) { TextView tv = (TextView) v; String[] textSplited = tv.getText().toString().split(" "); // somehow split your text tv.setMaxLines(textSplited.length); StringBuilder sb = new StringBuilder(); for (String word : textSplited) sb.append(word + "\n"); tv.setText(sb.toString()); tv.setOnClickListener(contract); } }; contract = new OnClickListener() { @Override public void onClick(View v) { TextView tv = (TextView) v; tv.setMaxLines(1); String[] textSplitted = tv.getText().toString().split("\n"); StringBuilder sb = new StringBuilder(); for (String word : textSplitted) sb.append(word + " "); tv.setText(sb.toString()); tv.setOnClickListener(expand); } }; } public int getCount() { return items.size(); } public Object getItem(int position) { return position; } public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; if (v == null) { LayoutInflater vi = (LayoutInflater) mContext .getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = vi.inflate(layoutResource, null); } TextView text = (TextView) v.findViewById(R.id.extended_text); text.setText(items.get(position)); text.setOnClickListener(expand); return v; } } 

Y el row_layout.xml

     

Lo que quiere hacer es tener una bandera que sepa si la fila está expandida o no. Si es así, ejecute una animación que lo encoge, y viceversa.

 public void onListItemClicked(int position) { View v = listView.getView(position); if(expanded[position]) v.startAnimation(shrinkAnimation); else v.startAnimation(growAnimation); expanded[position] = !expanded[position]; } 

Sencillo.

Sin embargo, si lo que está haciendo es algo similar a la captura de pantalla que implementó, le aconsejaría que no lo haga con un ListView. Las vistas son cada una lo suficientemente diferentes como para justificar hacer esto manualmente con LinearLayouts . Solo use ListView si el número de filas es desconocido o muy grande.