طريقة استخدام RecyclerView كشبكة متداخلة في الاندرويد

في Android ، يعد RecyclerView إصدارًا متقدمًا ومرنًا من ListView و GridView. إنها حاوية تُستخدم لعرض كمية كبيرة من مجموعات البيانات التي يمكن تمريرها بكفاءة عالية من خلال الحفاظ على عدد محدود من المشاهدات. تم تقديم RecyclerView لأول مرة في تصميم المواد في المستوى 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 الخاص بك لاستخدام نظرة عامة حول إعادة التدوير.

نصوص Gradle> build.gradle والتبعيات الداخلية

dependencies {
  ...
  compile "com.android.support:recyclerview-v7:23.4.0"
  }

---

جدول المحتويات

• 1 RecyclerView كشبكة متداخلة
• 2 المُنشئ العام StaggeredGridLayoutManager
• 3 مثال على GridView العمودي المترابط باستخدام RecyclerView في Android Studio
• 4 مثال على GridView الأفقي المترابط باستخدام RecyclerView في Android Studio

RecyclerView كشبكة متداخلة

سنناقش في هذه المقالة كيفية استخدام RecyclerView لإنشاء شبكات متداخلة. لذلك نحتاج أولاً إلى فهم مكون LayoutManager في RecyclerView. مدير التخطيط هو مفهوم جديد جدًا تم تقديمه في RecyclerView لتحديد نوع التخطيط الذي يجب على RecyclerView استخدامه. يحتوي على مراجع لجميع طرق العرض التي تم ملؤها ببيانات الإدخال. يمكننا إنشاء مدير تخطيط مخصص من خلال توسيع RecyclerView.LayoutManager Class لكن RecyclerView يوفر ثلاثة أنواع من مديري التخطيط المدمجين.

1. LinearLayoutManager : يستخدم لعرض قائمة عمودية أو أفقية.
2. GridLayoutManager : يستخدم لعرض العناصر في شكل شبكات.
3. StaggeredGridLayoutManager: يتم استخدامه لإظهار العناصر في شبكة متداخلة.

في هذه المقالة ، ينصب تركيزنا الأساسي على StaggeredGridLayoutManager لأنه يُستخدم لعرض البيانات في شكل شبكات متداخلة. باستخدام مدير التخطيط هذا ، يمكننا بسهولة إنشاء عناصر شبكة متداخلة.

في Android Pinterest و SamePinchh ، يعد كلا التطبيقين أفضل مثال على الشبكة المتداخلة. يتم استخدام StaggeredGridLayoutManager لعرض عناصر البيانات بتنسيق شبكة متداخلة ويمكننا بسهولة تحديد اتجاه العناصر.

StaggeredGridLayoutManager مشابه لـ GridLayoutManager ولكن في هذه كل شبكة لها حجمها الخاص (العرض والارتفاع). يقوم تلقائيًا بتعيين العناصر وفقًا لارتفاعها وعرضها. الاختلاف الرئيسي بين GridView و Staggered Grid متفاوت الحجم في متداخلة. تعرض طريقة عرض الشبكة المتداخلة العناصر غير المتماثلة في العرض.

---

مُنشئ عام لـ StaggeredGridLayoutManager

• StaggeredGridLayoutManager (int spanCount ، int direction):  يتم استخدامه لإنشاء StaggeredGridLayoutManager بمعلمات معينة. يتم استخدام المعلمة الأولى لتعيين spanCount يعني عدد الأعمدة إذا كان الاتجاه رأسيًا أو عدد الصفوف إذا كان الاتجاه أفقيًا ، يتم استخدام المعلمة الثانية لتعيين الاتجاه ، يجب أن يكون رأسيًا أو أفقيًا.

مثال: في مقتطف الشفرة أدناه ، نعرض كيفية استخدام هذا المُنشئ في Android.

مع الاتجاه الرأسي:

// get the reference of RecyclerView
  RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
  // set a StaggeredGridLayoutManager with 3 number of columns and vertical orientation
  StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL);
  recyclerView.setLayoutManager(staggeredGridLayoutManager); // set LayoutManager to RecyclerView

مع الاتجاه الأفقي:

// get the reference of RecyclerView
  RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
  // set a StaggeredGridLayoutManager with 3 number of columns and horizontal orientation
  StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.HORIZONTAL);
  recyclerView.setLayoutManager(staggeredGridLayoutManager); // set LayoutManager to RecyclerView

---

مثال على GridView العمودي المترابط باستخدام RecyclerView في Android Studio

يوجد أدناه مثال RecyclerView As GridView حيث نعرض شبكات متداخلة لأسماء الأشخاص مع صورهم ونضبط الاتجاه الرأسي الافتراضي باستخدام RecyclerView.

في هذا المثال ، نستخدم StaggeredGridLayoutManager مع اتجاه رأسي وقيمة عدد 3 نطاقات لعرض العناصر. أولاً ، نعلن عن RecyclerView في ملف XML الخاص بنا ثم نحصل على مرجع له في نشاطنا. بعد ذلك نقوم بإنشاء اثنين ArrayList لأسماء الأشخاص وصورهم. بعد ذلك قمنا بتعيين StaggeredGridLayoutManager وأخيراً قمنا بتعيين المحول لإظهار عناصر الشبكة في 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="wrap_content"
  android:layout_height="wrap_content"
  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 لأسماء الأشخاص وصورهم. بعد ذلك قمنا بتعيين StaggeredGridLayoutManager وأخيراً قمنا بتعيين المحول لإظهار عناصر الشبكة في 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 android.support.v7.widget.StaggeredGridLayoutManager;
  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 StaggeredGridLayoutManager with 3 number of columns and vertical orientation
  StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL);
  recyclerView.setLayoutManager(staggeredGridLayoutManager); // 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 في Android Studio

يوجد أدناه المثال الثاني لـ RecyclerView As Staggered GridView حيث نعرض شبكات أسماء الأشخاص مع صورهم ذات الاتجاه الأفقي باستخدام RecyclerView.

في هذا المثال ، نستخدم StaggeredGridLayoutManger مع الاتجاه الأفقي وقيمة عدد 3 التي تحدد عدد الصفوف. أولاً ، نعلن عن RecyclerView في ملف XML الخاص بنا ثم نحصل على مرجع له في نشاطنا. بعد ذلك نقوم بإنشاء اثنين ArrayList لأسماء الأشخاص وصورهم. بعد ذلك قمنا بتعيين StaggeredGridLayoutManager وأخيراً قمنا بتعيين المحول لإظهار عناصر الشبكة في 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
  }

Step 3: Open res -> layout -> activity_main.xml (or) main.xml and add following code:
In this step we create a RecyclerView in our XML file.

<?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>

Step 4: Create a new drawable XML file in Drawable folder and name it custom_item_layout.xml and add the following code in it for creating a custom grid item.
In this step we create a drawable XML file in which we add the code for creating custom grid items.

<?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>

Step 5: Create a new XML file rowlayout.xml for grid item of RecyclerView and paste the following code in it.
In this step we create a new xml file for item row in which we creates a TextView and ImageView to show the data in grid format.

<?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  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>

Step 6 : Now open app -> java -> package -> MainActivity.java and add the below code.

In this step firstly we get the reference of RecyclerView. After that we creates two ArrayList’s for Person Names and Images. After that we set a StaggeredGridLayoutManager with horizontal orientation and then finally we set the Adapter to show the grid items in 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 android.support.v7.widget.StaggeredGridLayoutManager;
  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 StaggeredGridLayoutManager with 3 number of columns and horizontal orientation
  StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.HORIZONTAL);
  recyclerView.setLayoutManager(staggeredGridLayoutManager); // 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
  }
  }

Step 7: Create a new class CustomAdapter.java inside package and add the following code.
In this step we create a CustomAdapter class and extends RecyclerView.Adapter class with ViewHolder in it. After that we implement the overrided methods and create a constructor for getting the data from Activity. In this custom Adapter two methods are more important first is onCreateViewHolder in which we inflate the layout item xml and pass it to View Holder and other is onBindViewHolder in which we set the data in the view’s with the help of ViewHolder. Finally we implement the setOnClickListener event on itemview and on click of item we display the selected image in full size in the next Activity.

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.

تعديل المقال