نوارهای برنامه

نوارهای برنامه محفظه هایی هستند که دسترسی کاربر را به ویژگی های کلیدی و موارد ناوبری فراهم می کنند. دو نوع نوار برنامه وجود دارد، نوار برنامه بالا و نوار برنامه پایین. ظاهر و هدف مربوطه آنها به شرح زیر است:

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

شکل 1. یک نوار برنامه بالا (سمت چپ) و یک نوار برنامه پایین (راست).

برای پیاده‌سازی نوار برنامه بالا و نوار برنامه پایین، به ترتیب از ترکیب‌پذیرهای TopAppBar و BottomAppBar استفاده کنید. آنها به شما این امکان را می دهند که رابط های سازگاری ایجاد کنید که کنترل های ناوبری و کنش را در بر می گیرد و با اصول طراحی متریال همسو می شود.

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

نوارهای برنامه برتر

جدول زیر چهار نوع نوار برنامه برتر را نشان می دهد:

تایپ کنید	مثال
کوچک : برای صفحه‌هایی که به پیمایش یا عملکردهای زیادی نیاز ندارند.
تراز وسط : برای صفحه‌هایی که یک کنش اصلی دارند.
متوسط : برای صفحه‌هایی که به مقدار متوسطی از پیمایش و اقدامات نیاز دارند.
بزرگ : برای صفحه‌هایی که نیاز به پیمایش و اقدامات زیادی دارند.

سطح API

ترکیب‌های مختلفی که به شما امکان می‌دهند چهار نوار برنامه برتر مختلف را پیاده‌سازی کنید، کاملاً مشابه هستند. آنها چندین پارامتر کلیدی را به اشتراک می گذارند:

• title : متنی که در نوار برنامه ظاهر می شود.
• navigationIcon : نماد اصلی برای ناوبری. در سمت چپ نوار برنامه ظاهر می شود.
• actions : نمادهایی که دسترسی کاربر را به اقدامات کلیدی فراهم می کند. آنها در سمت راست نوار برنامه ظاهر می شوند.
• scrollBehavior : نحوه پاسخ نوار بالای برنامه به پیمایش محتوای درونی داربست را تعیین می کند.
• colors : نحوه نمایش نوار برنامه را تعیین می کند.

رفتار اسکرول

وقتی کاربر محتوای درونی داربست داده شده را پیمایش می کند، می توانید نحوه پاسخ نوار برنامه را کنترل کنید. برای انجام این کار، یک نمونه از TopAppBarScrollBehavior ایجاد کنید و آن را برای پارامتر scrollBehavior به نوار برنامه بالای خود ارسال کنید.

سه نوع TopAppBarScrollBehavior وجود دارد. آنها به شرح زیر است:

• enterAlwaysScrollBehavior : وقتی کاربر محتوای درونی داربست را بالا می‌کشد، نوار بالای برنامه فرو می‌رود. وقتی کاربر محتوای داخلی را پایین می‌کشد، نوار برنامه گسترش می‌یابد.
• exitUntilCollapsedScrollBehavior : مشابه enterAlwaysScrollBehavior ، اگرچه نوار برنامه به علاوه زمانی که کاربر به انتهای محتوای درونی داربست می‌رسد، گسترش می‌یابد.
• pinnedScrollBehavior : نوار برنامه در جای خود باقی می ماند و به پیمایش واکنشی نشان نمی دهد.

مثال‌های زیر چندین مورد از این گزینه‌ها را پیاده‌سازی می‌کنند.

نمونه ها

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

کوچک

برای ایجاد یک نوار کوچک برنامه بالا، از TopAppBar composable استفاده کنید. این ساده ترین نوار برنامه بالای ممکن است و در این مثال فقط یک عنوان دارد.

مثال زیر یک مقدار TopAppBar برای scrollBehavior ارسال نمی کند و بنابراین به پیمایش محتوای داخلی واکنشی نشان نمی دهد.

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

این پیاده سازی به صورت زیر ظاهر می شود:

شکل 2. یک نوار کوچک برنامه بالا.

تراز وسط

نوار برنامه بالای تراز شده در مرکز اساساً مانند نوار برنامه کوچک است، اگرچه عنوان در مرکز جزء قرار دارد. برای پیاده سازی آن، از CenterAlignedTopAppBar اختصاصی composable استفاده کنید.

این مثال از enterAlwaysScrollBehavior() برای بدست آوردن مقداری که برای scrollBehavior می دهد استفاده می کند. به این ترتیب، وقتی کاربر محتوای درونی داربست را پیمایش می کند، نوار فرو می ریزد.

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

این پیاده سازی به صورت زیر ظاهر می شود:

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

متوسط

نوار برنامه متوسط ​​بالا عنوان را در زیر هر نماد اضافی قرار می دهد. برای ایجاد یک، از MediumTopAppBar composable استفاده کنید.

مانند قطعه قبلی، این مثال از enterAlwaysScrollBehavior() برای دریافت مقداری که برای scrollBehavior ارسال می کند استفاده می کند.

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

این پیاده سازی به صورت زیر ظاهر می شود، با نمایش نحوه نمایش رفتار اسکرول از enterAlwaysScrollBehavior() :

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

بزرگ

یک نوار بزرگ برنامه بالا شبیه به مدیوم است، اگرچه بالشتک بین عنوان و نمادها بیشتر است و به طور کلی فضای بیشتری را روی صفحه اشغال می کند. برای ایجاد یک، از LargeTopAppBar composable استفاده کنید.

برخلاف قطعه‌های قبلی، این مثال از exitUntilCollapsedScrollBehavior() برای دریافت مقداری که برای scrollBehavior ارسال می‌کند استفاده می‌کند. به این ترتیب، وقتی کاربر محتوای درونی داربست را پیمایش می‌کند، نوار جمع می‌شود، اما وقتی کاربر به انتهای محتوای درونی می‌پیماید، باز می‌شود.

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

این پیاده سازی به صورت زیر ظاهر می شود:

شکل 5. نمونه ای از اجرای یک نوار بزرگ برنامه بالا.

نوار برنامه پایین

برای ایجاد یک نوار برنامه پایین، از BottomAppBar composable استفاده کنید. استفاده از این composable کاملاً شبیه به نوارهای بالای برنامه composable است که در بخش‌های قبلی این صفحه توضیح داده شد. شما composable ها را برای پارامترهای کلیدی زیر ارسال می کنید:

• actions : مجموعه ای از نمادها که در سمت چپ نوار ظاهر می شوند. اینها معمولاً یا اقدامات کلیدی برای صفحه داده شده یا موارد ناوبری هستند.
• floatingActionButton : دکمه عمل شناور که در سمت راست نوار ظاهر می شود.

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

این پیاده سازی به صورت زیر ظاهر می شود:

شکل 6. اجرای مثالی از نوار برنامه پایین.

توجه: همچنین می‌توانید از BottomAppBar بدون ارسال مقداری برای actions و floatingActionButton استفاده کنید. در آن صورت، می‌توانید با پر کردن BottomAppBar با محتوا مانند سایر کانتینرها، یک نوار برنامه پایین سفارشی ایجاد کنید.

منابع اضافی

• اسناد Material3 - نوار برنامه برتر
• اسناد Material3 - نوار برنامه پایین
• داربست