Android - widget de acordeón

Question

Estoy buscando la mejor manera de crear un Accordion-style widget such as on this page. ¿Hay alguna forma de lograr el mismo efecto con el kit de herramientas estándar de Android o necesito crear un widget personalizado? Si es así, ¿cuál recomendaría extender si hubiera?

Answer 1

he empujado android accordion view proyecto en GitHub. Lo usamos para nuestros clientes, probado en 2.2, 2.3.x, 3.2 y 4.0.3. Funciona bastante bien para nosotros.

Agregando animación al plegar/desplegar en el siguiente paso.

Aquí es pequeña pantalla:

Answer 2

Y en caso de que todavía se lo pregunte, esto se puede hacer prácticamente con un par de botones/diseños apilados dentro del diseño lineal. pseudo código siguiente

<LinearLayout android:orientation="vertical"> 
    <Button android:text="Panel 1"/> 
    <SomeKindOfLayout android:id="@+id/panel1"> 
      <!-- widgets in first panel go here --> 
    </SomeKindOfLayout> 
    <Button android:text="Panel 2"/> 
    <SomeKindOfLayout android:id="@+id/panel2" android:visibility="gone"> 
      <!-- widgets in second panel go here --> 
    </SomeKindOfLayout> 
    <Button android:text="Panel 3"/> 
    <SomeKindOfLayout android:id="@+id/panel3" android:visibility="gone"> 
      <!-- widgets in third panel go here --> 
    </SomeKindOfLayout> 
    <Button android:text="Panel 4"/> 
    <SomeKindOfLayout android:id="@+id/panel4" android:visibility="gone"> 
      <!-- widgets in fourth panel go here --> 
    </SomeKindOfLayout></LinearLayout> 

Otra cosa a intentar posiblemente se apilamiento ExpandableListView-s en la parte superior de uno al otro

Answer 3

tengo que arriesgarme y decir que la respuesta @Bostone es la más adecuada. Le daré mi código a continuación para que pueda ver. Gracias por el GitHub Maciej Łopaciński, pero como @SudoPlz dijo en los comentarios, no hay documentación en absoluto. No sabía por dónde empezar. Intento hacerlo con Eclipse y Android Studio y en ninguno de los dos podía ejecutar el proyecto para comenzar a descubrir cómo funcionaba. Además, el último compromiso en ese proyecto fue hace aproximadamente 1 año, lo que me hace temer mucho que si algo sale mal, me quede atascado en un callejón sin salida. Así que sin más dilación, aquí está mi solución basada en @Bostone:

1.- En primer lugar hay que crear un botón y un diseño anidado en una ScrollView:

<ScrollView 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=".TasksListActivity"> 


      <Button 
       android:id="@+id/magic_btn" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:text="Magic Btn"/> 
      <LinearLayout 
       android:id="@+id/magic_layout" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:orientation="vertical" 
       android:visibility="gone"> 

     </LinearLayout> 
</ScrollView> 

2.- Después de que vaya a su JAVA correspondiente, allí encuentra el botón y configura un onClickListener, dentro del onClickListener encontrará el diseño.

Button findMagicBtn = (Button) findViewById(R.id.magic_btn); 
     findMagicBtn.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 

      } 
     }); 

3.- Así que ahora, dentro de onClickListener, encontraremos el diseño. Como puede ver en el primer paso, el diseño está configurado por defecto en GONE, pero ahora debemos configurarlo para que sea visible. El problema es, ¿cómo puedo hacer que desaparezca nuevamente y viceversa? Así que vamos a añadir una condición para conseguir la visibilidad de la disposición y sobre la base de que se ocultará o mostrará:

Button findMagicBtn = (Button) findViewById(R.id.magic_btn); 
     findMagicBtn.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       LinearLayout findMagicLl = (LinearLayout) findViewById(R.id.magic_layout); 
       if (findMagicLl.getVisibility() == View.VISIBLE) { 
        findMagicLl.setVisibility(View.GONE); 
       } else { 
        findMagicLl.setVisibility(View.VISIBLE); 
       } 
      } 
     }); 

Esto se puede poner una sobre la otra tantas veces que desee.

Así que si realmente quieres que parezca un acordeón puedes utilizar el botón. Se puede poner una flecha a la derecha de la misma, utilizando por ejemplo:

findMagicBtn.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.right_arrow, 0); 

que debe hacer que el interior de la OnClickListener y utilizar la condición para cambiar la dirección de la flecha, cambiando el dibujable (si se ha ido y flecha abajo, y si es visible una flecha hacia arriba).

Además, puede hacer que se vea más natural mediante la adición de una animación, como esto:

ScaleAnimation animation = new ScaleAnimation(1f, 1f, 1f, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f); 
animation.setDuration(180); 
animation.setFillAfter(true); 
findMagicLl.startAnimation(animation); 

que tendrá que tener en cuenta que la animación de arriba debe realizarse mientras la vista es visible. Tenga en cuenta que setFillAfter(true) cambiará el tamaño del contenedor permanentemente, por lo que si lo hace, quizás ya no desee usar VIEW.GONE. Esta pregunta tiene una explicación maravillosa acerca de Scale Animation