Un GridView es un tipo de AdapterView que muestra elementos en una cuadrícula de desplazamiento bidimensional. Los elementos se insertan en este diseño de cuadrícula desde una base de datos o desde una array. El adaptador se usa para mostrar estos datos, el método setAdapter() se usa para unir el adaptador con GridView. La función principal del adaptador en GridView es obtener datos de una base de datos o array e insertar cada dato en un elemento apropiado que se mostrará en GridView. Así es como se ve la estructura GridView.
Atributos XML de GridView
- android:numColumns : este atributo de GridView se usará para decidir la cantidad de columnas que se mostrarán en Grid.
- android:horizontalSpacing : este atributo se usa para definir el espacio entre dos columnas de GridView.
- android:verticalSpacing : este atributo se usa para especificar el espacio entre dos filas de GridView.
Ejemplo
Ahora veamos un ejemplo en el que implementaremos un GridView simple en la aplicación de Android. En GridView, ahora mostramos la lista de cursos disponibles en GeeksforGeeks.
Paso 1: Creación de un nuevo proyecto
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.
Paso 2: agregue el repositorio de Google en el archivo build.gradle del proyecto de la aplicación.
script de compilación {
repositorios {
Google()
mavenCentral()
}
Todos los componentes de Jetpack están disponibles en el repositorio de Google Maven, inclúyelos en el archivo build.gradle
todos los proyectos {
repositorios {
Google()
mavenCentral()
}
}
Paso 3: Modificar el archivo activity_main.xml
Agregue GridView al archivo activity_main.xml . A continuación se muestra el código para el archivo activity_main.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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"> <!-- android:numColumns=2 is the number of columns for Grid View android:horizontalSpacing is the space between horizontal grid items.--> <GridView android:id="@+id/idGVcourses" android:layout_width="match_parent" android:layout_height="match_parent" android:horizontalSpacing="6dp" android:numColumns="2" android:verticalSpacing="6dp" /> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 4: cree un archivo de diseño XML para cada elemento de GridView
Cree un archivo XML para cada elemento de la cuadrícula que se mostrará en GridView. Haga clic en la aplicación > res > diseño > clic derecho > archivo de recursos de diseño y luego nombre el archivo como card_item . A continuación se muestra el código para el archivo card_item.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <!--XML implementation of Card Layout--> <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="120dp" android:layout_gravity="center" android:layout_margin="5dp" app:cardCornerRadius="5dp" app:cardElevation="5dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/idIVcourse" android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/idTVCourse" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/app_name" android:textAlignment="center" /> </LinearLayout> </androidx.cardview.widget.CardView>
Paso 5: crea una clase modal para almacenar datos
Modal Class es la clase JAVA que maneja los datos que se agregarán en cada elemento de GridView de GridView. Para crear una clase modal.
- Ahora haga clic en aplicación> java> nombre del paquete de aplicaciones> haga clic con el botón derecho en él.
- Luego haga clic en Nuevo > Clase Java .
- Asigne un nombre a su archivo de clase Java como . A continuación se muestra el código para el archivo .java .
Java
public class CourseModel { // string course_name for storing course_name // and imgid for storing image id. private String course_name; private int imgid; public CourseModel(String course_name, int imgid) { this.course_name = course_name; this.imgid = imgid; } public String getCourse_name() { return course_name; } public void setCourse_name(String course_name) { this.course_name = course_name; } public int getImgid() { return imgid; } public void setImgid(int imgid) { this.imgid = imgid; } }
Paso 6: crear una clase de adaptador
Adapter Class agrega los datos de Modal Class en cada elemento de GridView que se mostrará en la pantalla. Para crear una clase de adaptador.
- Ahora haga clic en aplicación> java> nombre del paquete de aplicaciones> haga clic con el botón derecho en él.
- Luego haga clic en Nuevo > Clase Java .
- Asigne un nombre a su archivo de clase Java como . A continuación se muestra el código para el archivo .java .
Java
import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import java.util.ArrayList; public class CourseGVAdapter extends ArrayAdapter<CourseModel> { public CourseGVAdapter(@NonNull Context context, ArrayList<CourseModel> courseModelArrayList) { super(context, 0, courseModelArrayList); } @NonNull @Override public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) { View listitemView = convertView; if (listitemView == null) { // Layout Inflater inflates each item to be displayed in GridView. listitemView = LayoutInflater.from(getContext()).inflate(R.layout.card_item, parent, false); } CourseModel courseModel = getItem(position); TextView courseTV = listitemView.findViewById(R.id.idTVCourse); ImageView courseIV = listitemView.findViewById(R.id.idIVcourse); courseTV.setText(courseModel.getCourse_name()); courseIV.setImageResource(courseModel.getImgid()); return listitemView; } }
Paso 7: Modifique el archivo MainActivity.java
Ahora, en este archivo, realizaremos todas las operaciones de back-end que agregarán datos a GridView. A continuación se muestra el código del archivo MainActivity.java .
Java
import android.os.Bundle; import android.widget.GridView; import androidx.appcompat.app.AppCompatActivity; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { GridView coursesGV; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); coursesGV = findViewById(R.id.idGVcourses); ArrayList<CourseModel> courseModelArrayList = new ArrayList<CourseModel>(); courseModelArrayList.add(new CourseModel("DSA", R.drawable.ic_gfglogo)); courseModelArrayList.add(new CourseModel("JAVA", R.drawable.ic_gfglogo)); courseModelArrayList.add(new CourseModel("C++", R.drawable.ic_gfglogo)); courseModelArrayList.add(new CourseModel("Python", R.drawable.ic_gfglogo)); courseModelArrayList.add(new CourseModel("Javascript", R.drawable.ic_gfglogo)); courseModelArrayList.add(new CourseModel("DSA", R.drawable.ic_gfglogo)); CourseGVAdapter adapter = new CourseGVAdapter(this, courseModelArrayList); coursesGV.setAdapter(adapter); } }
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA