سلام خدمت عزیزان کدایت ، امروز با مبحثی دیگر از آموزش های Jetpack Compose در خدمت شما برنامه نویسان هستیم امروز قصد داریم مبحث اسنک بار در Jetpack Compose را برای شما عزیزان آموزش دهیم . ما این آموزش را بر طبق مباحث قبلی در قالب یک پروژه کوجک خدمت شما ارائه میدهیم تا درک و یادگیری آن به مراتب بهتر باشد . اول از همه ما باید به طور مختر بفهمم که Snack Bar چیست ؟ و در واقع ما به چه منظوری از آن استفاده میکنیم .

اسنک بار در Jetpack Compose چیست ؟

همه ی ما در ابتدای برنامه نویسی اندروید برای نمایش پیغام های خودمون از Toast استفاده میکردیم . یعنی برای اینکه من برنامه نویس در جا های مختلف اپلیکیشنم برای اینکه بگم مثلا این رویداد برای فلان کار میباشد و به صورت کلی برای برخی اطلاع رسانی ها از Toast استفاده میکردیم که امکانات بسیار محدودی داشت . ولی امروز ابزار های بسیاری قوی برای برنامه نویسان اندروید به وجود امده است . که از جمله مشهور ترین آنها اسنک بار میباشد . شما برنامه نویسان میتوانید به صورت دلخواه Snack Bar را سفارش سازی کنید .

اسنک بار در Jetpack Compose چیست ؟

حالا که فهمیدیم اسنک بار در Jetpack Compose چیه ؟ و برای چه مواردی استفاده میشود . بریم سراغ پیاده سازی آن به کمک یک پروژه کوچک . ما در این پروژه یک Float Action Button ایجاد میکنیم .که با کلیک روی آن یک Snack Bar برای ما نمایش داده شود .

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

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.material.icons.Icons
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.BlendMode.Companion.Color
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.window.DialogProperties
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Show_snackBar()
        }
    }
}

@Composable
fun Show_snackBar() {

    val snackbarHostState = SnackbarHostState()
    val scaffoldState = rememberScaffoldState(snackbarHostState = snackbarHostState)
    val scope = rememberCoroutineScope()

    Scaffold(scaffoldState = scaffoldState,
        backgroundColor = androidx.compose.ui.graphics.Color.DarkGray,
        modifier = Modifier.fillMaxSize(), floatingActionButton = {
            ExtendedFloatingActionButton(text = { Text(text = "نمایش اسنک بار") }, onClick = {
                scope.launch { val result = scaffoldState.snackbarHostState.
                showSnackbar("یک پیغام برای اسنک بار","اسنک بار")

                }
            }, icon = {
                Icon(Icons.Default.Notifications, contentDescription = null)
            })

        }
    ) {


    }


}

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.material.icons.Icons

import androidx.compose.material.icons.filled.Notifications

import androidx.compose.runtime.*

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.BlendMode.Companion.Color

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.window.DialogProperties

import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

Show_snackBar()

}

@Composable

fun Show_snackBar() {

val snackbarHostState = SnackbarHostState()

val scaffoldState = rememberScaffoldState(snackbarHostState = snackbarHostState)

val scope = rememberCoroutineScope()

Scaffold(scaffoldState = scaffoldState,

backgroundColor = androidx.compose.ui.graphics.Color.DarkGray,

modifier = Modifier.fillMaxSize(), floatingActionButton = {

ExtendedFloatingActionButton(text = { Text(text = "نمایش اسنک بار") }, onClick = {

scope.launch { val result = scaffoldState.snackbarHostState.

showSnackbar("یک پیغام برای اسنک بار","اسنک بار")

}

}, icon = {

Icon(Icons.Default.Notifications, contentDescription = null)

})

}

) {

}

توضیحات کد :

 val snackbarHostState = SnackbarHostState()
    val scaffoldState = rememberScaffoldState(snackbarHostState = snackbarHostState)
    val scope = rememberCoroutineScope()

val snackbarHostState = SnackbarHostState()

val scaffoldState = rememberScaffoldState(snackbarHostState = snackbarHostState)

val scope = rememberCoroutineScope()

در کد های بالا ما مقدار دهی های اول برای ایجاد اسنک بار در جت پک کامپوز را انجام میدهم و آن را برای Scaffold State خودمون معرفی میکنیم و همچنین یک scope نیز تعریف میکنیم تا در کد نویسی خودمون از آن استفاده کنیم .

 Scaffold(scaffoldState = scaffoldState,
        backgroundColor = androidx.compose.ui.graphics.Color.DarkGray,
        modifier = Modifier.fillMaxSize(), floatingActionButton = {
            ExtendedFloatingActionButton(text = { Text(text = "نمایش اسنک بار") }, onClick = {
                scope.launch { val result = scaffoldState.snackbarHostState.
                showSnackbar("یک پیغام برای اسنک بار","اسنک بار")

                }
            }, icon = {
                Icon(Icons.Default.Notifications, contentDescription = null)
            })

        }
    ) {


    }

Scaffold(scaffoldState = scaffoldState,

backgroundColor = androidx.compose.ui.graphics.Color.DarkGray,

modifier = Modifier.fillMaxSize(), floatingActionButton = {

ExtendedFloatingActionButton(text = { Text(text = "نمایش اسنک بار") }, onClick = {

scope.launch { val result = scaffoldState.snackbarHostState.

showSnackbar("یک پیغام برای اسنک بار","اسنک بار")

}

}, icon = {

Icon(Icons.Default.Notifications, contentDescription = null)

})

}

) {

}

ما در این قسمت از یک Scaffold استفاده کردیم . همانطور که در مباحث قبلی جت پک کامپوز خدمت شما عزیزان آموزش دادیم برای طراحی یک لایه برای برنامه خودمون از Scffold استفاده میکنیم و برای آن اندازه ، رنگ پس زمینه و خیلی موارد دیگر از جمله یک floatingActionButton نیز استفاده کردیم . و همانگونه که میبینی برای مقدار دهی floatingActionButton از ExtendedFloatingActionButton استفاده کردیم و در آن یک متن نیز اضافه شد . و با استفاده از icon نیز یک ایکون برای floatingActionButton خودمون انتخاب کردیم .

کدنویسی به گونه ای هست که با کلیک به روی فلوت اکشن باتون Snack bar در جت پک کامپوز به نمایش در میاید . کد های مربوزط به اسنک بار را در قسمت بالا مشاهده کردید . در این مرحله ما به پایان کدنویسی خودمون رسیدیم و به آسانی یک اسنک بار در جت پک کامپوز را پیاده سازی کردیم . خروجی کار به صورت زیر می باشد

برای امتیاز به این نوشته کلیک کنید!

[کل: 2 میانگین: 5]

اشتراک‌گذاری

Strict Mode در جاوا اسکریپت نوشته قبل

JSON Parsing در جاوا اسکریپت نوشته بعد

فرشید حبیبی

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