في Android ، يعد RecyclerView إصدارًا متقدمًا ومرنًا من ListView و GridView. إنها حاوية تُستخدم لعرض كمية كبيرة من مجموعات البيانات التي يمكن تمريرها بكفاءة عالية من خلال الحفاظ على عدد محدود من المشاهدات.
تم تقديم RecyclerView في تصميم المواد في مستوى API 21 (Android 5.0 أي Lollipop). يوفر التصميم متعدد الأبعاد الكثير من الميزات الجديدة في Android والتي غيرت كثيرًا من أنماط التصميم المرئي فيما يتعلق بتصميم تطبيقات Android الحديثة .
تعد هذه الأداة الجديدة خطوة كبيرة لعرض البيانات لأن ListView هي واحدة من أكثر عناصر واجهة المستخدم استخدامًا. في RecyclerView android provides a lots of new features which are not present in existing ListView or GridView .
رمز XML RecyclerView الأساسي :
<?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="abhiandroid.com.recyclerviewexample.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
جدول المحتويات
تبعية Gradle لاستخدامها في RecyclerView:
تعد أداة RecyclerView جزءًا من مكتبة منفصلة صالحة لمستوى API 7 أو أعلى. ستحتاج إلى إضافة التبعية التالية في ملف إنشاء Gradle الخاص بك لاستخدام نظرة عامة حول إعادة التدوير.
نصوص Gradle> build.gradle
dependencies {
...
compile "com.android.support:recyclerview-v7:23.0.1"
}
RecyclerView كـ ListView في Android:
سنناقش في هذه المقالة كيفية استخدام RecyclerView كـ ListView. لذلك نحن بحاجة إلى فهم مكون LayoutManager من RecyclerView.
مدير التخطيط هو في الأساس مفهوم جديد للغاية تم تقديمه في RecyclerView لتحديد نوع التخطيط الذي يجب أن تستخدمه RecyclerView.
يحتوي على مراجع لجميع طرق العرض التي تم ملؤها ببيانات الإدخال. يمكننا إنشاء مدير تخطيط مخصص من خلال توسيع RecyclerView.
توفر فئة LayoutManager من RecyclerView ثلاثة أنواع من مديري التخطيط المدمجين.
- LinearLayoutManager: يستخدم لعرض قائمة عمودية أو أفقية.
- GridLayoutManager: يستخدم لعرض العناصر في شكل شبكات.
- StaggeredGridLayoutManager: يتم استخدامه لإظهار العناصر في شبكة متداخلة (صورة ذات حجم غير متساو في الشبكة).
نظرًا لأن هذه المقالة تركز فقط على RecyclerView كـ ListView ، لذا في هذه المقالة سأناقش فقط حول LinearLayoutManager لأنه يتم استخدامه لعرض البيانات في شكل قائمة.
LinearLayoutManager:
يُستخدم LinearLayoutManager لعرض عناصر البيانات في قائمة تمرير أفقية أو رأسية.
إذا كنا بحاجة إلى قائمة (رأسية أو أفقية) ، فنحن بحاجة إلى استخدام إعداد LinearLayoutManager مع طلب التوجيه. بكلمات بسيطة يمكننا القول أننا نستخدم LinearLayoutManager لعرض RecyclerView كعرض ListView.
constructor Public لـ LinearLayoutManager: أدناه نحدد المُنشئ العام لـ LinearLayoutManager الذي يجب استخدامه لتحديد الاتجاه (الرأسي أو الأفقي) لـ RecyclerView.
1) LinearLayoutManager (Context context ): يتم استخدامه لإنشاء LinearLayoutManager العمودي. في هذا ، نحتاج إلى تعيين معلمة واحدة فقط ، أي تستخدم لتعيين سياق النشاط الحالي.
مثال:
في مقتطف الشفرة أدناه ، نعرض كيفية استخدام هذا المُنشئ في Android.
مع الاتجاه العمودي الافتراضي:
// get the reference of RecyclerView RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); // set a LinearLayoutManager with default orientation LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext()); recyclerView.setLayoutManager(linearLayoutManager); // set LayoutManager to RecyclerView
مع الاتجاه الأفقي:
// get the reference of RecyclerView RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); // set a LinearLayoutManager LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext()); linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); // set Horizontal Orientation recyclerView.setLayoutManager(linearLayoutManager); // set LayoutManager to RecyclerView
2) LinearLayoutManager(Context context, int orientation, boolean reverseLayout) : في هذه المعلمة الأولى تُستخدم لتعيين السياق الحالي ، تُستخدم الثانية لتعيين اتجاه التخطيط يجب أن يكون عموديًا أو أفقيًا. باستخدام هذا المُنشئ يمكننا بسهولة إنشاء قائمة أفقية أو عمودية. المعلمة الثالثة هي قيمة منطقية يتم تعيينها على تخطيطات حقيقية من النهاية إلى البداية ، وهذا يعني أنه يتم ترتيب العناصر من النهاية إلى البداية.
مثال: .
في مقتطف الشفرة أدناه ، نعرض كيفية استخدام هذا المُنشئ في Android.
// get the reference of RecyclerView RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); // set a LinearLayoutManager with default horizontal orientation and false value for reverseLayout to show the items from start to end LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext(),LinearLayoutManager.HORIZONTAL,false); recyclerView.setLayoutManager(linearLayoutManager); // set LayoutManager to RecyclerView
مقارنة بين RecyclerView و ListView
هناك الكثير من الميزات الجديدة في RecyclerView غير الموجودة في ListView الحالية. يعتبر RecyclerView أكثر مرونة وقوة وتحسينًا كبيرًا على ListView. هنا سأحاول أن أعطيك نظرة ثاقبة مفصلة.
نناقش أدناه بعض الميزات المهمة لـ RecyclerView التي يجب أن توضح سبب كون RecyclerView أفضل من ListView.
1. تخطيطات العنصر المخصص Custom Item Layouts : يمكن لـ ListView فقط تخطيط العناصر في الترتيب الرأسي ولا يمكن تخصيص هذا الترتيب وفقًا لمتطلباتنا. لنفترض أننا بحاجة إلى إنشاء قائمة أفقية ، فهذا الشيء غير ممكن مع ListView الافتراضي. ولكن مع تقديم Recyclerview يمكننا بسهولة إنشاء قائمة أفقية أو عمودية. باستخدام مكون مدير التخطيط في RecyclerView يمكننا بسهولة تحديد اتجاه العناصر.
2. استخدام نمط ViewHolder: لا تتطلب محولات ListView استخدام ViewHolder ولكن RecyclerView تتطلب استخدام ViewHolder الذي يتم استخدامه لتخزين مرجع View's.
في ListView ، يوصى باستخدام ViewHolder ولكنه ليس إجباريًا ولكن في RecyclerView من الضروري استخدام ViewHolder وهو الاختلاف الرئيسي بين RecyclerView و ListView.
ViewHolder هي فئة داخلية ثابتة في المحول الخاص بنا والتي تحتوي على إشارات إلى طرق العرض ذات الصلة. باستخدام هذه المراجع ، يمكن أن يتجنب الكود الخاص بنا مضيعة الوقت لطريقة findViewById () لتحديث الأدوات ببيانات جديدة.
3. المحولات Adapters : في ListView ، نستخدم العديد من المحولات مثل ArrayAdapter لعرض بيانات الصفيف البسيطة و BaseAdapter و SimpleAdapters للقوائم المخصصة. في RecyclerView ، نستخدم RecyclerView.Adapter لتعيين البيانات في القائمة. في الجزء السفلي من رمز sinppet ، نعرض كيف يبدو CustomAdapter الخاص بنا عندما نوسع فئة RecyclerView.Adapter ونستخدم ViewHolder فيه.
package abhiandroid.com.recyclerviewexample;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class CustomAdapter extends RecyclerView.Adapter {
@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, int position) {
}
@Override
public int getItemCount() {
return 0;
}
public class MyViewHolder extends RecyclerView.ViewHolder {
TextView textView;// init the item view's
public MyViewHolder(View itemView) {
super(itemView);
// get the reference of item view's
textView = (TextView) itemView.findViewById(R.id.textView);
}
}
}
4. Item Animator: يفتقر ListView لدعم الرسوم المتحركة الجيدة. RecyclerView يجلب أبعادًا جديدة فيه. باستخدام RecyclerView. فئة ItemAnimator يمكننا بسهولة تحريك العرض.
5. زخرفة العنصر Item Decoration : في ListView لم يكن تزيين العناصر ديناميكيًا مثل إضافة الحاجز أو الحدود أمرًا سهلاً ولكن في RecyclerView باستخدام RecyclerView. فئة ItemDecorator لدينا سيطرة كبيرة عليها.
الخلاصة: في النهاية يمكننا القول أن RecyclerView أكثر قابلية للتخصيص من ListView الحالية ويعطي الكثير من التحكم والقوة للمطورين.
مثال على RecyclerView كعرض ListView عمودي في Android Studio
يوجد أدناه مثال RecyclerView As ListView حيث نعرض القائمة الرأسية لأسماء الأشخاص مع صورهم باستخدام RecyclerView. في هذا المثال ، نستخدم LinearLayoutManger مع الاتجاه الرأسي لعرض العناصر.
أولاً ، نعلن عن RecyclerView في ملف XML الخاص بنا ثم نحصل على مرجع له في نشاطنا. بعد ذلك نقوم بإنشاء اثنين ArrayList لأسماء الأشخاص وصورهم. بعد ذلك قمنا بتعيين LayoutManager وأخيرًا قمنا بتعيين المحول لإظهار العناصر في RecyclerView. عندما ينقر المستخدم على عنصر ما ، يتم عرض اسم الشخص على الشاشة بمساعدة Toast.
الخطوة 1: إنشاء مشروع جديد وتسميته RecyclerViewExample.
الخطوة 2: افتح Gradle Scripts> build.gradle وأضف تبعية RecyclerView Library فيه.
apply plugin: 'com.android.application'
android {
compileSdkVersion 24
buildToolsVersion "24.0.1"
defaultConfig {
applicationId "abhiandroid.com.recyclerviewexample"
minSdkVersion 16
targetSdkVersion 24
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:24.1.1'
compile "com.android.support:recyclerview-v7:23.0.1" // dependency file for RecyclerView
}
الخطوة 3: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة نقوم بإنشاء RecyclerView في ملف 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="abhiandroid.com.recyclerviewexample.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
الخطوة 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 وأضف الكود أدناه.
في هذه الخطوة أولاً نحصل على مرجع RecyclerView. بعد ذلك نقوم بإنشاء قائمتين ArrayList لأسماء الأشخاص وصورهم. بعد ذلك قمنا بتعيين LayoutManager وأخيرًا قمنا بتعيين المحول لإظهار العناصر في RecyclerView.
package abhiandroid.com.recyclerviewexample;
import android.os.Bundle;
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;
public class MainActivity extends AppCompatActivity {
// 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);
// get the reference of RecyclerView
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
}
}
الخطوة 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.
مثال على RecyclerView كعرض ListView أفقي في Android Studio
يوجد أدناه مثال RecyclerView As ListView حيث نعرض القائمة الأفقية لأسماء الأشخاص مع صورهم باستخدام RecyclerView. في هذا المثال ، نستخدم LinearLayoutManger مع الاتجاه الأفقي لعرض العناصر.
أولاً ، نعلن عن RecyclerView في ملف XML الخاص بنا ثم نحصل على مرجع له في نشاطنا. بعد ذلك نقوم بإنشاء قائمتين ArrayList لأسماء الأشخاص وصورهم.
بعد ذلك قمنا بتعيين LayoutManager مع اتجاه أفقي وأخيراً قمنا بتعيين المحول لإظهار العناصر في RecyclerView. عندما ينقر المستخدم على عنصر ما ، يتم عرض اسم الشخص على الشاشة بمساعدة Toast.
الخطوة 1: إنشاء مشروع جديد وتسميته RecyclerViewExample.
الخطوة 2: افتح Gradle Scripts> build.gradle وأضف تبعية RecyclerView Library فيه.
apply plugin: 'com.android.application'
android {
compileSdkVersion 24
buildToolsVersion "24.0.1"
defaultConfig {
applicationId "abhiandroid.com.recyclerviewexample"
minSdkVersion 16
targetSdkVersion 24
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:24.1.1'
compile "com.android.support:recyclerview-v7:23.0.1" // dependency file for RecyclerView
}
الخطوة 3: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة نقوم بإنشاء RecyclerView في ملف 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="abhiandroid.com.recyclerviewexample.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
الخطوة 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="vertical" 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" /> </LinearLayout>
الخطوة 5: افتح الآنapp -> java -> package -> MainActivity.java and add the below code.
في هذه الخطوة أولاً نحصل على مرجع RecyclerView. بعد ذلك نقوم بإنشاء قائمتين ArrayList لأسماء الأشخاص وصورهم. بعد ذلك قمنا بتعيين LayoutManager مع اتجاه أفقي وأخيراً قمنا بتعيين المحول لإظهار العناصر في RecyclerView.
package abhiandroid.com.recyclerviewexample;
import android.os.Bundle;
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;
public class MainActivity extends AppCompatActivity {
// 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);
// get the reference of RecyclerView
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
// set a LinearLayoutManager with default horizontal orientation and false value for reverseLayout to show the items from start to end
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext(),LinearLayoutManager.HORIZONTAL,false);
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
}
}
الخطوة 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.