في 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"
}
جدول المحتويات
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.