Потяните, чтобы обновить с помощью RecyclerView в Android с примером

Опубликовано: 1 Декабря, 2021

Виджет SwipeRefreshLayout используется для реализации шаблона проектирования пользовательского интерфейса с проведением для обновления. Где пользователь использует жест вертикального смахивания для обновления содержимого представлений. Вертикальное смахивание обнаруживается виджетом SwipeRefreshLayout, он отображает отчетливый индикатор выполнения и запускает методы обратного вызова в приложении. Чтобы использовать это поведение, нам нужно использовать виджет SwipeRefreshLayout в качестве родительского элемента для ListViewor GridView. Эти шаблоны пользовательского интерфейса для проектирования материалов используются в таких приложениях, как Gmail, Youtube, Facebook, Instagram и т. Д. Они позволяют пользователю обновлять приложение вручную. Класс SwipeRefreshLayout содержит слушателя под названием OnRefreshListener . Классы, которые хотят использовать этот слушатель, должны реализовать интерфейс SwipeRefreshLayout.OnRefreshListener. При вертикальном смахивании вниз этот слушатель запускается и вызывается метод onRefresh (), который может быть переопределен в соответствии с потребностями.

Пример

В этом примере мы будем хранить данные в ArrayList, который используется для заполнения RecyclerView. Всякий раз, когда вызывается метод onRefresh (), данные ArrayList меняются местами. Ниже приведен образец GIF, чтобы понять, что мы собираемся делать в этой статье. Обратите внимание, что мы собираемся реализовать этот проект на языке Java.

Пошаговая реализация

Шаг 1. Создайте новый проект

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать / запустить новый проект в Android Studio». Обратите внимание, что выберите Java в качестве языка программирования.

Шаг 2. Добавление зависимостей

Мы собираемся использовать RecyclerView и SwipeRefreshLayout. Итак, нам нужно добавить для них зависимости. Для добавления этих зависимостей Перейдите в Gradle Scripts> build.gradle (Module: app) и добавьте следующие зависимости. После добавления этих зависимостей вам нужно нажать « Синхронизировать сейчас» .

dependencies {

   implementation “androidx.recyclerview:recyclerview:1.1.0”

   implementation “androidx.swiperefreshlayout:swiperefreshlayout:1.1.0”

}

Прежде чем двигаться дальше, давайте добавим несколько цветовых атрибутов, чтобы улучшить панель приложения. Перейдите в app> res> values> colors.xml и добавьте следующие атрибуты цвета.

XML



< resources >
< color name = "colorPrimary" >#0F9D58</ color >
< color name = "colorPrimaryDark" >#16E37F</ color >
< color name = "colorAccent" >#03DAC5</ color >
</ resources >

Шаг 3. Работа с файлом activity_main.xml

На этом этапе мы создадим SwipeRefreshLayout и добавим к нему RecyclerView. Перейдите в app> res> layout> activity_main.xml и добавьте следующий фрагмент кода.

XML

<? xml version = "1.0" encoding = "utf-8" ?>
< androidx.swiperefreshlayout.widget.SwipeRefreshLayout
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 >

Шаг 4: Создайте новый файл макета list_item.xml для элементов списка RecyclerView.

Перейдите в приложение> res> layout> щелкните правой кнопкой мыши> New> Layout Resource File и назовите его list_item . Файл макета list_item.xml содержит ImageView и TextView, которые используются для заполнения строк RecyclerView.

XML

<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
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 >

Шаг 5: Создание класса адаптера для RecyclerView

Теперь мы создадим класс Adapter.java , который расширит RecyclerView.Adapter с помощью ViewHolder . Перейдите в приложение> java> пакет> щелкните правой кнопкой мыши и создайте новый класс java и назовите его Адаптер . В классе адаптера мы переопределим метод onCreateViewHolder () , который будет раздувать макет list_item.xml и передать его View Holder. Затем метод onBindViewHolder (), в котором мы устанавливаем данные в представления с помощью держателя представления. Ниже приведен фрагмент кода для класса Adapter.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);
}
}
}

Шаг 6: Работа с файлом MainActivity.java

В классе MainActivity.java мы создаем два списка ArrayList для хранения изображений и текста. Эти изображения помещаются в папку для рисования ( app> res> drawable ). Вы можете использовать любые изображения вместо этого. Затем мы получаем ссылку на SwipeRefreshLayout и RecyclerView и устанавливаем LayoutManager и Adapter для отображения элементов в RecyclerView и реализуем onRefreshListener. Ниже приведен код файла MainActivity.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);
}
}

Выход:

Хотите более динамичную и конкурентную среду для изучения основ Android?
Щелкните здесь, чтобы перейти к уникальному руководству, составленному нашими экспертами с целью мгновенно подготовить вашу отрасль!