سلام عزیزان، در سری دیگر از آموزش های اندروید جت پک در خدمت شما عزیزان هستیم . در جلسات قبلی ما مفاهیم ابتدایی در زمینه جت پک کامپوز یاد گرفتیم . اگر بخواهیم آرام آرام وارد مباحث پیشرفته تر بشویم لازمه آن این هست که یکسری مفاهیم دیگر را نیز یاد بگیریم. امروز قصد داریم Alert Dialog در Jetpack compose را باهمدیگر آموزش ببینیم و نحوی استفاده از آن را در برنامه نویسی خودمون یاد بگیریم.
برای اینکه بفهمید آلرت دیالوگ چیه ؟ میتونم خیلی ساده بگم که یه پیغام نمایشی هست که یکسری اطلاعات را برای کاربران نمایش میدهد . خیلی برای شما اتفاق افتاده است که زمان خروج از یک برنامه یک پنجره برای شما باز میشود و دارای یک Title و یک متن و همچنین یک یا دو Button هست که از شما سوال میپرسد که یا قصد خروج از برنامه را دارید و یا خیر . وشما با کلیک بروی هر یک از دکمه ها یک رویدادی رخ میدهد .
پیاده سازی ALert Dialog در jetpack compose
من قصد دارم مانند مباحث قبلی با یک پروژه کوجک نحوی پیاده سازی آلرت دیالوگ در جت پک کامپوز را برای شما عزیزان آموزش دهم . ابتدا یک پروژه jetPack Compose در اندروید استودیو ایجاد کنید . و اسم دلخواهی برای آن قرار دهید . کد های ساخت Alert Dialog در Jetpack compose به صورت زیر هست و من همه ی آن را برای شما توضیح خواهم داد .
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.window.DialogProperties
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ShowAlertDialog()
}
}
}
@Composable
fun ShowAlertDialog() {
var backgroundColor by remember { mutableStateOf(Color.Blue) }
var EnableDialog by remember { mutableStateOf(false) }
val scaffoldState = rememberScaffoldState()
Scaffold(scaffoldState = scaffoldState,
backgroundColor = backgroundColor,
modifier = Modifier.fillMaxSize()
) {
Column(Modifier.fillMaxSize(),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally) {
if (EnableDialog) {
AlertDialog(onDismissRequest = {
}, confirmButton = {
Button(onClick = {
backgroundColor=Color.Green
EnableDialog = false
}) {
Text(text = "تغییر داده شود.")
}
}, dismissButton = {
Button(onClick = {
EnableDialog = false
}) {
Text(text = "خیر !")
}
},
title = {
Text(text = "تغییر رنگ پس زمینه")
}, text = {
Text(text = "آیا مایل هستید رنگ پس زمینه خودتون را به قرمز تغییر دهید .")
}, properties = DialogProperties(
dismissOnBackPress = true,
dismissOnClickOutside = false
)
)
}
Button(onClick = {
EnableDialog = true
}) {
Text(text = "تغییر رنگ پس زمینه")
}
}
}
}
کد های بالا برای ساخت یک Button در مرکز صفحه ی ما میباشد تا زمانی که روی آن کلیک میشود یک پنجره یا همان آلرت دیالاگ برای ما باز شود و از ما سوال میپرسد که آیا تصمیم به تغییر رنگ پس زمینه خودتون هستید و یاد خیر .
توضیحات کد :
Scaffold(scaffoldState = scaffoldState,
backgroundColor = backgroundColor,
modifier = Modifier.fillMaxSize()
)
سوالی که پیش میاد اینکه که Scaffold چیه ؟ ما در جت پک کامپوز برای اینکه Layout استاندارد برای UI یا همون رابط کاربری اپلیکیشن خودمون بسازیم از Scaffold استفاده میکنیم . و مانند کد بالا دارای پارامتر های زیادی میباشد که اولین آن ScaffoldState میباشد . که وضعیت Scaffold را مشخص میکند و پارامتر های دیگر نیز دارد که میتوانید با فشار دادن کلید ترکیبی Ctrl+P همه ی آن ها را مشاهده کنید .
Column(Modifier.fillMaxSize(),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally) {
ما دربالا از Column استفاده کردیم تا محتوای داخل صفحه ما به صورتی ستونی باشد که سایز آن تمام صفحه را فرار میگیرد و همچنین عناصر داخل آن در مرکز قرار دارد .
var backgroundColor by remember { mutableStateOf(Color.Blue) }
var EnableDialog by remember { mutableStateOf(false) }
val scaffoldState = rememberScaffoldState()
ردیف اول برای رنگ پس زمینه ما هست که به صورت پیش فرض آبی هست و میتوانیم آن را تغییر دهیم . دومین ردیف برای فعال سازی Dialog ما میباشد . و اما سطر سوم برای وضعیت Scaffold ما میباشد .
if (EnableDialog) {
AlertDialog(onDismissRequest = {
}, confirmButton = {
Button(onClick = {
backgroundColor=Color.Green
EnableDialog = false
}) {
Text(text = "تغییر داده شود.")
}
}, dismissButton = {
Button(onClick = {
EnableDialog = false
}) {
Text(text = "خیر !")
}
},
title = {
Text(text = "تغییر رنگ پس زمینه")
}, text = {
Text(text = "آیا مایل هستید رنگ پس زمینه خودتون را به قرمز تغییر دهید .")
}, properties = DialogProperties(
dismissOnBackPress = true,
dismissOnClickOutside = false
)
)
}
در این قسمت گفته ای اگر Enable Dialog فعال بود یعنی مقدار true داشت وارد if شود و آلرت دیالوگ در Jetpack Compose را برای ما نمایش دهد . همانطور که مشاهد میکنید AlertDialog دارای dissmissButton میباشد. که برای زمانی هست که بخواهیم یک دکمه cancel برای دیالوگ بگزاریم و confirmbutton برای زمانی هست که میخواهیم تایید کنیم و تعیین کنیم که چه رویدادی در صورت تایید رخ بدهید . و همچنین میتوانیم برای Alert Dialog در Jetpack compose خودمون یک title , text قرار دهیم و. با کمک properties نیز میتوانید بگید که در صورت کلیک به روی دکمه برگشت دیالوگ ما dissmiss نشود و همچنین زمانی که در محیط صفحه و نیز کلیک میکنیم نیز هیچ وقت اجازه ندهد دیالوگ ما dissmiss بشود .
امیدوارم برای شما عزیزان مفید بوده باشد . خروجی به صورت زیر میباشد .
سلام ، خسته نباشید . خوب بود
مثال های کمی برای جت پک کامپوز در اندروید تو منابع فارسی وجود داشت خیلی مفید بود برام خدا قوت