Expandable Cardview permite crear paneles de expansión sin demasiados problemas y sin escribir código repetitivo. Una vista de tarjeta expandible se vuelve bastante útil cuando se trata de una presentación eficiente y sistemática de datos o información en la pantalla. Se utiliza en una variedad de aplicaciones, por ejemplo, la aplicación Contactos o la aplicación Galería. Aquí, en este tutorial, crearemos un CardView expandible simple en Android usando Java.
Acercarse
Paso 1: crea un nuevo proyecto en Android Studio
- Haga clic en Archivo, luego en Nuevo => Nuevo proyecto.
- Elija «Actividad vacía» para la plantilla del proyecto.
- Seleccione el idioma como Java.
- Seleccione el SDK mínimo según su necesidad.
Paso 2: agregue la dependencia de CardView
Para poder usar el elemento CardView, primero deberá agregar su dependencia en el proyecto. En el archivo build.gradle (Módulo: aplicación) , agregue la siguiente dependencia y haga clic en Sincronizar ahora para sincronizar los cambios realizados.
implementación ‘androidx.cardView:cardView:1.0.0’
Paso 3: agregue todos los recursos dibujables requeridos en la carpeta dibujable
Elija los recursos disponibles según el requisito. Aquí, en CardView, use dos imágenes de los íconos GeeksforGeeks y otros 2 íconos para indicar las opciones ‘expandir más’ o ‘expandir menos’. Los siguientes son los iconos de geeksforgeeks utilizados:
La siguiente imagen muestra el uso de los iconos de expansión:
Los íconos de expansión que se usan aquí se importan como un recurso vectorial desde el propio Android Studio. Los pasos para el mismo son los siguientes:
- Haga clic derecho en la carpeta de recursos dibujables.
- Ir a nuevo.
- Haga clic en Activo vectorial.
- Aparece el siguiente cuadro. Haga clic en el icono junto a Clip Art.
- De la variedad de íconos que se muestran, elija los siguientes dos íconos:
ic_baseline_expand_more_24 ic_baseline_expand_less_24
Los siguientes archivos se agregan a la carpeta dibujable:
ic_baseline_expand_more_24
android:width="24dp"android:height="24dp"android:viewportWidth="24"android:viewportHeight="24"android:tint="?attr/colorControlNormal"><pathandroid:fillColor="@android:color/white"android:pathData="M16.59, 8.59L12, 13.17 7.41,8.59 6, 10l6, 6 6, -6z"/></vector>ic_baseline_expand_less_24
android:width="24dp"android:height="24dp"android:viewportWidth="24"android:viewportHeight="24"android:tint="?attr/colorControlNormal"><pathandroid:fillColor="@android:color/white"android:pathData="M12, 8l-6, 6 1.41, 1.41L12,10.83l4.59, 4.58L18, 14z"/></vector>
Paso 4: modificar el diseño XML
En el archivo XML, cree el diseño completo junto con la parte que desea que se muestre después de expandir CardView. La idea básica aquí es establecer la visibilidad del elemento expandible en ‘ido’ o ‘visible’ .
Nota : establezca la visibilidad en ‘desaparecido’ y no en ‘invisible’ porque ‘desaparecido’ elimina ese elemento en particular por completo como si nunca hubiera estado allí. Sin embargo, ‘invisible’ solo hace que el elemento desaparezca mientras aún existe en el diseño.
En el diseño a continuación, expandió CardView para mostrar una lista de tres temas. El siguiente es el código para activity_main.xmlel archivo.
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#E4E3E3" tools:context=".MainActivity"> <!--Base CardView--> <androidx.cardview.widget.CardView android:id="@+id/base_cardview" style="@style/Base.CardView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.473" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.021"> <!--This is a ConstraintLayout for the entire CardView including the expandable portion--> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="@+id/base_cardview" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.511" tools:layout_editor_absoluteX="-55dp"> <!--This is a ConstraintLayout for the fixed portion of the CardView. The elements that lie within the fixed portion of the CardView can be constrained to this layout.--> <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/fixed_layout" android:layout_width="match_parent" android:layout_height="150dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.0"> <ImageView android:id="@+id/icon" android:layout_width="150dp" android:layout_height="150dp" android:src="@drawable/icon_one" app:layout_constraintBottom_toBottomOf="@+id/fixed_layout" app:layout_constraintEnd_toEndOf="@+id/fixed_layout" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toStartOf="@+id/fixed_layout" app:layout_constraintTop_toTopOf="@+id/fixed_layout" app:layout_constraintVertical_bias="1.0" /> <TextView android:id="@+id/heading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="GeeksforGeeks" android:textColor="#006600" android:textSize="25dp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="@+id/fixed_layout" app:layout_constraintEnd_toEndOf="@+id/fixed_layout" app:layout_constraintHorizontal_bias="0.926" app:layout_constraintStart_toStartOf="@+id/fixed_layout" app:layout_constraintTop_toTopOf="@+id/fixed_layout" app:layout_constraintVertical_bias="0.198" /> <TextView android:id="@+id/list_of_subjects" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_marginBottom="58dp" android:text="List of subjects" android:textSize="20dp" app:layout_constraintBottom_toBottomOf="@+id/fixed_layout" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.878" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/heading" app:layout_constraintVertical_bias="0.0" /> <!--This is ImageButton for the expansion icon.--> <ImageButton android:id="@+id/arrow_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_baseline_expand_more_24" app:layout_constraintBottom_toBottomOf="@id/fixed_layout" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.802" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/list_of_subjects" app:layout_constraintVertical_bias="0.0" /> </androidx.constraintlayout.widget.ConstraintLayout> <!--The following is the expandable portion whose visibility is initially set to 'gone'. The parent LinearLayout contains 3 child LinearLayouts that hold a subject name and an icon each.--> <LinearLayout android:id="@+id/hidden_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:visibility="gone" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/fixed_layout"> <!--Child LinearLayout 1--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_marginStart="20dp" android:layout_marginTop="10dp" android:layout_marginEnd="10dp" android:layout_marginBottom="10dp" android:src="@drawable/gfg_icon_black" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:text="Database Management" android:textColor="#000000" android:textSize="20dp" /> </LinearLayout> <!--Child LinearLayout 2--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_marginStart="20dp" android:layout_marginTop="10dp" android:layout_marginEnd="10dp" android:layout_marginBottom="10dp" android:src="@drawable/gfg_icon_black" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:text="Data Structures" android:textColor="#000000" android:textSize="20dp" /> </LinearLayout> <!--Child LinearLayout 3--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_marginStart="20dp" android:layout_marginTop="10dp" android:layout_marginEnd="10dp" android:layout_marginBottom="10dp" android:src="@drawable/gfg_icon_black" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:text="Operating Systems" android:textColor="#000000" android:textSize="20dp" /> </LinearLayout> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout> </androidx.cardview.widget.CardView> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 5: Modificar el archivo Java
En el MainActivity.java, utilizando las sentencias if-else , especifique las condiciones para manipular la visibilidad del elemento expandible.
package com.example.android.expandable_cardview;
import android.os.Bundle;
import android.transition.AutoTransition;
import android.transition.TransitionManager;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
public class MainActivity extends AppCompatActivity {
ImageButton arrow;
LinearLayout hiddenView;
CardView cardView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cardView = findViewById(R.id.base_cardview);
arrow = findViewById(R.id.arrow_button);
hiddenView = findViewById(R.id.hidden_view);
arrow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// If the CardView is already expanded, set its visibility
// to gone and change the expand less icon to expand more.
if (hiddenView.getVisibility() == View.VISIBLE) {
// The transition of the hiddenView is carried out
// by the TransitionManager class.
// Here we use an object of the AutoTransition
// Class to create a default transition.
TransitionManager.beginDelayedTransition(cardView,
new AutoTransition());
hiddenView.setVisibility(View.GONE);
arrow.setImageResource(R.drawable.ic_baseline_expand_more_24);
}
// If the CardView is not expanded, set its visibility
// to visible and change the expand more icon to expand less.
else {
TransitionManager.beginDelayedTransition(cardView,
new AutoTransition());
hiddenView.setVisibility(View.VISIBLE);
arrow.setImageResource(R.drawable.ic_baseline_expand_less_24);
}
}
});
}
}
Salida: ejecutar en el emulador
Publicación traducida automáticamente
Artículo escrito por aayushitated2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA