TopAppBar: یہ کیا ہے، سیٹ اپ اور Jetpack Compose میں استعمال

Jetpack Compose میں TopAppBar کیا ہے؟

TopAppBar Jetpack Compose کے لیے Material Design لائبریری کا ایک composable فنکشن ہے جو ٹاپ ایپ بار کو لاگو کرتا ہے۔ یہ جزو موجودہ اسکرین کا عنوان، بائیں طرف نیویگیشن بٹن اور دائیں طرف اضافی ایکشنز ظاہر کرتا ہے۔

کلاسک View سسٹم کے برعکس، TopAppBar کا Compose ورژن مکمل طور پر اعلانیہ ہے: findViewById کے ذریعے منتظم ہونے کے بجائے، حالت تبدیل ہونے پر بار دوبارہ کھینچا جاتا ہے۔ TopAppBar slot API تصور استعمال کرتا ہے، جہاں title، navigationIcon اور actions composable لیماڈا کے طور پر منتقل کیے جاتے ہیں۔ یہ وراثت کے بغیر بار کے کسی بھی عنصر کو تخصیص کرنے کی اجازت دیتا ہے۔

Google Material Design (2025) کے مطابق، Compose میں TopAppBar تین اقسام میں آتا ہے: CenterAlignedTopAppBar (مرکزی عنوان)، SmallTopAppBar (معیاری)، اور MediumTopAppBar (توسیع شدہ)۔ ہر قسم بار کی اونچائی، عنوان کے فونٹ سائز اور سکرول رویے کی وضاحت کرتی ہے۔ مرکزی ورژن زیادہ تر مین اسکرینز پر استعمال ہوتا ہے، جبکہ MediumTopAppBar مواد والے صفحات کے لیے استعمال ہوتا ہے جہاں سکرول کرتے وقت عنوان آہستہ آہستہ چھوٹا ہوتا ہے۔

TopAppBar کے صحیح آپریشن کے لیے سسٹم مارجن کو مدنظر رکھنا ضروری ہے: WindowInsetsCompat سے Insets۔ Android Developers (2025) کی سفارش کے مطابق، Modifier.statusBarsPadding() یا windowInsetsPadding(WindowInsets.systemBars) کال کرنا بار کو اسٹیٹس بار پر اوورلیپ ہونے سے روکتا ہے۔

TopAppBar پیرامیٹرز: عنوان اور موڈیفائر ترتیب دینا

TopAppBar جزو کئی لازمی اور اختیاری پیرامیٹرز قبول کرتا ہے۔ اہم پیرامیٹر title ہے، جہاں عنوان کے متن کے ساتھ ایک composable بلاک منتقل کیا جاتا ہے۔ چونکہ title ایک @Composable لیماڈا ہے، آپ نہ صرف متن بلکہ متن کے ساتھ ایک آئیکن، سرچ فیلڈ بنا سکتے ہیں، یا پیش رفت ظاہر کر سکتے ہیں۔

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppTopBar() {
    TopAppBar(
        title = { Text("Main") },
        navigationIcon = {
            IconButton(onClick = { /* open drawer */ }) {
                Icon(
                    Icons.Filled.Menu,
                    contentDescription = "Menu"
                )
            }
        },
        actions = {
            IconButton(onClick = { /* search */ }) {
                Icon(Icons.Filled.Search, contentDescription = "Search")
            }
        }
    )
}

Modifier پیرامیٹر پورے بار کے لیے پیڈنگ، سائز اور سیدھ طے کرنے کی اجازت دیتا ہے۔ Modifier.heightIn کے ذریعے کم سے کم اور زیادہ سے زیادہ اونچائی کو محدود کیا جا سکتا ہے۔ colors پیرامیٹر پس منظر، عنوان اور آئیکن کے رنگوں کو اووررائڈ کرنے کے لیے TopAppBarColors آبجیکٹ قبول کرتا ہے۔

ڈیفالٹ طور پر، TopAppBar موجودہ MaterialTheme سے رنگ سکیم استعمال کرتا ہے۔ اگر کسٹم پیلیٹ کی ضرورت ہو تو TopAppBarDefaults.smallTopAppBarColors() استعمال کریں۔ Material3 میں، پس منظر کا رنگ ہلکے اور گہرے تھیمز میں خود بخود surfaceColor کے مطابق ڈھل جاتا ہے، جس سے دستی ترتیب کی ضرورت ختم ہو جاتی ہے۔

TopAppBar میں نیویگیشن بٹن

NavigationIcon TopAppBar کے بائیں حصے میں ایک composable بلاک ہے جس کے ذریعے نیویگیشن لاگو کیا جاتا ہے۔ عام منظرنامے: نیویگیشن Drawer کھولنا (مینو آئیکن)، پچھلی اسکرین پر واپس آنا (ArrowBack آئیکن)، یا موجودہ اسکرین بند کرنا (Close آئیکن)۔

آئیکن کا انتخاب نیویگیشن سٹیک میں اسکرین کی پوزیشن پر منحصر ہے۔ اگر اسکرین روٹ ہے تو Drawer کھولنے کے لیے مینو آئیکن ظاہر ہوتا ہے۔ اگر اسکرین نیسٹڈ ہے تو واپس جانے کے لیے ArrowBack آئیکن ظاہر ہوتا ہے۔ Compose میں، یہ منطق NavController کے ذریعے لاگو کی جاتی ہے: موجودہ بیک سٹیک انٹری طے کرتی ہے کہ کون سا آئیکن دکھانا ہے۔

Material Design (2025) کی سفارشات کے مطابق، نیویگیشن ایریا کی چوڑائی 48 dp ہے — ٹچ انٹرایکشن کے لیے معیاری ہدف۔ آئیکن بصری فیڈبیک (ripple) کے ساتھ کلک ایبل ہونا چاہیے۔ Compose میں، یہ نیویگیشن شروع کرنے والے onClick کال بیک کے ساتھ IconButton میں لپیٹ کر یقینی بنایا جاتا ہے۔

Scaffold استعمال کرتے وقت، نیویگیشن بٹن DrawerState کو ڈپلیکیٹ کر سکتا ہے، جو براہ راست TopAppBar کے بجائے Scaffold کو منتقل کیا جاتا ہے۔ اس صورت میں، navigationIcon rememberDrawerState کے ذریعے Drawer کی حالت کا حوالہ دیتا ہے۔

ایکشنز اور ڈراپ ڈاؤن مینو شامل کرنا

TopAppBar میں actions پیرامیٹر RowScope سیاق و سباق کے ساتھ ایک composable بلاک قبول کرتا ہے، جو عنوان کے دائیں جانب متعدد آئیکنز یا بٹن رکھنے کی اجازت دیتا ہے۔ ہر ایکشن ایک کلک ایبل آئیکنوگرافک عنصر ہونا چاہیے: تلاش، اطلاعیں، ترتیبات، پسندیدہ۔

اضافی ایکشنز کے لیے DropdownMenu کے ذریعے ڈراپ ڈاؤن مینو استعمال کیا جاتا ہے۔ اگر ایکشنز کی تعداد تین سے زیادہ ہو تو اضافی ایکشنز MoreVert آئیکن کے ساتھ OverflowMenu میں رکھے جاتے ہیں۔ کلک کرنے پر، پوشیدہ ایکشنز کی فہرست کھل جاتی ہے۔ DropdownMenu آئیکن کے نسبت خود بخود پوزیشن ہو جاتا ہے۔

@Composable
fun TopBarWithOverflow() {
    var menuExpanded by remember { mutableStateOf(false) }
    TopAppBar(
        title = { Text("Profile") },
        actions = {
            IconButton(onClick = { /* share */ }) {
                Icon(Icons.Filled.Share, contentDescription = "Share")
            }
            Box {
                IconButton(onClick = { menuExpanded = true }) {
                    Icon(Icons.Filled.MoreVert, contentDescription = "More")
                }
                DropdownMenu(
                    expanded = menuExpanded,
                    onDismissRequest = { menuExpanded = false }
                ) {
                    DropdownMenuItem(text = { Text("Settings") }, onClick = { /* navigate */ })
                    DropdownMenuItem(text = { Text("About") }, onClick = { /* navigate */ })
                }
            }
        }
    )
}

ہر آئیکن کے لیے contentDescription سیٹ کرنا ضروری ہے — یہ رسائی کی ضرورت ہے۔ وضاحت کے بغیر، TalkBack بٹن کا اعلان نہیں کرے گا۔ خالصتاً آرائشی عناصر کے لیے contentDescription = null استعمال کریں۔

Material3 میں TopAppBar: ڈائنامک کلر اور انطباق

Material3 (M3) Material Design کا موجودہ ورژن ہے، جو Google نئے پروجیکٹس کے لیے تجویز کرتا ہے۔ M3 میں TopAppBar TopAppBar، CenterAlignedTopAppBar اور MediumTopAppBar کے ذریعے لاگو کیا جاتا ہے۔ Material2 سے بنیادی فرق ڈائنامک کلر، انکولی اونچائی اور سکرول رویے کے لیے بلٹ ان سپورٹ ہے۔

ڈائنامک کلر ڈیوائس وال پیپر (Android 12+) کی بنیاد پر بار کے رنگ خود بخود منتخب کرتا ہے۔ M3 میں TopAppBar پس منظر کے لیے surfaceColor اور عنوان کے لیے primary استعمال کرتا ہے۔ اگر ڈائنامک کلر دستیاب نہ ہو تو MaterialTheme سے فال بیک پیلیٹ لاگو کیا جاتا ہے۔ Google Material Design (2025) کے مطابق، Android 12+ کے 63% صارفین ایپلیکیشنز میں ڈائنامک کلر استعمال کرتے ہیں۔

MediumTopAppBar بڑے عنوان (32 sp) کے ساتھ ایک توسیع شدہ ورژن ہے، جو سکرول کرتے وقت آہستہ آہستہ 20 sp تک چھوٹا ہو کر SmallTopAppBar میں تبدیل ہو جاتا ہے۔ یہ اثر TopAppBarDefaults.mediumTopAppBarColors() اور scrollBehavior پیرامیٹر کے ذریعے لاگو کیا جاتا ہے۔ ٹرانزیشن اینیمیشن TopAppBarState کے ذریعے کنٹرول کی جاتی ہے، جو عنوان کے سکڑنے کا پتہ رکھتا ہے۔

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MediumTopBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        topBar = {
            MediumTopAppBar(
                title = { Text("Library") },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Filled.Menu, contentDescription = "Menu")
                    }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        LazyColumn(contentPadding = padding) { /* content */ }
    }
}

Material3 TopAppBar کے لیے @OptIn(ExperimentalMaterial3Api::class) استعمال کرنا ضروری ہے — یہ اینوٹیشن ظاہر کرتا ہے کہ API مستقبل کے ورژنز میں تبدیل ہو سکتا ہے۔ 2025 تک، M3 میں TopAppBar تجرباتی ہے، لیکن Google مناسب جانچ کے ساتھ پروڈکشن میں اس کے استعمال کی سفارش کرتا ہے۔

ScrollBehavior: سکرول کرتے وقت بار چھپانا

ScrollBehavior ایک طریقہ کار ہے جو عمودی مواد سکرول کرنے کے دوران TopAppBar کی نمائش کو کنٹرول کرتا ہے۔ Jetpack Compose میں، scrollBehavior جگہ خالی کرنے کے لیے بار چھپانے یا سکیڑنے کی اجازت دیتا ہے، جو خاص طور پر بڑی مواد کی فہرستوں والی اسکرینوں پر مفید ہے۔

Material3 تین حکمت عملی فراہم کرتا ہے: enterAlways(اوپر سکرول کرنے پر بار ظاہر ہوتا ہے اور نیچے سکرول کرنے پر چھپ جاتا ہے)، exitUntilCollapsed(عنوان مکمل طور پر سکڑنے کے بعد ہی بار چھپتا ہے)، اور TopAppBarScrollBehavior انٹرفیس لاگو کرکے کسٹم۔ پہلا آپشن مواد فیڈز کے لیے موزوں ہے، دوسرا MediumTopAppBar والی اسکرینوں کے لیے۔

ScrollBehavior کو rememberLazyListState() کے ذریعے LazyColumn یا LazyRow کے ساتھ ہم آہنگی کی ضرورت ہے۔ سکرول کی حالت scrollBehavior پیرامیٹر کے ذریعے TopAppBar کو منتقل کی جاتی ہے۔ جزو خود بخود سکرول ایونٹس کو سبسکرائب کرتا ہے اور بار کی نمائش کو اینیمیٹ کرتا ہے۔ Android Developers (2025) کے مطابق، enterAlwaysScrollBehavior سب سے مقبول حکمت عملی ہے، جو سکرول ایبل TopAppBar والی 75% ایپلیکیشنز میں استعمال ہوتی ہے۔

کسٹم ScrollBehavior ترتیب دینا

کسٹم رویہ بنانے کے لیے TopAppBarScrollBehavior کو بڑھائیں اور onScroll اور onDrag طریقوں کو اووررائڈ کریں۔ کسٹم رویہ اس وقت مفید ہے جب معیاری منظرنامے ڈیزائن کی ضروریات کو پورا نہ کریں — مثال کے طور پر، بار صرف ایک خاص سکرول حد سے تجاوز کرنے کے بعد چھپنا چاہیے۔

ڈیفالٹ طور پر، scrollBehavior مواد میں پیڈنگ شامل نہیں کرتا — paddingTop کو Scaffold میں contentPadding کے ذریعے یا LazyColumn میں Modifier.padding کے ذریعے دستی طور پر سیٹ کرنا ہوتا ہے۔ MediumTopAppBar میں، مارجن خود بخود TopAppBarState.collapsedFraction کے ذریعے حساب کیے جاتے ہیں۔

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    topBar = {
        MediumTopAppBar(
            title = { Text("Content") },
            scrollBehavior = scrollBehavior
        )
    }
) { padding ->
    LazyColumn(contentPadding = padding) { /* items */ }
}

ScrollBehavior صرف Material3 میں دستیاب ہے۔ Material2 TopAppBar میں سکرول کرتے وقت چھپنے کی بلٹ ان سپورٹ نہیں ہے — اسی طرح کے رویے کے لیے NestedScrollConnection کے ذریعے دستی نفاذ کی ضرورت ہے۔