studio - Android-widget de acordeón

list expandable android

Question

Estoy buscando la mejor manera de crear un widget de estilo de acordeón, como en esta página . ¿Hay alguna forma de lograr el mismo efecto utilizando el kit de herramientas estándar de Android o necesito crear un widget personalizado? Si es así, ¿cuál recomendaría si fuera necesario?

Answer 1

En mi aplicación, usé la vista de acordeón de Riya Gayasen. Fue muy fácil empezar y funcionó bien. Aquí esta lo que hice.

1. Descargue el zip del código fuente de https://github.com/riyagayasen/Android_accordion_view .
2. Descomprima y copie la carpeta ''easyaccordion'' al directorio raíz de su proyecto (el directorio que contiene la carpeta ''app'')
3. En su proyecto root settings.gradle agregue el archivo: easyaccordion. Así es como se ve mi archivo: include '':app'','':easyaccordion''
4. En su archivo app / build.gradle agregue la siguiente línea al bloque de dependencias. implementation ''com.riyagayasen.android:easyaccordion:1.0.3''
5. Y eso es. Puede comenzar a utilizar el componente dentro de su diseño.

Answer 2

He empujado proyecto de vista de acordeón de Android 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.

Iremos a agregar animación al plegar / desplegar en el siguiente paso.

Aquí hay una pequeña captura de pantalla:

Answer 3

Tengo que arriesgarme y decir que la respuesta de @Bostone es la más apropiada. Te daré mi código a continuación para que puedas 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 tampoco pude ejecutar el proyecto para comenzar a descubrir cómo funciona. 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 quedaré atrapado en un callejón sin salida. Así que sin más demora, aquí está mi solución basada en @Bostone:

1.- Primero tienes que crear un botón y un diseño anidado en un 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 eso, vaya a su JAVA correspondiente, encuentre el botón y configure 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 tenemos que configurarlo como visible. El problema es, ¿cómo puedo hacer que desaparezca y viceversa? Entonces, agregaremos una condición para obtener la visibilidad del diseño y, en base a eso, se ocultará o se 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 unos sobre otros tantas veces como quieras.

Así que ahora, si realmente quieres que se vea como un acordeón, puedes presionar el botón. Podrías poner una flecha a la derecha de ella, usando el ejemplo:

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

Debe hacer eso dentro de onClickListener y usar la condición para cambiar la dirección de la flecha, cambiando el dibujo (si se ha ido y la flecha hacia abajo, y si es visible una flecha hacia arriba).

Además, puedes hacer que se vea más natural agregando una animación, como esta:

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);

Deberá tener en cuenta que la animación anterior debe realizarse mientras la vista está visible. Tenga en cuenta que setFillAfter(true) , cambiará el tamaño del contenedor de forma permanente, por lo que si lo hace, quizás ya no quiera usar VIEW.GONE . Esta pregunta tiene una maravillosa explicación sobre la animación de escala.

Answer 4

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

<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 que posiblemente hay que intentar es apilar ExpandableListView-s uno encima del otro