في Android ، يعد RecyclerView إصدارًا متقدمًا ومرنًا من ListView و GridView. إنها حاوية تُستخدم لعرض كمية كبيرة من مجموعات البيانات التي يمكن تمريرها بكفاءة عالية من خلال الحفاظ على عدد محدود من المشاهدات. تم تقديم RecyclerView في تصميم المواد في مستوى API 21 (Android 5.0 أي Lollipop).
يوفر التصميم متعدد الأبعاد الكثير من الميزات الجديدة في Android والتي غيرت كثيرًا من أنماط التصميم المرئي فيما يتعلق بتصميم تطبيقات Android الحديثة. تعد هذه الأداة الجديدة خطوة كبيرة لعرض البيانات لأن GridView هي واحدة من أكثر عناصر واجهة المستخدم استخدامًا. في RecyclerView ، يوفر android الكثير من الميزات الجديدة غير الموجودة في ListView أو 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 الخاص بك لاستخدام نظرة عامة حول إعادة التدوير.
dependencies {
...
compile "com.android.support:recyclerview-v7:23.23.4.0"
}
جدول المحتويات
RecyclerView كـ GridView في Android:
سنناقش في هذه المقالة كيفية استخدام RecyclerView As GridView. لذلك نحن بحاجة إلى فهم مكون LayoutManager من RecyclerView. مدير التخطيط هو مفهوم جديد جدًا تم تقديمه في RecyclerView لتحديد نوع التخطيط الذي يجب على RecyclerView استخدامه. يحتوي على المراجع لجميع وجهات النظر التي تم ملؤها ببيانات الإدخال. يمكننا إنشاء مدير تخطيط مخصص من خلال توسيع RecyclerView.LayoutManager Class لكن RecyclerView يوفر ثلاثة أنواع من مديري التخطيط المدمجين.
1. LinearLayoutManager: يستخدم لعرض قائمة عمودية أو أفقية. لفهمها ، يرجى قراءة RecyclerView كـ Listview
2. GridLayoutManager: يتم استخدامه لعرض العناصر في شكل شبكات.
3. StaggeredGridLayoutManager: يتم استخدامه لإظهار العناصر في شبكة متداخلة.
في هذه المقالة ، ينصب تركيزنا الأساسي على GridLayoutManager لأنه يُستخدم لعرض البيانات في شكل شبكات. باستخدام مدير التخطيط هذا ، يمكننا بسهولة إنشاء عناصر الشبكة. مثال شائع لعناصر الشبكة هو معرض الهاتف الخاص بنا حيث يتم عرض جميع الصور في شكل شبكات.
يستخدم GridLayoutManager لعرض عناصر البيانات بتنسيق الشبكة ويمكننا بسهولة تحديد اتجاه العناصر. بكلمات بسيطة يمكننا القول أننا نستخدم GridLayoutManager لعرض RecyclerView على هيئة GridView.
Public constructors ل GridLayoutManager : أدناه نحدد المُنشئ العام لـ GridLayoutManager الذي يجب استخدامه لتحديد الاتجاه (الرأسي أو الأفقي) لـ RecyclerView.
1- GridLayoutManager (Context context, int spanCount ): يستخدم لإنشاء شبكة عمودية GridLayoutManager. في هذا المُنشئ ، يتم استخدام المعلمة الأولى لتعيين السياق الحالي ويتم استخدام المعلمة الثانية لتعيين عدد الأعمدة في الشبكة.
مثال: في مقتطف الشفرة أدناه ، نعرض كيفية استخدام هذا المُنشئ في Android.
مع الاتجاه العمودي الافتراضي:
// get the reference of RecyclerView RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); // set a GridLayoutManager with default vertical orientation and 3 number of columns GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(),3); recyclerView.setLayoutManager(gridLayoutManager); // set LayoutManager to RecyclerView
مع الاتجاه الأفقي:
// get the reference of RecyclerView RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); // set a GridLayoutManager with 3 number of columns GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(),3); gridLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); // set Horizontal Orientation recyclerView.setLayoutManager(gridLayoutManager); // set LayoutManager to RecyclerView
2- GridLayoutManager (Context context, int spanCount, int orientation, boolean reverseLayout ): في هذا المُنشئ ، يتم استخدام المعلمة الأولى لتعيين السياق الحالي ، ويتم استخدام المعلمة الثانية لتعيين عدد الأعمدة في الشبكة ، والمعلمة الثالثة يستخدم لتعيين اتجاه التخطيط يجب أن يكون رأسيًا أو أفقيًا ، وتكون المعلمة الأخيرة عبارة عن قيمة منطقية عند التعيين على التخطيط الحقيقي من النهاية إلى البداية يعني أن الشبكات يتم ترتيبها من النهاية إلى البداية.
مثال: في مقتطف الشفرة أدناه ، نعرض كيفية استخدام هذا المُنشئ في Android.
// get the reference of RecyclerView RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); // set a GridLayoutManager with 3 number of columns , horizontal gravity and false value for reverseLayout to show the items from start to end GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(),3,LinearLayoutManager.HORIZONTAL,false); recyclerView.setLayoutManager(gridLayoutManager); // set LayoutManager to RecyclerView
مقارنة بين RecyclerView و GridView
هناك الكثير من الميزات الجديدة في RecyclerView غير الموجودة في GridView الحالية. يعتبر RecyclerView أكثر مرونة وقوة وتحسينًا كبيرًا على GridView. سأحاول أن أعطيك نظرة ثاقبة مفصلة. نناقش أدناه بعض الميزات المهمة لبرنامج RecyclerView والتي يجب أن توضح سبب كون RecyclerView أفضل من GridView.
1. تخطيطات العنصر المخصص Custom Item Layouts: يمكن لـ GridView تخطيط عناصر الشبكة فقط في الترتيب الرأسي الذي نقوم فيه بتعيين عدد الأعمدة ويتم إنشاء الصفوف تلقائيًا وفقًا لعدد العناصر. لا يمكن تخصيص GridView وفقًا لمتطلباتنا. لنفترض أننا بحاجة إلى إظهار العناصر بترتيب أفقي حيث نريد إصلاح عدد الصفوف والأعمدة يتم إنشاؤها تلقائيًا وفقًا لعدد العناصر ولكن هذا الشيء غير ممكن مع GridView الافتراضي. ولكن مع إدخال Recyclerview يمكننا بسهولة إنشاء ترتيب أفقي أو عمودي لعناصر الشبكة. باستخدام مكون GridLayoutManager في RecyclerView ، يمكننا بسهولة تحديد اتجاه عناصر الشبكة و spanCount المستخدم لعدد الأعمدة إذا كان الاتجاه رأسيًا أو عدد الصفوف إذا كان الاتجاه أفقيًا.
2. استخدام نمط ViewHolder: لا تتطلب محولات GridView استخدام ViewHolder لكن RecyclerView تتطلب استخدام ViewHolder الذي يتم استخدامه لتخزين مرجع View's. في GridView ، يوصى باستخدام ViewHolder ولكنه ليس إجباريًا ولكن في RecyclerView من الضروري استخدام ViewHolder وهذا هو الفرق الرئيسي بين RecyclerView و GridView. ViewHolder هي فئة داخلية ثابتة في المحول الخاص بنا والتي تحتوي على إشارات إلى طرق العرض ذات الصلة. باستخدام هذه المراجع ، يمكن أن يتجنب الكود الخاص بنا مضيعة الوقت لطريقة findViewById () لتحديث الأدوات ببيانات جديدة.
3. محولات GridView: في GridView ، نستخدم العديد من المحولات مثل ArrayAdapter لعرض بيانات المصفوفة البسيطة ، ومحولات Base و SimpleAdapters للشبكات المخصصة مع الصور والنصوص. في RecyclerView ، نستخدم RecyclerView.Adapter لتعيين عناصر الشبكة. في مقتطف الشفرة أدناه نعرض كيف يبدو 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: تفتقر GridView إلى دعم الرسوم المتحركة الجيدة. RecyclerView يجلب أبعادًا جديدة فيه. باستخدام فئة RecycleView.ItemAnimator يمكننا بسهولة تحريك العرض.
5. زخرفة العنصر Item Decoration في GridView لم يكن التزيين الديناميكي للعناصر مثل إضافة الحاجز أو الحدود أمرًا سهلاً أبدًا ولكن في RecyclerView باستخدام فئة RecycleView.ItemDecorator لدينا تحكم كبير في ذلك.
الخلاصة: في النهاية يمكننا القول أن RecyclerView أكثر قابلية للتخصيص من GridView الحالية وتعطي الكثير من التحكم والقوة لمطوريها.
مثال على RecyclerView كـ Vertical GridView في Android Studio:
يوجد أدناه مثال RecyclerView As GridView حيث نعرض شبكات من أسماء الأشخاص مع صورهم ذات الاتجاه الرأسي الافتراضي باستخدام RecyclerView. في هذا المثال ، نستخدم GridLayoutManager مع اتجاه رأسي وقيمة عدد 2 مدى لعرض العناصر. أولاً ، نعلن عن RecyclerView في ملف XML الخاص بنا ثم نحصل على مرجع له في نشاطنا. بعد ذلك نقوم بإنشاء قائمتين ArrayList لأسماء الأشخاص وصورهم. بعد ذلك قمنا بتعيين GridLayoutManager وأخيراً قمنا بتعيين المحول لإظهار عناصر الشبكة في RecyclerView. عندما ينقر المستخدم على عنصر ما ، سيتم عرض الصورة بالحجم الكامل على الشاشة التالية.
الخطوة 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.4.0" // 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 جديد قابل للرسم في مجلد Drawable وقم بتسميته custom_item_layout.xml وأضف الكود التالي فيه لإنشاء عنصر شبكة مخصص.
في هذه الخطوة ، نقوم بإنشاء ملف XML قابل للرسم نضيف فيه الكود لإنشاء عناصر شبكة مخصصة.
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <!-- stroke with color and width for creating outer line --> <stroke android:width="1dp" android:color="#000" /> </shape>
الخطوة 5: قم بإنشاء ملف XML جديد rowlayout.xml لعنصر شبكة RecyclerView والصق الكود التالي فيه.
في هذه الخطوة ، نقوم بإنشاء ملف xml جديد لصف العناصر حيث نقوم بإنشاء TextView و ImageView لإظهار البيانات بتنسيق الشبكة.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="120dp" android:background="@drawable/custom_item_layout" android:padding="5dp"> <!-- grid items for RecyclerView --> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" 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_alignParentBottom="true" android:layout_centerHorizontal="true" android:text="ABCD" android:textSize="20sp" android:textColor="#fff" /> </RelativeLayout>
الخطوة 6: الآن افتح التطبيق -> java -> package -> MainActivity.java وأضف الكود أدناه.
في هذه الخطوة أولاً نحصل على مرجع RecyclerView. بعد ذلك نقوم بإنشاء قائمتين ArrayList لأسماء الأشخاص وصورهم. بعد ذلك قمنا بتعيين GridLayoutManager وأخيراً قمنا بتعيين المحول لإظهار عناصر الشبكة في RecyclerView.
package abhiandroid.com.recyclerviewexample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
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 GridLayoutManager with default vertical orientation and 2 number of columns
GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(),2);
recyclerView.setLayoutManager(gridLayoutManager); // set LayoutManager to RecyclerView
// 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
}
}
الخطوة 7: إنشاء فئة جديدة CustomAdapter.java داخل الحزمة وإضافة التعليمات البرمجية التالية.
في هذه الخطوة ، نقوم بإنشاء فئة CustomAdapter وتوسيع فئة RecyclerView.Adapter مع Viewholder بداخلها. بعد ذلك نقوم بتنفيذ الطرق التي تم تجاوزها وإنشاء مُنشئ للحصول على البيانات من النشاط. في هذا المحول المخصص ، هناك طريقتان أكثر أهمية هما onCreateViewHolder حيث نقوم بتضخيم عنصر التخطيط xml وتمريره إلى View Holder والآخر onBindViewHolder حيث نقوم بتعيين البيانات في طريقة العرض بمساعدة ViewHolder. أخيرًا ، قمنا بتنفيذ حدث setOnClickListener في عرض العناصر وعند النقر فوق العنصر ، نعرض الصورة المحددة بالحجم الكامل في النشاط التالي.
package abhiandroid.com.recyclerviewexample;
import android.content.Context;
import android.content.Intent;
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 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) {
// open another activity on item click
Intent intent = new Intent(context, SecondActivity.class);
intent.putExtra("image", personImages.get(position)); // put image data in Intent
context.startActivity(intent); // start Intent
}
});
}
@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);
}
}
}
الخطوة 8: قم بإنشاء ملف XML جديد activity_second.xml وأضف الكود أدناه فيه.
في هذه الخطوة ، نقوم بإنشاء ImageView في ملف 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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:background="#fff"> <ImageView android:id="@+id/selectedImage" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:scaleType="fitXY" /> </RelativeLayout>
الخطوة 9: قم بإنشاء نشاط جديد وقم بتسميته SecondActivity.class وأضف الكود أدناه فيه.
في هذه الخطوة ، نحصل على مرجع ImageView ثم نحصل على Intent الذي تم تعيينه من محول النشاط السابق ثم أخيرًا قمنا بتعيين الصورة في ImageView.
package abhiandroid.com.recyclerviewexample;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
public class SecondActivity extends AppCompatActivity {
ImageView selectedImage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
selectedImage = (ImageView) findViewById(R.id.selectedImage); // init a ImageView
Intent intent = getIntent(); // get Intent which was set from adapter of Previous Activity
selectedImage.setImageResource(intent.getIntExtra("image", 0)); // get image from Intent and set it in ImageView
}
}
انتاج:
الآن قم بتشغيل التطبيق وسترى اسم الشخص الذي يمكن تمريره في اتجاه رأسي تم إنشاؤه باستخدام RecyclerView كـ Gridview.
مثال على RecyclerView كـ Horizontal GridView في Android Studio
يوجد أدناه مثال RecyclerView As GridView حيث نعرض شبكات أسماء الأشخاص مع صورهم ذات الاتجاه الأفقي باستخدام RecyclerView. في هذا المثال ، نستخدم GridLayoutManager مع اتجاه أفقي وقيمة عدد 3 تمتد التي تحدد عدد الصفوف. أولاً ، نعلن عن RecyclerView في ملف XML الخاص بنا ثم نحصل على مرجع له في نشاطنا. بعد ذلك نقوم بإنشاء قائمتين ArrayList لأسماء الأشخاص وصورهم. بعد ذلك قمنا بتعيين GridLayoutManager وأخيراً قمنا بتعيين المحول لإظهار عناصر الشبكة في RecyclerView. عندما ينقر المستخدم على عنصر ما ، سيتم عرض الصورة بالحجم الكامل على الشاشة التالية.
الخطوة 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.4.0" // 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="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>
الخطوة 4: قم بإنشاء ملف XML جديد قابل للرسم في مجلد Drawable وقم بتسميته custom_item_layout.xml وأضف الكود التالي فيه لإنشاء عنصر شبكة مخصص.
في هذه الخطوة ، نقوم بإنشاء ملف XML قابل للرسم نضيف فيه الكود لإنشاء عناصر شبكة مخصصة.
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <!-- stroke with color and width for creating outer line --> <stroke android:width="1dp" android:color="#000" /> </shape>
الخطوة 5: قم بإنشاء ملف XML جديد rowlayout.xml لعنصر شبكة RecyclerView والصق الكود التالي فيه.
في هذه الخطوة ، نقوم بإنشاء ملف xml جديد لصف العناصر حيث نقوم بإنشاء TextView و ImageView لإظهار البيانات بتنسيق الشبكة.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="120dp" android:layout_height="120dp" android:background="@drawable/custom_item_layout" android:padding="5dp"> <!-- grid items for RecyclerView --> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" 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_alignParentBottom="true" android:layout_centerHorizontal="true" android:text="ABCD" android:textSize="20sp" android:textColor="#fff" /> </RelativeLayout>
الخطوة 6: الآن افتح التطبيق -> java -> package -> MainActivity.java وأضف الكود أدناه.
في هذه الخطوة أولاً نحصل على مرجع RecyclerView. بعد ذلك نقوم بإنشاء قائمتين ArrayList لأسماء الأشخاص وصورهم. بعد ذلك قمنا بتعيين GridLayoutManager مع اتجاه أفقي وقيمة خاطئة لـ reverseLayout لإظهار الشبكات لإظهار العناصر من البداية إلى النهاية ثم قمنا في النهاية بتعيين المحول لإظهار عناصر الشبكة في RecyclerView.
package abhiandroid.com.recyclerviewexample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
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 GridLayoutManager with 3 number of columns , horizontal gravity and false value for reverseLayout to show the items from start to end
GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(),3, LinearLayoutManager.HORIZONTAL,false);
recyclerView.setLayoutManager(gridLayoutManager); // set LayoutManager to RecyclerView
// 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
}
}
الخطوة 7: إنشاء فئة جديدة CustomAdapter.java داخل الحزمة وإضافة التعليمات البرمجية التالية.
في هذه الخطوة ، نقوم بإنشاء فئة CustomAdapter وتوسيع فئة RecyclerView.Adapter مع ViewHolder فيه. بعد ذلك ، نقوم بتنفيذ الطرق التي تم تجاوزها وإنشاء مُنشئ للحصول على البيانات من النشاط ، في هذا المحول المخصص طريقتان أكثر أهمية أولاً هما onCreateViewHolder حيث نقوم بتضخيم عنصر التخطيط xml وتمريره إلى View Holder والآخر onBindViewHolder فيه نقوم بتعيين البيانات في طريقة العرض بمساعدة ViewHolder. أخيرًا ، قمنا بتنفيذ حدث setOnClickListener في عرض العناصر وعند النقر فوق العنصر ، نعرض الصورة المحددة بالحجم الكامل في النشاط التالي .
package abhiandroid.com.recyclerviewexample;
import android.content.Context;
import android.content.Intent;
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 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) {
// open another activity on item click
Intent intent = new Intent(context, SecondActivity.class);
intent.putExtra("image", personImages.get(position)); // put image data in Intent
context.startActivity(intent); // start Intent
}
});
}
@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);
}
}
}
الخطوة 8: قم بإنشاء ملف XML جديد activity_second.xml وأضف الكود أدناه فيه.
في هذه الخطوة ، نقوم بإنشاء ImageView في ملف 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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:background="#fff"> <ImageView android:id="@+id/selectedImage" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:scaleType="fitXY" /> </RelativeLayout>
الخطوة 9: قم بإنشاء نشاط جديد وقم بتسميته SecondActivity.class وأضف الكود أدناه فيه.
في هذه الخطوة ، نحصل على مرجع ImageView ثم نحصل على Intent الذي تم تعيينه من محول النشاط السابق ثم أخيرًا قمنا بتعيين الصورة في ImageView.
package abhiandroid.com.recyclerviewexample;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
public class SecondActivity extends AppCompatActivity {
ImageView selectedImage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
selectedImage = (ImageView) findViewById(R.id.selectedImage); // init a ImageView
Intent intent = getIntent(); // get Intent which was set from adapter of Previous Activity
selectedImage.setImageResource(intent.getIntExtra("image", 0)); // get image from Intent and set it in ImageView
}
}
المخرجات :
قم الآن بتشغيل التطبيق وستحصل على اسم الشخص الذي يمكن تمريره في اتجاه أفقي تم إنشاؤه باستخدام RecyclerView كـ GridView.