ऐप्लिकेशन बार

ऐप्लिकेशन बार ऐसे कंटेनर होते हैं जिनसे उपयोगकर्ता को मुख्य सुविधाओं और नेविगेशन आइटम का ऐक्सेस मिलता है. ऐप्लिकेशन बार दो तरह के होते हैं: टॉप ऐप्लिकेशन बार और बॉटम ऐप्लिकेशन बार. उनके दिखने का तरीका और मकसद यहां बताया गया है:

टाइप

थीम

मकसद

टॉप ऐप्लिकेशन बार

स्क्रीन पर सबसे ऊपर.

इससे आपको अहम टास्क और जानकारी का ऐक्सेस मिलता है. आम तौर पर, इसमें टाइटल, मुख्य ऐक्शन आइटम, और कुछ नेविगेशन आइटम होस्ट किए जाते हैं.

बॉटम ऐप्लिकेशन बार

स्क्रीन के सबसे निचले हिस्से पर.

आम तौर पर, इसमें नेविगेशन के मुख्य आइटम शामिल होते हैं. अन्य मुख्य कार्रवाइयों का ऐक्सेस भी दे सकता है, जैसे कि शामिल फ़्लोटिंग ऐक्शन बटन का इस्तेमाल करके.
सबसे ऊपर और सबसे नीचे दिखने वाले ऐप्लिकेशन बार का उदाहरण.
पहली इमेज. सबसे ऊपर वाला ऐप्लिकेशन बार (बाएं) और सबसे नीचे वाला ऐप्लिकेशन बार (दाएं).

सबसे ऊपर मौजूद ऐप्लिकेशन बार और सबसे नीचे मौजूद ऐप्लिकेशन बार को लागू करने के लिए, TopAppBar का इस्तेमाल करें और BottomAppBar कंपोज़ेबल. इनकी मदद से, एक जैसे इंटरफ़ेस बनाए जा सकते हैं. इनमें नेविगेशन और ऐक्शन कंट्रोल शामिल होते हैं. साथ ही, ये इंटरफ़ेस मटीरियल डिज़ाइन के सिद्धांतों के मुताबिक होते हैं.

टॉप ऐप्लिकेशन बार

नीचे दी गई टेबल में चार तरह के टॉप ऐप्लिकेशन बार के बारे में बताया गया है:

टाइप

उदाहरण

छोटे साइज़: उन स्क्रीन के लिए जिन्हें बहुत ज़्यादा नेविगेशन या कार्रवाइयों की ज़रूरत नहीं होती.

 छोटा टॉप ऐप्लिकेशन बार

बीच में अलाइन की गई: उन स्क्रीन के लिए जिनमें एक प्राइमरी ऐक्शन होता है.

 ऐप्लिकेशन बार को बीच में अलाइन किया गया

मीडियम: उन स्क्रीन के लिए जिनमें ज़्यादा नेविगेशन और कार्रवाइयों की ज़रूरत होती है.

 मीडियम साइज़ का टॉप ऐप्लिकेशन बार

बड़ी: उन स्क्रीन के लिए जिनमें बहुत ज़्यादा नेविगेशन और कार्रवाइयों की ज़रूरत होती है.

 सबसे ऊपर मौजूद बड़ा ऐप्लिकेशन बार

एपीआई प्लैटफ़ॉर्म

सबसे ऊपर मौजूद चार अलग-अलग ऐप्लिकेशन बार लागू करने की सुविधा देने वाले अलग-अलग कॉम्पोज़ेबल काफ़ी मिलते-जुलते हैं. ये कई मुख्य पैरामीटर शेयर करते हैं:

  • title: ऐप्लिकेशन बार में दिखने वाला टेक्स्ट.
  • navigationIcon: नेविगेशन के लिए मुख्य आइकॉन. इस पर दिखते हैं बाईं ओर दिखेगा.
  • actions: ऐसे आइकॉन जो उपयोगकर्ता को मुख्य कार्रवाइयों का ऐक्सेस देते हैं. वे ऐसे दिखते हैं दाईं ओर मौजूद बटन पर क्लिक करें.
  • scrollBehavior: इससे यह तय होता है कि ऊपर दिए गए ऐप्लिकेशन बार को स्क्रोल करने पर कैसी प्रतिक्रिया मिलती है स्कैफ़ोल्ड का अंदरूनी कॉन्टेंट देख सकते हैं.
  • colors: इससे यह तय होता है कि ऐप्लिकेशन बार कैसा दिखेगा.

स्क्रोल करने की कार्रवाई

आपके पास यह कंट्रोल करने का विकल्प होता है कि जब उपयोगकर्ता दिए गए स्काफ़ोल्ड के अंदरूनी कॉन्टेंट को स्क्रोल करे, तो ऐप्लिकेशन बार कैसे काम करे. ऐसा करने के लिए, TopAppBarScrollBehavior पर क्लिक करें और उसे scrollBehavior पैरामीटर.

TopAppBarScrollBehavior तीन तरह के होते हैं. इनके बारे में यहां बताया गया है:

  • enterAlwaysScrollBehavior: जब उपयोगकर्ता स्कैफ़ोल्ड के अंदरूनी कॉन्टेंट को ऊपर खींचता है, तो सबसे ऊपर मौजूद ऐप्लिकेशन बार छोटा हो जाता है. ऐप्लिकेशन बार तब बड़ा होता है, जब उपयोगकर्ता अंदर के कॉन्टेंट को दिखाता है.
  • exitUntilCollapsedScrollBehavior: enterAlwaysScrollBehavior की तरह, हालांकि, जब उपयोगकर्ता आखिर में आखिर तक पहुंचता है, तो ऐप्लिकेशन बार और बढ़ जाता है मैनेज करें.
  • pinnedScrollBehavior: ऐप्लिकेशन बार अपनी जगह पर बना रहता है और स्क्रीन पर स्क्रोल करने पर भी नहीं बदलता.

नीचे दिए गए उदाहरणों में इनमें से कई विकल्पों को लागू किया गया है.

उदाहरण

यहां दिए गए सेक्शन में, चार अलग-अलग तरह के टॉप ऐप्लिकेशन बार को लागू करने के तरीके बताए गए हैं. साथ ही, स्क्रोल करने के तरीके को कंट्रोल करने के अलग-अलग उदाहरण भी दिए गए हैं.

छोटा

सबसे ऊपर मौजूद छोटा ऐप्लिकेशन बार बनाने के लिए, TopAppBar कंपोज़ेबल का इस्तेमाल करें. यह है और इस उदाहरण में सिर्फ़ एक शीर्षक दिया गया है.

नीचे दिए गए उदाहरण में, 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

यह लागू होने का तरीका इस तरह दिखता है:

सबसे ऊपर मौजूद छोटे ऐप्लिकेशन बार का उदाहरण.
दूसरी इमेज. सबसे ऊपर मौजूद छोटा ऐप्लिकेशन बार.

मध्‍य संरेखित

बीच में अलाइन किया गया टॉप ऐप्लिकेशन बार, छोटे ऐप्लिकेशन बार जैसा ही होता है. हालांकि, टाइटल कॉम्पोनेंट के बीच में होता है. इसे लागू करने के लिए, CenterAlignedTopAppBar के लिए बने खास कॉम्पोज़ेबल का इस्तेमाल करें.

इस उदाहरण में, पास की जाने वाली वैल्यू को पाने के लिए 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

लागू होने पर यह ऐसा दिखता है:

वैकल्पिक लेख यहां लिखें
तीसरी इमेज. सबसे ऊपर बीच में अलाइन किया गया ऐप्लिकेशन बार.

सामान्य जगह पर

सबसे ऊपर मौजूद ऐप्लिकेशन बार, टाइटल को किसी भी अतिरिक्त आइकॉन के नीचे रखता है. बनाने के लिए पहले, MediumTopAppBar कंपोज़ेबल का इस्तेमाल करें.

पिछले स्निपेट की तरह, यह उदाहरण 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() से व्यवहार दिखता है:

चौथी इमेज. सबसे ऊपर बीच में अलाइन किया गया ऐप्लिकेशन बार.

बड़ा

सबसे ऊपर मौजूद ऐप्लिकेशन बार, मीडियम के बराबर होता है. हालांकि, टाइटल और आइकॉन बड़ा है और यह स्क्रीन पर ज़्यादा जगह लेता है. इसे बनाने के लिए, LargeTopAppBar कॉम्पोज़ेबल का इस्तेमाल करें.

पिछले स्निपेट के उलट, इस उदाहरण में पास की जाने वाली वैल्यू पाने के लिए, 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

यह लागू होने का तरीका इस तरह दिखता है:

किसी ऐप्लिकेशन की स्क्रीन, जिसमें सबसे नीचे ऐप्लिकेशन बार है. इसमें बाईं ओर ऐक्शन आइकॉन और दाईं ओर फ़्लोटिंग ऐक्शन बटन है.
पांचवीं इमेज. सबसे ऊपर मौजूद ऐप्लिकेशन बार को लागू करने का एक उदाहरण.

बॉटम ऐप्लिकेशन बार

सबसे नीचे मौजूद ऐप्लिकेशन बार बनाने के लिए, BottomAppBar कॉम्पोज़ेबल का इस्तेमाल करें. इसका इस्तेमाल करके कंपोज़ेबल, टॉप ऐप्लिकेशन बार कंपोज़ेबल, जो इस पेज के पिछले सेक्शन शामिल करें. इन मुख्य पैरामीटर के लिए, कॉम्पोज़ेबल पास किए जाते हैं:

  • 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

यह लागू होने का तरीका इस तरह दिखता है:

किसी ऐप्लिकेशन की स्क्रीन, जिसमें सबसे नीचे ऐप्लिकेशन बार है. इस बार में बाईं ओर ऐक्शन आइकॉन और दाईं ओर फ़्लोटिंग ऐक्शन बटन है.
छठी इमेज. बॉटम ऐप्लिकेशन बार को लागू करने का उदाहरण.

अन्य संसाधन