گرید ویو (Grid view) در برنامه نویسی اندروید

خلاصه آموزش:

  • گرید ویو در اندروید
  • ویژگی های GridView
  • ساخت پروژه اندروید استودیو(ساخت گرید ویو )

گرید ویو (Grid view) آیتم ها را در یک شبکه ی دو بعدی (سطر و ستون) قابل اسکرول نشان می هد. آیتم های مورد استفاده لزوما از پیش تعیین شده نیستند؛ اما به طور خودکار با استفاده از یک ListAdapter در لایوت قرار می گیرند.

GridView

 در واقع آداپتور یک پل ارتباطی بین کامپوننت های رابط کاربری و داده هایی که قرار است در کامپوننت ها درج شوند ایجاد می کند. آداپتور می تواند داده ها را به مواردی مثل spinner، list view، grid view و غیره عرضه کند.
ListView و GridView زیر کلاس هایی از AdapterView هستند و می توان با متصل کردن آن ها به یک Adapter ، اطلاعات را از یک منبع خارجی مورد بازیابی قرار داد و از آن ها برای مقدار دهی آیتم های ListView و GridView استفاده کرد.

ویژگی های GridView

در جدول زیر مهم ترین ویژگی های GridView ذکر شده است.

ویژگی توضیحات
android:id یک ID برای شناسایی لایوت تعریف می کند.
android:columnWidth عدد صحیح بوده و عرض هر ستون را مشخص می کند.
android:gravity Gravity هر سلول را تعیین می کند. مقادیر ممکن برای این خاصیت عبارتند از top، bottom، left، right، center، center_vertical، center_horizontal و غیره.
android:horizontalSpacing اندازه ی فضای خالی بین ستون ها را مشخص می کند.
android:numColumns تعداد ستون ها را مشخص می کند. مقدار این صفت می تواند یک عدد صحیح مثل “۵” تعیین شود و یا “auto_fit”، یعنی هر تعداد ستون که برای پر کردن فضای در دسترس لازم است را نمایش بده.
android:stretchMode مشخص می کند که ستون ها به چه نحوی فضای خالی مانده ی صفحه را پر کنند (: کش آوردن). مقادیر این صفت می تواند یکی از موارد زیر باشد −

none: کش آوردن غیر فعال است.

spacingWidth: فضای خالی بین هر ستون افزایش می یابد.

columnWidth: اندازه ی عرض هر ستون به طور مساوی افزایش می یابد.

spacingWidthUniform: فضای خالی بین هر ستون به طور یکنواخت کش می آورد.

android:verticalSpacing اندازه ی فضای خالی بین ردیف ها را مشخص می کند.

 

 

مثال

این مثال در چند مرحله ی ساده نحوه ی ساختن یک برنامه را با استفاده از GridView به شما نشان می دهد. برای انجام مثال مراحل جدول زیر را دنبال کنید.

مرحله توضیحات
۱ با استفاده از اندروید استودیو یک پروژه ی جدید به نام Grid View تحت بسته ی com.example.grid.view ایجاد کنید.
۲ محتوای فایل اکتیویتی اصلی یعنی java/com.example.grid.view/MainActivity.java را مانند آنچه در ادامه آمده است تغییر دهید.
۳ فایلی با نام ImageAdapter.java را برای ساختن کلاس ImageAdapter در مسیر src/com.example.grid.view بسازید و محتوایی که در ادامه آمده است را وارد آن کنید.
۴ محتوای فایل res/layout/activity_main.xml را مانند آنچه در ادامه آمده تغییر دهید.
۵ ثابت های رشته ای مورد نیاز را در فایل res/values/strings.xml تعریف کنید.
۶ تعدادی عکس در مسیر res/drawable-hdpi قرار دهید. برای انجام این کار کافیست چند عکس را کپی، روی پوشه ی res/drawable-hdpi راست کلیک و سپس روی Paste کلیک کنید. ما برای این مثال هشت عکس با نام های sample_0.jpg، sample_1.jpg، sample_2.jpg، … و sample_7.jpg را در این پوشه قرار داده ایم.
۷ برنامه را با استفاده از شبیه ساز اندروید استودیو اجرا کنید و نتیجه را مورد بررسی قرار دهید.

در زیر محتوای تغییر یافته ی فایل java/com.example.grid.view/MainActivity.java آورده شده است.

در زیر محتوای فایل java/com.example.grid.view/ImageAdapter.java آورده شده است.

کد های زیر مربوط به فایل res/layout/activity_main.xml می باشند.

در زیر محتوای فایل res/values/strings.xml آورده شده است.

در تصویر زیر نیز نحوه ی قرار گرفتن تصاویر در مسیر res/drawable-hdpi نشان داده شده است.

android stoudio res drawable

 

حالا نوبت اجرای برنامه است. برای این منظور روی آیکون Run که در نوار ابزار قرار دارد کلیک کنید. اگر همه چیز به درستی انجام شود پنجره ی شبیه ساز شما باید مانند تصویر زیر باشد

گرید ویو

 

مثالی از یک Sub-Activity (فعالیت فرعی)

در این مثال می خواهیم مثال بالا را گسترش دهیم، به طوری که با کلیک کردن روی یک تصویر به صورت تمام صفحه نمایش داده شود. برای رسیدن به این منظور، نیازمند ساختن و معرفی یک اکتیویتی جدید هستیم. توجه داشته باشید که برای هر اکتیویتی فرعی باید تمام مراحل مربوط به پیاده سازی یک کلاس اکتویتی، شامل تعریف اکتیویتی فرعی در فایل مانیفست، ساختن لایوت مربوط به اکتیویتی فرعی و در نهایت ایجاد پیوند بین اکتیویتی فرعی با اکتیویتی اصلی در کلاس اکتیویتی اصلی انجام شود. حال با دنبال کردن مراحل جدول زیر پروژه ی ایجاد شده در مثال بالا را گسترش دهید.

مرحله توضیحات
۱ محتوای فایل اکتیویتی اصلی یعنی java/com.example.grid.view/MainActivity.java را مانند آنچه در ادامه آمده است تغییر دهید.
۲ فایلی با نام SingleViewActivity.java را برای ساختن اکتیویتی فرعی در مسیر java/com.example.grid.view ایجاد کنید و محتوایی که در ادامه آمده است را وارد فایل کنید.
۳ فایل single_view.xml را در مسیر res/layout ایجاد کنید و محتوایی را که در ادامه آمده است را به آن انتقال دهید.
۴ اکتیویتی جدید را با استفاده از تگ </…activity> در فایل AndroidManifest.xml تعریف کنید. یک برنامه بدون محدودیت می تواند هر تعداد اکتیویتی که لازم دارد داشته باشد.
۵ برنامه را با استفاده از شبیه ساز اندروید اجرا کرده و نتیجه را مورد بررسی قرار دهید.

 

در زیر محتوای تغییر یافته ی فایل src/com.example.grid.view/MainActivity.java آورده شده است.

در زیر محتوای فایل src/com.example.grid.view/SingleViewActivity.java آورده شده است.

در زیر محتوای فایل res/layout/single_view.xml آورده شده است.

و در نهایت محتوای زیر مربوط به فایل AndroidManifest.xml می باشد.

حال اجازه دهید تا پروژه را اجرا کنیم. برای این روی آیکون Run که در نوار ابزار قرار دارد کلیک کنید.اگر همه چیز به درستی انجام شود پنجره ی شبیه ساز شما باید مانند تصویر زیر باشد.

گرید ویو

حال روی هر کدام از تصاویر که کلیک کنید، مانند تصویر زیر به صورت تمام صفحه نمایش داده خواهد شد.

grid view Sub Activity

تصاویر هنگامی که در قاب بزرگتر از اندازه واقعی شان قرار گیرند.(تصویر بالا)کیفیت دیدشان کاهش می یابد.

 

One thought on “گرید ویو (Grid view) در برنامه نویسی اندروید”

  1. سلام مرسی از آموزش خوبتون
    حالا یه سوال
    من یه فولدر توی است دارم خب؟؟؟
    میخوام اداپتور عکس هارو از اون فولدر بردارم
    ینی drawable نباشه و توی اون فولدر باشه
    چجوریه؟