تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
إنّ وحدات البكسل غير المرتبطة بالكثافة (dp) ووحدات البكسل القابلة للتوسّع (sp) ضرورية ل
إنشاء تنسيقات وعرض خطوط تستجيب بشكلٍ موحّد للمجموعة الواسعة
من كثافات الشاشة وفئات الحجم وأشكال الأجهزة ونسب العرض إلى الارتفاع التي تشكّل
أجهزة Android.
الخلاصات
إذا كنت تستخدم شبكة أساسية، التزم بالمقاييس 4 و8.
يجب تدوين المواصفات بوحدات dp وsp بدلاً من البكسل.
تصدير الرسومات الممسوحة ضوئيًا/المخطّطة لجميع الحِزم
يجب تصميم المحتوى مع وضع التنسيقات المختلفة في الاعتبار، مثل فئات الحجم ودرجات الدقة و
نسب العرض إلى الارتفاع.
وحدات البكسل المستقلة الكثافة (dp): وحدات البكسل المستقلة الكثافة هي units مرنة
يتم تكبيرها للحصول على أبعاد متّسقة على أي شاشة. وتستند إلى
الكثافة المادية للشاشة. تكون هذه الوحدات نسبية لشاشة بكثافة 160 نقطة لكل بوصة
(نقطة لكل بوصة)، حيث يساوي 1 وحدة بكسل مستقلة الكثافة تقريبًا 1 بكسل.
وحدات البكسل القابلة للتوسّع (sp): تؤدي وحدات البكسل القابلة للتوسّع الوظيفة نفسها التي تؤديها وحدات البكسل غير المرتبطة بالكثافة، ولكن
للخطوط. القيمة التلقائية لـ sp هي نفسها القيمة التلقائية لملف
dp. يحسب نظام Android حجم الخط الفعلي المراد استخدامه استنادًا إلى
الجهاز والإعدادات المفضّلة للمستخدم التي تم ضبطها في تطبيق "الإعدادات" على
جهاز Android.
الشكل 1: كتابة dp مقابل sp
يكمن الاختلاف الأساسي بين وحدتَي القياس في أنّ وحدات البكسل القابلة للتغيير
تحافظ على إعدادات الخط لدى المستخدم. تظهر أحجام الخطوط للمستخدمين الذين ضبطوا إعدادات النص لتكون أكبر من أجل تسهيل الاستخدام مطابقةً لإعدادات حجم النص المفضّلة لديهم. اطّلِع على كيفية
تغيير حجم الخط في ميزة "الإنشاء".
يستخدم نظام التشغيل Android هذه الوحدات للمساعدة في التوسيع والترجمة على مستوى مجموعة
الأجهزة ودرجات الدقة.
حِزم الكثافة
تحتوي الشاشات ذات الكثافة العالية على وحدات بكسل أكثر لكل بوصة مقارنةً بالشاشات ذات الكثافة المنخفضة. نتيجةً لذلك،
تبدو عناصر واجهة المستخدم التي لها أبعاد البكسل نفسها أكبر على الشاشات ذات الكثافة المنخفضة
، وأصغر على الشاشات ذات الكثافة العالية. لهذا السبب، يجب عدم إدخال
القياسات بالبكسل.
يُجمِّع نظام التشغيل Android نطاقات كثافة الشاشة في "مجموعات" ويستخدمها ل
عرض المجموعة المثلى من مواد العرض على جهازك. إنّ مجموعات الكثافة
الأكثر استخدامًا هي mdpi وhdpi وxhdpi وxxhdpi وxxxhdpi (يشيرnodpi و
anydpi إلى مجموعة لا يتم توسيعها حسب درجة دقة الجهاز، وعادةً ما يتم استخدامها
لعناصر الرسم المتجه)، ويتوافق كل منها مع ملف موارد في تطبيقك.
الشكل 2: شمام حفلة بكثافات مختلفة
لاحتساب dp:
dp = (العرض بالبكسل * 160) / كثافة الشاشة
الشبكات
شبكة الإعلانات الأساسية
يساعد استخدام شبكة أساسية في إنشاء مسافات وموضع متسقين
في واجهة المستخدم. تستخدِم واجهة مستخدم Android شبكة بكثافة 8 dp للتخطيط والمكوّنات والتباعد.
الفيديو 1: عرض شبكة بكثافة 8 dp مع تمييز الزيادة بمقدار 8 dp
إنّ العناصر الأصغر حجمًا، مثل الأيقونات والنص وبعض العناصر ضمن المكوّنات، تتم alinment
بأفضل شكل مع شبكة 4 dp.
الشكل 3: تُعدّ الشبكات التي تبلغ دقتها 8 نقاط تناسب معظم عناصر واجهة المستخدم، في حين أنّه
تُعدّ الشبكة التي تبلغ دقتها 4 نقاط تناسب العناصر الأصغر حجمًا، مثل الرموز.
شبكة الأعمدة
تُنشئ الأعمدة بنية شبكة لتوفير تعريف عمودي للتخطيط من خلال
تقسيم المحتوى ضمن منطقة النص. يتم وضع المحتوى في مناطق
الشاشة التي تحتوي على أعمدة. يجب محاذاة العناصر مع شبكة أساسية لمحاذاة المحتوى، مع الحفاظ على حجم مرن. تعرَّف على أساسيات كيفية إعداد شبكة أعمدة وتطبيق المحتوى في أساسيات التنسيق.
الشكل 4: شبكة من أربعة أعمدة
اطّلِع على صفحة التنسيقات الأساسية في Material 3 للحصول على تفاصيل حول
إنشاء تصاميم مرنة على جميع أشكال الأجهزة.
فئات الحجم
فئات حجم النوافذ هي مجموعة من نقاط التوقف لإطار العرض التي تستند إلى آراء تساعدك في
تصميم تنسيقات التطبيقات السريعة الاستجابة والمتكيّفة وتطويرها واختبارها. قسّم نظام Android
فئات أحجام النوافذ إلى 3 فئات: مدمجة ومتوسطة وموسّعة. اطّلِع على مزيد من المعلومات حول
فئات أحجام النوافذ.
نِسب العرض إلى الارتفاع
نسبة العرض إلى الارتفاع هي نسبة عرض العنصر إلى ارتفاعه. تتم كتابة نسب
العرض إلى الارتفاع على النحو التالي: العرض:الارتفاع.
للحفاظ على اتساق التنسيق، استخدِم نسبة عرض إلى ارتفاع متّسقة في
العناصر، مثل الصور والمساحات وحجم الشاشة.
ننصحك باستخدام نسب العرض إلى الارتفاع التالية في واجهة المستخدم:
16:9
3:2
4:3
1:1
3:4
2:3
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Grids and units\n\nDensity independent pixels (dp) and scalable pixels (sp) are essential for\nbuilding layouts and presenting fonts that respond uniformly to the wide range\nof screen densities, size classes, form factors, and aspect ratios that make up\nAndroid devices.\n\nTakeaways\n---------\n\n- If using a baseline grid, stick to measurements of 4 and 8.\n- Notate specs in dp and sp, instead of pixels.\n- Export bitmap/raster graphics for all buckets.\n- Design with a responsive mindset with different size classes, resolutions, and aspect ratios in mind.\n- **Density-independent pixels (dp)**: density-independent pixels are flexible units that scale to have uniform dimensions on any screen. They are based on the physical density of the screen. These units are relative to a 160 dpi (dots per inch) screen, on which 1 dp is roughly equal to 1 px.\n- **Scalable pixels (sp)**: Scalable pixels serve the same function as dp, but for fonts. The default value of an sp is the same as the default value for a dp. The Android system calculates the actual font size to use based on the device and the user's preference set in the Settings app of their Android device.\n\n| **Important:** Always specify font sizes in sp units or scalable pixels.\n**Figure 1:** Notating dp versus sp\n\nThe primary difference between these units of measurement is that scalable\npixels preserve a user's font settings. Users who have larger text settings for\naccessibility see font sizes match their text size preferences. See how to\n[change font size](/jetpack/compose/text#changing-size) in Compose.\n\nAndroid uses these units to help scale and translate across the range of\ndevices and resolutions.\n\nDensity buckets\n---------------\n\nHigh-density screens have more pixels per inch than low-density ones. As a\nresult, UI elements of the same pixel dimensions appear larger on low-density\nscreens, and smaller on high-density screens. This is why you should not declare\nmeasurements in pixels.\n\nAndroid groups ranges of screen densities into \"buckets\" and uses them to\ndeliver the optimal set of assets to your device. The most commonly used density\nbuckets are `mdpi`, `hdpi`, `xhdpi`, `xxhdpi`, and `xxxhdpi` (`nodpi` and\n`anydpi` refer to a bucket that does not scale per device resolution, typically\nused for vector drawables) each correspond to a resource file of your app.\n**Figure 2:** Party cantaloupe in their respective densities\n\nTo calculate dp:\n\ndp = (width in pixels \\* 160) / screen density\n\nGrids\n-----\n\n### Baseline grid\n\nBuilding with an underlying grid helps create consistent spacing and alignment\nacross your UI. Android UI utilizes an 8 dp grid for layout, components, and\nspacing. \nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the video](/images/XXXXX) and watch it with a video player. **Video 1:** Showing an 8 dp grid highlighting 8 dp increments\n\nSmaller elements such as icons, type, and some elements within components are\nbest aligned to a 4 dp grid.\n**Figure 3:** 8-dp grids are ideal for most UI elements, while a 4-dp grid is better for smaller elements such as icons\n\n### Column grid\n\nColumns build a grid structure to provide vertical definition to a layout by\ndividing content within the body area. Content is placed in the areas of the\nscreen that contain columns. Align with an underlying grid to align content, but\nshould keep flexible sizing. Learn the basics on how to set up a column grid and\napply content in [Layout basics](/design/ui/mobile/guides/layout-and-content/layout-basics).\n**Figure 4:** Four-column grid\n\nCheck out the Material 3 [Canonical layouts](https://m3.material.io/foundations/layout/canonical-layouts/overview) page for details on\ncreating flexible layouts across form factors.\n\nSize classes\n------------\n\nWindow size classes are a set of opinionated viewport breakpoints that help you\ndesign, develop, and test responsive and adaptive application layouts. Android\nbreaks window size classes into 3: Compact, Medium, and Expanded. Read more on\n[Window size classes](/develop/ui/compose/layouts/adaptive/window-size-classes).\n\n### Aspect ratios\n\nAn aspect ratio is the proportion of an element's width to its height. Aspect\nratios are written as width:height.\n\nTo maintain consistency in your layout, use a consistent aspect ratio on\nelements like images, surfaces, and screen size.\n\nThe following aspect ratios are recommended for use across your UI:\n\n- 16:9\n- 3:2\n- 4:3\n- 1:1\n- 3:4\n- 2:3"]]
