Pantrix UI

UYARLANABİLİR ARAYÜZ

Tek ekran, her pencere. Katlananlar da.

Pantrix cihazı değil pencereyi okur: genişlik sınıfını, yüksekliğini, katlanan bir cihazın duruşunu ve işaretçiyi. İskeletler gezinmeyi taşır, bölmeleri ayırır ve katlanma yerinde kendiliğinden buluşur. Aşağıdan bir pencere seç ve bir uygulamanın kendini nasıl yerleştirdiğine bak.

widthClass

Large

heightClass

Medium

posture

Flat

isNarrow

false

isShort

false

paneCount()

2

layout.margin

32dp

layout.gutter

24dp

columns

12

navigation

Start · sidebar

Neden böyle görünüyor: Liste ve ayrıntı iskeleti pencereyi değil kendi kutusunu ölçer: kenar çubuğunun yanındaki 1032dp Expanded, bu yüzden 2 bölme.

Beş genişlik, üç yükseklik

Sınırlar Android'in pencere boyut sınıflarıdır, her platformda aynı. Ölçülen pencerenin kendisidir: bölünmüş ekrandaki bir uygulama, boyutu değişmiş bir masaüstü penceresi ya da bir tarayıcı sekmesi o pencere kadar geniştir. İşaret, yukarıda seçilen penceredir.

Compact

altı 600dp

Medium

600–839

Expanded

840–1199

Large

1200–1599

ExtraLarge

1600 ve üstü

Dizüstü · 1280dp

Yükseklik Compact

480dp altı

Yan duran telefon: altta çubuk yok, asıl eylem başlıkta.

Yükseklik Medium

480–899dp

Dik duran telefon, yan duran tablet.

Yükseklik Expanded

900dp ve üstü

Dik duran tablet, bir masaüstü penceresi.

Pencere temayla gelir

Sarmalayıcı yok, kurulum yok. PantrixTheme altındaki her ekran pencereyi, sınıfına göre sayfa kenar boşluğu ve aralığıyla hazır bulur.

val window = PantrixTheme.window

window.widthClass              // Compact … ExtraLarge
window.heightClass             // Compact, Medium, Expanded
window.posture.isBook          // yarı açık, menteşe dik
window.posture.isTabletop      // yarı açık, menteşe yatay
window.paneCount()             // yan yana 1, 2 ya da 3

PantrixTheme.layout.margin     // 16, 24 ya da 32dp
PantrixTheme.layout.gutter     // 16 ya da 24dp

val columns = window.byWidth(compact = 2, medium = 4)
val panes = window.byPosture(flat = 1, book = 2)
if (window.widthClass >= WindowWidthClass.Expanded) DetailPane()

Hangi yardımcı, ne zaman

Gereken

Yaz

Genişliğe göre bir değer

window.byWidth(compact = 2, medium = 4)

Aynısı bir composable'da

responsive(compact = 1, medium = 2, large = 3)

Sayfanın kenar boşluğu ve aralığı

PantrixTheme.layout.margin / .gutter

Yüksekliğe göre bir değer

window.byHeight(compact = 44.dp, medium = 56.dp)

Duruşa göre bir değer

window.byPosture(flat = 1, book = 2, tabletop = 2)

"Telefon düzeni mi?"

window.isNarrow

"Altta çubuk sığar mı?"

window.isShort

Bu sınıftan itibaren

widthClass >= WindowWidthClass.Expanded

Kendi eşiğin

rememberWindowIsAtLeast(1000.dp)

Bileşenin kendi yeri

BoxWithPantrixWindow { box -> … }

Parmak mı fare mi

PantrixTheme.platform.isTouch

Altı hazır kalıp

Her biri kendi yerini ölçen, yer değiştirirken durumunu koruyan ve katlanma yerini bilen bir bileşen.

1 · PantrixScaffold

Genişlikle yer değiştiren gezinme

İskelet 600dp'den darken altta, oradan sonra baş kenarda. Masaya konmuş katlanan bir cihazda ellerin olduğu yerde, altta kalır. İskelet pencerenin değil kendi genişliğini ölçer.

PantrixScaffold(navigation = { placement, insets ->
    when (placement) {
        ScaffoldNavigationPlacement.Bottom -> PantrixNavigationBar(items, selected, onSelect, insets = insets)
        else -> PantrixNavigationRail(items, selected, onSelect, insets = insets)
    }
}) { padding -> Content(Modifier.padding(padding)) }

2 · PantrixListDetailScaffold

Liste ve ayrıntı

Bir gelen kutusu, ayarlar, kişiler. Tek bölmede ayrıntı listenin üstüne kayar ve geri hareketi listeyi getirir; Android'in öngörülü geri hareketi ve iOS'un kenar kaydırması da. Odak bölmeyi izler, listenin genişliği sürüklenebilir.

val inbox = rememberListDetailState()
PantrixListDetailScaffold(
    state = inbox,
    list = { Messages(onOpen = { id -> inbox.select(id) }) },
    detail = { id -> Message(id) },
    extra = { id -> History(id) },
    resizable = true
)

3 · PantrixSupportingPaneScaffold

Ana içerik ve bir destek bölmesi

Bir belge ve yorumları, bir grafik ve süzgeçleri. Yer varsa içeriğin yanında; dar yerde telefonda alttan, tablette sondan bir sayfa ya da içeriğin kendi yeri. Yazılan bir yorum bölme yer değiştirirken kalır.

val comments = rememberSupportingPaneState()
PantrixSupportingPaneScaffold(
    state = comments,
    main = { Document(onComments = { comments.show() }) },
    supporting = { Comments() },
    supportingTitle = stringResource(Res.string.comments),
    presentation = SupportingPanePresentation.Sheet
)

4 · PantrixTwoPane · PantrixTabletopLayout

Katlanma: iki bölme ve masa duruşu

İki bölme onları ayıran menteşede tam ayrılır, menteşenin şeridi boş kalır. Masada bakılan şey katlanma yerinin üstündeki yarıyı doldurur, denetimler alttaki yarıyı alır. İkisini görmek için yukarıdaki önizlemede katlanan bir cihaz seç.

PantrixTabletopLayout(
    content = { Video(player) },
    controls = { PlayerControls(player, large = arrangement == TabletopArrangement.Tabletop) },
    flatControls = TabletopControls.Overlay
)

5 · PantrixTheme.layout

Sütunlar, kenar boşlukları ve içeriğin genişliği

16, 24 ve 32dp kenar boşlukları, 16 ve 24dp aralıklar ve 4, 8 ya da 12 sütun sınıfla gelir. Bir parça sütunlara yayılır; hiçbir şey elle seçilmez.

val layout = PantrixTheme.layout
Row(Modifier.maxContentWidth(), horizontalArrangement = Arrangement.spacedBy(layout.gutter)) {
    Article(Modifier.width(layout.spanWidth(maxWidth, span = 8)))
    Related(Modifier.width(layout.spanWidth(maxWidth, span = 4)))
}

6 · BoxWithPantrixWindow

Bir bileşen kendi yerini sorar

Pencere sayfayla ilgili kararlar içindir. Dar bir paneldeki bileşen pencereye sorsa geniş düzenini çizerdi: bunun yerine kendisine verilen kutuya, pencerenin sınırlarıyla sorar.

BoxWithPantrixWindow(modifier) { box ->
    if (box.isNarrow) OrderList(orders)
    else OrderGrid(orders, showDate = box.widthClass >= WindowWidthClass.Expanded)
}

Önizlemede ve testte bir katlanma yeri

PantrixWindowFrame bir kutuyu, köşesinden ölçülen bir menteşesiyle kendi başına bir pencere yapar. Demonun kartları iPhone Duo'nun iç ekranını böyle, kitap gibi ve masada çizer.

val book = PantrixWindow(
    DpSize(951.dp, 669.dp),
    posture = WindowPosture(listOf(WindowFold(
        bounds = hinge, orientation = FoldOrientation.Vertical,
        isHalfOpened = true, isSeparating = true,
        isOccluding = false, clearance = strip
    )))
)
PantrixWindowFrame(book, Modifier.size(951.dp, 669.dp)) { InboxScreen() }

Tuzaklar

Böyle değil

Aynı içeriği sınıfa göre iki yerden çağırmak

Şöyle

Tek yerden çağır; değişeni parametreyle ver ya da taşı

Böyle değil

Bir bileşenin içinde pencereye sormak

Şöyle

BoxWithPantrixWindow ile kendi kutusuna sor

Böyle değil

Bir düzen için window.size okumak

Şöyle

Sınıfı oku; kendi eşiğin için rememberWindowIsAtLeast

Böyle değil

Kenar boşluğunu elle seçmek: responsive(16.dp, 24.dp, 32.dp)

Şöyle

PantrixTheme.layout.margin

Böyle değil

isNarrow'u "telefon" sanmak

Şöyle

Yan duran telefon Expanded'dır: isShort söyler

Böyle değil

"Dokunma" için platforma bakmak

Şöyle

PantrixTheme.platform.isTouch: telefonun tarayıcısı web'dir

Apache License 2.0

·

Türkçe