في هذا الدرس التعليمي، سنتعرف على كيفية إنشاء تطبيق يعتمد في اساسياته على (Android Gridview) بمساعدة (Android GridLayout) .سنقوم أولا بعمل (Android GridView) حيث سيتم عرض صور مختلفة، و عند النقر على أي صورة سيتم فتح نشاط جديد يعرض هذه الصورة في شاشة كاملة للهاتف.
إنشاء مشروع جديد – Android Gridview
- افتح (Android Studio) وأنشئ مشروعًا جديدًا.
- انقر على التالي واختر (Min SDK) ، واحتفظنا بالقيمة الافتراضية. مرة أخرى انقر فوق التالي واختر “نشاط فارغ” .
- اختر النشاط باعتباره (MainActivity) وانقر فوق التالي.
- اترك جميع الأشياء الأخرى كإعداد افتراضي وانقر فوق إنهاء.
سيتم إنشاء مشروع جديد وسيتم حل جميع التبعيات.
مثال Android GridLayout
سيتم إنشاء نظام تخطيط (gridview)من خلال (gridlayout). أنشئ ملف تخطيط جديد في المسار: (/ app / src / main / res / layout) اعطه إسم (android_gridlayout.xml):
android_gridlayout.xml
<?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="https://schemas.android.com/apk/res/android" android:id="@+id/grid_view" android:layout_width="match_parent" android:layout_height="match_parent" android:numColumns="auto_fit" android:columnWidth="90dp" android:horizontalSpacing="10dp" android:verticalSpacing="10dp" android:gravity="center" android:stretchMode="columnWidth" > </GridView>
كما ترون أعلاه الصفات داخل التخطيط هي تفسيرية إلى حد كبير.
الآن علينا أن نعرض الصور في (gridView). لذلك قمنا أولاً بإدراج الصور في مجلد (drawables). قم بتضمين 7-8 صور في المسار …( / app / src / main / res / drawable).
الآن سننتقل إلى صنع محول مخصص.
المحول المخصص Android GridView
إنشاء فئة جديدة باسم (ImageAdapter.java) في المسار (/app / src / main / java / com) و هو نفس المسار حيث يتم تخزين (MainActivity.java)؛ وإضافة التعليمة البرمجية التالية:
ImageAdapter.java
package com.androidtutorialpoint.androidgridview; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.GridView; import android.widget.ImageView; public class ImageAdapter extends BaseAdapter { private Context mContext; public ImageAdapter(Context c) { mContext = c; } public int getCount() { return mThumbIds.length; } public Object getItem(int position) { return mThumbIds[position]; } public long getItemId(int position) { return 0; } // create a new ImageView for each item referenced by the Adapter public View getView(int position, View convertView, ViewGroup parent) { ImageView imageView; if (convertView == null) { // if it's not recycled, initialize some attributes imageView = new ImageView(mContext); imageView.setLayoutParams(new GridView.LayoutParams(370, 370)); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setPadding(8, 8, 8, 8); } else { imageView = (ImageView) convertView; } imageView.setImageResource(mThumbIds[position]); return imageView; } // references to our images public Integer[] mThumbIds = { R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7 }; }
أولاً ، يقوم هذا بتنفيذ بعض الأساليب المطلوبة الموروثة من (BaseAdapter). ليست هناك حاجة إلى ((getItem (int) و ((getItemId (int).
الأسلوب الأول الضروري هو ( ()getView ) . ينشئ هذا الأسلوب طريقة عرض جديدة لكل صورة تمت إضافتها إلى (ImageAdapter) . عندما يتم استدعاء هذا الامر، يتم تمرير “عرض” ، والذي عادة ما يكون كائنًا تم إعادة تدويره. لذا يوجد فحص لمعرفة ما إذا كان الكائن خاليًا. وإذا كان كذلك، يتم إنشاء (ImageView) وتكوينها مع الخصائص المطلوبة لعرض الصورة كما هو موضح أدناه:
- (ViewGroup.LayoutParams //setLayoutParams ) يحدد ارتفاع وعرض الاظهار. بحيت بغض النظر عن حجم (drawable) ، يتم تغيير حجم كل صورة واقتصاصها لتناسب هذه الأبعاد ، حسب الاقتضاء.
- تعلن setScaleType (ImageView.ScaleType) أنه يجب اقتصاص الصور باتجاه المركز (عند الضرورة).
- يحدد setPadding (int ، int ، int ، int) الحشو لجميع الجوانب. (لاحظ أنه إذا كانت للصور نسب أبعاد مختلفة ، سيؤدي تقليل المساحة إلى تقليل اقتصاص الصورة إذا لم تتطابق مع الأبعاد المعطاة إلى (ImageView).
إذا لم يكن الاظهار الذي تم تمريره إلى ( ()getView ) خاليًا ، فسيتم تهيئة (ImageView) المحلي باستخدام كائن العرض المعاد تدويره.
في نهاية أسلوب ( ()getView ) ، يتم استخدام العدد الصحيح للموضع الذي تم تمريره لتحديد صورة من صفيف (mThumbIds) ، والذي تم تعيينه كمورد صورة لـ (ImageView) . كل ما تبقى هو تحديد مجموعة (mThumbIds) من الموارد القابلة للرسم.
الآن دعونا ننتقل إلى الجزء الأخير وهذا هو (MainActivity.java).
التقاط Android GridView داخل MainActivity
إدراج الكود التالي في (MainActivity.java):
MainActivity.java
package com.androidtutorialpoint.androidgridview; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.GridView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.android_gridlayout); GridView gridView = (GridView) findViewById(R.id.grid_view); // Instance of ImageAdapter Class gridView.setAdapter(new ImageAdapter(this)); } }
في الكود أعلاه ، يتم التقاط (Android GridView) من التخطيط باستخدام (findViewById) . ثم يتم استخدام (setAdapter) كمحول مخصص لمصدر كل الصور ليتم عرضها في (GridView).
عرض صورة محددة على الشاشة الكاملة
الآن سوف نقوم بإضافة وظيفة اخرى لهذا التطبيق. كلما اختار المستخدم صورة معينة ، سيتم عرضها على كامل شاشة الهاتف. لهذا نحن بحاجة إلى إضافة مستمع (listener) في (MainActivity) وبدء نشاط جديد كلما تم تحديد صورة جديدة. كما يتعين علينا إنشاء ملف (xml) جديد.
قم بإنشاء ملف xml جديد باسم (selected_image.xml):
selected_image.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/full_image_view" android:layout_width="fill_parent" android:layout_height="fill_parent"/> </LinearLayout>
قم بإنشاء فئة جديدة باسم (FullScreenImage.java) . يجب إنشاء هذا في نفس مسار (MainActivity.java).
FullScreenImage.java
package com.androidtutorialpoint.androidgridview; import android.content.Intent; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.widget.ImageView; public class FullScreenImage extends AppCompatActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.selected_image); // get intent data Intent i = getIntent(); // Selected image id int position = i.getExtras().getInt("id"); ImageAdapter imageAdapter = new ImageAdapter(this); ImageView imageView = (ImageView) findViewById(R.id.full_image_view); imageView.setImageResource(imageAdapter.mThumbIds[position]); } }
الآن سنجري بعض التغييرات في (MainActivity.java) لتمرير الصورة إلى النشاط الثاني أي (FullScreenImage) عندما ينقر المستخدم على الصورة.
MainActivity.java
package com.androidtutorialpoint.androidgridview; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.android_gridlayout); GridView gridView = (GridView) findViewById(R.id.grid_view); // Instance of ImageAdapter Class gridView.setAdapter(new ImageAdapter(this)); gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View v, int position, long id) { Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show(); // Sending image id to FullScreenActivity Intent i = new Intent(getApplicationContext(), FullScreenImage.class); // passing array index i.putExtra("id", position); startActivity(i); } }); } }
في الكود أعلاه ، قمنا بإضافة مستمع سوف يتصل على (OnItemClick) للنقر على الصورة. وبمجرد النقر فوق الصورة ، سيتم تمرير المعلومات إلى النشاط الثاني من خلال (Intent) .
في الخطوة النهائية ، سنبدأ نشاط (FullScreenImage). قم بإجراء التغييرات التالية في (AndroidManifest.xml):
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest package="com.androidtutorialpoint.androidgridview" xmlns:android="https://schemas.android.com/apk/res/android"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <!-- FullScreenImage --> <activity android:name=".FullScreenImage"></activity> </application> </manifest>
قم بتشغيل هذا التطبيق. سترى الشاشة أعلاه. عند النقر على صورة ستراها في كامل الشاشة.