Top Bar

Ekranın üstündeki bar: ekranın başlığı, önünde bir gezinme ikonu ve arkasında eylemler.

import com.pantrixui.components.container.topbar.PantrixTopBar

• Başlık ve alt başlık. title ekranın adıdır ve tek satırdır; subtitle altında, daha küçük yazılır: bir sayı, bir durum. İkisi de gezinme ikonu ile eylemlerin arasındaki yere sığmadığında kısaltılır, onların altına girmez. Yazı stilleri titleStyle ve subtitleStyle ile verilir; verilmezse temanın title ve footnote stilleridir.
• Platform. Başlık Android'de, masaüstünde ve web'de başta, iOS'ta bar'ın ortasında durur. Ortadaki başlık sığdığı sürece bar'ın tam ortasındadır; sığmayınca geniş olan yandan uzaklaşır. Bar Android'de ve iOS'ta 54dp, masaüstünde ve web'de 56dp yüksekliğindedir.
• Gezinme ikonu ve eylemler. navigationIcon başlığın önünde durur: bir geri düğmesi ya da bir menüyü açan düğme. actions başlığın arkasında bir satırdır: ekranın yapabildikleri için ikon düğmeleri, en çok kullanılan başta.
• Geri düğmesi. PantrixBackButton platformun ikonunu çizer: Android'de, masaüstünde ve web'de ok, iOS'ta ok başı; ikisi de sağdan sola düzende döner. Ekran okuyucu ona temanın dilinde "Geri" der.
• Kayan içeriğin çizgisi. scrolled true iken bar'ın alt kenarında bir çizgi çizilir. Çizgi bar'ın yüksekliğinin içindedir; belirip kaybolurken hiçbir şey yerinden oynamaz.
• Çöken başlık. state verilen bar açıkken başlığı, satırın altındaki bir bantta büyük yazar; içerik yukarı kaydıkça bant kapanır ve başlık satıra geçer. İçerik kaydırmasını bar'a Modifier.topBarScroll(state) ile verir.
• Paylar. insets bar'ın kenarlarında açık bıraktığı yerdir: durum çubuğunun ve çentiğin payı. Bar'ın dolgusu onların arkasına uzanır.
• Renk. Bar temanın surface'ındadır, başlık textPrimary, alt başlık textSecondary ile yazılır. TopBarColors dolguyu, içeriğin rengini ve çizgiyi verir; dolgulu bir bar'da hepsi tek renkle yazılır.
• Okuma sırası. Ekran okuyucu ve Tab tuşu bar'ı okunduğu sırayla gezer: gezinme ikonu, başlık ve altındaki alt başlık, eylemler. Başlık ekran okuyucu için ekranın başlığıdır.
• Otomasyon. tagKey ile bar TopBar_<tagKey>, çöken bar'ın büyük başlığı TopBar_<tagKey>.Title_large olur. Geri düğmesi bir ikon düğmesidir: IconButton_<tagKey> etiketini taşır ve basışı öyle bildirilir.

Örnekler

Yalnızca başlık

En az yazılan hâli: yalnızca title. Gezinme ikonu olmadığında başta duran başlık bar'ın kendi iç boşluğundan başlar; iOS'ta başlık ortadadır.

PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(title = "Gelen Kutusu", tagKey = "plain")
}

Geri düğmesi, eylemler ve altında kayan içerik

Bir konuşma ekranı: geri düğmesi, iki eylem ve bar'ın altında kayan bir liste. navigationIcon başlığın önüne bir PantrixBackButton koyar; geri düğmesine kaç kez basıldığı alt başlıkta yazar. actions başlığın arkasına iki ikon düğmesi koyar: kendi hâlleriyle, markanın renginde.

Listeyi kaydır: liste başından ayrılınca bar'ın alt kenarında bir çizgi belirir (scrolled) ve liste geri kayabildiği sürece görünür. Çizgi bar'ın yüksekliğinin içindedir; belirip kaybolurken hiçbir şey yerinden oynamaz.

val list = rememberLazyListState()
var back by rememberSaveable { mutableIntStateOf(0) }
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    Column(modifier = Modifier.height(220.dp)) {
        PantrixTopBar(
            title = "Konuşma",
            subtitle = if (back == 0) null else "Geri'ye $back kez basıldı",
            navigationIcon = { PantrixBackButton(onClick = { back++ }, tagKey = "back") },
            actions = {
                PantrixIconButton(
                    imageVector = PantrixIcons.Search,
                    contentDescription = "Ara",
                    onClick = {},
                    tagKey = "search"
                )
                PantrixIconButton(
                    imageVector = PantrixIcons.MoreHorizontal,
                    contentDescription = "Diğer",
                    onClick = {},
                    tagKey = "more"
                )
            },
            scrolled = list.canScrollBackward,
            tagKey = "conversation"
        )
        LazyColumn(
            // Liste bar kadar geniştir: dar kalsaydı yanındaki boşluğa basan parmak listeyi değil sayfayı
            // kaydırırdı.
            modifier = Modifier.fillMaxWidth(),
            state = list,
            contentPadding = PaddingValues(PantrixTheme.spacing.lg),
            verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
        ) {
            items(12) { index -> PantrixText(text = "Mesaj ${index + 1}") }
        }
    }
}

Alt başlık

subtitle başlığın altına daha küçük yazılan bir satır koyar: bir sayı, bir durum. Gezinme ikonu burada bir geri düğmesi değil, bir menüyü açan ikon düğmesidir.

PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Projeler",
        subtitle = "12 açık",
        navigationIcon = {
            PantrixIconButton(
                imageVector = PantrixIcons.Menu,
                contentDescription = "Menüyü aç",
                onClick = {},
                tagKey = "menu"
            )
        },
        tagKey = "subtitle"
    )
}

Başlık ve alt başlık kendi yazı stilleriyle

Başlığın ve alt başlığın yazı stili verilebilir: titleStyle ve subtitleStyle. Verilmezse temanın title ve footnote stilleridir; burada callout ve caption verildi. Stilin kendi rengi yoksa yazı bar'ın renginde kalır. Daha büyük bir stil bar'ı satırının gerektirdiği kadar uzatır.

PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Projeler",
        subtitle = "12 açık",
        titleStyle = PantrixTheme.typography.callout,
        subtitleStyle = PantrixTheme.typography.caption,
        navigationIcon = {
            PantrixIconButton(
                imageVector = PantrixIcons.Menu,
                contentDescription = "Menüyü aç",
                onClick = {},
                tagKey = "type_menu"
            )
        },
        tagKey = "own_type"
    )
}

Sığmayan başlık kısaltılır

Başlık gezinme ikonunun ve eylemlerin altına girmez: aralarında kalan yere sığmayan başlık kısaltılır. Bar burada en fazla 360dp genişliğindedir; başlık geri düğmesi ile yıldızın arasına sığmaz ve sonu kesilir.

PantrixSurface(modifier = Modifier.widthIn(max = 360.dp), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Üçüncü çeyreğin raporları, yönetim kuruluna gönderildiği hâliyle",
        navigationIcon = { PantrixBackButton(onClick = {}, tagKey = "long_back") },
        actions = {
            PantrixIconButton(
                imageVector = PantrixIcons.Star,
                contentDescription = "Favorilere ekle",
                onClick = {},
                tagKey = "favourite"
            )
        },
        tagKey = "long"
    )
}

Başlığın yeri: başta ve ortada

Başlığın yeri platforma göredir: Android'de, masaüstünde ve web'de başta, iOS'ta bar'ın ortasında. Burada aynı bar iki kez çizildi ve yer style ile verildi: TopBarStyle(titleAlignment = ...). Hangi platformda bakılırsa bakılsın ikisi de görünür.

Ortadaki başlık, yanında ne durursa dursun bar'ın ortasındadır: geri düğmesi onu yana itmez.

PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Ayarlar",
        navigationIcon = { PantrixBackButton(onClick = {}, tagKey = "start_back") },
        style = TopBarStyle(titleAlignment = TopBarTitleAlignment.Start),
        tagKey = "start"
    )
}
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Ayarlar",
        navigationIcon = { PantrixBackButton(onClick = {}, tagKey = "center_back") },
        style = TopBarStyle(titleAlignment = TopBarTitleAlignment.Center),
        tagKey = "center"
    )
}

Geri düğmesinin ikonu

PantrixBackButton hangi ikonu çizeceğini bar'ın stilinden alır: TopBarStyle.backIcon. Platformun kendi ikonu Android'de, masaüstünde ve web'de ok, iOS'ta ok başıdır. Burada iki bar'a style ile birer ikon verildi; bir bar'ın navigationIcon'ındaki geri düğmesi o bar'a verilen stili kullanır.

İkisi de sağdan sola düzende döner: uygulamanın üst bar'ındaki "Yazı tipi ve yön" menüsünden yazı yönünü çevirip bak.

PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Ok",
        navigationIcon = { PantrixBackButton(onClick = {}, tagKey = "arrow_back") },
        style = TopBarStyle(backIcon = BackButtonIcon.Arrow),
        tagKey = "arrow"
    )
}
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Ok başı",
        navigationIcon = { PantrixBackButton(onClick = {}, tagKey = "chevron_back") },
        style = TopBarStyle(backIcon = BackButtonIcon.Chevron),
        tagKey = "chevron"
    )
}

Dönülecek yer yokken

Bir akışın ilk ekranında dönülecek yer yoktur: PantrixBackButton'ın enabled'ı false olur ve düğme basılamaz. Sondaki düğmeyle ilerle: geri düğmesi ikinci adımdan itibaren açılır.

var step by rememberSaveable { mutableIntStateOf(0) }
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Adım ${step + 1} / 3",
        navigationIcon = { PantrixBackButton(onClick = { step -= 1 }, enabled = step > 0, tagKey = "step_back") },
        actions = {
            PantrixIconButton(
                imageVector = PantrixIcons.ArrowForward,
                contentDescription = "Sonraki adım",
                onClick = { step += 1 },
                enabled = step < 2,
                tagKey = "step_next"
            )
        },
        tagKey = "steps"
    )
}

Liste kaydıkça çöken büyük başlık

Çöken başlık: durum uygulamanındır ve rememberPantrixTopBarState() ile tutulur; liste kaydırmasını bar'a Modifier.topBarScroll(state) ile verir. Bar açıkken başlık, satırın altındaki bir bantta temanın headline stiliyle büyük yazılır. Büyük başlık her platformda bar'ın başında durur; satırdaki başlık platformun yerinde, iOS'ta ortada.

Listeyi yukarı kaydır: önce bant kapanır, başlık satıra geçer, liste ancak ondan sonra kayar. Bar yeniden yalnızca liste başına dönünce açılır. Bir parmak onu iki yüksekliğin arasında bırakırsa yakın olana gider; fare tekerleğinden sonra tekerleğin son çevrildiği yöne gider. Ekran okuyucu satırdaki başlığı okur: o hep oradadır ve başlık iki kez okunmaz.

Bar ile liste bir scaffold'un içindedir, bir uygulamada olduğu gibi: liste scaffold'un tamamını doldurur ve bar'ın yüksekliği ona üst pay olarak gelir. Bar kapanıp açılırken listenin kendisi yerinde durur, yalnızca payı değişir. Alttaki düğme listeyi başa alır ve collapsedFraction'ı sıfırlayarak bar'ı açar.

val topBar = rememberPantrixTopBarState()
val list = rememberLazyListState()
val scope = rememberCoroutineScope()
val spacing = PantrixTheme.spacing
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixScaffold(
        modifier = Modifier.height(320.dp),
        topBar = { insets ->
            PantrixTopBar(
                title = "Gelen Kutusu",
                subtitle = "3 okunmamış",
                navigationIcon = { PantrixBackButton(onClick = {}, tagKey = "collapsing_back") },
                actions = {
                    PantrixIconButton(
                        imageVector = PantrixIcons.Search,
                        contentDescription = "Ara",
                        onClick = {},
                        tagKey = "collapsing_search"
                    )
                },
                scrolled = list.canScrollBackward,
                state = topBar,
                insets = insets,
                tagKey = "collapsing"
            )
        },
        containerColor = PantrixTheme.colors.surface,
        // Sayfanın içindeki bir kutu: sistem çubukları sayfanın scaffold'undadır, bunun payı yoktur.
        windowInsets = WindowInsets(0, 0, 0, 0)
    ) { padding ->
        LazyColumn(
            modifier = Modifier.fillMaxSize().topBarScroll(topBar),
            state = list,
            contentPadding = PaddingValues(
                start = spacing.lg,
                top = padding.calculateTopPadding() + spacing.lg,
                end = spacing.lg,
                bottom = spacing.lg
            ),
            verticalArrangement = Arrangement.spacedBy(spacing.md)
        ) {
            items(24) { index -> PantrixText(text = "Konuşma ${index + 1}") }
        }
    }
}
PantrixButton(
    text = "Başa dön ve bar'ı aç",
    onClick = {
        scope.launch {
            list.scrollToItem(0)
            topBar.collapsedFraction = 0f
        }
    },
    variant = ButtonVariant.Outline,
    size = ButtonSize.Small,
    tagKey = "collapsing_to_top"
)

Bar'ın açık bıraktığı pay

insets bar'ın kenarlarında açık bıraktığı paydır: durum çubuğunun ve çentiğin yeri. Bir PantrixScaffold bunu üst bar'ına kendisi verir; burada elle 28dp'lik bir üst pay verildi. Bar'ın dolgusu payın arkasına uzanır, başlık ve geri düğmesi payın altında kalır: bar, stilinin yüksekliğine ek olarak pay kadar uzundur.

PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Ayarlar",
        navigationIcon = { PantrixBackButton(onClick = {}, tagKey = "insets_back") },
        colors = TopBarColors(container = PantrixTheme.colors.primary.container),
        insets = PaddingValues(top = 28.dp),
        tagKey = "insets"
    )
}

Kendi renkleriyle

colors bar'a temanın değil, verilen renkleri verir. İlk bar'ın dolgusu temanın bir rolünün rengi ve yalnızca o verildi: başlığın, alt başlığın ve geri düğmesinin rengini tema eşleştirir.

İkinci bar temada olmayan bir renkte, uygulamanın kendi morunda: üstünde okunan renk content ile verilir. Başlık, alt başlık ve geri düğmesi content rengini alır. İkon düğmesinin kendi renkleri vardır: dolgunun üstünde okunan renk ona ayrıca verilir.

val own = ownColors()
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Gelen Kutusu",
        subtitle = "Yalnızca dolgu verildi",
        navigationIcon = { PantrixBackButton(onClick = {}, tagKey = "role_back") },
        colors = TopBarColors(container = PantrixTheme.colors.primary.color),
        tagKey = "role"
    )
}
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixTopBar(
        title = "Gelen Kutusu",
        subtitle = "3 okunmamış",
        navigationIcon = { PantrixBackButton(onClick = {}, tagKey = "own_back") },
        actions = {
            PantrixIconButton(
                imageVector = PantrixIcons.Search,
                contentDescription = "Ara",
                onClick = {},
                colors = ButtonColors(container = Color.Transparent, content = own.onColor),
                tagKey = "own_search"
            )
        },
        colors = TopBarColors(container = own.color, content = own.onColor),
        tagKey = "own"
    )
}

API

title

Ekranın üstündeki bar: ekranın başlığı, önünde bir gezinme ikonu ve arkasında eylemler.

TopBarStyle

PantrixTopBar'ın geometrisi ve PantrixBackButton'ın çizdiği ikon.

TopBarColors

Temanın renklerini almayan bir bar için PantrixTopBar'ın neyle boyandığı: verilen renk kullanılır, verilmeyen temanınki olarak kalır.