Потяните, чтобы обновить с помощью RecyclerView в Android с примером
Виджет 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); } } |