آموزش نحوه ساخت یک GridView سفارشی در اندروید

در این مقاله قصد داریم تا نحوه ساخت یک GridView سفارشی را برای شما توضیح دهیم. اهداف پروژه : در این پروژه ما قصد داریم اهداف زیر را پیاده سازی نماییم: ساخت قالب دلخواه GridView ...

دوره آموزش اندروید

دوره آموزش برنامه نویسی اندروید

دوره آموزش آندروید

رمز فایل :tahlildadeh.com

 

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

 

با عرض سلام و خسته نباشید به شما دانشجویان محترم آموزشگاه تحلیلگر داده ها. در این مقاله قصد داریم تا نحوه ساخت یک GridView سفارشی را برای شما توضیح دهیم.

اهداف پروژه :

در این پروژه ما  قصد داریم اهداف زیر را پیاده سازی نماییم:

ساخت قالب دلخواه GridView

نمایش داده های تعیین شده در GridView

 

برای شروع کار ابتدا می بایست یک پروژه جدید در محیط Eclipse ایجاد نماییم. برای این منظور از منوی File زیر منوی New و سپس زیر منوی Android Application Project را انتخاب می نماییم. (شکل 1)

شکل 1

همچنین برای ساده تر شدن و بالا بردن سرعت کار می توانید از منوی ابزار ها، منوی New و سپس Android Application Project را انتخاب نمایید.(شکل 2)

 

 

شکل 2

با انجام هر دو روش پنجره جدیدی با عنوان New Android Application باز می گردد. (شکل 3)

شکل 3

 

در این پنجره قسمت هایی وجود دارد که در زیر به توضیح آنها می پردازیم :

Application Name: در این فیلد می بایست نام برنامه خود را وارد نمایید. توجه داشته باشید که هر مقداری را که در این فیلد وارد نمایید، برنامه با این نام در لیست برنامه های نصب شده قرار خواهد گرفت.

در این فیلد می توانید یک رشته فارسی نیز وارد نمایید.

Project Name: در این فیلد می بایست نام کلی پروژه خود را وارد نمایید و بهتر است که یک رشته با معنا و مرطبت با برنامه خود وارد نمایید.

زمانی که مقدار فیلد Application Name را وارد می نمایید، فیلد Project Name نیز بصورت خودکار همان نام را وارد می نماید. توجه داشته باشد که اگر فیلد Application Name را با یک رشته فارسی مقداردهی نمودید، برای جلوگیری از خطاها می بایست رشته فارسی تولید شده در فیلد Project Name را با یک رشته معادل انگلیسی جایگزین نمایید.

Package Name:  در این فیلد می بایست پکیج پروژه خود را تعیین نمایید که بهتر است آدرس وب سایت خود را بدون درج http  و www و بصورت از آخر به اول و به همراه نام وارد شده در فیلد Project Name وارد نمایید. این نوع مقداردهی به برنامه های مارکت نظیر بازار و Google Paly این امکان را میدهد تا زمانی که نسخه جدیدی از برنامه شما ساخته و آماده منتشر گردید باخبر شده و نسخه جدید برنامه تان را جایگزین نسخه قبلی نماید.

Minimum Required SDK: در این لیست انواع API های « نسخه های سیستم عامل اندروید » منتشر شده توسط گوگل وجود دارد. با انتخاب هر کدام از آنها مشخص می نمایید که برنامه تان به چه حداقل نسخه ای از سیستم عامل اندروید نیاز دارد. برای مثال اگر گزینه API 14 را انتخاب نمایید، برنامه تان در سیستم عامل اندروید پایین تر از اندروید 4 یا همان IceCream Sandwich، نصب و اجرا نمی گردد.

اگر از امکانات خاص نسخه های جدیدتر سیستم عامل اندروید استفاده نمی نمایید پیشنهاد می گردد که API 8  را انتخاب نمایید. چرا که با انتخاب این نسخه از سیستم عامل اندروید مطمئن خواهید بود که برنامه شما در تمامی گوشی ها و تبلت ها اجرا خواهد شد.

Target SDK: در این لیست انواع API های « نسخه های سیستم عامل اندروید » منتشر شده توسط گوگل وجود دارد. با انتخاب هر کدام از آنها مشخص می نمایید که بالاترین نسخه اندرویدی که برنامه شما می تواند در آن نصب و اجرا گردد کدام نسخه است. بدیهی ست که هرچه سطح API انتخاب شده بالاتر باشد، گوشی ها و تبلت های جدید نیز می توانند از برنامه شما استفاده نمایند.

Compile With: در این لیست انواع API های « نسخه های سیستم عامل اندروید » منتشر شده توسط گوگل وجود دارد. با انتخاب هر کدام از آنها مشخص می نمایید که برنامه Eclipse از کدام نسخه از سیستم عامل اندروید برای نوشتن کلاس های برنامه و همچنین کامپایل و تست نمودن آن استفاده نماید.

Theme: در این لیست می توانید یک Theme برای برنامه خود انتخاب نمایید.

توجه داشته باشید زمانی که مقدار Compile With را کمتر از API 14 انتخاب نمایید، از این قسمت نمی توانید استفاده نمایید و می بایست از لیست موجود گزینه None رو انتخاب نمایید.

پس از مقداردهی نمودن فیلد های ذکر شده بر روی دکمه Next کلیک می نماییم تا به مرحله بعدی ایجاد پروژه برویم. (شکل 4)

شکل 4

در مرحله بعدی اگر گزینه Create custom launcher icon را انتخاب نمایید، برنامه Eclipse به شما اجازه میدهد تا برای برنامه خود یک عکس جهت ساختن icon انتخاب و یا با استفاده از ابزار های خود برنامه Eclipse، icon مورد نظر خود را ترسیم نمایید. توجه داشته باشید که در صورت عدم انتخاب این گزینه، صفحه مربوطه برای شما باز نخواهد شد.

همچنین اگر گزینه Create Activity را انتخاب نمایید، برنامه Eclipse به شما اجازه میدهد که نام و نوع activity برنامه تان را انتخاب نمایید.

 

 

 

این دو گزینه را انتخاب می نماییم و سایر گزینه ها را به حالت پیش فرض خود می گذاریم. حال مجددا بروی دکمه Next کلیک می نماییم تا به مرحله بعدی ایجاد پروژه برویم. (شکل 5)

شکل 5

در مرحله بعدی می توانید برای برنامه خود یک icon انتخاب و یا رسم نمایید.

دکمه image برای انتخاب یک عکس ترجیحا با فرمت png به عنوان icon برنامه

دکمه Clipart برای انتخاب یک clipart « شکلک » به عنوان icon برنامه

دکمه Text برای ورود یک نوشته به عنوان icon برنامه

مورد استفاده قرار می گیرند.

ما دکمه image را انتخاب و پس از انتخاب کردن عکس مورد نظر به عنوان icon برنامه بر روی دکمه Next کلیک می نماییم تا به مرحله بعدی ایجاد پروژه برویم. (شکل 6)

شکل 6

در مرحله بعدی گزینه Create Activity را انتخاب می نماییم و از لیست موجود که بیانگر انتخاب نوع Activity برنامه می باشد گزینه Blank Activity را انتخاب می نماییم. (شکل 7)

شکل 7

در مرحله آخر نیز می بایست برای activity و layout خود یک نام انتخاب نمایید. ما نام انتخاب شده پیش فرض را قبول کرده و بر روی دکمه Finish کلیک می نماییم تا پروژه مان ساخته شود. (شکل 8)

شکل 8

تا اینجای کار ما پروژه خود را در برنامه Eclipse ایجاد نموده ایم. حال برای ادامه کار می بایست layout خود را طراحی نماییم. برای این کار یک ابزار GridView را بر روی صفحه قرار می دهیم. (شکل 9)

شکل 9

 

بعد از طراحی نمودن layout اصلی برنامه می بایست layout سفارشی برای ابزار GridView را طراحی نماییم. برای این کار ابتدا می بایست از نوار ابزار گزینه  را انتخاب نماییم. با انجام این عمل پنجره جدیدی با عنوان New Android XML File باز می گردد که می توانیم layout جدیدی را به پروژه خود اضافه نماییم. در پنجره باز شده، از قسمت Resource Type گزینه Layout، از قسمت Project نام پروژه خود، در قسمت File نام دلخواهی برای فایل layout خود،. از قسمت Root Element نیز گزینه Linear Layout را انتخاب و در آخر بر روی دکمه Finish کلیک می نماییم تا layout ساخته شود. (شکل 10)

 

شکل 10

بعد از ایجاد فایل layout، می بایست ابزار GridView سفارشی خود را طراحی نماییم. GridView که قصد طراحی آنرا داریم، شامل سه قسمت می باشد. یک قسمت برای نمایش عکس، یک قسمت برای نمایش متنی ثابت با عنوان Example و قسمت آخر نیز برای نمایش متنی دلخواه می باشد. (شکل 11)

شکل 11

همچنین مقادیر لازمه را در فایل string.xml وارد می نماییم. (شکل 12)

شکل 12

در مرحله بعدی می بایست کلاس جدیدی را ایجاد نماییم تا به واسطه آن بتوانیم یک آداپتور سفارشی ایجاد و از layout طراحی شده « grid_item.xml » استفاده نماییم. برای این منظور ابتدا می بایست کلاسی جدیدی ایجاد نماییم. برای این کار ابتدا در نوار ابزار گزینه  را انتخاب می نماییم. با انجام این عمل پنجره جدیدی با عنوان New Java Class باز می گردد. در پنجره باز شده از قسمت Package نام پکیجی که مایلیم کلاس مذکور در آن ایجاد شود را انتخاب نمایید. برای راحتی کار نیز می توانیم از دکمه Browse … استفاده نموده و پکیج مورد نظر را انتخاب نماییم. در قسمت Name می بایست نام دلخواه خود برای کلاس مذکور را وارد نماییم و در قسمت Superclass نیز می بایست آدرس و نام کلاسی که قصد داریم از آن استفاده نموده و کلاس خود را از آن گسترش « Extends » دهید، وارد نماییم. در آخر بر روی دکمه Finish کلیک مب نماییم تا کلاس مورد نظر ساخته شود.  (شکل 13)

شکل 13

اگر در زمان مقداردهی نمودن گزینه Superclass آدرس و نام کلاس مورد نظر خود را نمی دانیم می توانیم از گزینه Browse … برای پیدا کردن آن استفاده نماییم. با انتخاب این گزینه پنجره جدیدی با عنوان Superclass Selection باز می گردد. و ما می بایست نام کلاس مورد نظر خود را در قسمت Choose a type وارد نماییم. با انجام این عمل کلاس مورد نظرمان در صورت موجود بودن در پروژه در قسسمت Matching items لیست می شود. آنرا انتخاب و دکمه OK را انتخاب می نماییم. (شکل 14)

شکل 14

برای ساخت GridView های سفارشی می بایست از کلاس BaseAdapter استفاده نماییم.

بعد از ایجاد نمودن class، کدهای مورد نیاز را داخل آن وارد می نماییم. ابتدا متغیرها و اشیائی که در طول طراحی کلاس به آنها نیاز خواهیم داشت و همچنین متد سازنده کلاس « Constructor » را وارد می نماییم. (شکل 15)

 

شکل 15

متد سازنده تعریف شده در بالا شامل دو پارامتر ورودی می باشد. پارامتر اول شئی از کلاس Context می باشد که اشاره به کلاس Activity دارد که ابزار GridView در آن مورد استفاده قرار خواهد گرفت و پارامتر دوم نیز آرایه ای از نوع داده ای String می باشد و به داده هایی اشاره دارد که مایل به اضافه شدن آن به ابزار GridView را داریم. در ادامه نیز شئی با نام inflater و از کلاس LayoutInflater ایجاد نموده ایم. با استفاده از این شی، به سرویسی با نام LAYOUT_INFLATERSERVICE دسترسی پیدا خواهیم نمود که برای ایجاد دسترسی به فایل grid_item.xml مورد نیاز می باشد.

متد بعدی که می بایست آنرا ایجاد نماییم getView می باشد. این متد وظیفه ساخت گزینه های ابزار GridView را دارد. (شکل 16)

 

شکل 16

در داخل این متد و در ابتدای آن با استفاده از دستور شرطیif  چک نموده ایم که مقدار پارامتر convertView خالی می باشد یا خیر.

با استفاده از این دستور شرطی کنترل نموده ایم که متد gridView برای بار اول است که صدا زده می شود و یا اینکه قبلا صدا زده شده است. این کار موجب بالا بردن کارایی برنامه و کاهش مصرف باتری دستگاه اندرویدی مان خواهد شد.

در داخل دستور شرطی، شئی با نام gridView از کلاس View ایجاد نموده ایم. سپس با استفاده از متد inflat شی inflater، یک دسترسی به layout grid_item.xml ایجاد نموده ایم.

با استفاده از شی gridView می توانیم به تمامی ابزار های موجود در layout، grid_item.xml دسترسی پیدا نموده و از آنها استفاده نماییم.

در خط بعدی، دسترسی به ابزارهای TextView و ImageView ایجاد نموده ایم و در ادامه با استفاده از متد setText شی textView، داده هایی را که قصد نمایش آنها در ابزار GridView را داریم، مقداردهی نموده ایم و همچنین آنها را در متغیری با نام arrLabel که از نوع داده ای String  می باشد، ذخیره نموده ایم.

در ادامه نیز با استفاده از دستورهای شرطی if چک نموده ایم که اگر مقدار متغیر arrLable برابر با مقدارهای تعیین شده بود، عکسی متناسب با آنها در ابزار ImageView نمایش داده شود و در غیر این صورت یک عکس پیش فرض برای تمامی گزینه های GridView نمایش داده شود.

اگر متد برای با چندم باشد که صدا زده می شود دستورات بالا اجرا نخواهد شده و تنها دستور قسمت else اجرا خواهد شد که در این قسمت شی gridView را برابر با پارامتر ورودی convertView قرار داده ایم.

در آخر نیز با استفاده از دستور return، شی gridView را به برنامه باز گردانده ایم.

متدهای دیگری با نام های getCount، getItem و getItemId در کلاس CustomGridAdapter وجود دارند که ساختار آنها همیشه ثابت می باشد. (شکل 17)

شکل 17

 

در ادامه نیز کدهای کلاس MainActivity و نحوه استفاده از کلاس CustomGridAdapter را درج خواهیم نمود.

اولین کدی که می بایست به کلاس MainActivity اضافه نماییم متد onCreate می باشد. این متد یکی از متدهای اصلی برنامه و همین طور چرخه حیات برنامه های اندرویدی می باشد و زمانی که برنامه برای اولین بار اجرا می گردد و یا دستگاه اندرویدی ما از حالت portrait به حالت landscape و یا بر عکس تغییر می کند، این متد فراخوانی می گردد.

یکی از دستوراتی مهمی که باید به این متد اضافه گردد دستور setContentView است. وظیفه این دستور به نمایش در آوردن layout برنامه می باشد (شکل 18)

شکل 18

مقدار activity_main نام فایل xml مربوط به layout برنامه مان می باشد.

همچنین دستور savedInstanceState حالت جاری layout برنامه را ذخیره می نماید. به این معنا که، فرض نمایید بر روی layout خود یک ابزار EditText قرار داده اید و مقدار نام خودتان را درون آن وارد کرده اید. زمانی که حالت دستگاه اندرویدی خودتون را به landscape و یا portrait تغییر دهید مشاهده می نمایید که مقدار نام شما هنوز در EditText وجود دارد و پاک نشده است. دلیل آن به خاطر استفاده از دستور فوق می باشد.

در مرحله بعدی می بایست کدهایی بنویسیم تا بوسیله ی آن  بتوانیم به ابزار GridView و کلاس CustomGridAdapter ساخته شده دسترسی پیدا نموده و داده هایی که می خواهیم در ابزار GridView نمایش داده شوند را تعریف و مقداردهی نماییم. (شکل 19)

شکل 19

اگر در زمان تعریف یک متغیر و یا یک شی، آنرا در ابتدای کلاس جاری و قبل از تمامی متدهای خود تعریف نمایید، آنها به عنوان سراسری محصوب می شوند و می توانید به راحتی در تمامی متدها و کلاس های کلاس جاری از آن استفاده نمایید.

اگر در زمان تعریف یک متغیر از کلمه کلیدی final استفاده نمایید، مقداری که به آن نصبت میدهید یک مقدار یکتا خواهد بود و به هیچ وجه نمی توانید مقدار آنرا در طول برنامه خود تغییر دهید.

حال که دسترسی های لازم به ابزار  GridViewو کلاس CustomGridAdapter ایجاد شده است، در مرحله بعد کد های لازم جهت ساختن و نمایش GridView سفارشی را وارد می نماییم. (شکل 20)

شکل 20

کدهای بالا را در ادامه کدهای وارد شده قبلی در متد onCreate قرار می دهیم.

در کد بالا، با استفاده از متد setAdapter شی gridView می توانیم ابزار GridView را به شکل سفارشی شده در آوریم. برای این منظور می بایست از کلاس CustomGridAdapter که ایجاد نموده ایم استفاده نماییم. برای استفاده از این کلاس می بایست دو پارامتر ورودی برای آن مقداردهی نماییم که پارامتر اول می بایست یک شی از کلاس Context باشد. برای این منظور می توانیم از کلمه کلیدی this استفاده نماییم و پارامتر دوم نیز داده هایی می باشد که قصد نمایش دادن آنها در ابزار GridView را داریم. برای این منظور از متغیر GRID_DATA استفاده نموده ایم که حاوی آرایه ای از نام سیستم عامل ها و زبان های برنامه نویسی می باشد.

در ادامه نیز با استفاده از متد setOnItemClickListener، عملیات انتخاب نمودن یک گزینه از GridView توسط کاربر را شبیه سازی نموده ایم و کاربر هر کدام از گزین های GridView را انتخاب نماید، نام گزینه انتخاب شده در یک کادر کوچک نمایش داده می شود.

کلاس Toast کلاسی می باشد که برای نمایش دادن پیغام هایی « با توجه به اتفاقاتی که در طول اجرای برنامه رخ می دهد » به کاربر، مورد استفاده قرار می گیرد. این کلاس سه پارامتر ورودی دارد که مقداردهی کردن هر سه پارامتر الزامی می باشد. پارامتر اول، شئی از نوع Context و پارامتر دوم، پیغام مورد نظر جهت نمایش به کاربر و پارامتر سوم، مدت زمان به نمایش درآمدن کادر پیغام می باشد که می توان از دستور Toast.LENGTH_LONG و یا Toast.LENGTH_SHORT و یا یک عدد صحیح به میلی ثانیه باشد.

 

زمانی که برنامه را اجرا نمایید، نمایی شبیه به عکس زیر خواهید داشت. (شکل 21)

 

 

شکل 21

 

در اینجا کار ما به اتمام میرسد. امیدواریم نهایت استفاده از این مقاله را برده باشید.

شاد و پیروز باشید.