StackView en Android

En este artículo, implementaremos StackView en Android Studio . StackView es un widget que ayuda a organizar los elementos en forma de tarjetas apiladas. Cada vez que volteamos el elemento frontal, el siguiente elemento posterior pasa al frente.

Implementación paso a paso

Paso 1: Crear 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 debe seleccionar Java como lenguaje de programación. 

Paso 2: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . En este archivo, se ha agregado  StackView .

<?xml version="1.0" encoding="utf-8"?>
<!--We have used RelativeLayout for layout-->
<RelativeLayout 
    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">
  
    <!--Add StackView-->
    <StackView
        android:id="@+id/stack_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
      
</RelativeLayout>

Paso 3: agrega las imágenes

Agregue las imágenes que desea agregar a la pila en res> carpeta dibujable. Copie las imágenes y péguelas en la carpeta dibujable.  

Paso 4: Cree el diseño de los elementos de StackView

Vaya a res > diseño y cree un nuevo archivo XML con el nombre elemento.XML en la carpeta de diseño.

Trabajando con el archivo item.xml:

Vaya a res > layout > item.xml y agregue el código que se proporciona a continuación a ese archivo . En primer lugar, he agregado ImageView donde se toma la imagen que se debe mantener en el frente. Además, se agrega TextView , que usaremos para agregar el nombre debajo de cada imagen agregada a la pila. He agregado los comentarios necesarios en el código a continuación para una mejor comprensión.

<?xml version="1.0" encoding="utf-8"?>
<!--Linearlayout is used for layout-->
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10dp">
      
    <!--ImageView is added where I have used the image 
        that we are going to keep in front-->
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/one" />
      
    <!--Add TextView to add the text below every image 
        added to the stack.-->
    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:textStyle="bold" />
      
</LinearLayout>

Paso 5: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y agregue el código que se proporciona a continuación a ese archivo. Aquí se han implementado dos métodos numberWord() y numberImage() . Se han agregado comentarios al código para una comprensión clara de los conceptos. 

import androidx.appcompat.app.AppCompatActivity;
  
import android.os.Bundle;
import android.widget.StackView;
  
import java.util.ArrayList;
import java.util.List;
  
public class MainActivity extends AppCompatActivity {
  
    StackView stackView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        stackView=(StackView)findViewById(R.id.stack_view);
    }
  
    // the method numberWord() is used 
    // to add the text below corresponding images.
    private List<String> numberWord()
    {
        List<String> word=new ArrayList<>();
        word.add("One");
        word.add("Two");
        word.add("Three");
        word.add("Four");
        word.add("Five");
         return word;
    }
        
    // the method numberWord() is used to call 
    // the images that are added to the stack.
    private List<Integer> numberImage()
    {
        List<Integer> image=new ArrayList<>();
        image.add(R.drawable.one);
        image.add(R.drawable.two);
        image.add(R.drawable.three);
        image.add(R.drawable.four);
        image.add(R.drawable.five);
        return image;
    }
}

Paso 6: Crear adaptador para StackView 

Vaya a la carpeta java > com.example.stackview donde se encuentra nuestro archivo MainActivity.java . Cree una nueva clase de Java con el nombre MainAdapter.java en la carpeta com.example.stackview . 

Trabajar con el archivo MainAdapter.java

Vaya al archivo MainAdapter.java y agregue el código que se proporciona a continuación a ese archivo. Aquí implementaremos los métodos getCount() y getView() . También se llama a un constructor para inicializar los objetos. Se han añadido comentarios al código para una mejor comprensión.

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 java.util.List;
  
public class MainAdapter extends ArrayAdapter {
    List<String> numberWord;
    List<Integer> numberImage;
    int itemLayout;
    Context c;
  
    // constructor is called to initialize the objects
    public MainAdapter(List<String> word, List<Integer> image, int resource, Context context) {
        super(context, resource, word);
        numberWord = word;
        numberImage = image;
        itemLayout = resource;
        c = context;
    }
  
    // getCount() is called to return
    // the total number of words to be used
    @Override
    public int getCount() {
        return numberWord.size();
    }
      
    // getView() is called to get position, 
    // parent and view of the images.
    @NonNull
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(parent.getContext()).inflate(itemLayout, parent, false);
        }
  
        String word = numberWord.get(position);
        Integer image = numberImage.get(position);
  
        TextView textView = convertView.findViewById(R.id.text_view);
        ImageView imageView = convertView.findViewById(R.id.image_view);
        textView.setText(word);
        imageView.setImageResource(image);
        return convertView;
    }
}

Paso 7: llamar a la clase de adaptador a la clase MainActivity.java

Nuevamente, vaya al archivo MainActivity.java y agregue el código que se proporciona a continuación a ese archivo.

Adaptador MainAdapter = new MainAdapter(numberWord(), numberImage(), R.layout.item, MainActivity.this);

stackView.setAdapter(adaptador);

El archivo MainActivity.java final se proporciona a continuación:

import android.os.Bundle;
import android.widget.StackView;
  
import androidx.appcompat.app.AppCompatActivity;
  
import java.util.ArrayList;
import java.util.List;
  
public class MainActivity extends AppCompatActivity {
  
    StackView stackView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        stackView = (StackView) findViewById(R.id.stack_view);
        MainAdapter adapter = new MainAdapter(numberWord(), numberImage(), R.layout.item, MainActivity.this);
        stackView.setAdapter(adapter);
    }
  
    // the method numberWord() is used to
    // add the text below corresponding images.
    private List<String> numberWord() {
        List<String> word = new ArrayList<>();
        word.add("One");
        word.add("Two");
        word.add("Three");
        word.add("Four");
        word.add("Five");
        return word;
    }
  
    // the method numberWord() is used to call 
    // the images that are added to the stack.
    private List<Integer> numberImage() {
        List<Integer> image = new ArrayList<>();
        image.add(R.drawable.one);
        image.add(R.drawable.two);
        image.add(R.drawable.three);
        image.add(R.drawable.four);
        image.add(R.drawable.five);
        return image;
    }
  
}

Producción: