تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تركّز طرق العرض غير القابلة للتمرير على المعلومات التي يمكن الاطّلاع عليها بسرعة، وتوفّر للمستخدمين قيمة من خلال تفاعل بسيط أو بدون أي تفاعل. لهذا السبب، قد يكون من الصعب إنشاء سلوك متجاوب في هذه التنسيقات.
مكوّنات التنسيق الثابتة غير القابلة للتمرير
مربّع حوار
مربّع الحوار هو تراكب مؤقت يشغل الشاشة بأكملها. ويتيح للمستخدمين
تنفيذ إجراء واحد.
يُرجى مراعاة النقاط التالية:
تساعدك مربّعات الحوار في التركيز على التحقّق من معالجة محتواها.
يجب أن تكون مربّعات الحوار مباشرة في نقل المعلومات ومخصّصة لإكمال مهمة.
يجب أن تظهر مربّعات الحوار استجابةً لمهمة أو إجراء يتخذه المستخدم، مع عرض معلومات ذات صلة أو معلومات سياقية.
تراكب التأكيد
تعرض طبقة التأكيد رسالة تأكيد للمستخدم لفترة قصيرة. استخدِم هذا المكوّن لجذب انتباه المستخدم بعد تنفيذ إجراء.
فتح على الهاتف
يتم تشغيل التراكب "فتح على الهاتف" عندما يختار المستخدم مواصلة رحلته على الهاتف. يتضمّن التراكب مؤشرًا للتقدّم ويُعلم المستخدم بموعد التحقّق من هاتفه.
Stepper
توفّر أدوات التحكّم في الخطوات تجربة تحكّم بملء الشاشة تتيح للمستخدمين إجراء اختيار من نطاق من القيم. ويمكنهم التحكّم في التفاعل باستخدام الأزرار أو التاج، ويتم عرض المستوى المحدّد باستخدام مؤشر مستوى منحني.
منتقى الوقت
تتيح أدوات الاختيار للمستخدمين الاختيار من بين عدد محدود من العناصر في أقسام قابلة للتمرير.
يحتوي أداة اختيار الوقت على ثلاثة أعمدة كحد أقصى، وذلك حسب ما إذا كانت الثواني متاحة أو إذا كان تنسيق الوقت 12 ساعة أو 24 ساعة. يتفاعل المستخدمون مع كل عمود على حدة، ويتم الاختيار من خلال ترك الرقم في التركيز قبل المتابعة.
منتقى التاريخ
تتيح أدوات الاختيار للمستخدمين الاختيار من بين عدد محدود من العناصر في أقسام قابلة للتمرير.
يحتوي منتقي التاريخ على ما يصل إلى ثلاثة أعمدة، ويمكن تبديل ترتيبها
بين التاريخ والوقت والسنة، وذلك حسب حالة الاستخدام.
تتطلّب أدوات اختيار التاريخ سلاسل أطول من المحتوى، لذا لا يظهر سوى عمود واحد في كل مرة، ما يقدّم تلميحًا بشأن ما يقع على اليمين أو اليسار. يتفاعل المستخدمون مع كل عمود على حدة، ويختارون الرقم المطلوب من خلال إبقائه في التركيز قبل المتابعة.
أمثلة على التنسيقات المخصّصة غير القابلة للتمرير
لا تقتصر شاشات التطبيقات غير القابلة للتمرير على المكوّنات المحدّدة. يمكنك الجمع بين مجموعة من العناصر لإنشاء التنسيق الذي تريده.
يجب الانتباه إلى المساحة المحدودة على الشاشة غير القابلة للتمرير واستخدام الهوامش والحشو المتجاوبَين (النسبة المئوية) للاستفادة من مساحة الشاشة المتاحة. يمكنك أيضًا التفكير في تطبيق نقطة توقّف عند 225 وحدة بكسل مستقلة عن الكثافة لعرض محتوى إضافي أو جعل المحتوى الحالي أسهل في التصفّح على أحجام الشاشات الأكبر.
Maps
تراكب الطوارئ
تنبيه طوارئ
السلوك المتجاوب والتكيّفي
تتكيّف جميع المكوّنات في مكتبة Compose تلقائيًا مع حجم الشاشة الأكبر، وتزداد مساحتها عرضًا وارتفاعًا. بالنسبة إلى طرق العرض هذه تحديدًا، يمكن أن يؤدي استخدام نقاط التوقف إلى توفير تجربة غنية ومفيدة لجميع المستخدمين.
بالنسبة إلى العديد من الأزرار والبطاقات والهوامش في واجهة المستخدم، يمكنك توسيعها وملء المساحة المتاحة بأحجام شاشات مختلفة للاستفادة من المساحة المتاحة على واجهة المستخدم، بالإضافة إلى إنشاء تخطيط متوازن.
استخدِم قائمة التحقّق التالية للتأكّد من تحديد المَعلمات المتجاوبة بشكل صحيح:
إنشاء تخطيطات مرنة تبدو مناسبة على جميع أحجام الشاشات
طبِّق الهوامش المقترَحة في الأعلى والأسفل والجانبَين.
حدِّد الهوامش كقيم نسبية في الأماكن التي قد يتم فيها اقتصاص المحتوى.
استخدِم قيود التنسيق لكي تستفيد العناصر إلى أقصى حد ممكن من المساحة المتاحة على الشاشة وتحافظ على التوازن بين أحجام الأجهزة المختلفة.
يجب توفير مساحة للنص الزمني إذا تم استخدامه، ولكن بدون التداخل مع القسم العلوي من الصفحة.
ننصحك باستخدام أزرار على الحواف للاستفادة من المساحة المحدودة بشكل أكبر.
ننصحك بتطبيق نقطة توقّف عند 225 وحدة بكسل مستقلة عن الكثافة لعرض محتوى إضافي أو
تسهيل إلقاء نظرة سريعة على المحتوى الحالي عند استخدام أحجام شاشات أكبر.
رحلات صفحات متعدّدة لا تتضمّن تمريرًا باستخدام تقسيم الصفحات
في الحالات التي تتطلّب فيها التجربة المزيد من المحتوى ولكن مع الحفاظ على تخطيط لا يتضمّن التمرير، ننصحك باستخدام تخطيط متعدّد الصفحات مع تقسيم إلى صفحات عمودية أو أفقية.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-25 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-08-25 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Non-scrolling app layouts\n\nNon-scrolling views focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts.\n\nPreset non-scrolling layout components\n--------------------------------------\n\n### Dialog\n\nA dialog is a transient overlay that occupies the whole screen. It lets users\nperform a single action. \n\n\u003cbr /\u003e\n\n\nConsider the following points:\n\n\u003cbr /\u003e\n\n- Dialogs focus your attention to verify their content is addressed.\n- Dialogs should be direct in communicating information and dedicated to completing a task.\n- Dialogs should appear in response to a user task or an action, with relevant or contextual information. \n\n\u003cbr /\u003e\n\n### Confirmation overlay\n\nThe confirmation overlay displays a confirmation message to the user for a short\nperiod. Use this component to capture the user's attention after an action has\nbeen executed.\n\n\u003cbr /\u003e\n\n### Open on phone\n\nThe open on phone overlay is triggered when the user chooses to continue their\njourney on a phone. The overlay has a progress indicator and tells the user when\nto check their phone.\n\n\u003cbr /\u003e\n\n### Stepper\n\nSteppers provide a full-screen control experience that let users make a\nselection from a range of values. They can control the interaction using the\nbuttons or crown, and the specific level is shown using a curved level\nindicator.\n\n\u003cbr /\u003e\n\n### Time picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Time Picker** has up to three columns, depending on whether seconds are\navailable or if the clock is a 12-hour or 24-hour clock. Users interact with\neach column at a time, making your selection by leaving the number in focus\nbefore continuing.\n\n\u003cbr /\u003e\n\n### Date picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Date Picker** has up to three columns, which have an interchangeable order\nbetween date, time, and year, depending on the use case.\n**Date Pickers** require longer strings of content, so only one column is in\nview at a time, giving a hint of what's to the left or right. Users interact\nwith each column at a time, making their selection by leaving the number in\nfocus before continuing.\n\n\u003cbr /\u003e\n\nCustom non-scrolling layout examples\n------------------------------------\n\nNon-scrolling app screens are not limited to the set components. You can combine\na combination of elements to create the layout you want.\n\nYou should be mindful of the limited space on a non-scrolling screen and the use\nof responsive (percentage) margins and padding to use the available screen\nspace. You can also consider applying a breakpoint at 225dp to introduce\nadditional content or make existing content more glanceable when on bigger\nscreen sizes. \n\n### Maps\n\n\u003cbr /\u003e\n\n### Emergency overlay\n\n\u003cbr /\u003e\n\n### Emergency alert\n\n\u003cbr /\u003e\n\nResponsive and adaptive behavior\n--------------------------------\n\nAll components in the Compose library automatically adapt to the wider screen\nsize and gain width and height. For these views in particular, utilizing\nbreakpoints can deliver a particularly rich and valuable experience for all\nusers.\n\nFor many of your UI's buttons, cards, and margins, stretch and fill the space\nfor different screen sizes to take advantage of the available space on the UI\nand also make for a well-balanced layout.\n\nUse the following checklist to verify that responsive parameters are properly\ndefined:\n\n- Create flexible layouts that look reasonable on all screen sizes.\n- Apply the recommended top, bottom, and side margins.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Utilize layout constraints so that elements make the best possible use of the space within the screen and maintain balance across different device sizes.\n- Accommodate **Time Text** if used, but don't overlap the top section of the page.\n- Consider using edge-hugging buttons to utilize more of the limited space.\n- Consider applying a breakpoint at 225dp to introduce additional content or make existing content more glanceable when on bigger screen sizes.\n\n| **Caution:** A display size shouldn't display less information than ones that are smaller than it. This is especially relevant for custom behaviors added at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less on the larger screens. Screens should show more value, not less, with increasing size.\n\nMultiple non-scrolling page journeys using pagination\n-----------------------------------------------------\n\nIn scenarios where an experience requires more content but wants to retain a\nnon-scrolling layout, consider a multi-page layout with either vertical or\nhorizontal pagination."]]
