آموزش B4A – سایز، دقت و تراکم پیکسلی

در این مطلب ابتدا در مورد سایزهای مختلف صفحه نمایش و دقت و تراکم صفحه نمایش صحبت خواهیم کرد و سپس مثالی در مورد این سه معیار خواهیم زد.

سایزهای صفحه نمایش متفاوت زیادی وجود دارند که دقت و تراکم پیکسل متفاوتی دارند. خیلی از ماها از این سه معیار بسیار استفاده می کنیم اما بعضی از ما تفاوت این سه معیار را نمی دانیم که در اینجا تفاوت این سه معیار را خواهم گفت.

  • سایز فیزیکی صفحه مثلا ۳٫۶″ diagonal
  • دقت صفحه به پیکسل مثلا ۳۲۰/۴۸۰
  • تراکم صفحه پیکسل بر اینچ مثلا ۱۶۰

صفحه نمایش استاندارد ۳۲۰ در ۴۸۰ پیکسل و تراکم ۱۶۰ پیکسل بر اینچ است. صفحه نمایش هایی هم هستند که سایز فیزیکی یکسانی دارند اما از نظر دقت صفحه نمایش با هم فرق دارند به عنوان مثال ۴۸۰ در ۶۴۰ پیکسل با تراکم ۲۴۰ پیکسل بر اینچ.

تبلت ها سایز فیزیکی بیشتری دارند اما می توانند تراکم مشابه با صفحه های استاندارد داشته باشند مثلا ۷٫۲″ ، ۶۴۰ در ۹۶۰ پیکسل و تراکم ۱۶۰ پیکسل بر اینچ.

در زیر لیستی از سایز صفحات مختلف با دقت و تراکم مختلف را میبینید:

Capture21

حال می خواهیم دقت صفحات را با هم مقایسه کنیم

  1. ۳۲۰/۴۸۰      ۳٫۵″      تراکم ۱۶۰
  2. ۴۸۰/۸۰۰      ۳٫۵″      تراکم ۲۴۰
  3. ۶۴۰/۹۶۰      ۳٫۵″      تراکم ۳۲۰
  4. ۶۴۰/۹۶۰      ۷″         تراکم ۱۶۰

مورد ۱ و ۲ و ۳ سایز فیزیکی یکسانی دارند اما تراکم پیکسلی آن ها با هم فرق دارد. مورد ۱ و ۴ تراکم یکسانی دارند اما سایز فیزیکی متفاوتی دارند که مورد ۴ تقریبا ۲برابر مورد اول است.

واحد dip که در کدهای خودمان استفاده می کردیم مخفف density independent pixel می باشد. حال می خواهیم یک مثالی بزنیم که ببینیم layout ما در سه صفحه مختلف چگونه نمایش داده می شود و چه محدودیت هایی دارد. دقت های صفحه نمایشی را که می خواهیم امتحان کنیم به صورت زیر است:

  1. ۲۴۰/۳۲۰     تراکم ۱۲۰     H/W ratio 4/3     پیکسل ارتفاع معادل ۳۶۰     اختلاف پیکسل -۴۰
  2. ۳۲۰/۴۸۰     تراکم ۱۶۰     H/W ratio 3/2     پیکسل ارتفاع معادل ۴۸۰     اختلاف پیکسل ۰
  3. ۴۸۰/۸۰۰     تراکم ۲۴۰     H/W ratio 5/3     پیکسل ارتفاع معادل ۷۲۰     اختلاف پیکسل +۸۰

برای اینکه با مطلب همراه باشید سورس برنامه را از اینجا می توانید دانلود کنید. صفحه نمایش مرجع ما مورد دوم است که می خواهیم با مورد اول و سوم مقایسه کنیم و مشکل محدودیتهای نمایش layout را حل کنیم. منظور از ستون آخر این است که اگر از یک layout برای سه صفحه نمایش استفاده کنیم و چون مرجع ما مورد دوم است پس صفحه مورد اول ۴۰ پیکسل کم دارد و مورد سوم ۸۰ پیکسل اضافه نسبت به مورد دوم دارد.

برای تست این قضیه ما نیاز به سه emulator داریم با سایزهایی که در بالا داده شده است. در زیر کد برنامه را مشاهده می کنید که چندتا از خط کدها را comment کردیم تا ببینیم در این وضعیت layout ما چجوری نمایش داده می شود.

Capture22

اگر برنامه را اجرا کنیم و با سه emulator مختلف تست کنیم تصویر زیر نمایان می شود.

Capture23

با توجه به تصویر بالا ما به این نتایج می رسیم:

  • با دقت صفحه نمایش استاندارد تصویر کاملا برابر با layout ما است.
  • با دقت ۲۴۰ در ۳۲۰ شاهد کمبود ۴۰ پیکسل از تصویر هستیم.
  • با دقت ۴۸۰ در ۸۰۰ شاهد اضافه بودن ۸۰ پیکسل در تصویر هستیم.

حال با از comment درآوردن چند خط کد تست می کنیم تا ببینیم وضعیت به چه شکل خواهد شد.

Capture24

 بعد از اعمال تغییرات در تصویر بالا شاهد این تغییرات هستیم:

  • تصویر وسط که سایز استاندارد است کل layout ما را به درستی نمایش داده است.
  • تصویر سمت راست که برای سایز ۲۴۰ در ۳۲۰ است همانطور که میبینید دکمه ها کامل افتادن اما ارتفاع لیست ما کم شده است
  • در تصویر سمت چپ که مربوط به سایز ۴۸۰ در ۸۰۰ است ارتفاع مربوط به لیست افزایش پیدا کرده است و به جای نمایش ۶ آیتم ۷ آیتم را نمایش می دهد.

همانطور که مشاهده کردید layout در سه سایز مختلف به درستی نمایش داده شده است اما تعداد آیتم های لیست تغییر کرده است. با مقایسه این تصاویر با تصاویر قبل می بینید که ساختن یک layout برای سایزها و دقت های مختلف صفحه نمایش کار سختی است.

سیستم مقایس خودکار سیستم عامل اندروید با توجه به فاکتورهای مقیاس مقادیر left,top, width, height, fontsize و دیگر ویژگی ها را تنظیم می کند اما متناسب با ارتفاع صفحه، موقعیت افقی و عمودی را تغییر اندازه نمی دهد.

یک سری توابع خاصی وجود دارد که می توانند سایزها را متناسب با دقت و سایز صفحه نمایش تطبیق دهد.

PerXToCurrent و PerYToCurrent یا ۵۰%x

PerXToCurrent(50) به معنی این است که به اندازه ۵۰ درصد عرض activity باشد. که می توان به طور خلاصه ۵۰%x نوشت که برابر است با Acitvity.Width * 0.5 .

PerYToCurrent(30) به معنی ۳۰ درصد ارتفاع activity است که به طور خلاصه می توان نوشت: ۳۰%y که برابر است با Activity.Height * 0.3 .

به این نکته توجه داشته باشید که ویو به اندازه ارتفاع و عرض والد خود سایز می گیرد یعنی اینکه اگر دکمه ای در داخل یک پنل باشد به اندازه ۵۰ درصد  width پنل عرض و ۳۰ درصد height پنل ارتفاع می گیرد.

DipToCurrent

DipToCurrent اندازه را با توجه به مقیاس صفحه جاری محاسبه می کند. به عنوان مثال اگر بنویسیم DipToCurrent(50) یا ۵۰dip برابر است با ۵۰ * DeviceScale. اگر بخواهیم دکمه ای داشته باشیم که سایز ۵۰ در ۵۰ پیکسل مقیاس استاندارد داشته باشد باید به این صورت تعریف شود:

Button1.Width= 50dip

Button1.Height= 50dip

با توجه به مقدار مقیاس، سایز دکمه ما تغییر می کند به عنوان مثال اگر مقیاس صفحه ۱ باشد دکمه ما ۵۰ در ۵۰ می شود و اگر مقیاس صفحه ۱٫۵ باشد سایز دکمه ما ۷۵ در ۷۵ خواهد شد.

در مطلب بعد در مورد سایزهای مختلف صفحه نمایش و استفاده از layout های مختلف صحبت خواهیم کرد.

مشترک خبرنامه شوید

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

نقش مدیر تضمین کیفیت

نقش مدیر تضمین کیفیت در چابک چیست؟ آیا ما واقعا ...

چگونه وارد کار تست ن

مثل همه ی کارها، کار تست نرم افزار و انتخاب ...

ابزارهای مفید برای ت

امروزه افراد زیادی هستند که از موبایل خود برای وبگردی ...

BDD Best Practice

معرفی BDD BDD یا توسعه رفتار محور یک متدولوژی است برای ...

Agile Test Strategy

در محیط چابک یا agile، جایی که ما روی اسپرینت ...