Deslizador de imágenes en Android usando ViewPager

Aplicaciones de Android eso, eso qué

Pasos para crear un control deslizante de imágenes en Android

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: Diseño de la interfaz de usuario

• A continuación se muestra el código para el archivo activity_main.xml . Hemos agregado solo un ViewPager para mostrar las imágenes. 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"
    tools:context=".MainActivity">
  
  <!-- viewpager to show images -->
  <androidx.viewpager.widget.ViewPager
      android:id="@+id/viewPagerMain"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>
  
</RelativeLayout>

• Cree un nuevo archivo de recursos de diseño item.xml dentro de la aplicación -> res -> carpeta de diseño. Agregue solo un ImageView . A continuación se muestra el código del archivo item.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <!-- image viwer to view the images -->
    <ImageView
        android:id="@+id/imageViewMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
  
</LinearLayout>

Paso 3: Parte de codificación

• En primer lugar, cree un adaptador para ViewPager y llámelo como clase ViewPagerAdapter a continuación, se encuentra el código completo de la clase ViewPagerAdapter.java . Se agregan comentarios dentro del código para comprender cada línea del código.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import java.util.Objects;
  
class ViewPagerAdapter extends PagerAdapter {
  
    // Context object 
    Context context;
      
    // Array of images
    int[] images;
      
    // Layout Inflater
    LayoutInflater mLayoutInflater;
  
  
    // Viewpager Constructor 
    public ViewPagerAdapter(Context context, int[] images) {
        this.context = context;
        this.images = images;
        mLayoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }
  
    @Override
    public int getCount() {
        // return the number of images
        return images.length;
    }
  
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == ((LinearLayout) object);
    }
  
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, final int position) {
        // inflating the item.xml 
        View itemView = mLayoutInflater.inflate(R.layout.item, container, false);
  
        // referencing the image view from the item.xml file 
        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageViewMain);
          
        // setting the image in the imageView
        imageView.setImageResource(images[position]);
  
        // Adding the View
        Objects.requireNonNull(container).addView(itemView);
  
        return itemView;
    }
  
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
          
        container.removeView((LinearLayout) object);
    }
}

• Después de crear el adaptador para ViewPager , haga referencia a ViewPager desde el XML y establezca el adaptador en el archivo MainActivity.java . Cree una array de enteros que contenga las imágenes que mostraremos en ViewPager. A continuación se muestra el código completo del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender cada línea del código.

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
  
public class MainActivity extends AppCompatActivity {
  
    // creating object of ViewPager
    ViewPager mViewPager;
  
    // images array
    int[] images = {R.drawable.a1, R.drawable.a2, R.drawable.a3, R.drawable.a4,
                    R.drawable.a5, R.drawable.a6, R.drawable.a7, R.drawable.a8};
      
    // Creating Object of ViewPagerAdapter
    ViewPagerAdapter mViewPagerAdapter;
  
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Initializing the ViewPager Object
        mViewPager = (ViewPager)findViewById(R.id.viewPagerMain);
  
        // Initializing the ViewPagerAdapter
        mViewPagerAdapter = new ViewPagerAdapter(MainActivity.this, images);
  
        // Adding the Adapter to the ViewPager
        mViewPager.setAdapter(mViewPagerAdapter);
    }
}

Salida: ejecutar en el emulador

Enlaces adicionales:

• Descargue el proyecto completo desde el enlace
• Descargar imágenes usando en este proyecto 
• Descarga la aplicación