طراحی دیالوگ اخطار اندروید در کاتلین — از صفر تا صد

دیالوگ‌ها و اخطارها (Alerts) بخشی بنیادی از هر اپلیکیشن اندرویدی محسوب می‌شوند. در این راهنما با مبانی کار با آن‌ها آشنا خواهیم شد. با ما همراه باشید تا روش طراحی دیالوگ اخطار اندروید در کاتلین را بیاموزید.

امروزه در دنیای دیجیتال مدرن هر روزه شاهد دیالوگ‌های مختلفی هستیم. تقریباً هر کاربری می‌داند که منظور از دیالوگ در یک اپلیکیشن چیست. منظور ما آن پنجره‌های کوچک آزاردهنده‌ای هستند که روی صفحه قرار می‌گیرند و کاری که مشغول انجام آن هستیم را مختل می‌سازند. همانند همه ابزارهای UI اندروید، دیالوگ نیز یک روش برای انتقال پیام‌های مهم به کاربران است. در ادامه این مقاله با روش ساخت دیالوگ‌های اخطار اندروید در کاتلین آشنا می‌شویم

ابتدا به تعریف رسمی اندروید (‌+) در مورد دیالوگ‌ها می‌پردازیم:

دیالوگ یک پنجره کوچک است که به کاربر اطلاع می‌دهد که یک تصمیم خاص بگیرد یا اطلاعات معینی را وارد کند. دیالوگ صفحه را اشغال می‌کند و به طور معمول برای رویدادهای modal که لازم است کاربران پیش از ادامه کار، یک تصمیم بگیرند یا کاری را انجام دهند، استفاده می‌شود.

شما به عنوان یک توسعه‌دهنده اندروید در اغلب اپلیکیشن‌های خود از دیالوگ‌ها استفاده می‌کنید. در ادامه سه مثال ساده ارائه شده است:

• پیام‌های تأیید
• اخطار برای وارد کرد تاریخ یا متن
• اخطار برای انتخاب یک گزینه

راهنمای دیالوگ‌های اخطار کاتلین اندروید

با این که این یک راهنمای مقدماتی است، اما هر کس می‌تواند آن را بخواند تا اطلاعات مقدماتی را رفرش کرده و یا با بهترین رویه‌ها آشنا شود. کار خود را با ایجاد یک پروژه جدید در اندروید استودیو آغاز می‌کنیم.

فیلم آموزش برنامه نویسی کاتلین – توسعه اندروید با Kotlin – مقدماتی در فرادرس

کلیک کنید

در این راهنما از تنظیمات زیر استفاده می‌کنیم:

• اندروید استودیو 3.5.3
• کاتلین 1.3
• کتابخانه Compat: AndroidX

اگر ترجیح می‌دهید به جای ساخت این پروژه، کد آغازین آن را دانلود کنید، می‌توانید به این آدرس (+) مراجعه کنید.

آغاز پروژه

کار خود را با یک قالب empty activity template آغاز می‌کنیم و تنظیمات پیش‌فرض را به صورت تصویر زیر قرار می‌دهیم:

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

بخش 1: مبانی اخطارها

در این بخش با مبانی مقدماتی طراحی یک Alert آشنا خواهیم شد.

ایجاد یک دکمه برای نمایش اخطار

نخستین کاری که باید روی این صفحه انجام دهیم، آن است که متن Hello World را از صفحه حذف کرده و یک دکمه به جای آن قرار دهیم. این دکمه، اخطار کاملاً ساده ما را تحریک می‌کند. به این منظور به فایل activity_main.xml بروید. این فایل باید در زمانی که پروژه را ایجاد کردید، باز شده باشد، اگر این چنین نیست در پوشه activity_main.xml به دنبال آن بگردید. نخستین بار که این فایل را باز می‌کنید، در گوشه پایین-چپ صفحه دو زبانه به نام‌های Design و Text خواهید دید که احتمالاً Design انتخاب شده است.

با این که این صفحه برای دیدن پیش‌نمایش خوب است، اما تقریباً همیشه مشغول ویرایش کد در بخش Text خواهید بود.

خطوط کدی که متن Hello world را نمایش می‌دهند در تگ <TextView> در تصویر فوق قرار دارند که شامل خطوط 9 تا 16 کد است. آن کد را با کد زیر عوض کنید:

1<Button android:layout_width="wrap_content" 
2        android:layout_height="wrap_content" 
3        android:text="Show basic dialog!" 
4        app:layout_constraintBottom_toBottomOf="parent" 
5        app:layout_constraintLeft_toLeftOf="parent" 
6        app:layout_constraintRight_toRightOf="parent" 
7        app:layout_constraintTop_toTopOf="parent" />

اگر کد قبلی را با کد فوق مقایسه کنید، متوجه می‌شوید که ما تنها متن و تگ را تغییر داده‌ایم، به طوری که از TextView به Button عوض شده است. چنان که می‌بینید کد لی‌آوت XML اندروید کاملاً سرراست است. بقیه خطوط که دست‌نخورده گذاشتیم به مشخصه‌های نما مربوط هستند که نشان می‌دهند فاصله باید کجا باشد اگر این موارد را فعلاً درک نمی‌کنید نگران باشید. به زبانه Design بازگردید تا پیش‌نمایشی از دکمه ببینید که باید به صورت تصویر زیر باشد:

اکنون اپلیکیشن را اجرا کنید تا دکمه را روی صفحه ببینید که تا حدودی شبیه وضعیت پیش‌نمایش است. نتیجه را در تصویر زیر می‌بینید:

نوشتن کد کاتلین برای دیالوگ اخطار

فایل MainActivity.kt را باز کنید. این فایل شامل همه کد کاتلین برای کنترل صفحه است که قبلاً ویرایش کردیم. اگر فایل را از زمان ایجاد پروژه هنوز بار نکرده‌اید، آن را در مسیر زیر پیدا می‌کنید:

1app > java > your project name > MainActivity.kt

چنان که می‌بینید این فایل کد کمی دارد:

• نام پکیجی که به آن تعلق دارد.
• برخی ایمپورت‌های پیش‌فرض
• کلاس اکتیویتی اصلی
• تابع ()onCreate که درست پس از ایجاد شدن صفحه، اجرا می‌شود. از طریق دستور setContentView(R.layout.activity_main) به اپلیکیشن اعلام می‌کنیم که از فایل activity_main.xml برای لی‌آوت این کد استفاده کند.

اکنون توضیح کافی است و دوباره به کدنویسی می‌پردازیم.

ایمپورت کلاس‌های لازم

قبل از هر چیز باید خط ایمپورت‌ها کد زیر را اضافه کنیم:

1import androidx.appcompat.app.AlertDialogimport android.view.View

بخش ایمپورت‌ها را می‌توان پنهان کرد. برای باز کردن هم یا روی بیضی‌ها دابل-کلیک کنید یا روی آیکون + سمت راست خط بزنید. در مورد ترتیب این موارد نگران نباشید چون تفاوتی ایجاد نمی‌کند.

ایجاد یک متد برای نمایش اخطار

اکنون نوبت به خود اخطار رسیده است که زیر متد ()onCreate می‌نویسیم. یک متد جدید برای نمایش اخطار با کد زیر ایجاد کنید:

1fun showBasicDialog(view: View?) { 
2  //1
3  val builder = AlertDialog.Builder(this) 
4  //2 
5  builder.setTitle("Alert") 
6  builder.setMessage("The body of my alert") 
7  //3 
8  builder.show() 
9}

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

1. اندروید یک builder پیش‌فرض برای ایجاد Alert Dialogs ارائه می‌کند، بنابراین لازم نیست در مورد منطق آن نگران باشید. با استفاده از آن به اپلیکیشن اعلام می‌کنیم که یک Builder برای «این» ‌کلاس بسازد.
2. برای اخطار خود یک عنوان و پیام تعیین می‌کنیم.
3. از بیلدر می‌خواهیم که اخطار را نمایش دهد.

اکنون باید این متد را به ترتیبی فراخوانی کنیم. در آخر ()onCreate، کد زیر را اضافه کنید:

1showBasicDialog(null)

اگر مطمئن نیستید که کد شما اینک باید به چه صورت باشد، به تصویر زیر نگاه کنید. اگر اطلاعات جدید زیادی می‌بینید، نگران نباشید چون همه این موارد را کم‌کم بررسی خواهیم کرد:

اکنون اپلیکیشن را اجرا کنید تا ببینید چه اتفاقی رخ می‌دهد:

چنان که می‌بینید به محض اجرای اپلیکیشن، اخطار روی صفحه نمایش یافت. دلیل این مسئله خط کدی است که در گام آخر به متد ()onCreate اضافه کردیم تا بی‌درنگ اخطار را نشان دهد. با این که این وضعیت مطلوب ما نیست، اما دست کم اینک از طرز کار آن اطلاع داریم.

الصاق متد ()onCreate به اکشن دکمه

گام بعدی این است که کاری کنیم به جای این که متد ()onCreate اخطار را نشان دهد، کاری کنیم که دکمه این کار را اجرا کند. به این منظور به فایل activity_main.xml بازگردید و خط زیر را درون تگ دکمه اضافه کنید:

1android:onClick="showBasicDialog"

نتیجه این ویرایش فایل XML در تصویر زیر دیده می‌شود:

توجه کنید که پارامتری به مشخصه onClick اضافه شده ست که همان مقدار نام تابعی که قبلاً ایجاد کردیم یعنی funshowBasicDialog(view: View?) را دارد. در اینجا نکته کلیدی پارامتر view است. متد مورد استفاده برای یک رویداد onClick باید یک پارامتر view داشته باشد تا کار کند.

اکنون فراخوانی showBasicDialog(null) را از onCreate حذف کرده و اپلیکیشن را اجرا کنید:

بدین ترتیب بخش نخست ساخت دیالوگ اخطار پایان یافته است.

بخش 2: افزودن تعامل

اینک لحظه‌ای درنگ می‌کنیم و روی نخستین چیزی که در زمان فکر کردن به دیالوگ یا اخطار به ذهن می‌رسد، متمرکز می‌شویم. این تأمل را با نتیجه آخرین گام ما یعنی تصویر فوق مقایسه کنید. نخستین کمبودی که دیده می‌شود، عدم وجود دکمه در دیالوگ اخطار است. اغلب اخطارها تعاملی هستند یعنی گزینه‌هایی دارند که می‌توانیم از بین آن‌ها یکی را انتخاب کنیم. البته احتمالاً بنا به تجربه می‌دانید که در زمان نمایش دیالوگ‌ها با کلیک روی ناحیه خاکستری پیرامونی بسته می‌شود، اما این وضعیت از نظر تجربه کاربری مناسب نیست.

دکمه‌ها و تجربه کاربری (UX)

دکمه‌ها یکی از جذاب‌ترین اجزای دنیای دیجیتال محسوب می‌شوند، اما می‌دانیم که دکمه‌ها محصول این دنیا نیستند و قبل از پدید آمدن رایانه‌ها و موبایل‌ها هم وجود داشتند. در واقع این جادوی دکمه‌ها است، چون به دنیای فیزیکی تعلق دارند و از این جهت است که همه افراد به طور شهودی می‌دانند چطور از آن استفاده کنند. از سوی دیگر کلیک کردن روی ناحیه خاکستری خارج دیالوگ چیزی است که باید به همراه فناوری و الگوهای طراحی مدرن آموخته شود؛ اما لزوماً شهودی نیست.

دکمه‌ها اجزای رایج طراحی تعاملی هستند. با این که ممکن است اجزای بسیار ساده‌ای از UI به نظر برسند، اما ساختن آن‌ها اهمیت بسیار زیادی دارد.

افزودن دکمه به اخطار

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

زمانی که پروژه را باز کردید به فایل MainActivity.kt بروید و ()showBasicDialogFragment را پس از دستور builder.setMessage(“your message”) و قبل از ()builder.show پیدا کنید. در این بخش، گزینه‌های اخطار را اضافه می‌کنیم:

1//1 
2builder.setPositiveButton("Yes") { dialog, which -> 
3  //2 
4  Toast.makeText(applicationContext, "Yes", Toast.LENGTH_SHORT).show() 
5} 
6//3 
7builder.setNegativeButton("No") { dialog, which -> 
8  //4 
9  Toast.makeText(applicationContext, "No", Toast.LENGTH_SHORT).show() 
10}

احتمالاً کلمه toast به رنگ قرمز درمی‌آید. دلیل این مسئله نبود گزینه ایمپورت است. بنابراین ایمپورت آن را در ابتدای فایل اضافه می‌کنیم. همچنین می‌توانید از کلیدهای ترکیبی option+intro یا ctrl+intro برای ایمپورت خودکار آن استفاده کنید:

1//5 
2import android.widget.Toast

کد فوق را گام به گم بررسی می‌کنیم.

1. ابتدا به شیء builder می‌گوییم که یک دکمه positive ایجاد کند. اندروید به طور پیش‌فرض می‌داند که دکمه positive چیست و گاهی اوقات به سیستم با موارد دسترس‌پذیری وابسته است و با استفاده از فرمان‌ها صوتی یا روش‌های دیگر می‌توانید آن‌ها را تحریک کنید. تأکید می‌کنیم که متن آن باید Yes باشد. سپس دو پارامتر اضافه می‌کنیم که اولی نشان می‌دهد یک دیالوگ است و دومی یک پارامتر which است که رویداد پس از کلیک را مشخص می‌سازد.
2. در بخش 2 یک اکشن وجود دارد که در زمان کلیک کردن دکمه Yes انجام می‌شود. در این مورد یک آیتم Toast ایجاد می‌شود که آن نیز متن Yes دارد تا کارکرد دکمه تست شود.
3. در بخش 2 همان کد وجود دارد، اما این بار دکمه منفی با متن No تعریف می‌شود.
4. همانند بخش قبلی این بار نیز یک Toast با متن NO استفاده می‌شود.

اینک اپلیکیشن را اجرا کرده و نتیجه را بررسی کنید.

چالش

در این بخش تلاش می‌کنیم یک دکمه خاصی هم به دیالوگ خود اضافه کنیم. اندروید همانند دکمه‌های مثبت و منفی، یک دکمه خنثی نیز دارد:

1builder.setNeutralButton("Maybe") { dialog, which ->
2    Toast.makeText(applicationContext, "Maybe",Toast.LENGTH_SHORT).show()
3}

همانند دکمه‌های قبلی برای دکمه خنثی نیز یک متن و اکشن تعریف می‌کنیم. در تصویر زیر رفتار اپلیکیشن را پس از اجرا می‌بینید.

آیتم‌های Toast

آیتم‌های Toast عناصری هستند که در اندروید برای نمایش لحظه‌ای چیزی استفاده می‌شوند و سپس به صورت خودکار ناپدید می‌شوند. تا چند سال پیش آن‌ها یک استاندارد برای پیام محسوب می‌شدند، اما اینک به طور عمده از سوی توسعه‌دهندگان برای نمایش خطاهایی که مهم نیستند یا صرفاً در زمان توسعه اپلیکیشن مورد استفاده قرار می‌گیرند.

بدین ترتیب به پایان بخش طراحی دکمه‌ها برای تعامل با کاربر می‌رسیم.

بخش 3: دیالوگ‌های دارای لیست

چیزهای زیادی وجود دارند که ممکن است بخواهید به دیالوگ اضافه کنید. در این بخش آخر با شیوه افزودن لیستی از گزینه‌ها به دیالوگ آشنا می‌شویم. این کار در سه قسمت انجام می‌شود:

• لیست‌های متنی ساده که می‌توان یک گزینه را انتخاب کرد.
• لیست‌های به صورت دکمه‌های رادیویی که باز می‌توان یک گزینه را انتخاب کرد.
• لیست‌های تیک‌زدنی که می‌توان چندین گزینه را انتخاب کنید.

افزودن دکمه‌های بیشتر برای نمایش دیالوگ

پیش از کار کردن روی اپلیکیشن، 4 دکمه دیگر به UI برای چهار اخطار جدید اضافه می‌کنیم. به این ترتیب در همه مثال‌های زیر از آن‌ها استفاده خواهیم کرد.

فیلم آموزش برنامه نویسی کاتلین – توسعه اندروید Android با Kotlin – تکمیلی در فرادرس

کلیک کنید

تنظیم دکمه‌ها

کد زیر را به فایل activity_main.xml و زیر دکمه قبلی اضافه کنید:

1<Button 
2  android:id="@+id/button_traditional_list" 
3  android:layout_width="wrap_content" 
4  android:layout_height="wrap_content" 
5  android:onClick="showBasicDialog" 
6  android:text="Show single-choice list!" 
7  app:layout_constraintBottom_toBottomOf="parent" 
8  app:layout_constraintLeft_toLeftOf="parent" 
9  app:layout_constraintRight_toRightOf="parent" 
10  app:layout_constraintTop_toTopOf="parent" />

این کد کاملاً مشابه کد دکمه قبلی است، اما 3 نکته مهم وجود دارد:

1. خط نخست یک id دارد. ID-ها برای دست‌کاری نماها در کد اهمیت زیادی دارند و امکان ارجاع به آن‌ها را فراهم می‌سازند. در ادامه دلیل این کار را خواهید فهمید.
2. متد onClick همچنان به showBasicDialog اشاره می‌کند اما پس از ایجاد متد نمایش لیست آن را تغییر خواهیم داد. فعلاً آن را همین طور باقی می‌گذاریم تا اندروید استودیو خطا نشان ندهد.
3. متن دکمه را عوض کرده‌ایم.

اپلیکیشن را بیلد و اجرا کنید تا نتیجه زیر حاصل شود:

اگر به آن نگاه کنید، می‌بینید که دکمه جدیدی روی دکمه قبلی اضافه شده است. دلیل این وضعیت آن است که ID را اضافه کرده‌ایم. به دکمه قبلی هم یک ID می‌دهیم:

1<Button android:id="@+id/button_basic_dialog".../>

بهتر است ID را به عنوان آیتم اول در XML اضافه کنیم تا شناسایی آن‌ها آسان‌تر باشد، اما می‌توان هر جای دیگری هم اضافه کرد. اکنون توجه کنید که هر دو دکمه خطوط مشابهی دارند که منجر به وضعیت قیود layout_constraintX_toYOf می‌شود. در دنیای توسعه موبایل، یعنی اندروید و iOS رایج است که برای مدیریت نماها از «قیود» (constraints) استفاده می‌شود. این قیود اساس به دکمه‌ها اعلام می‌کنند که خود را در کجای صفحه قرار دهند. اگر به هر دو دکمه نگاه کنید دارای قید parent هستند یعنی باید فاصله یکسانی از بالا، پایین، راست و چپ صفحه داشته باشند. برای نمایش دو دکمه باید آن‌ها را در قید پایین دکمه نخست قرار دهیم که نسبت به قید top دکمه دوم باشد. به همین جهت است که استفاده از ID در اینجا ضرورت دارد.

قیود

قید layout_constraintBottom_toBottomOf دکمه نخست را به صورت زیر تغییر دهید:

1app:layout_constraintBottom_toTopOf="@id/button_traditional_list"

توجه کنید که دکمه اینک مقید به toTopOf شده است، در حالی که قبلاً مقید به layout_constraintTop_toTopOf بود:

1app:layout_constraintTop_toBottomOf="@id/button_basic_dialog"

نکته: ضروری نیست که هر دو قید layout_constraintBottom_toTopOf و layout_constraintTop_toBottomOf اضافه شوند، اما اگر آن‌ها را اضافه کنید، تمرین بیشتری کرده‌اید و معنای آن‌ها را بهتر درک می‌کنید.

اکنون اپلیکیشن را بار دیگر اجرا کنید تا بتوانید هر دو دکمه‌ را ببینید. در این زمان، هر دوی آن‌ها در دیالوگ ظاهر می‌شوند، چون هر دو به اکشن showBasicDialog ارجاع دارند.

افزودن باقی دکمه‌ها

در این بخش دو دکمه دیگر اضافه می‌کنیم که به ترتیب دارای متن‌های Show radio button list!” و “Show checkboxes list! هستند:

1<Button
2 android:id="@+id/button_radio_list"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content"
5 android:onClick="showBasicDialog"
6 android:text="Show radio button list!"
7 app:layout_constraintBottom_toTopOf="@id/button_checkbox_list"
8 app:layout_constraintLeft_toLeftOf="parent"
9 app:layout_constraintRight_toRightOf="parent"
10 app:layout_constraintTop_toBottomOf="@id/button_traditional_list" />
11 
12<Button
13 android:id="@+id/button_checkbox_list"
14 android:layout_width="wrap_content"
15 android:layout_height="wrap_content"
16 android:onClick="showBasicDialog"
17 android:text="Show checkbox list!"
18 app:layout_constraintBottom_toBottomOf="parent"
19 app:layout_constraintLeft_toLeftOf="parent"
20 app:layout_constraintRight_toRightOf="parent"
21 app:layout_constraintTop_toBottomOf="@id/button_radio_list" />

اینک با چهار دکمه‌ای که به اپلیکیشن اضافه کرده‌ایم، باید به صورت زیر درآمده باشد:

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

دیالوگ اندروید با لیست

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

افزودن لیست قابل انتخاب متنی

نخستین گزینه لیستی است که بر اساس مستندات اندروید، یک لیست «لیست تک‌گزینه‌ای سنتی» (traditional single-choice list)‌ خوانده می‌شود. به فایل MainActivity.kt بروید و تابع جدیدی ایجاد کنید:

1fun showTraditionalListDialog(view: View?) { ... }

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

1val hobbies = arrayOf("VideoGames", "Reading", "Sports", "Movies")

سپس کد ایجاد دیالوگ را اضافه می‌کنیم:

1//1 
2val builder = AlertDialog.Builder(this) 
3builder.setTitle("Traditonal List")
4//2 
5builder.setItems(hobbies, DialogInterface.OnClickListener { 
6  dialog, which -> 
7  //3 
8  // 'which' item of the 'dialog' was selected     
9  Toast.makeText(applicationContext, hobbies[which], Toast.LENGTH_SHORT).show() 
10})
11//4 
12builder.show()

در کد فوق کارهای زیر را انجام می‌دهیم:

1. در بخش 1، یک builder می‌سازیم. کلمه this به چارچوب اپلیکیشن اشاره دارد. همچنین عنوان را اضافه ‌می‌کنیم، اما ضرورتی ندارد.
2. در بخش 2، آیتم‌هایی که در آرایه hobbies هستند را به بیلدر اضافه می‌کنیم، بنابراین متوجه می‌شود که باید یک لیست عرضه کند. متد hobbies را اضافه می‌کنیم تا بداند در زمان کلیک شدن یک آیتم باید چه کاری انجام دهد.
3. در بخش 3، همانند مثال اولیه، زمانی که کاربر یک آیتم را انتخاب می‌کند یک Toast نمایش می‌دهیم. توجه کنید که پارامتر دوم اینک به آیتمی از آرایه اشاره دارد که کلیک شده است. این متد یک اندیس ارائه می‌کند، بنابراین به hobbies[1] ارجاع می‌دهیم و رشته‌ای در Toast نمایش می‌یابد.
4. در بخش 4، به builder اعلام می‌کنیم که باید نمایش یابد. به خاطر داشته باشید که نباید این بخش را فراموش کنید، چون در غیر این صورت همه زحمات به هدر می‌رود.

اکنون به فایل activity_main.xml بروید و با تغییر دادن محتوای متد onClick دکمه متناظر به تابع اشاره کنید:

1android:onClick="showTraditionalListDialog"

اپلیکیشن را اجرا کنید و روی دکمه Show single-choice List کلیک نمایید. بدین ترتیب باید چیزی مانند تصویر زیر ببینید:

افزودن یک لیست با دکمه‌های رادیویی

اگر بخش قبلی را به خوبی متوجه شده باشید، باید این نوید را بدهیم که ایجاد لیست با دکمه‌های رادیویی یا کادرهای انتخاب نیز فرایند کاملاً مشابهی دارد. در ادامه این موارد را نیز بررسی می‌کنیم:

در این مورد باید سوابق آیتم‌های انتخاب ‌شده را حفظ کنیم، بنابراین خارج از تابع یک متغیر ایجاد می‌کنیم:

1private var selectedRadioItem = -1

دلیل این که عدد 1- را اضافه کرده‌ایم این است که در ابتدا هیچ گزینه‌ای انتخاب نشده است. اما شاید بخواهید دیالوگ با برخی گزینه‌های از پیش انتخاب‌شده آغاز شود.

سپس همانند بخش قبل یک تابع ایجاد می‌کنیم که در این مورد showRadioButtonListDialog نام دارد:

1fun showRadioButtonListDialog(view: View?) { ... }

کد زیر را به تابع اضافه کنید:

1// 1 
2val cities = arrayOf("New York", "London", "Hong Kong", "Río")
3// 2 
4val builder = AlertDialog.Builder(this) 
5builder.setTitle("Radio Button List")
6// 3 
7builder.setSingleChoiceItems(cities, selectedRadioItem, DialogInterface.OnClickListener { 
8    dialog, which -> 
9        //4 
10        selectedRadioItem = which 
11        Toast.makeText(applicationContext, cities[which], Toast.LENGTH_SHORT).show() 
12})
13// 5 
14builder.setPositiveButton("OK") { 
15    dialog, which -> 
16        dialog.dismiss() 
17}
18// 6 
19builder.show()

توضیح کد فوق به صورت زیر است:

1. در گام 1، یک آرایه از نام شهرها ایجاد کرده‌ایم. فرض کنید کاربر می‌خواهد شهری که در آن زندگی می‌کند را انتخاب کند، 4 گزینه در اختیار وی قرار می‌دهیم.
2. در گام 2، چنان که پیش‌تر اشاره کردیم، هر دیالوگ باید یک بیلدر به همراه عنوان داشته باشد.
3. در گام 3، می‌بینید که آیتم‌ها از طریق متد ()setSingleChoiceItems اضافه شده‌اند. به این ترتیب به بیلدر اعلام می‌کنیم که یک لیست با دکمه‌های رادیویی می‌خواهیم. تفاوت این حالت با متد ()setItems قبلی در این است که اینک آیتم پیش‌فرض هم گرفته می‌شود. این متغیری است که قبلاً با نام selectedRadioItem ایجاد کرده‌ایم.
4. در گام 4، selectRadioItem را روی آیتم جدید انتخاب شده تعیین می‌کنیم. دلیل ایجاد این متغیر در خارج از تابع آن است که باید آیتم را ذخیره کنیم، چون در غیر این صورت هر بار که تابع فراخوانی می‌شود آیتم ذخیره شده بازنویسی خواهد شد. همانند قبل، یک Tosat برای دیدن گزینه صحیح نمایش می‌دهیم.
5. در گام 5، یک دکمه تأیید هم اضافه می‌کنیم، زیرا کاربر ممکن است هنوز مطمئن نباشد که می‌خواهد گزینه را تغییر دهد یا نه.
6. در گام 6، دیالوگ را نمایش می‌دهیم.

در نهایت باید این متد را به onClick مربوط به دکمه در فایل activity_main.xml اضافه کنید:

1android:onClick="showRadioButtonListDialog"

اپلیکیشن را بار دیگر اجرا کنید تا نتیجه کلیک کردن روی آیتم show radio button list را به صورت زیر ببینید:

افزودن لیست با کادرهای انتخاب

اکنون که با طرز کار دیالوگ‌های اخطار آشنا شده‌ایم، افزودن انواع مختلف از لیست‌ها به آن کار دشواری محسوب نمی‌شود.

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

1private var selectedList = booleanArrayOf(false, false, false, false)

اکنون تابعی به نام showCheckmarkList ایجاد می‌کنیم که دیالوگ آخر ما را نمایش می‌دهد:

1fun showCheckmarkList(view: View?) { ... }

کد درون این تابع به صورت زیر است:

1//1 
2val fruits = arrayOf("Orange", "Banana", "Watermelon", "Grapefruit") 
3//2 
4val builder = AlertDialog.Builder(this) 
5builder.setTitle("Checkmark List")
6//3 
7builder.setMultiChoiceItems(fruits, selectedList,   
8    DialogInterface.OnMultiChoiceClickListener { 
9        dialog, which, isChecked -> 
10            //4 
11            selectedList.set(which, isChecked) 
12            Toast.makeText(applicationContext, fruits[which], 
13                    Toast.LENGTH_SHORT).show() 
14    }) 
15//5 
16builder.setPositiveButton("Ok") { 
17    dialog, which -> 
18        dialog.dismiss() 
19}
20//6 
21builder.show()

در ادامه هر بخش از کد فوق را توضیح می‌دهیم:

1. آرایه آیتم‌ها در دیالوگ نمایش می‌یابد.
2. بیلدر مورد نیاز برای هر دیالوگ ایجاد می‌شود.
3. در این مورد از setMultiChoiceItems برای نمایش لیست چک مارک استفاده می‌کنیم. این متد کاملاً مشابه متد مربوط به لیست با دکمه‌های رادیویی است، تنها تفاوت در این است که آرایه‌ای از مقادیر بولی می‌گیرد تا سوابق آیتم‌های منتخب را ذخیره کند.
4. آیتم‌های انتخاب شد یا نشده را بر اساس عملکرد کاربر تغییر می‌دهیم و این بار نیز یک Toast با آیتم انتخاب شده نمایش می‌دهیم.
5. با همان الگوی دیالوگ دکمه‌های رادیویی باید یک دکمه برای تأیید گزینه‌ها اضافه کنیم.
6. در نهایت بیلدر را نمایش می‌دهیم.

اینک باید فراخوانی متد را به onClick دکمه اضافه کنیم:

1android:onClick="showCheckmarkList"

اینک اپلیکیشن را اجرا کنید تا دیالوگ مانند تصویر زیر کار کند:

سخن پایانی

بدین ترتیب به پایان این راهنمای طولانی می‌رسیم. در این راهنما با روش طراحی دیالوگ‌های اخطار در کاتلین برای اندروید آشنا شدیم. در صورتی که می‌خواهید پروژه نهایی را دانلود کنید می‌توانید به این صفحه (+) مراجعه نمایید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های پروژه‌محور برنامه‌نویسی اندروید
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش گرفتن ورودی از کاربر در زبان برنامه نویسی کاتلین
• آشنایی با مفهوم سازنده (Constructor) در کاتلین (Kotlin) — به زبان ساده
• اسامی مستعار و کلاس های inline در کاتلین — به زبان ساده

==