في تطبيق Android ، يتم استخدام Pull To Refresh المعروف أيضًا باسم SwipeRefreshLayout عندما نحتاج إلى تحديث محتوى طريقة العرض عبر إيماءة التمرير العمودي. يقبل طفل واحد فقط يعني المكون الذي نريد تحديثه. يستخدم آلية المستمع لإعلام المستمع الذي يحمل هذا المكون بحدوث حدث تحديث.
يجب أن يضيف النشاط الذي ينشئ عرض SwipeRefreshLayout خاصية OnRefreshListener ليتم إعلامه عند اكتمال حركة التمرير السريع لتحديث الإيماءة. النشاط مسؤول عن معالجة حدث التحديث وتحديث العرض. إذا قرر المستمع أنه لا ينبغي أن يكون هناك تحديث ، فيجب عليه استدعاء setRefreshing (false) لإلغاء الإشارة المرئية للتحديث. إذا رغب أحد الأنشطة في إظهار حركة تقدم ، فيجب أن يستدعي طريقة setRefreshing (true) لتمكين حركة الإيماءة والتقدم.
يعد تنفيذ السحب للتحديث أمرًا سهلاً للغاية في Android. عندما نحتاج إلى اكتشاف التمرير السريع لأسفل في أي عرض ، ما عليك سوى لف العرض حول عنصر SwipeRefreshLayout.
جدول المحتويات
الحاجة إلى السحب للتحديث / SwipeRefreshLayout في Android:
الآن ، توفر الكثير من تطبيقات Android مثل Google+ و twitter وغيرها خيارًا للتمرير أو السحب لأسفل لتحديث محتوى الصفحة. عندما ننتقل من أعلى إلى أسفل ، سيتم عرض أداة تحميل وستختفي بمجرد تحميل المحتوى الجديد.
في وقت سابق ، اعتدنا على تنفيذ عرض تمرير مخصص لاكتشاف التمرير السريع لأسفل ولكن الآن أصبح Android أسهل من خلال تقديم SwipeRefreshLayout في android.support.v4 لاكتشاف التمرير العمودي على أي عرض. يتم استخدامه بشكل أساسي مع ListView أو RecyclerView حيث لدينا قائمة بالبيانات التي تم جلبها من الخادم ونحتاج إلى تحديثها للحصول على سجلات جديدة.
سحب أساسي للتحديث / SwipeRefreshLayout كود XML:
<android.support.v4.widget.SwipeRefreshLayout android:id="@+id/simpleSwipeRefreshLayout" android:layout_width="match_parent" android:layout_height="wrap_content"> < Add View's Here..../> </android.support.v4.widget.SwipeRefreshLayout>
مثال 1: مثال أساسي عن السحب للتحديث في Android Studio:
يوجد أدناه المثال الأول من SwipeRefreshLayout الذي نعرض فيه رقمًا عشوائيًا في TextView الخاص بنا. أولاً ، نعلن عن SwipeRefreshLayout و TextView في ملف XML الخاص بنا ، ثم نحصل على مرجع لكليهما في نشاطنا. بعد ذلك قمنا بتنفيذ حدث setOnRefreshListener على SwipeRefreshLayout وفي طريقة onRefresh () نقوم بإنشاء رقم عشوائي وعرضه في TextView الخاص بنا.
يمكنك أدناه تنزيل الكود ، والاطلاع على الإخراج النهائي والشرح خطوة بخطوة لمثال Pull To التحديث الأساسي.
الخطوة 1: إنشاء مشروع جديد وتسميته SwipeRefreshLayoutExample.
الخطوة 2: افتح Gradle Scripts> build.gradle وتأكد من تعريف مكتبة الدعم فيه أم لا.
apply plugin: 'com.android.application'
android {
compileSdkVersion 25
buildToolsVersion "25.0.3"
defaultConfig {
applicationId "abhiandroid.com.swiperefreshlayoutexample"
minSdkVersion 15
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
testCompile 'junit:junit:4.12'
}
الخطوة 3: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة نقوم بإنشاء SwipeRefreshLayout واثنين من TextView في ملف XML الخاص بنا.
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/simpleSwipeRefreshLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:padding="20dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Random Number: " android:textColor="#000" android:textSize="20sp" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" android:textSize="20sp" /> </LinearLayout> </android.support.v4.widget.SwipeRefreshLayout>
الخطوة 4: الآن افتح التطبيق -> java -> package -> MainActivity.java وأضف الكود أدناه.
في هذه الخطوة أولاً نحصل على مرجع SwipeRefreshLayout و TextView. بعد ذلك قمنا بتنفيذ حدث setOnRefreshListener على SwipeRefreshLayout وفي طريقة onRefresh () نقوم بإنشاء رقم عشوائي وعرضه في TextView الخاص بنا.
package abhiandroid.com.swiperefreshlayoutexample;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;
import java.util.Random;
public class MainActivity extends AppCompatActivity {
SwipeRefreshLayout swipeRefreshLayout;
TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// init SwipeRefreshLayout and TextView
swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.simpleSwipeRefreshLayout);
textView = (TextView) findViewById(R.id.textView);
// implement setOnRefreshListener event on SwipeRefreshLayout
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
// implement Handler to wait for 3 seconds and then update UI means update value of TextView
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
// cancle the Visual indication of a refresh
swipeRefreshLayout.setRefreshing(false);
// Generate a random integer number
Random r = new Random();
int i1 = r.nextInt(80 - 65) + 65;
// set the number value in TextView
textView.setText(String.valueOf(i1));
}
}, 3000);
}
});
}
}
مخرج :
الآن قم بتشغيل التطبيق واسحب لأسفل لتحديث الرقم العشوائي.
مثال 2: اسحب للتحديث باستخدام ListView في Android Studio:
يوجد أدناه المثال الثاني من SwipeRefreshLayout مع ListView حيث نعرض قائمة بالعناصر ونقوم بتبديلها من الأعلى إلى الأسفل. أولاً ، نعلن عن SwipeRefreshLayout و ListView في ملف XML الخاص بنا ، ثم نحصل على مرجع لكليهما في نشاطنا. بعد ذلك نقوم بإنشاء قائمة من نوع String من العناصر ثم نقوم بتنفيذ ArrayAdapter لتعيين البيانات في القائمة. أخيرًا قمنا بتنفيذ حدث setOnRefreshListener على SwipeRefreshLayout وفي طريقة onRefresh () نقوم بتبديل عناصر القائمة وتعيين المحول.
يمكنك أدناه تنزيل الكود ، والاطلاع على الإخراج النهائي والشرح خطوة بخطوة لمثال السحب للتحديث باستخدام ListView.
الخطوة 1: إنشاء مشروع جديد وتسميته SwipeRefreshLayoutExample.
الخطوة 2: افتح Gradle Scripts> build.gradle وتأكد من تعريف مكتبة الدعم فيه أم لا.
apply plugin: 'com.android.application'
android {
compileSdkVersion 25
buildToolsVersion "25.0.3"
defaultConfig {
applicationId "abhiandroid.com.swiperefreshlayoutexample"
minSdkVersion 15
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
testCompile 'junit:junit:4.12'
}
الخطوة 3: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة نقوم بإنشاء SwipeRefreshLayout و ListView في ملف XML الخاص بنا.
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/simpleSwipeRefreshLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:padding="20dp"> <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> </android.support.v4.widget.SwipeRefreshLayout>
الخطوة 4: الآن افتح التطبيق -> java -> package -> MainActivity.java وأضف الكود أدناه.
في هذه الخطوة أولاً ، نحصل على مرجع SwipeRefreshLayout و ListView. بعد ذلك نقوم بإنشاء قائمة من نوع String من العناصر ثم نقوم بتنفيذ ArrayAdapter لتعيين البيانات في القائمة. أخيرًا قمنا بتنفيذ حدث setOnRefreshListener على SwipeRefreshLayout وفي طريقة onRefresh () نقوم بتبديل عناصر القائمة وتعيين المحول ..
package abhiandroid.com.swiperefreshlayoutexample;
import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.Random;
public class MainActivity extends AppCompatActivity {
SwipeRefreshLayout swipeRefreshLayout;
ListView listView;
ArrayList<String> arrayList = new ArrayList<>(Arrays.asList("First Element", "Second Element", "Third Element", "Fourth Element", "Fifth Element"));
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// init SwipeRefreshLayout and ListView
swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.simpleSwipeRefreshLayout);
listView = (ListView) findViewById(R.id.listView);
ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, arrayList);
listView.setAdapter(adapter);
// implement setOnRefreshListener event on SwipeRefreshLayout
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
// cancel the Visual indication of a refresh
swipeRefreshLayout.setRefreshing(false);
shuffleItems();
}
});
}
public void shuffleItems() {
// shuffle the ArrayList items and set the adapter
Collections.shuffle(arrayList, new Random(System.currentTimeMillis()));
ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, arrayList);
listView.setAdapter(adapter);
}
}
انتاج:
الآن قم بتشغيل التطبيق واسحب لأسفل لتحديث البيانات في ListView.
مثال 3: اسحب للتحديث باستخدام RecyclerView في Android Studio:
يوجد أدناه مثال SwipeRefreshLayout مع RecyclerView حيث نعرض قائمة بالعناصر ونقوم بتبديلها من الأعلى إلى الأسفل. أولاً ، نعلن عن SwipeRefreshLayout و RecyclerView في ملف XML الخاص بنا ، ثم نحصل على مرجع لكليهما في نشاطنا. بعد ذلك نقوم بإنشاء قائمة من نوع String من العناصر ثم نقوم بتنفيذ RecyclerView Adapter لتعيين البيانات في القائمة. أخيرًا قمنا بتنفيذ حدث setOnRefreshListener على SwipeRefreshLayout وفي طريقة onRefresh () نقوم بتبديل عناصر القائمة وتعيين المحول.
يمكنك أدناه تنزيل الكود ، والاطلاع على الإخراج النهائي والشرح خطوة بخطوة لمثال السحب للتحديث باستخدام RecyclerView.
الخطوة 1: إنشاء مشروع جديد وتسميته SwipeRefreshLayoutExample.
الخطوة 2: افتح نصوص Gradle> build.gradle وأضف تبعية RecyclerView وتأكد أيضًا من تعريف مكتبة الدعم فيه أم لا.
apply plugin: 'com.android.application'
android {
compileSdkVersion 25
buildToolsVersion "25.0.3"
defaultConfig {
applicationId "abhiandroid.com.swiperefreshlayoutexample"
minSdkVersion 15
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
compile "com.android.support:recyclerview-v7:23.0.1" // dependency file for RecyclerView
testCompile 'junit:junit:4.12'
}
الخطوة 3: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة نقوم بإنشاء SwipeRefreshLayout و RecyclerView في ملف XML الخاص بنا.
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/simpleSwipeRefreshLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v4.widget.SwipeRefreshLayout>
الخطوة 4: قم بإنشاء ملف XML جديد rowlayout.xml لعنصر RecyclerView والصق الكود التالي فيه.
في هذه الخطوة ، نقوم بإنشاء ملف xml جديد لصف العناصر حيث نقوم بإنشاء TextView و ImageView لإظهار البيانات.
<?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:orientation="horizontal" android:padding="5dp"> <!-- items for a single row of RecyclerView --> <ImageView android:id="@+id/image" android:layout_width="70dp" android:layout_height="70dp" android:scaleType="fitXY" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="10dp" android:text="ABCD" android:textColor="#000" android:textSize="20sp" /> </LinearLayout>
الخطوة 5: الآن افتح التطبيق -> جافا -> الحزمة -> MainActivity.java وأضف الكود أدناه.
في هذه الخطوة أولاً ، نحصل على مرجع SwipeRefreshLayout و RecyclerView. بعد ذلك قمنا بإنشاء قائمة ArrayList لأسماء الأشخاص ثم قمنا بتعيين LayoutManager وأخيراً قمنا بتعيين المحول لإظهار العناصر في RecyclerView. أخيرًا قمنا بتنفيذ حدث setOnRefreshListener على SwipeRefreshLayout وفي طريقة onRefresh () نقوم بتبديل عناصر القائمة وتعيين المحول.
package abhiandroid.com.swiperefreshlayoutexample;
import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
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;
// ArrayList for person names
ArrayList personNames = new ArrayList<>(Arrays.asList("Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6", "Person 7", "Person 8", "Person 9", "Person 10", "Person 11", "Person 12", "Person 13", "Person 14"));
ArrayList personImages = new ArrayList<>(Arrays.asList(R.drawable.person1, R.drawable.person2, R.drawable.person3, R.drawable.person4, R.drawable.person5, R.drawable.person6, R.drawable.person7, R.drawable.person1, R.drawable.person2, R.drawable.person3, R.drawable.person4, R.drawable.person5, R.drawable.person6, R.drawable.person7));
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// init SwipeRefreshLayout and ListView
swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.simpleSwipeRefreshLayout);
// get the reference of RecyclerView
recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
// set a LinearLayoutManager with default vertical orientation
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext());
recyclerView.setLayoutManager(linearLayoutManager);
// call the constructor of CustomAdapter to send the reference and data to Adapter
CustomAdapter customAdapter = new CustomAdapter(MainActivity.this, personNames, personImages);
recyclerView.setAdapter(customAdapter); // set the Adapter to RecyclerView
// implement setOnRefreshListener event on SwipeRefreshLayout
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
// cancel the Visual indication of a refresh
swipeRefreshLayout.setRefreshing(false);
shuffleItems();
}
});
}
public void shuffleItems() {
// shuffle the ArrayList's items and set the adapter
Collections.shuffle(personNames, new Random(System.currentTimeMillis()));
Collections.shuffle(personImages, new Random(System.currentTimeMillis()));
// call the constructor of CustomAdapter to send the reference and data to Adapter
CustomAdapter customAdapter = new CustomAdapter(MainActivity.this, personNames, personImages);
recyclerView.setAdapter(customAdapter); // set the Adapter to RecyclerView
}
}
الخطوة 6: إنشاء فئة جديدة CustomAdapter.java داخل الحزمة وإضافة التعليمات البرمجية التالية.
في هذه الخطوة ، نقوم بإنشاء فئة CustomAdapter وتوسيع فئة RecyclerView.Adapter مع View Holder فيه. بعد ذلك نقوم بتنفيذ الطرق التي تم تجاوزها وإنشاء مُنشئ للحصول على البيانات من النشاط. في هذا المحول المخصص ، هناك طريقتان أكثر أهمية: أولاً onCreateViewHolder حيث نقوم بتضخيم عنصر التخطيط xml وتمريره إلى View Holder والآخر onBindViewHolder حيث نقوم بتعيين البيانات في طريقة العرض بمساعدة View Holder. أخيرًا ، قمنا بتنفيذ حدث setOnClickListener في عرض العناصر وعند النقر فوق العنصر ، نعرض اسم الشخص بمساعدة Toast.
package abhiandroid.com.recyclerviewexample;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
public class CustomAdapter extends RecyclerView.Adapter {
ArrayList personNames;
ArrayList personImages;
Context context;
public CustomAdapter(Context context, ArrayList personNames, ArrayList personImages) {
this.context = context;
this.personNames = personNames;
this.personImages = personImages;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// infalte the item Layout
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.rowlayout, parent, false);
// set the view's size, margins, paddings and layout parameters
MyViewHolder vh = new MyViewHolder(v); // pass the view to View Holder
return vh;
}
@Override
public void onBindViewHolder(MyViewHolder holder, final int position) {
// set the data in items
holder.name.setText(personNames.get(position));
holder.image.setImageResource(personImages.get(position));
// implement setOnClickListener event on item view.
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// display a toast with person name on item click
Toast.makeText(context, personNames.get(position), Toast.LENGTH_SHORT).show();
}
});
}
@Override
public int getItemCount() {
return personNames.size();
}
public class MyViewHolder extends RecyclerView.ViewHolder {
// init the item view's
TextView name;
ImageView image;
public MyViewHolder(View itemView) {
super(itemView);
// get the reference of item view's
name = (TextView) itemView.findViewById(R.id.name);
image = (ImageView) itemView.findViewById(R.id.image);
}
}
}
المخرجات :
الآن قم بتشغيل التطبيق واسحب لأسفل لتحديث المحتوى في RecyclerView.