شبکه ها و واحدها،شبکه ها و واحدها،شبکه ها و واحدها،شبکه ها و واحدها
با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویت‌های شما.
پیکسل‌های مستقل از چگالی (dp) و پیکسل‌های مقیاس‌پذیر (sp) برای ساخت طرح‌بندی و ارائه فونت‌هایی که به طور یکنواخت به طیف وسیعی از چگالی صفحه، کلاس‌های اندازه، فاکتورهای شکل و نسبت‌های تصویری که دستگاه‌های Android را تشکیل می‌دهند، پاسخ می‌دهند ضروری هستند.
غذای آماده
اگر از یک شبکه پایه استفاده می کنید، به اندازه گیری های 4 و 8 پایبند باشید.
به جای پیکسل، مشخصات را به صورت dp و sp یادداشت کنید.
گرافیک بیت مپ/راستر را برای همه سطل ها صادر کنید.
طراحی با ذهنیت پاسخگو با کلاس های اندازه، وضوح و نسبت ابعاد مختلف در ذهن.
پیکسل‌های مستقل از چگالی (dp) : پیکسل‌های مستقل از چگالی واحدهای انعطاف‌پذیری هستند که برای داشتن ابعاد یکنواخت در هر صفحه‌ای مقیاس می‌شوند. آنها بر اساس تراکم فیزیکی صفحه نمایش هستند. این واحدها نسبت به یک صفحه نمایش 160 dpi (نقطه در اینچ) هستند که در آن 1 dp تقریباً برابر با 1 پیکسل است.
پیکسل های مقیاس پذیر (sp) : پیکسل های مقیاس پذیر همان عملکرد dp را دارند، اما برای فونت ها. مقدار پیش فرض یک sp همان مقدار پیش فرض یک dp است. سیستم اندروید اندازه واقعی فونت را برای استفاده بر اساس دستگاه و تنظیمات برگزیده کاربر در برنامه تنظیمات دستگاه اندرویدی خود محاسبه می کند.
شکل 1: علامت گذاری dp در مقابل sp
تفاوت اصلی بین این واحدهای اندازه گیری این است که پیکسل های مقیاس پذیر تنظیمات فونت کاربر را حفظ می کنند. کاربرانی که تنظیمات نوشتاری بزرگ‌تری برای دسترسی دارند، می‌بینند که اندازه فونت با اولویت‌های اندازه متن مطابقت دارد. نحوه تغییر اندازه فونت در Compose را ببینید.
Android از این واحدها برای کمک به مقیاس‌بندی و ترجمه در طیف وسیعی از دستگاه‌ها و وضوح‌ها استفاده می‌کند.
سطل های تراکم
صفحه نمایش های با تراکم بالا نسبت به صفحه نمایش های کم تراکم پیکسل بیشتری در هر اینچ دارند. در نتیجه، عناصر رابط کاربری با همان ابعاد پیکسل در صفحه‌های با چگالی کم بزرگ‌تر و در صفحه‌های با چگالی بالا کوچکتر به نظر می‌رسند. به همین دلیل است که نباید اندازه گیری ها را به پیکسل اعلام کنید.
Android محدوده‌ای از تراکم صفحه‌نمایش را در «سطل‌ها» گروه‌بندی می‌کند و از آنها برای ارائه مجموعه بهینه از دارایی‌ها به دستگاه شما استفاده می‌کند. متداول ترین سطل های چگالی مورد استفاده mdpi ، hdpi ، xhdpi ، xxhdpi ، و xxxhdpi هستند ( nodpi و anydpi به سطلی اشاره دارد که در هر وضوح دستگاه مقیاس نمی شود، معمولاً برای ترسیم برداری های برداری استفاده می شود) هر کدام با یک فایل منبع برنامه شما مطابقت دارند.
شکل 2: طالبی مهمانی در تراکم مربوطه خود
برای محاسبه dp:
dp = (عرض بر حسب پیکسل * 160) / تراکم صفحه نمایش
شبکه ها
شبکه پایه
ساختن با یک شبکه زیربنایی به ایجاد فاصله و تراز منسجم در UI شما کمک می کند. رابط کاربری اندروید از یک شبکه 8 dp برای چیدمان، اجزا و فاصله استفاده می کند.
ویدئو 1: نمایش یک شبکه 8 dp با افزایش 8 dp
عناصر کوچکتر مانند نمادها، نوع و برخی از عناصر درون کامپوننت ها به بهترین وجه در یک شبکه 4 dp تراز هستند.
شکل 3: شبکه های 8-dp برای اکثر عناصر رابط کاربری ایده آل هستند، در حالی که یک شبکه 4-dp برای عناصر کوچکتر مانند نمادها بهتر است.
شبکه ستونی
ستون‌ها یک ساختار شبکه‌ای می‌سازند تا با تقسیم محتوا در ناحیه بدنه، تعریف عمودی را برای یک طرح ارائه کنند. محتوا در قسمت هایی از صفحه که حاوی ستون است قرار می گیرد. برای تراز کردن محتوا، با یک شبکه زیرین تراز کنید، اما باید اندازه‌بندی انعطاف‌پذیر را حفظ کنید. اصول اولیه نحوه راه‌اندازی یک شبکه ستونی و اعمال محتوا در مبانی Layout را بیاموزید.
شکل 4: شبکه چهار ستونی
برای جزئیات بیشتر در مورد ایجاد طرح‌بندی‌های انعطاف‌پذیر در فاکتورهای فرم، صفحه طرح‌بندی Material 3 Canonical را بررسی کنید.
کلاس های اندازه
کلاس‌های اندازه پنجره مجموعه‌ای از نقاط شکست دیدگاه هستند که به شما در طراحی، توسعه و آزمایش طرح‌بندی برنامه‌های پاسخگو و تطبیقی کمک می‌کنند. Android کلاس های اندازه پنجره را به 3 تقسیم می کند: فشرده، متوسط و گسترده. در مورد کلاس های اندازه پنجره بیشتر بخوانید.
نسبت ابعاد
نسبت ابعاد نسبت عرض یک عنصر به ارتفاع آن است. نسبت ابعاد به صورت عرض: ارتفاع نوشته می شود.
برای حفظ ثبات در چیدمان خود، از یک نسبت تصویر ثابت در عناصری مانند تصاویر، سطوح و اندازه صفحه استفاده کنید.
نسبت ابعاد زیر برای استفاده در UI شما توصیه می شود:
16:9
3:2
4:3
1:1
3:4
2:3
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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"]]
