เริ่มต้นใช้งาน Jetpack Compose
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
Jetpack Compose เป็นชุดเครื่องมือที่ทันสมัยสำหรับการสร้าง UI ที่ใช้กับ Android โดยเฉพาะ คุณจะดูข้อมูลล่าสุดเกี่ยวกับการใช้ Compose ได้ที่นี่
- ภาพรวม: ดูแหล่งข้อมูลทั้งหมดที่พร้อมให้บริการแก่นักพัฒนาแอป Compose
- บทแนะนำ: เริ่มต้นใช้งาน Compose โดยใช้เพื่อสร้าง UI อย่างง่าย
- คำแนะนำฉบับย่อ: ใหม่! ลองใช้คำแนะนำที่รวดเร็วและตรงประเด็นของเรา ซึ่งออกแบบมาเพื่อให้คุณบรรลุเป้าหมายได้เร็วที่สุด
มูลนิธิ
- การคิดใน Compose: ดูว่าแนวทางแบบประกาศของ Compose แตกต่างจากแนวทางที่อิงตาม View ที่คุณอาจเคยใช้ในอดีตอย่างไร และวิธีสร้างโมเดลในใจเพื่อทำงานกับ Compose
- การจัดการสถานะ: ดูข้อมูลเกี่ยวกับการตั้งค่าและการใช้สถานะในแอป Compose
- วงจรของ Composable: ดูข้อมูลเกี่ยวกับวงจรของ Composable และวิธีที่ Compose ตัดสินใจว่าต้องวาดใหม่หรือไม่
- ตัวแก้ไข: ดูวิธีใช้ตัวแก้ไขเพื่อเพิ่มหรือตกแต่ง Composable
- ผลข้างเคียงใน Compose: ดูวิธีที่ดีที่สุดในการจัดการผลข้างเคียง
- เฟสของ Jetpack Compose: ดูขั้นตอนที่ Compose ใช้ในการแสดงผล UI และวิธีใช้ข้อมูลดังกล่าวเพื่อเขียนโค้ดที่มีประสิทธิภาพ
- การแบ่งชั้นสถาปัตยกรรม: ดูข้อมูลเกี่ยวกับเลเยอร์สถาปัตยกรรมที่ประกอบกันเป็น Jetpack Compose และหลักการสำคัญที่ใช้ในการออกแบบ
- ประสิทธิภาพ: ดูวิธีหลีกเลี่ยงข้อผิดพลาดในการเขียนโปรแกรมที่พบบ่อยซึ่งอาจส่งผลต่อประสิทธิภาพของแอป
- ความหมายใน Compose: ดูข้อมูลเกี่ยวกับแผนผังความหมาย ซึ่งจัดระเบียบ UI ในลักษณะที่บริการการช่วยเหลือพิเศษและเฟรมเวิร์กการทดสอบสามารถใช้ได้
- ข้อมูลที่กำหนดขอบเขตในเครื่องด้วย CompositionLocal: ดูวิธีใช้
CompositionLocal เพื่อส่งข้อมูลผ่าน Composition
สภาพแวดล้อมในการพัฒนาซอฟต์แวร์
การออกแบบ
- เลย์เอาต์: ดูข้อมูลเกี่ยวกับคอมโพเนนต์เลย์เอาต์เนทีฟของ Compose และวิธีออกแบบเลย์เอาต์ของคุณเอง
- พื้นฐานของเลย์เอาต์: ดูข้อมูลเกี่ยวกับองค์ประกอบพื้นฐานสำหรับ UI ของแอปที่ตรงไปตรงมา
- คอมโพเนนต์และเลย์เอาต์ของ Material: ดูข้อมูลเกี่ยวกับคอมโพเนนต์และเลย์เอาต์ของ Material ใน Compose
- เลย์เอาต์ที่กำหนดเอง: ดูวิธีควบคุมเลย์เอาต์ของแอปและวิธีออกแบบเลย์เอาต์ที่กำหนดเองของคุณเอง
- รองรับขนาดการแสดงผลต่างๆ: ดูวิธีใช้ Compose เพื่อสร้างเลย์เอาต์ที่ปรับให้เข้ากับขนาดการแสดงผล การวางแนว และรูปแบบอุปกรณ์ต่างๆ
- เส้นแนว: ดูวิธีสร้างเส้นแนวที่กำหนดเองเพื่อจัดแนวและวางตำแหน่งองค์ประกอบ UI อย่างแม่นยำ
- การวัดผลโดยธรรมชาติ: เนื่องจาก Compose อนุญาตให้คุณวัดองค์ประกอบ UI ได้เพียงครั้งเดียวต่อการส่งผ่าน หน้านี้จึงอธิบายวิธีค้นหาข้อมูลเกี่ยวกับองค์ประกอบย่อยก่อนที่จะวัด
- ConstraintLayout: ดูวิธีใช้
ConstraintLayout ใน Compose UI
- ระบบการออกแบบ: ดูวิธีใช้ระบบการออกแบบและทำให้แอปมีรูปลักษณ์ที่สอดคล้องกัน
- ลิสต์และตารางกริด: ดูตัวเลือกบางอย่างของ Compose สำหรับการจัดการและการแสดงลิสต์และตารางกริดของข้อมูล
- ข้อความ: ดูตัวเลือกหลักของฟีเจอร์เขียนสำหรับการแสดงและแก้ไขข้อความ
- กราฟิก: ดูข้อมูลเกี่ยวกับฟีเจอร์ของ Compose สำหรับการสร้างและการทำงานกับกราฟิกที่กำหนดเอง
- ภาพเคลื่อนไหว: ดูตัวเลือกต่างๆ ของ Compose สำหรับการสร้างภาพเคลื่อนไหวขององค์ประกอบ UI
- ท่าทางสัมผัส: ดูวิธีสร้าง UI ของ Compose ที่ตรวจหาและโต้ตอบกับท่าทางสัมผัสของผู้ใช้
- การจัดการการโต้ตอบของผู้ใช้: ดูวิธีที่ Compose สรุปอินพุตระดับต่ำเป็นการโต้ตอบระดับสูง เพื่อให้คุณปรับแต่งวิธีที่คอมโพเนนต์ตอบสนองต่อการกระทำของผู้ใช้ได้
การปรับใช้ Compose
- ย้ายข้อมูลแอปที่ใช้ View ที่มีอยู่: ดูวิธีย้ายข้อมูลแอปที่ใช้ View ที่มีอยู่ไปยัง Compose
- กลยุทธ์การย้ายข้อมูล: เรียนรู้กลยุทธ์ในการนำ Compose มาใช้ในโค้ดเบสอย่างปลอดภัยและค่อยๆ เพิ่มขึ้น
- API การทำงานร่วมกัน: ดูข้อมูลเกี่ยวกับ API ของ Compose เพื่อช่วยให้คุณรวม Compose กับ UI ที่อิงตาม View
- ข้อควรพิจารณาอื่นๆ: ดูข้อมูลเกี่ยวกับข้อควรพิจารณาอื่นๆ เช่น ธีม สถาปัตยกรรม และการทดสอบขณะย้ายข้อมูลแอปที่อิงตาม View ไปยัง Compose
- Compose และไลบรารีอื่นๆ: ดูวิธีใช้ไลบรารีที่อิงตาม View ในเนื้อหา Compose
- สถาปัตยกรรม Compose: ดูวิธีใช้รูปแบบโฟลว์แบบทิศทางเดียวใน Compose, วิธีใช้ตัวยึดเหตุการณ์และสถานะ และวิธีใช้
ViewModel ใน Compose
- การนำทาง: ดูวิธีใช้
NavController เพื่อผสานรวมคอมโพเนนต์การนำทางกับ UI ของ Compose
- ทรัพยากร: ดูวิธีใช้ทรัพยากรของแอปในโค้ด Compose
- การช่วยเหลือพิเศษ: ดูวิธีทำให้ UI ของ Compose เหมาะสมกับผู้ใช้ที่มีข้อกำหนดด้านการช่วยเหลือพิเศษที่แตกต่างกัน
- การทดสอบ: ดูข้อมูลเกี่ยวกับการทดสอบโค้ด Compose
- ชีตโกงการทดสอบ: ข้อมูลอ้างอิงแบบย่อของ Compose Testing API ที่มีประโยชน์
แหล่งข้อมูลเพิ่มเติม
แนะนำสำหรับคุณ
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-21 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-08-21 UTC"],[],[],null,["# Get started with Jetpack Compose\n\nJetpack Compose is the modern toolkit for building native Android UI. Here's\nwhere you'll find the latest information about using Compose.\n\n- [Overview](/develop/ui/compose): See all the resources available to Compose developers.\n- [Tutorial](/develop/ui/compose/tutorial): Get started with Compose, by using it to build a simple UI.\n- [Quick Guides](/quick-guides): **New!** Try out our fast and focused guides, designed to get you to your goal as quickly as possible.\n\nFoundation\n----------\n\n- [Thinking in Compose](/develop/ui/compose/mental-model): Learn how Compose's declarative approach is different from the view-based approach you may have used in the past, and how to build a mental model of working with Compose.\n- [Managing state](/develop/ui/compose/state): Learn about setting and using state in your Compose app.\n- [Lifecycle of composables](/develop/ui/compose/lifecycle): Learn about the lifecycle of a composable, and how Compose decides if it needs to be redrawn.\n- [Modifiers](/develop/ui/compose/modifiers): Learn how to use modifiers to augment or decorate your composables.\n- [Side-effects in Compose](/develop/ui/compose/side-effects): Learn the best ways to manage side-effects.\n- [Jetpack Compose Phases](/develop/ui/compose/phases): Learn about the steps Compose goes through to render your UI, and how to use that information to write efficient code\n- [Architectural layering](/develop/ui/compose/layering): Learn about the architectural layers that make up Jetpack Compose, and the core principles that informed its design.\n- [Performance](/develop/ui/compose/performance): Learn how to avoid the common programming pitfalls that can hurt your app's performance.\n- [Semantics in Compose](/develop/ui/compose/semantics): Learn about the Semantics tree, which organizes your UI in a way that can be used by accessibility services and the testing framework.\n- [Locally scoped data with CompositionLocal](/develop/ui/compose/compositionlocal): Learn how to use `CompositionLocal` to pass data through the Composition.\n\nDevelopment environment\n-----------------------\n\n- [Android Studio with Compose](/develop/ui/compose/setup): Set up your development environment to use Compose.\n- [Tooling for Compose](/develop/ui/compose/tooling): Learn about Android Studio's new features to support Compose.\n- [Kotlin for Compose](/develop/ui/compose/kotlin): Learn how certain Kotlin-specific idioms work with Compose.\n- [Compare Compose and View metrics](/develop/ui/compose/migrate/compare-metrics): Learn how migrating to Compose can affect your app's APK size and runtime performance.\n- [Bill of Materials](/develop/ui/compose/bom): Manage all your Compose dependencies by specifying only the BOM's version.\n\nDesign\n------\n\n- [Layouts](/develop/ui/compose/layouts): Learn about Compose's native layout components, and how to design your own.\n - [Layout basics](/develop/ui/compose/layouts/basics): Learn about the building blocks for a straightforward app UI.\n - [Material Components and layouts](/develop/ui/compose/components): Learn about Material components and layouts in Compose.\n - [Custom layouts](/develop/ui/compose/layouts/custom): Learn how to take control of your app's layout, and how to design a custom layout of your own.\n - [Support different display sizes](/develop/ui/compose/layouts/adaptive/support-different-display-sizes): Learn how to use Compose to build layouts that adapt to different display sizes, orientations, and form factors.\n - [Alignment lines](/develop/ui/compose/layouts/alignment-lines): Learn how to create custom alignment lines to precisely align and position your UI elements.\n - [Intrinsic measurements](/develop/ui/compose/layouts/intrinsic-measurements): Since Compose only allows you to measure UI elements once per pass, this page explains how to query for information about child elements before measuring them.\n - [ConstraintLayout](/develop/ui/compose/layouts/constraintlayout): Learn how to use `ConstraintLayout` in your Compose UI.\n- [Design Systems](/develop/ui/compose/designsystems): Learn how to implement a design system and give your app a consistent look and feel.\n - [Material Design 3](/develop/ui/compose/designsystems/material3): Learn how to implement Material You with Compose's implementation of [Material Design 3](https://m3.material.io/).\n - [Migrating from Material 2 to Material 3](/develop/ui/compose/designsystems/material2-material3): Learn how to migrate your app from Material Design 2 to Material Design 3 in Compose.\n - [Material Design 2](/develop/ui/compose/designsystems/material): Learn how to customize Compose's implementation of [Material Design 2](https://material.io/) to fit your product's brand.\n - [Custom design systems](/develop/ui/compose/designsystems/custom): Learn how to implement a custom design system in Compose, and how to adapt existing Material Design composables to handle this.\n - [Anatomy of a theme](/develop/ui/compose/designsystems/anatomy): Learn about the lower-level constructs and APIs used by `MaterialTheme` and custom design systems.\n- [Lists and grids](/develop/ui/compose/lists): Learn about some of Compose's options for managing and displaying lists and grids of data.\n- [Text](/develop/ui/compose/text): Learn about Compose's main options for displaying and editing text.\n- [Graphics](/develop/ui/compose/graphics): Learn about Compose's features for building and working with custom graphics.\n- [Animation](/develop/ui/compose/animation/introduction): Learn about Compose's different options for animating your UI elements.\n- [Gestures](/develop/ui/compose/touch-input/pointer-input): Learn how to build a Compose UI that detects and interacts with user gestures.\n- [Handling user interactions](/develop/ui/compose/touch-input/user-interactions/handling-interactions): Learn how Compose abstracts low-level input into higher-level interactions, so you can customize how your components respond to user actions.\n\nAdopting Compose\n----------------\n\n- [Migrate existing View-based apps](/develop/ui/compose/migrate): Learn how to migrate your existing View-based app to Compose.\n - [Migration strategy](/develop/ui/compose/migrate/strategy): Learn the strategy to safely and incrementally introduce Compose into your codebase.\n - [Interoperability APIs](/develop/ui/compose/migrate/interoperability-apis): Learn about Compose's APIs to help you combine Compose with View-based UI.\n - [Other considerations](/develop/ui/compose/migrate/other-considerations): Learn about other considerations like theming, architecture, and testing while migrating your View-based app to Compose.\n- [Compose and other libraries](/develop/ui/compose/libraries): Learn how to use view-based libraries in your Compose content.\n- [Compose architecture](/develop/ui/compose/architecture): Learn how to implement the unidirectional flow pattern in Compose, how to implement events and state holders, and how to work with `ViewModel` in Compose.\n- [Navigation](/develop/ui/compose/navigation): Learn how to use `NavController` to integrate the Navigation component with your Compose UI.\n - [Navigation for responsive UIs](/guide/topics/large-screens/navigation-for-responsive-uis): Learn how to design your app's navigation so it adapts to different screen sizes, orientations, and form factors.\n- [Resources](/develop/ui/compose/resources): Learn how to work with your app's resources in your Compose code.\n- [Accessibility](/develop/ui/compose/accessibility): Learn how to make your Compose UI suitable for users with different accessibility requirements.\n- [Testing](/develop/ui/compose/testing): Learn about testing your Compose code.\n - [Testing cheat sheet](/develop/ui/compose/testing-cheatsheet): A quick reference of useful Compose testing APIs.\n\nAdditional resources\n--------------------\n\n- [Get setup](/develop/ui/compose/setup)\n- [Curated learning pathway](/courses/pathways/compose)\n- [Compose API guidelines](https://android.googlesource.com/platform/frameworks/support/+/androidx-main/compose/docs/compose-api-guidelines.md)\n- [API reference](/reference/kotlin/androidx/compose)\n- [Codelabs](https://goo.gle/compose-codelabs)\n- [Sample apps](https://github.com/android/compose-samples)\n- [Videos](https://www.youtube.com/user/androiddevelopers/search?query=%23jetpackcompose)\n\nRecommended for you\n-------------------\n\n- Note: link text is displayed when JavaScript is off\n- [Locally scoped data with CompositionLocal](/develop/ui/compose/compositionlocal)\n- [Other considerations](/develop/ui/compose/migrate/other-considerations)\n- [Anatomy of a theme in Compose](/develop/ui/compose/designsystems/anatomy)"]]
