AdapterViewFlipper en Android con ejemplo

La clase AdapterViewFlipper es una subclase de la clase ViewAnimator y se usa para alternar entre 2 o más vistas, de modo que solo se muestra una vista a la vez. Se usa comúnmente en diapositivas. Es un elemento del widget de transición que ayuda a agregar transiciones en las vistas. Es principalmente útil para animar una vista en la pantalla. AdapterViewFlipper cambia sin problemas entre dos o más vistas ( TextView , ImageView o cualquier diseño) y, por lo tanto, proporciona una forma de transición de una vista a otra a través de animaciones apropiadas. A continuación se muestra una muestra de vista previa de AdapterViewFlipper.

Diferencia entre ViewFlipper y AdapterViewFlipper

ViewFlipper y AdapterViewFlipper son subclases de ViewAnimator. El ViewFlipper se usa inicialmente para mostrar todas las vistas de diapositivas fijas. Esto significa que las vistas no se reciclarán. AdapterViewFlipper utiliza un adaptador para completar los datos (similar a ListView / Spinner / RecyclerView , etc.), por lo que los elementos secundarios se determinan sobre la marcha y las vistas que representan a los elementos secundarios se pueden reciclar. Por lo tanto, AdapterViewFlipper se usa para mostrar todas las vistas secundarias. Por lo tanto, hay espacio para reciclar vistas y cargar vistas dinámicamente.

Pasos para crear AdapterViewFlipper

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 seleccione Java como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

Haga clic en Res -> Diseño -> actividad_principal.xml y agregue un TextView para mostrar un texto y el AdapterViewFlipper para mostrar la funcionalidad. A continuación se muestra el código completo para el archivo activity_main.xml .  

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="#fff"
    tools:context=".MainActivity">
  
    <!--Text view to display Global stats-->
    <TextView
        android:id="@+id/heading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="The North"
        android:textSize="28sp"
        android:textAlignment="center"
        android:textColor="#000"
        android:textStyle="bold"/>
  
    <!--AdapterViewFlipper to display the functionality-->
    <AdapterViewFlipper
        android:id="@+id/adapterViewFlipper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/heading"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true">
    </AdapterViewFlipper>
  
</RelativeLayout>

Paso 3: crea otro archivo de diseño

Ahora cree otro archivo de diseños XML haciendo clic con el botón derecho en res -> diseño -> nuevo -> Archivo de recursos de diseño y asígnele el nombre custom_adapter_layout.xml . En este archivo, agregue ImageView y TextView para usarlo en el adaptador. A continuación se muestra el código completo del archivo custom_adapter_layout.xml .  

<?xml version="1.0" encoding="utf-8"?>
<!--Relative Layout to display all the details-->
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#fff">
      
    <!--Image view to display-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_alignParentTop="true" />
  
    <!--Text view to display stats coordinate with image-->
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:textColor="#000"
        android:textSize="20sp" />
      
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.java

Abra MainActivity y agregue el siguiente código para iniciar AdapterViewFlipper. En primer lugar, cree dos arrays, una para imágenes y otra para nombres. Después de crear, configure el adaptador para completar los datos en la vista. Por último, configure el inicio automático y el tiempo de intervalo de volteo para que AdapterViewFlipper cambie entre las vistas y la vista actual se apague y la siguiente vista entre después del intervalo de tiempo dado. A continuación se muestra el código completo del archivo MainActivity.java . Consulte los comentarios dentro del código para comprender el código.

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterViewFlipper;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    AdapterViewFlipper adapterViewFlipper;
  
    int[] IMAGES = {
            R.drawable.ldeosai,
            R.drawable.lakedudipatsar,
            R.drawable.lrama,
            R.drawable.lakekachura
    };
  
    String[] NAMES = {
            "Deosai National Park",
            "Lake Dudipatsar",
            "Rama Meadows",
            "Lower Kachura Lake"
    };
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Link those objects with their respective id's
        // that we have given in .XML file
        adapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.adapterViewFlipper);
        CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), NAMES, IMAGES);
        adapterViewFlipper.setAdapter(customAdapter);
        adapterViewFlipper.setFlipInterval(2600);
        adapterViewFlipper.setAutoStart(true);
    }
}
  
class CustomAdapter extends BaseAdapter {
    Context context;
    int[] images;
    String[] names;
    LayoutInflater inflater;
  
    public CustomAdapter(Context applicationContext, String[] names, int[] images) {
        this.context = applicationContext;
        this.images = images;
        this.names = names;
        inflater = (LayoutInflater.from(applicationContext));
    }
  
    @Override
    public int getCount() {
        return names.length;
    }
  
    @Override
    public Object getItem(int position) {
        return null;
    }
  
    @Override
    public long getItemId(int position) {
        return 0;
    }
  
    @Override
    public View getView(int position, View view, ViewGroup parent) {
        view = inflater.inflate(R.layout.custom_adapter_layout, null);
  
        // Link those objects with their respective id's
        // that we have given in .XML file
        TextView name = (TextView) view.findViewById(R.id.name);
        ImageView image = (ImageView) view.findViewById(R.id.image);
  
        // Set the data in text view
        name.setText(names[position]);
          
        // Set the image in Image view
        image.setImageResource(images[position]);
        return view;
    }
}

Salida: ejecutar en el emulador

Ahora conecte su dispositivo con un cable USB o un emulador e inicie la aplicación. Verá que se mostrará un giro adaptativo de la imagen que cambiará después de un cierto milisegundo.