شرح المعرض Gallery في الاندرويد

 استخدام معرض الصور في الاندرويد 

كيفية فتح معرض الصور الموجود بالجهاز من تطبيقك واختيار صورة منه وبعدها  استخدامها في  تطبيقك

طبعا فتح معرض الصور مفيد جدا … فمثلا.. لو كان يجب على مستخدم تطبيقك انشاء حساب لاستخدام التطبيق … فسيكون من الأفضل وجود صورة لكل مستخدم … لذلك سيفتح المستخدم معرض الصور ويقم باختيار صورة يريدها .. وستصبح هي صورته الشخصية
… طبعا هذا مجرد مثال وهناك العديد من الحالات الأخرى التي ستحتاج فيها فتح معرض الصور … وقد حاولت تبسيط الكود قدر الإمكان ليفهمه الجدد في هذا المجال..أتمنى أن يكون واضحا وسهلا
في البداية قم بإنشاء مشروع جديد… وسمه ما تريد … لكن سأقوم أنا بتسميته “upload from gallery”
ثم افتح ملف اللاياوت الذي تم انشاءه تلقائيا عند انشاء المشروع وقم بإضافة صورة وزر
وفي خاصية الآي دي للزر … أعطه أي اسم تريده .. لكن يجب أن يكون واضحا .. في هذا المثال سأسميه : “ uploadButton”
ونفس الشيء بالنسبة للصورة … سأعطيها هذا الآي دي : ” photo”
ملاحظة : نوع الصورة هو : ImageView
والآن افتح ملف الاكتيفيتي التي تم انشائها تلقائياً  ثم فوق دالة الاون كريت قم بانشاء الزر والصورة :
Button upload ;
ImageView photo;
بداخل دالة الاون كريت قم بتعريفهما عن طريق إعطائهما الآي دي الخاص بهما :

  ;(Button upload =(Button)findViewById(R.id.uploadButton

  ;(ImageView photo = (ImageView ) findViewById(R.id.photo
  }() upload.setOnClickListener(new View.OnClickListener
  @Override

  }(public void onClick(View v

  {

  {

وسوف نقوم بوضع كود فتح معرض الصور بداخل كود الاون كليك للزر

لفتح معرض الصور تحتاج لاستخدام الانتنت … والانتنت هو كلاس يستخدم للتنقل بين اكتيفيتي واكتيفيتي أخرى داخل التطبيق .. أو لفتح اكتيفيتي خارج تطبيقك
ولفتح معرض الصور نستخدم الكود التالي :

  ;(Intent i = new Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI

وبعد تعريف الانتنت .. نحتاج لاستدعاء دالة startActivityForResult();
وهي تقوم بفتح الاكتفيتي الذي تم وضعه بالانتنت ولكن تنتظر بيانات معينة من هذه الاكتيفيتي وبحالتنا هذه سنستخدمها للحصول على الصورة من معرض الصور … :

  startActivityForResult(Intent.createChooser(i, "Select Your Photo"), 1);

في الباراميتر الأول نستدعي دالة createChooser();
وهي تحتوي على بارامترين
الأول : وهو الانتنت الذي تريد استخدامه وبجانبه العبارة التي تريدها أن تظهر عند فتح معرض الصور
الثاني : وهو الريكويست كود …سأضع رقم 1 كمثال .. و سأقوم بشرحه لاحقا …
ولاستخدام هذه الدالة و الحصول على البيانات منها ( الصورة التي اختارها المستخدم من المعرض )
سنحتاج لتطبيقها في الاكتفيتي التي سنستخدمها فيها
ضع هذه الدالة في الاكتيفيتي :

  @Override
  protected void onActivityResult(int requestCode, int resultCode, Intent data) {
  super.onActivityResult(requestCode, resultCode, data);
  // if(resultCode == RESULT_OK) تعني ان كان قد تم الحصول على البيانات بدون مشاكل
  if (resultCode == RESULT_OK){
  if (requestCode == 1 ){
  }
  }
  }

نلاحظ وجود ثلاث باراميترات بهذه الدالة … الأول وهو الريكويست كود والذي وضعناه “1” عندما استدعينا هذه الدالة
والثاني هو الريسالت كود وهو يكون اما RESULT_CANCELED أو RESULT_OK
الأولى تعني انه تم الغاء الأمر لسبب معين والثانية انه قد تم الحصول على البيانات بنجاح

والباراميتر الثالث هو البيانات( الصورة ) التي اختارها المستخدم وسأقوم بشرح كيفية تحويلها إلى صورة لاستخدامها في تطبيقك
بالنسبة للريكوست كود فهو يستخدم لتحديد الانتنت الذي تريد استخدامه …

مثال : لو كان لديك ثلاث أزرار .. الأول سيقوم بفتح معرض الصور والثاني يقوم بفتح جهات الاتصال ..
لنفترض انك اعطيت الرقم واحد لانتنت فتح الصور … ورقم 2 لانتنت فتح جهات الاتصال .
onActivityResult ستقوم في دالة وعندها
بالتأكد من الرقم.. .فإذا كان 1 نستخدم كود لإحضار الصورة … وإذا كان 2 سنستخدم كود لإحضار اسم المتصل وهكذا… هذه فائدة الريكويست كود
والان سوف نضع الكود الذي سيحضر الصورة بعد التأكد من الرقم :

    if (resultCode == RESULT_OK){
    if (requestCode == 1 ){
    Uri selectedImage = data.getData();

    // selectedimage هو كائن من نوع uri
    وهو يحتوي على عنوان الصورة التي اختارها المستخدم من معرض الصور

    InputStream imageStream = getContentResolver().openInputStream(selectedImage);
    // image stream هو اوبجيكت من نوع InputStream
    وهو يستخدم لقراءة الملفات ... والان استخدمناه لقراءة عنوان الصورة

    Bitmap SelectedPhoto = BitmapFactory.decodeStream(imageStream );// decodeStream هي دالة تستخدم لتحويل inputstream إلى بيتماب

    photo.setImageBitmap(SelectedPhoto );// نقوم بتعيين البيتماب إلى الصورة
    }
    }
    

نلاحظ أننا قمنا بالتأكد من الريكويست كود … فإذا كان 1 نقوم بإحضار الصورة …
والآن أصبح الكود الكامل :

    public class uploadFromGallary extends ActionBarActivity {
    Button upload ;
    ImageView photo;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_upload_from_gallary);
    upload =(Button)findViewById(R.id.uploadButton);
    photo = (ImageView ) findViewById(R.id.photo);
    upload.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    Intent i = new Intent( Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
    startActivityForResult(Intent.createChooser(i, "Select Your Photo"), 1);
    }
    });
    }
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    // if(resultCode == RESULT_OK) تعني ان كان قد تم الحصول على البيانات بدون مشاكل
    if (resultCode == RESULT_OK){
    if (requestCode == 1 ){
    Uri selectedImage = data.getData();
    InputStream imageStream = getContentResolver().openInputStream(selectedImage);
    Bitmap SelectedPhoto = BitmapFactory.decodeStream(imageStream );
    photo.setImageBitmap(SelectedPhoto );
    }
    }
    }

    }
  

بالطبع بالبرمجة هناك أكثر من طريقة لعمل شيء معين .. لذلك هذه ليست الطريقة الوحيدة لأخذ صورة من معرض الصور في الجهاز وهذه ليست الطريقة الأفضل أيضا لكنها سهلة وواضحة تقريبا … هناك بعض الأخطاء التي ستحدث عند اختيار صورة كبيرة الحجم .. وسيتوقف التطبيق بسبب ذلك ..لكن سنتعلم طريقة لتغير حجم الصورة لتفادي هذا الخطأ في درس آخر ان شاءالله … وأيضا سنستخدم مكتبة ” بيكاسو” لتعيين الصورة بدلا من هذه الطريقة في درس آخر …. والسلام عليكم

 إصلاح الأخطاء  والتعديل على الكود السابق قليلا

أعتقد أن البعض قد واجه بعض المشاكل في استخدام الكود الذي وضعته اعلاه  .. عند تشغيل البرنامج سوف يظهر خطأ عند اختيار الصورة من المعرض الذي تم فتحه
مما سيسبب توقف التطبيق والسبب في ذلك هو أنك لم تكتب الصلاحيات في ملف المينفيست ..

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

الآن , اذهب إلى ملف المينفيست وقم بإضافة هذا السطر :

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  

هناك خطأ آخر بالكود قد يظهر عند استخدام ال InputStream وهو :Unhandled Exception : java.io.FileNotFoundException
والسبب انه قد يظهر هذا الخطأ عند اختيار صورة غير موجودة أو تم حذفها
لذلك سنقوم باستخدام try و catch لمعالجة هذا ال exception (الكاتش تقوم فقط بمعالجة هذا الخطأ حين ظهوره
لكن في الحالات العادية هو لن يظهر)
الآن سوف يصبح الكود داخل دالة onActivityResult

    if(requestCode == 1 && resultCode == RESULT_OK){
    Uri photo_uri = data.getData();
    try {
    InputStream imagestream = getContentResolver().openInputStream(photo_uri);
    Bitmap selected_photo = BitmapFactory.decodeStream(imagestream);
    photo.setImageBitmap(selected_photo);
    }catch (FileNotFoundException FNFE){
    Toast.makeText(Gallery_main.this,FNFE.getMessage(),Toast.LENGTH_LONG).show();
    }
  

 

الآن قمنا بمعالجة الخطأ … أي ان ظهر هذا ال exception  سوف ينفذ الكود بداخل الكاتش  ..

الآن فلتجرب أن تقوم بتشغيل التطبيق على المحاكي أو على هاتفك واضغط على الزر .. سيفتح الاستديو ثم اختر الصورة التي تريدها   بعدها سيعود لتطبيقك وستجد الصورة  في مكان الImageView وهذه هي فائدة دالة onActivityResult

..وإذا واجهت أي خطأ آخر .. قم بالتعليق أسفل المدونة وأخبرنا عن الخطأ الذي واجهك

بعد أن تختر الصورة قد تظهر الصورة غير متناسقة أو كبيرة/صغيرة عند عرضها في ImageView ولذلك علينا تغيير حجم الصورة لتصبح متناسقة مع الImageView

في البداية … علينا تغيير عرض و ارتفاع الصورة ونجعلهما مثل العرض والطول للImageView

اذهب إلى ملف اللاياوت  الخاص بالاكتيفيتي الرئيسية xml   وقم بتغيير حجم الصورة عن طريق خاصية layout_width و layout_height   وقم بجعلهما 100dp :

layout_width = “100dp”

layout_height = “100dp “

والآن بما أن ارتفاع الصورة وعرضها أصبح يساوي 100 ,, علينا تغيير حجم الصورة التي اختارها المستخدم من المعرض إلى نفس حجم ال ImageView

في داخل دالة onActivityResult  أكمل الكود بإضافة التالي :

    selected_photo =Bitmap.createScaledBitmap(selected_photo, 100, 100, true);
    photo.setImageBitmap(selected_photo);
  

 

ما قمنا بفعله هو تغيير طول وعرض الصورة باستخدام دالة createScaledBitmap في الباراميتر الأول : البيتماب التي تريد تغيير حجمها , الثاني : العرض الذي تريده و الثالث : الارتفاع الذي تريده,,  والأخير نقوم بوضع true  كقيمة افتراضية

و الآن سيصبح حجم الصورة على حجم ال ImageView

ملاحظة : اذا قمت بتغيير ارتفاع أو عرض ال ImageViewمن ال xml  عليك تغيير قيمة ال 100 هنا أيضا 

الآن سنقوم بتدوير الصورة :rotate

أحيانا عندما تضع الصورة في ImageView  قد يتغير اتجاهها أيضا  كأن تصبح مائلة إلى اليمين أو اليسار قليلا  لذلك سنقوم بتدويرها لتصبح مستقيمة

قم بإضافة هذا الكود :

    Matrix matrix =new Matrix();
    matrix.postRotate(0);
    Bitmap rotated_photo = Bitmap.createBitmap(selected_photo,0,0,
    selected_photo.getWidth(),selected_photo.getHeight(),matrix,true);
  

 

الماتركس هو مثل اعدادات للصورة .. بدالة postRotate قمنا بتغيير درجة الانحناء إلى 0 وبعدها بدالة createBitmap  قمنا باستخدام الارتفاع والعرض نفسه  واعطائها اعدادات الماتركس

الآن قم بتشغيل البرنامج .. سوف ترى الصورة مستقيمة بدون ميلان أو انحناء …. و بامكانك تغيير درجة النحناء إلى 45 مثلا لتجعل الصورة مائلة قليلا

هذه أحد طرق تغيير حجم الصورة وجعلها مائلة أيضا … 

البرنامج التعليمي Gallery مع مثال في Android Studio

في Android ، يعد المعرض Gallery  طريقة عرض تُستخدم لإظهار العناصر الموجودة في قائمة التمرير الأفقية المقفلة في الوسط ، وسيحدد المستخدم طريقة عرض ثم سيظهر العرض الذي حدده المستخدم في وسط القائمة الأفقية. تتم إضافة العناصر الموجودة في  المعرض Gallery باستخدام  المحول تمامًا كما هو الحال في ListView أو GridView .

ملاحظة مهمة:  تم إهمال فئة المعرض في مستوى API 16. لم تعد هذه الأداة مدعومة. تتضمن أدوات التمرير الأفقية الأخرى  HorizontalScrollView و ViewPager من مكتبة الدعم.

---

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

• 1 رمز XML الأساسي للمعرض Gallery
• 2 المحول المستخدم لملء الصور في المعرض:
• 3 خطوات لتنفيذ عرض معرض Android:
• 4 طرق مهمة للمعرض Gallery في Android:
• 5 سمات المعرض Gallery :
• 6 مثال على المعرض Gallery في Android Studio:

كود  Gallery  الأساسي  :

<Gallery
  android:id="@+id/simpleGallery"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"/ >

---

المحول المستخدم لملء الصور في المعرض Gallery

تعمل المحولات كجسر بين AdaptorView ومصدر البيانات. لملء البيانات (الصور) في المعرض ، نحتاج إلى استخدام المحولات. BaseAdapter هو المحول الرئيسي لجميع المحولات الأخرى لذلك استخدمناه بشكل أساسي لعرض البيانات في قائمة المعرض.

BaseAdapter:

BaseAdapter هو فئة أساسية شائعة للتنفيذ العام لمحول يمكن استخدامه في ListView و  GridView و Gallery وما إلى ذلك. يمكن تمديد المحول الأساسي لإنشاء محول مخصص لعرض عناصر قائمة مخصصة.

إليك رمز المحول المخصص عندما نقوم بتوسيع BaseAdapter في ذلك:

public class CustomAdapter extends BaseAdapter {

  @Override

  public int getCount() {

  return 0;

  }

  @Override

  public Object getItem(int i) {

  return null;

  }

  @Override

  public long getItemId(int i) {

  return 0;

  }

  @Override

  public View getView(int i, View view, ViewGroup viewGroup) {

  return null;

  }

في مقتطف الشفرة أعلاه ، نرى الطرق المتجاوزة لـ BaseAdapter والتي تُستخدم لتعيين البيانات في قائمة أو شبكة أو معرض. من هناك ، استخدمنا وظيفتين أساسيتين getCount () و getView ().

• getView (): يتم استدعاء هذه الطريقة تلقائيًا لجميع عناصر المعرض (على غرار طريقة عرض القائمة التي يتم فيها استدعاء طريقة getView () لكل عنصر من عناصر ListView )
• getCount (): تُرجع هذه الطريقة العدد الإجمالي للعناصر المراد عرضها في قائمة. تحسب القيمة من طريقة حجم قائمة الصفيف () أو طول المصفوفة.

اقرأ البرنامج التعليمي BaseAdapter لمزيد من التفاصيل.

---

خطوات تنفيذ عرض معرض Gallery  

1. احصل على مرجع المعرض في الفصل باستخدام طريقة findViewById () ، أو يمكنك أيضًا إنشاء كائن ديناميكيًا.
2. قم بإنشاء مجموعة من الصور واستدعاء المحول باستخدام كائن عرض المعرض.
3. قم بإنشاء فئة محول مخصص تعمل على توسيع BaseAdapter لربط عرض المعرض بسلسلة من ImageViews.

---

طرق مهمة للمعرض Gallery في Android

دعنا نناقش بعض الطرق المهمة للمعرض والتي قد يتم استدعاؤها من أجل إدارة المعرض.

1. setAnimationDuration (int): تُستخدم هذه الطريقة لتعيين المدة التييجب أن يتم خلالها تشغيل الرسوم المتحركة الانتقالية(بالمللي ثانية) عندما يتغير التخطيط.

أدناه ، قمنا بتعيين المدة الزمنية التي يجب أن يتم خلالها تشغيل الرسوم المتحركة للانتقال عند تغيير التخطيط.

Gallery simpleGallery = (Gallery) findViewById(R.id.simpleGallery); // get the reference of Gallery
  simpleGallery.setAnimationDuration(3000); // set 3000 milliseconds for animation duration between items of Gallery

2. setSpacing (int): تُستخدم هذه الطريقة لتعيين التباعد بين العناصر في المعرض.

أدناه قمنا بتعيين التباعد بين عناصر المعرض.

Gallery simpleGallery = (Gallery) findViewById(R.id.simpleGallery); // get the reference of Gallery
  simpleGallery.setSpacing(5); // set space between the items of Gallery

3.setUnselectedAlpha (float): تُستخدم هذه الطريقة لتعيين ألفا على العناصر التي لم يتم تحديدها.

أدناه قمنا بتعيين قيمة ألفا لعناصر المعرض غير المحددة.

Gallery simpleGallery = (Gallery) findViewById(R.id.simpleGallery); // get the reference of Gallery
  simpleGallery.setUnselectedAlpha(0.80f); // set 0.25 value for the alpha of unselected items of Gallery

---

سمات وخصائص المعرض Gallery 

الآن دعنا نناقش بعض السمات الشائعة للمعرض والتي تساعدنا على تكوينه في تخطيطنا ( xml ).

1.id  تُستخدم سمة المعرّف : id لتعريف المعرض بشكل فريد.

أدناه قمنا بتعيين معرف المعرض الذي يتم استخدامه لتعريفه بشكل فريد.

<Gallery
  android:id="@+id/simpleGallery"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"/ > < !--  id of Gallery used to uniquely identify it -->

2. المساحة المتروكة padding : تُستخدم هذه السمة لتعيين المساحة المتروكة من الجانب الأيسر أو الأيمن أو العلوي أو السفلي للمعرض.

• المساحة المتروكة لليمين paddingRight: تُستخدم هذه السمة لتعيين المساحة المتروكة من الجانب الأيمن للمعرض.
• المساحة المتروكة لليسار paddingLeft : تُستخدم هذه السمة لتعيين المساحة المتروكة من الجانب الأيسر للمعرض.
• paddingTop: تُستخدم هذه السمة لتعيين المساحة المتروكة من الجانب العلوي للمعرض.
• paddingBottom: تُستخدم هذه السمة لتعيين المساحة المتروكة من الجانب السفلي للمعرض.
• المساحة المتروكة padding : تُستخدم هذه السمة لتعيين المساحة المتروكة من جميع جوانب المعرض.

أدناه قمنا بتعيين المساحة المتروكة 10dp من جميع جوانب المعرض

<Gallery
  android:id="@+id/simpleGallery"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:padding="10dp"/> <!--  10dp padding from all the sides of Gallery -->

3. الخلفية background : تُستخدم هذه السمة لضبط خلفية المعرض. يمكننا ضبط لون أو رسم في خلفية المعرض:

يوجد أدناه مثال للكود مع شرح مضمن قمنا فيه بتعيين اللون الأسود في خلفية المعرض.

<Gallery
  android:id="@+id/simpleGallery"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="#000" /> <!--   black background color of Gallery -->

إعداد المساحة المتروكة في المعرض في فئة Java:

Gallery simpleGallery=(Gallery)findViewById(R.id.simpleGallery); // get the reference of Gallery
  simpleGallery.setBackgroundColor(Color.BLACK); // set black color in the background of Gallery

4. مدة الرسوم المتحركة animationDuration : تُستخدم هذه السمة لتعيين المدة التييجب أن يتم خلالها تشغيل الرسوم المتحركة الانتقالية(بالمللي ثانية) عندما يتغير التخطيط. يمكننا أيضًا تعيين مدة الرسوم المتحركة التي تعني برمجيًا فيفئة جافا باستخدام setAnimationDuration (int).

أدناه ، قمنا بتعيين المدة الزمنية التي يجب أن يتم خلالها تشغيل الرسوم المتحركة للانتقال عند تغيير التخطيط.

<Gallery
  android:id="@+id/simpleGallery"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:animationDuration="3000" />
  <!-- set 100 milliseconds for animation duration between items of Gallery -->

5. التباعد spacing تُستخدم هذه السمة لضبط التباعد بين العناصر في المعرض. يمكننا أيضًا ضبط التباعد بين العناصر التي تعني برمجيًا فيفئة java باستخدام طريقة setSpacing ().

أدناه قمنا بتعيين التباعد بين عناصر المعرض.

<Gallery
  android:id="@+id/simpleGallery"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:spacing="5dp" />
  <!-- set 5dp space between the items of Gallery -->

6. unelectedAlpha: تُستخدم هذه السمة لتعيين ألفا على العناصر التي لم يتم تحديدها. يجب أن تكون قيمة النقطة العائمة ، مثل "5". يمكننا أيضًا تعيين ألفا من العناصر برمجيًا فيفئة جافا باستخدام طريقة setUnselectedAlpha (float).

أدناه قمنا بتعيين قيمة ألفا لعناصر المعرض غير المحددة.

<Gallery
  android:id="@+id/simpleGallery"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:unselectedAlpha="0.25" />
  <!-- set 0.25 value for the alpha of unselected items of Gallery -->

---

مثال المعرض Gallery في Android Studio 

يوجد أدناه مثال المعرض الذي نعرض فيه ImageView و Gallery مع عدد العناصر (الصور). أولاً ، نقوم بإنشاء مجموعة من معرفات الصور ثم تعيين المحول لملء البيانات في المعرض. في هذا نقوم بإنشاء فئة محول مخصصة نوسع فيها فئة BaseAdapter. نقوم أيضًا بتنفيذ حدث setOnItemClickListener ، لذلك عندما ينقر المستخدم على أي عنصر من عناصر المعرض ، يتم عرض العنصر القابل للتحديد (الصورة) في ImageView .

يمكنك أدناه تنزيل الكود ، والاطلاع على الإخراج النهائي والشرح خطوة بخطوة للمثال:

تحميل الكود ؟

الخطوة 1:  قم بإنشاء مشروع جديد وقم بتسميته GalleryExample

الخطوة 2:  افتح res -> layout -> activity_main. xml (أو) main. xml وأضف الكود التالي:

<LinearLayout 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:orientation="vertical"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context=".MainActivity">

  <!-- create a ImageView and Gallery -->
  <ImageView
  android:id="@+id/selectedImageView"
  android:layout_width="fill_parent"
  android:layout_height="200dp"
  android:scaleType="fitXY" />

  <Gallery
  android:id="@+id/simpleGallery"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="100dp"
  android:unselectedAlpha="0.80" />

  </LinearLayout>

الخطوة 3:  افتح src -> package -> MainActivity.java

في هذه الخطوة نفتح MainActivity ونضيف الكود لبدء ImageView والمعرض. أولاً ، نقوم بإنشاء مجموعة من معرفات الصور ثم تعيين المحول لملء البيانات في المعرض. نقوم أيضًا بتنفيذ حدث setOnItemClickListener ، لذلك عندما ينقر المستخدم على أي عنصر من عناصر المعرض ، يتم عرض العنصر القابل للتحديد (الصورة) في ImageView.

package example.abhiandroid.galleryexample;

  import android.graphics.Color;
  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.Gravity;
  import android.view.View;
  import android.widget.AdapterView;
  import android.widget.Gallery;
  import android.widget.ImageView;

  public class MainActivity extends AppCompatActivity {

  Gallery simpleGallery;
  CustomGalleryAdapter customGalleryAdapter;
  ImageView selectedImageView;
  // array of images
  int[] images = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5,
  R.drawable.image6, R.drawable.image7, R.drawable.image8, R.drawable.image9, R.drawable.image10, R.drawable.image11,
  R.drawable.image12, R.drawable.image13};

  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  simpleGallery = (Gallery) findViewById(R.id.simpleGallery); // get the reference of Gallery
  selectedImageView = (ImageView) findViewById(R.id.selectedImageView); // get the reference of ImageView
  customGalleryAdapter = new CustomGalleryAdapter(getApplicationContext(), images); // initialize the adapter
  simpleGallery.setAdapter(customGalleryAdapter); // set the adapter
  simpleGallery.setSpacing(10);
  // perform setOnItemClickListener event on the Gallery
  simpleGallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {
  @Override
  public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  // set the selected image in the ImageView
  selectedImageView.setImageResource(images[position]);

  }
  });
  }
  }

الخطوة 4:  إنشاء كلاس  جديدة CustomGalleryAdapter.java داخل الحزمة وإضافة التعليمات البرمجية التالية.

في هذه الخطوة ، نقوم بإنشاء CustomGalleryAdapter الذي نوسع فيه BaseAdapter وننفذ الطرق المتجاوزة. في هذا قمنا بإنشاء ImageView في وقت التشغيل في طريقة getView وأخيراً قمنا بتعيين الصورة في ImageView.

package example.abhiandroid.galleryexample;

  import android.content.Context;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.BaseAdapter;
  import android.widget.Gallery;
  import android.widget.ImageView;

  public class CustomGalleryAdapter extends BaseAdapter {

  private Context context;
  private int[] images;

  public CustomGalleryAdapter(Context c, int[] images) {
  context = c;
  this.images = images;
  }

  // returns the number of images
  public int getCount() {
  return images.length;
  }

  // returns the ID of an item
  public Object getItem(int position) {
  return position;
  }

  // returns the ID of an item
  public long getItemId(int position) {
  return position;
  }

  // returns an ImageView view
  public View getView(int position, View convertView, ViewGroup parent) {

  // create a ImageView programmatically
  ImageView imageView = new ImageView(context);
  imageView.setImageResource(images[position]); // set image in ImageView
  imageView.setLayoutParams(new Gallery.LayoutParams(200, 200)); // set ImageView param
  return imageView;
  }
  }

تعديل المقال