یک فنجان مشاوره
مهـمـان مــا باشیـد

شـمـــاره تــمــاس
031-36628509

چگونه در اندروید استودیو ListView سفارشی بسازیم؟

انتشار 15 اردیبهشت 1397
دیدگاه ها 0
زمان تقریبی مطالعه
گردآوری پدیده تجارت

List View یکی از ابزارهای نمایش لیست در خروجی اندروید استودیو  می باشد. با معرفی کتابخانه های طراحی متریال دیزاین از سوی گوگل، RecyclerView و CardView به عنوان جایگرین های این ابزار معرفی شدند که کارایی، سرعت و انعطاف پذیری بیشتری دارند. در این مقاله به چگونگی ایجاد یک ListView سفارشی می پردازیم و در مقاله بعدی به آموزش RecyclerView و CardView خواهیم پرداخت.

List View

 

برای شروع کار، یک پروژه جدید در اندروید استودیو ایجاد می کنیم (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 استفاده می کنیم.

 

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

 

*آینده از آن کسب و کارهای آنلاین است*

تولید شده در بخش تولید محتوا پدیده تجارت

مقالات مرتبط

شاید علاقمند به دیدن این مقالات نیز باشید
(آرشیو کامل)

آیا به تاثیر اینستاگرام در شبکه های اجتماعی پی برده اید؟ آیا به تاثیر اینستاگرام در شبکه های اجتماعی پی برده اید؟ مقالات شبکه های اجتماعی

پدیده تجارت

27 بهمن 1395

تولید کننده محتوا اینستاگرام تولید کننده محتوا اینستاگرام مقالات شبکه های اجتماعی

پدیده تجارت

23 فروردین 1401

مزایای یادگیری برنامه نویسی اندروید مزایای یادگیری برنامه نویسی اندروید مقالات موبایل

پدیده تجارت

17 مرداد 1396

قیمت طراحی سایت در اصفهان قیمت طراحی سایت در اصفهان مقالات طراحی وب سایت

پدیده تجارت

14 شهریور 1395

طراحی سایت بصورت فول ریسپانسیو(responsive) چیست ؟ طراحی سایت بصورت فول ریسپانسیو(responsive) چیست ؟ مقالات طراحی وب سایت

پدیده تجارت

11 اسفند 1394

معرفی بهترین فریم ورک های بک اند (back-end ) معرفی بهترین فریم ورک های بک اند (back-end ) مقالات طراحی وب سایت

پدیده تجارت

24 اسفند 1400

سیستم مدیریت محتوا یا cms چیست ؟ سیستم مدیریت محتوا یا cms چیست ؟ مقالات طراحی وب سایت

پدیده تجارت

21 فروردین 1401

بنر مارکتینگ بنر مارکتینگ مقالات برندینگ

پدیده تجارت

22 دی 1392

درباره php بیشتر بدانیم درباره php بیشتر بدانیم مقالات طراحی وب سایت

پدیده تجارت

11 خرداد 1398

آموزش مجازی دیجیتال مارکتینگ اصفهان آموزش مجازی دیجیتال مارکتینگ اصفهان مقالات برندینگ

پدیده تجارت

26 اسفند 1398

آموزش نصب لاراول بصورت قدم به قدم آموزش نصب لاراول بصورت قدم به قدم مقالات طراحی وب سایت

پدیده تجارت

14 مهر 1398

آموزش برنامه نویسی ios در اصفهان آموزش برنامه نویسی ios در اصفهان مقالات موبایل

پدیده تجارت

24 آبان 1396

دیدگاه کاربران

0

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها