بدء استخدام Jetpack Compose
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
Jetpack Compose هي مجموعة الأدوات الحديثة لإنشاء واجهة مستخدم Android الأصلية. يمكنك الاطّلاع على أحدث المعلومات حول استخدام Compose من خلال الرابط أدناه.
- نظرة عامة: اطّلِع على جميع المراجع المتاحة لمطوّري Compose.
- برنامج تعليمي: يمكنك البدء باستخدام Compose لإنشاء واجهة مستخدم بسيطة.
- الأدلة السريعة: ميزة جديدة جرِّب أدلتنا السريعة والموجزة المصمّمة لمساعدتك في تحقيق هدفك في أسرع وقت ممكن.
المؤسسة
- التفكير في Compose: تعرَّف على كيفية اختلاف أسلوب Compose التصريحي عن الأسلوب المستند إلى العرض الذي ربما استخدمته في الماضي، وكيفية إنشاء نموذج ذهني للعمل باستخدام Compose.
- إدارة الحالة: تعرَّف على كيفية ضبط الحالة واستخدامها في تطبيق Compose.
- دورة حياة العناصر القابلة للإنشاء: تعرَّف على دورة حياة العناصر القابلة للإنشاء وكيفية تحديد Compose ما إذا كان يجب إعادة رسمها.
- المعدِّلات: تعرَّف على كيفية استخدام المعدِّلات لتحسين العناصر القابلة للإنشاء أو تزيينها.
- الآثار الجانبية في Compose: تعرَّف على أفضل الطرق لإدارة الآثار الجانبية.
- مراحل Jetpack Compose: تعرَّف على الخطوات التي تتّبعها Compose لعرض واجهة المستخدم، وكيفية استخدام هذه المعلومات لكتابة تعليمات برمجية فعّالة.
- التقسيم إلى طبقات معمارية: تعرَّف على الطبقات المعمارية التي تتكوّن منها Jetpack Compose، والمبادئ الأساسية التي استند إليها تصميمها.
- الأداء: تعرَّف على كيفية تجنُّب أخطاء البرمجة الشائعة التي يمكن أن تؤثر سلبًا في أداء تطبيقك.
- الدلالات في Compose: تعرَّف على شجرة الدلالات التي تنظّم واجهة المستخدم بطريقة يمكن أن تستخدمها خدمات تسهيل الاستخدام وإطار الاختبار.
- البيانات ذات النطاق المحلي باستخدام CompositionLocal: تعرَّف على كيفية استخدام
CompositionLocal
لتمرير البيانات من خلال Composition.
بيئة التطوير
التصميم
- التنسيقات: تعرَّف على مكوّنات التنسيق الأصلية في Compose وكيفية تصميم تنسيقاتك الخاصة.
- أساسيات التصميم: تعرَّف على الوحدات الأساسية لواجهة مستخدم بسيطة للتطبيق.
- مكوّنات وتنسيقات Material: تعرَّف على مكوّنات وتنسيقات Material في Compose.
- التصاميم المخصّصة: تعرَّف على كيفية التحكّم في تصميم تطبيقك وكيفية تصميم تصميم مخصّص خاص بك.
- إتاحة أحجام عرض مختلفة: تعرَّف على كيفية استخدام Compose لإنشاء تخطيطات تتكيّف مع أحجام العرض والاتجاهات وعوامل الشكل المختلفة.
- خطوط المحاذاة: تعرَّف على كيفية إنشاء خطوط محاذاة مخصّصة لمحاذاة عناصر واجهة المستخدم وتحديد موضعها بدقة.
- القياسات الجوهرية: بما أنّ Compose لا يسمح لك بقياس عناصر واجهة المستخدم إلا مرة واحدة لكل عملية تمرير، توضّح هذه الصفحة كيفية طلب معلومات عن العناصر الفرعية قبل قياسها.
- ConstraintLayout: تعرَّف على كيفية استخدام
ConstraintLayout
في واجهة مستخدم Compose.
- أنظمة التصميم: تعرَّف على كيفية تنفيذ نظام تصميم ومنح تطبيقك مظهرًا وأسلوبًا متسقَين.
- القوائم والجداول: تعرَّف على بعض خيارات Compose لإدارة قوائم وجداول البيانات وعرضها.
- النص: تعرَّف على الخيارات الرئيسية في "الكتابة الذكية" لعرض النص وتعديله.
- الرسومات: تعرَّف على ميزات Compose لإنشاء رسومات مخصّصة والعمل عليها.
- الحركة: تعرَّف على خيارات Compose المختلفة لإضافة حركة إلى عناصر واجهة المستخدم.
- الإيماءات: تعرَّف على كيفية إنشاء واجهة مستخدم Compose ترصد إيماءات المستخدمين وتتفاعل معها.
- التعامل مع تفاعلات المستخدمين: تعرَّف على كيفية تجريد Compose لعمليات الإدخال المنخفضة المستوى إلى تفاعلات أعلى مستوى، ما يتيح لك تخصيص طريقة استجابة مكوّناتك لإجراءات المستخدمين.
اعتماد Compose
- نقل التطبيقات الحالية المستندة إلى View: تعرَّف على كيفية نقل تطبيقك الحالي المستند إلى View إلى Compose.
- استراتيجية نقل البيانات: تعرَّف على الاستراتيجية اللازمة لإضافة Compose بأمان وتدريجيًا إلى قاعدة الرموز البرمجية.
- واجهات برمجة التطبيقات الخاصة بالتوافق: تعرَّف على واجهات برمجة التطبيقات في Compose التي تساعدك في دمج Compose مع واجهة المستخدم المستندة إلى View.
- اعتبارات أخرى: تعرَّف على اعتبارات أخرى، مثل اختيار المظهر والبنية والاختبار أثناء نقل تطبيقك المستند إلى View إلى Compose.
- Compose والمكتبات الأخرى: تعرَّف على كيفية استخدام المكتبات المستندة إلى طرق العرض في محتوى Compose.
- بنية Compose: تعرَّف على كيفية تنفيذ نمط التدفق أحادي الاتجاه في Compose، وكيفية تنفيذ الأحداث وحاويات الحالة، وكيفية استخدام
ViewModel
في Compose.
- التنقل: تعرَّف على كيفية استخدام
NavController
لدمج مكوّن التنقل مع واجهة مستخدم Compose.
- الموارد: تعرَّف على كيفية استخدام موارد تطبيقك في رمز Compose.
- إمكانية الوصول: تعرَّف على كيفية جعل واجهة Compose UI مناسبة للمستخدمين الذين لديهم متطلبات مختلفة بشأن إمكانية الوصول.
- الاختبار: يمكنك الاطّلاع على معلومات حول اختبار رمز Compose.
مراجع إضافية
أفلام مُقترَحة لك
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-21 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["Jetpack 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- [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- [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- [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- [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- [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- 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)"]]