El widget SwipeRefreshLayout se usa para implementar un patrón de diseño de interfaz de usuario de deslizar para actualizar. Donde el usuario utiliza el gesto de deslizamiento vertical para actualizar el contenido de las vistas . El widget SwipeRefreshLayout detecta el deslizamiento vertical y muestra una barra de progreso distinta y activa los métodos de devolución de llamada en la aplicación. Para usar este comportamiento, necesitamos usar el widget SwipeRefreshLayout como padre de ListView o GridView . Estos patrones de interfaz de usuario de Material Design se ven en aplicaciones como Gmail, Youtube, Facebook, Instagram, etc. Permiten al usuario actualizar la aplicación manualmente. La clase SwipeRefreshLayout contiene un oyente llamado OnRefreshListener. Las clases que quieran usar este oyente deben implementar la interfaz SwipeRefreshLayout.OnRefreshListener . En el gesto de deslizamiento vertical hacia abajo, este oyente se activa y se llama al método onRefresh() y se puede anular según las necesidades.
Ejemplo
En este ejemplo, almacenaríamos datos en ArrayList , que se usa para completar RecyclerView . Cada vez que se llama al método onRefresh() , los datos de ArrayList se reorganizan. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java .
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 seleccione Java como lenguaje de programación.
Paso 2: Agregar dependencias
Vamos a utilizar RecyclerView y SwipeRefreshLayout. Entonces, necesitamos agregar dependencias para ellos. Para agregar estas dependencias, vaya a Gradle Scripts > build.gradle(Module: app) y agregue las siguientes dependencias. Después de agregar estas dependencias, debe hacer clic en Sincronizar ahora .
dependencias {
implementación «androidx.recyclerview:recyclerview:1.1.0»
implementación «androidx.swiperefreshlayout:swiperefreshlayout:1.1.0»
}
Antes de continuar, agreguemos algunos atributos de color para mejorar la barra de la aplicación. Vaya a aplicación > res > valores > colores.xml y agregue los siguientes atributos de color.
XML
<resources> <color name="colorPrimary">#0F9D58</color> <color name="colorPrimaryDark">#16E37F</color> <color name="colorAccent">#03DAC5</color> </resources>
Paso 3: trabajar con el archivo activity_main.xml
En este paso, crearemos SwipeRefreshLayout y le agregaremos RecyclerView. Vaya a aplicación > res > diseño > actividad_principal.xml y agregue el siguiente fragmento de código.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.swiperefreshlayout.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/swipeRefreshLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
Paso 4: Cree un nuevo archivo de diseño list_item.xml para los elementos de la lista de RecyclerView.
Vaya a la aplicación > res > diseño > haga clic con el botón derecho en > Nuevo > Archivo de recursos de diseño y asígnele el nombre list_item . El archivo de diseño list_item.xml contiene un ImageView y un TextView que se utilizan para completar las filas de RecyclerView.
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="wrap_content" android:layout_margin="10dp" android:orientation="horizontal" android:padding="10dp"> <!--For image src we have used ic_launcher and for text "GeeksForGeeks they are used only for reference how it will looks"--> <ImageView android:id="@+id/imageView" android:layout_width="120dp" android:layout_height="120dp" android:scaleType="fitXY" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:paddingStart="10dp" android:text="GeeksForGeeks" /> </LinearLayout>
Paso 5: crear una clase de adaptador para RecyclerView
Ahora, crearemos una clase Adapter.java que extenderá RecyclerView.Adapter con ViewHolder . Vaya a la aplicación> java> paquete> haga clic con el botón derecho y cree una nueva clase java y asígnele el nombre Adaptador . En la clase Adapter, anularemos el método onCreateViewHolder() que inflará el diseño list_item.xml y lo pasará a View Holder. Luego, el método onBindViewHolder() donde configuramos los datos en las Vistas con la ayuda de View Holder. A continuación se muestra el fragmento de código para la clase Adapter.java .
Java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
// Extends the Adapter class to RecyclerView.Adapter
// and implement the unimplemented methods
public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
ArrayList images, text;
Context context;
// Constructor for initialization
public Adapter(Context context, ArrayList images, ArrayList text) {
this.context = context;
this.images = images;
this.text = text;
}
@NonNull
@Override
public Adapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// Inflating the Layout(Instantiates list_item.xml layout file into View object)
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
// Passing view to ViewHolder
Adapter.ViewHolder viewHolder = new Adapter.ViewHolder(view);
return viewHolder;
}
// Binding data to the into specified position
@Override
public void onBindViewHolder(@NonNull Adapter.ViewHolder holder, int position) {
// TypeCast Object to int type
int res = (int) images.get(position);
holder.images.setImageResource(res);
holder.text.setText((CharSequence) text.get(position));
}
@Override
public int getItemCount() {
// Returns number of items currently available in Adapter
return text.size();
}
// Initializing the Views
public class ViewHolder extends RecyclerView.ViewHolder {
ImageView images;
TextView text;
public ViewHolder(View view) {
super(view);
images = (ImageView) view.findViewById(R.id.imageView);
text = (TextView) view.findViewById(R.id.textView);
}
}
}
Paso 6: trabajar con el archivo MainActivity.java
En la clase MainActivity.java creamos dos ArrayList para almacenar imágenes y texto. Estas imágenes se colocan en la carpeta dibujable ( aplicación > res > dibujable ). Puede usar cualquier imagen en lugar de esto. Y luego obtenemos la referencia de SwipeRefreshLayout y RecyclerView y configuramos LayoutManager y Adapter para mostrar elementos en RecyclerView e implementar onRefreshListener. A continuación se muestra el código del archivo MainActivity.java .
Java
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.Random;
public class MainActivity extends AppCompatActivity {
SwipeRefreshLayout swipeRefreshLayout;
RecyclerView recyclerView;
// Using ArrayList to store images and text data
ArrayList images = new ArrayList<>(Arrays.asList(R.drawable.facebook, R.drawable.twitter,
R.drawable.instagram, R.drawable.linkedin, R.drawable.youtube, R.drawable.whatsapp));
ArrayList text = new ArrayList<>(Arrays.asList("Facebook", "Twitter", "Instagram", "LinkedIn", "Youtube", "Whatsapp"));
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Getting reference of swipeRefreshLayout and recyclerView
swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipeRefreshLayout);
recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
// Setting the layout as Linear for vertical orientation to have swipe behavior
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext());
recyclerView.setLayoutManager(linearLayoutManager);
// Sending reference and data to Adapter
Adapter adapter = new Adapter(MainActivity.this, images, text);
// Setting Adapter to RecyclerView
recyclerView.setAdapter(adapter);
// SetOnRefreshListener on SwipeRefreshLayout
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
swipeRefreshLayout.setRefreshing(false);
RearrangeItems();
}
});
}
public void RearrangeItems() {
// Shuffling the data of ArrayList using system time
Collections.shuffle(images, new Random(System.currentTimeMillis()));
Collections.shuffle(text, new Random(System.currentTimeMillis()));
Adapter adapter = new Adapter(MainActivity.this, images, text);
recyclerView.setAdapter(adapter);
}
}