List View یکی از ابزارهای نمایش لیست در خروجی اندروید استودیو می باشد. با معرفی کتابخانه های طراحی متریال دیزاین از سوی گوگل، RecyclerView و CardView به عنوان جایگرین های این ابزار معرفی شدند که کارایی، سرعت و انعطاف پذیری بیشتری دارند. در این مقاله به چگونگی ایجاد یک ListView سفارشی می پردازیم و در مقاله بعدی به آموزش RecyclerView و CardView خواهیم پرداخت.
برای شروع کار، یک پروژه جدید در اندروید استودیو ایجاد می کنیم (File -> New Project). نام Activity پروژه ما که ListView درون آن قرار دارد MainActvity و نام layout آن activity_main است.
ایتدا باید layout مربوط به activity را طراحی کنیم. به این منظور از مسیر res -> layout فایل main_activity را باز کرده و محتوای آن را پاک کرده و کدهای زیر را درون آن قرار می دهیم.
در کدهای بالا، ابتدا قالب layout را از نوع LinearLayout تعیین کرده ایم. و عرض و ارتفاع آن را برابر عرض و ارتفاع صفحه قرار داده ایم. همچنین نوع چیدمان المان ها درون LinearLayout را عمودی تعیین کرده ایم (orientation = vertical). خط 8 تا 11 مربوط به ListView می باشد. برای آن که عرض ListView به اندازه عرض صفحه باشد، مقدار آن را match_parent قرار می دهیم. همچنین می خواهیم ارتفاع ListView با تعداد آیتم های درون آن تعیین شود؛ به همین جهت ارتفاع آن را wrap_content قرار داده ایم. برای آن که در Activity بتوانیم به این ListView دسترسی پیدا کنیم یک id برای آن تغیین کرده ایم.
در گام بعدی باید ظاهر آیتم های درون ListView را طراحی کنیم. به این منظور روی پوشه layout راست کلیک کرده و از مسیر New -> layout resource file یک layout جدید با نام listview_item ایحاد می کنیم. می خواهیم آیتم های ListView ظاهری مانند شکل زیر داشته باشند.
این آیتم از یک ImageView برای نمایش عکس و یک TextView برای نمایش متن تشکیل شده است. برای ایجاد این ظاهر، کدهای زیر را درون فایل listview_item قرار می دهیم.
در مرحله بعد باید مدل مربوط به آیتم های ListView را ایجاد کنیم. برای این کار بر روی پکیج برنامه راست کلیک کرده و از مسیر NEW -> Java Class، کلاس جدیدی با نام item_model ایجاد می کنیم. تصویر زیر محتویات این کلاس را نمایش می دهد.
برای کار با ListView می بایست به یک آداپتور نیاز است تا از طریق آن layout مربوط به آیتم های ListView تنظیم کرده و مقادیر آیتم ها را تعیین کنیم. برای ساخت آداپتور یک کلاس جدید با نام ListViewAdapter ایجاد کرده و آن را به BaseAdapter گسترش می دهیم. با این کار کلاس جاوا به یک آداپتور ListView تبدیل می شود. کدهای زیر را داخل کلاس ListViewAdapter قرار می دهیم.
هنگامی که کلاس را به BaseAdapter گسترش می دهیم یک چراغ قرمز رنگ در کنار نام کلاس نمایش داده می شود. با کلیک بر روی این چراغ و انتخاب گزینه implement methods، چهار تابع getCount، getItemId، getItem و getView نمایش داده می شوند. با کلیک بر روی ok این 4 تابع به کلاس اضافه می شوند. دلیل اضافه شدن این کلاس ها این است که برای آن که adapter به درستی کار کند، حتما این 4 تابع می بایست پیاده سازی شوند. این تواع با کلمه @override از مابقی تابع های کلاس متمایز می شوند. در زیر درمورد پیاده سازی هریک توابع موجود در کلاس فوق را توضیح خواهیم داد:
ListViewAdapter: این تابع سازنده کلاس می باشد. برای تنظیم layout آیتم ها به context و برای مقداردهی آیتم ها به آرایه ای از نوع کلاس item_model که مقادیر آیتم ها در آن قرار دارد، نیاز داریم. این دو مقدار را با استفاده از سازنده از سوی Activity برای آداپتور ارسال می شوند.
getCount: این تابع مسئول شمارش و برگزداندن تعداد آیتم های ListView است. از آن جا که تعداد آیتم های کلاس با تعداد آیتم های آرایه itemsArray یکسان است، اندازه این آرایه را به عنوان تعداد آیتم های لیست بر می گردانیم.
getItem: این تابع شماره یکی از سطرهای ListView را به عنوان ورودی می گیرد و آیتم موجود در این شماره را به عنوان خروجی بر می گرداند. آیتم های ListView از شماره 0 الی آخر شماره گذاری می شوند.
getItemId: ورودی این تابع شماره یکی از سطرهای ListView و خروجی آن شماره آیتم معادل آن سطر است. از آن جا که سطرهای ListView کاملا منطبق با آیتم های موجود در آرایه itemsArray هستند، شماره سطر با شماره آیتم یکسان است.
getView: این تابع مسئول تنظیم layout سطرهای ListView و مقداردهی آن ها است. از آن جا که ما برای سطرهای ListView یک ظاهر سفارشی با نام listView_item ایجاد کرده ایم، می بایست این layout را به سطرهای ListView نسبت دهیم. برای این کار از LayoutInfalter استفاده می کنیم. LayoutInfalter، یک layout را واکشی کرده و یک خروجی از نوع View برمی گرداند. ما این خروجی را درون متغیری به اسم v قرار داده ایم. پس از واکشی به layout می بایست به textView و imageView موجود در layout دسترسی پیدا کرده و آن ها را مقدار دهی کنیم. برای دسترسی به المان ها تابع findViewbyId را روی متغیر v فراخوانی می کنیم و مقدار text و image آیتم موجود در خانه positionام آرایه را به آن ها نسبت می دهیم. تابع getView به تعداد خانه های آرایه itemsArray تکرار می شود و مقدار position موجود در آرگومان ورودی آن هربار یکی افزایش پیدا می کند.
آخرین مرحله نوشتن کدهای کلاس MainActivity می باشد. کدهای زیر را در این کلاس قرار می دهیم.
ابتدا آرایه شامل آیتم های ListView را ایجاد می کنیم. ما سه کشور به همراه پرچم های شان را به عنوان آیتم های ListView قرار داده ایم. سپس یک شی از کلاس ListViewAdapter به نام adapter ایجاد کرده و context برنامه به همراه آرایه شامل آیتم های ListView را به عنوان آرگومان ورودی به آن می دهیم. سپس با استفاده از تابع setAdapter این شی را به عنوان آداپتور ListView معرفی می کنیم. برای آن که بتوانیم هنگام کلیک شدن بر روی هر یک از آیتم های ListView رویدادی را اجرا کنیم از تابع setOnItemClickListener استفاده می کنیم.
جهت مشاهده ی نمونه کارهای اندروید در مجموعه پدیده تجارت به قسمت نمونه کارهای اندروید مراجعه فرمایید.
*آینده از آن کسب و کارهای آنلاین است*
تولید شده در بخش تولید محتوا پدیده تجارت
