CoordinatorLayout
คือ ViewGroup
ที่ช่วยให้สร้างเลย์เอาต์ที่ซับซ้อน ซ้อนทับ และ
ซ้อนกันได้ โดยใช้เป็นคอนเทนเนอร์เพื่อเปิดใช้การโต้ตอบ Material Design
ที่เฉพาะเจาะจง เช่น การขยาย/ยุบแถบเครื่องมือและชีตด้านล่าง สำหรับ View
ที่อยู่ในนั้น
ในฟีเจอร์เขียน อีเมลที่เทียบเท่ากับ CoordinatorLayout
มากที่สุดคือ
Scaffold
Scaffold
มีช่องเนื้อหาสำหรับรวม Material
Components เข้ากับรูปแบบหน้าจอและการโต้ตอบทั่วไป หน้านี้จะอธิบายวิธี
ย้ายข้อมูลการติดตั้งใช้งาน CoordinatorLayout
เพื่อใช้ Scaffold
ใน
Compose
ขั้นตอนการย้ายข้อมูล
หากต้องการย้ายข้อมูล CoordinatorLayout
ไปยัง Scaffold
ให้ทำตามขั้นตอนต่อไปนี้
ในข้อมูลโค้ดด้านล่าง
CoordinatorLayout
มีAppBarLayout
สำหรับ มีToolBar
,ViewPager
และFloatingActionButton
แสดงความคิดเห็น เกี่ยวกับCoordinatorLayout
และองค์ประกอบย่อยจากลำดับชั้น UI แล้วเพิ่มComposeView
เพื่อแทนที่<!-- <androidx.coordinatorlayout.widget.CoordinatorLayout--> <!-- android:id="@+id/coordinator_layout"--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="match_parent"--> <!-- android:fitsSystemWindows="true">--> <!-- <androidx.compose.ui.platform.ComposeView--> <!-- android:id="@+id/compose_view"--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="match_parent"--> <!-- app:layout_behavior="@string/appbar_scrolling_view_behavior" />--> <!-- <com.google.android.material.appbar.AppBarLayout--> <!-- android:id="@+id/app_bar_layout"--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="wrap_content"--> <!-- android:fitsSystemWindows="true"--> <!-- android:theme="@style/Theme.Sunflower.AppBarOverlay">--> <!-- AppBarLayout contents here --> <!-- </com.google.android.material.appbar.AppBarLayout>--> <!-- </androidx.coordinatorlayout.widget.CoordinatorLayout>--> <androidx.compose.ui.platform.ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="match_parent" />
ใน Fragment หรือ Activity ให้รับการอ้างอิงถึง
ComposeView
ที่คุณเพิ่งเพิ่ม และเรียกใช้เมธอดsetContent
ในออบเจ็กต์นั้น ในส่วนเนื้อหาของเมธอด ให้ตั้งค่าScaffold
เป็นเนื้อหาของเมธอดcomposeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
ในเนื้อหาของ
Scaffold
ให้เพิ่มเนื้อหาหลักของหน้าจอภายใน เนื่องจากเนื้อหาหลักใน XML ด้านบนคือViewPager2
เราจึงจะใช้HorizontalPager
ซึ่งเป็นฟังก์ชัน Compose ที่เทียบเท่ากับเนื้อหาดังกล่าวcontent
Lambda ของScaffold
จะได้รับอินสแตนซ์ของPaddingValues
ซึ่งควร ใช้กับรูทเนื้อหาด้วย คุณสามารถใช้Modifier.padding
เพื่อใช้PaddingValues
เดียวกันกับHorizontalPager
ได้composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
ใช้ช่องเนื้อหาอื่นๆ ที่
Scaffold
มีให้เพื่อเพิ่มองค์ประกอบบนหน้าจอ และย้ายข้อมูล View ย่อยที่เหลือ คุณใช้ช่องtopBar
เพื่อเพิ่มTopAppBar
และใช้ช่องfloatingActionButton
เพื่อระบุFloatingActionButton
ได้composeView.setContent { Scaffold( Modifier.fillMaxSize(), topBar = { TopAppBar( title = { Text("My App") } ) }, floatingActionButton = { FloatingActionButton( onClick = { /* Handle click */ } ) { Icon( Icons.Filled.Add, contentDescription = "Add Button" ) } } ) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
กรณีการใช้งานทั่วไป
ยุบและขยายแถบเครื่องมือ
ในระบบมุมมอง เพื่อยุบและขยายแถบเครื่องมือด้วย CoordinatorLayout
,
คุณจะใช้ AppBarLayout
เป็นคอนเทนเนอร์สำหรับแถบเครื่องมือ จากนั้นคุณสามารถระบุ
Behavior
ผ่าน layout_behavior
ใน XML บน View ที่เลื่อนได้ที่เชื่อมโยง (เช่น RecyclerView
หรือ NestedScrollView
) เพื่อประกาศวิธีที่แถบเครื่องมือ
ยุบ/ขยายเมื่อคุณเลื่อน
ใน Compose คุณสามารถสร้างเอฟเฟกต์ที่คล้ายกันได้ผ่าน TopAppBarScrollBehavior
เช่น หากต้องการใช้แถบเครื่องมือที่ยุบ/ขยายได้เพื่อให้แถบเครื่องมือปรากฏเมื่อคุณเลื่อนขึ้น ให้ทำตามขั้นตอนต่อไปนี้
- โทรหา
TopAppBarDefaults.enterAlwaysScrollBehavior()
เพื่อสร้างTopAppBarScrollBehavior
- ส่ง
TopAppBarScrollBehavior
ที่สร้างขึ้นให้TopAppBar
เชื่อมต่อ
NestedScrollConnection
ผ่านModifier.nestedScroll
ในScaffold
เพื่อให้ Scaffold รับเหตุการณ์การเลื่อนที่ซ้อนกันได้เมื่อเนื้อหาที่เลื่อนได้เลื่อนขึ้น/ลง ด้วยวิธีนี้ แถบแอปที่อยู่ในคอนเทนเนอร์จะ ยุบ/ขยายได้อย่างเหมาะสมเมื่อเนื้อหาเลื่อน// 1. Create the TopAppBarScrollBehavior val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior() Scaffold( topBar = { TopAppBar( title = { Text("My App") }, // 2. Provide scrollBehavior to TopAppBar scrollBehavior = scrollBehavior ) }, // 3. Connect the scrollBehavior.nestedScrollConnection to the Scaffold modifier = Modifier .fillMaxSize() .nestedScroll(scrollBehavior.nestedScrollConnection) ) { contentPadding -> /* Contents */ // ... }
ปรับแต่งเอฟเฟกต์การเลื่อนแบบยุบ/ขยาย
คุณระบุพารามิเตอร์หลายรายการสำหรับ enterAlwaysScrollBehavior
เพื่อ
ปรับแต่งเอฟเฟกต์ภาพเคลื่อนไหวการยุบ/ขยายได้ TopAppBarDefaults
ยังมี TopAppBarScrollBehavior
อื่นๆ เช่น
exitUntilCollapsedScrollBehavior
ซึ่งจะขยายแถบแอปเมื่อ
เลื่อนเนื้อหาลงไปจนสุดเท่านั้น
หากต้องการสร้างเอฟเฟกต์ที่กำหนดเองทั้งหมด (เช่น เอฟเฟกต์ภาพเคลื่อนไหวแบบพารัลแลกซ์) คุณสามารถสร้าง NestedScrollConnection
ของคุณเองและออฟเซ็ตแถบเครื่องมือด้วยตนเองเมื่อเนื้อหาเลื่อน ดูตัวอย่างโค้ดได้ที่ตัวอย่างการเลื่อนที่ซ้อนกันใน AOSP
ตู้ลิ้นชัก
ใน Views คุณจะใช้ navigation drawer โดยใช้
DrawerLayout
เป็นรูทวิว ในทางกลับกัน CoordinatorLayout
จะเป็น
มุมมองย่อยของ DrawerLayout
DrawerLayout
ยังมีมุมมองขององค์ประกอบย่อยอื่นๆ เช่น NavigationView
เพื่อแสดงตัวเลือกการนำทางใน
ลิ้นชัก
ใน Compose คุณสามารถใช้แถบนำทางด้านข้างได้โดยใช้ Composable
ModalNavigationDrawer
ModalNavigationDrawer
มีช่อง drawerContent
สำหรับลิ้นชักและช่อง content
สำหรับเนื้อหาของหน้าจอ
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Text("Drawer title", modifier = Modifier.padding(16.dp)) HorizontalDivider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold content // ... } }
ดูข้อมูลเพิ่มเติมได้ที่ลิ้นชัก
แถบแสดงข้อความ
Scaffold
มีsnackbarHost
ช่องที่รับ SnackbarHost
Composable เพื่อแสดง Snackbar
val scope = rememberCoroutineScope() val snackbarHostState = remember { SnackbarHostState() } Scaffold( snackbarHost = { SnackbarHost(hostState = snackbarHostState) }, floatingActionButton = { ExtendedFloatingActionButton( text = { Text("Show snackbar") }, icon = { Icon(Icons.Filled.Image, contentDescription = "") }, onClick = { scope.launch { snackbarHostState.showSnackbar("Snackbar") } } ) } ) { contentPadding -> // Screen content // ... }
ดูข้อมูลเพิ่มเติมได้ที่แถบข้อความ
ดูข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับการย้ายข้อมูล CoordinatorLayout
ไปยัง Compose ได้ที่แหล่งข้อมูลต่อไปนี้
- คอมโพเนนต์และเลย์เอาต์ของ Material: เอกสารประกอบเกี่ยวกับคอมโพเนนต์ Material Design ที่รองรับใน Compose เช่น
Scaffold
- การย้ายข้อมูล Sunflower ไปยัง Jetpack Compose: บล็อกโพสต์ที่
บันทึกเส้นทางการย้ายข้อมูลจาก View ไปยัง Compose ของแอปตัวอย่าง Sunflower
ซึ่งมี
CoordinatorLayout
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- คอมโพเนนต์และเลย์เอาต์ของ Material
- ส่วนที่เว้นไว้ในหน้าต่างในโหมดเขียน
- เลื่อน