آموزش اندروید، فصل 16: گرافیک در اندروید (بخش 1)

تا الان برنامه نویسی جاوا و مقدمات برنامه نویسی اندروید، ساختار یک پروژه، چیدمان های خطی و وابسته را آموخته اید و با اکثر View های اندروید آشنا شده اید. در این فصل و چند فصل بعدی درباره طراحی UI برنامه با عناصر گرافیکی مانند عکس و … خواهید آموخت. انتظار این است که با پایان گرفتن این بخش، بتوانید UI های بسیار زیبا را به سادگی بسازید.

در این فصل و فصل های بعد، باید از ابزارهای ویرایش عکس مثل فوتوشاپ یا گیمپ (GIMP) استفاده خواهیم کرد. اگر با نرم افزارهای ویرایش عکس نمی توانید کار کنید، سعی کنید مهارت های خود را در این زمینه افزایش دهید.

تأثیر رزولوشن (تراکم) صفحه بر برنامه ها

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

android-ch16-01-what-is-ppi

(منبع عکس)

مشخص است که هر چه تراکم صفحه بالاتر باشد، کیفیت تصاویر نمایش داده شده بالاتر می رود، اما چه مشکلی برای برنامه ما ایجاد می کند؟ فرض کنید یک عکس دارید به ابعاد 5 * 5 پیکسل. در عکس زیر می بینید که در صفحه نمایش با تراکم بالاتر این عکس کوچکتر دیده خواهد شد:

android-ch16-01-what-is-ppi-2

این روزها تفاوت تراکم پیکسلی در حدی زیاد شده است که نادیده گرفتن این تفاوت، باعث می شود UI برنامه شما به کلی خراب شود.

البته همانطور که قبلاً هم گفتیم، توصیه می شود که در اندروید به جای استفاده از پیکسل، از واحدی به نام dip (که به صورت مخفف dp هم به آن گفته می شود) استفاده کنید. استفاده از dip به جای پیکسل مشکل اندازه را حل می کند اما برای این کار کیفیت خود تصویر قربانی می شود. در این روش عکس سمت راست (گوشی با تراکم بالاتر) 4 برابر بزرگتر می شود تا هم اندازه عکس سمت چپ شود که در این بزرگ شدن، کیفیت عکس به شدت کاهش پیدا می کند. پس راه حل صحیح چیست؟

رزولوشن (تراکم) های اندروید

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

  • ldpi: مخفف low-dpi، به صفحه نمایش هایی اطلاق می شود که تراکم پیکسلی آنها بسیار کم و در حدود 120dpi است.
  • mdpi: مخفف medium-dpi، به صفحه نمایش هایی اطلاق می شود که تراکم پیکسلی آنها متوسط و در حدود 160dpi است.
  • hdpi: مخفف high-dpi، به صفحه نمایش هایی اطلاق می شود که تراکم پیکسلی آنها بالا و در حدود 240dpi است.
  • xhdpi: مخفف extra-high-dpi، به صفحه نمایش هایی اطلاق می شود که تراکم پیکسلی آنها بالا و در حدود 320dpi است.
  • xxhdpi: به صفحه نمایش هایی اطلاق می شود که تراکم پیکسلی آنها بالا و در حدود 480dpi است.
  • xxxhdpi: به صفحه نمایش هایی اطلاق می شود که تراکم پیکسلی آنها بالا و در حدود 640dpi است.

برای درک بهتر عکس زیر را ببینید:

android-ch16-03-screens-ranges

(منبع عکس)

فرض کنید می خواهید از یک عکس در برنامه تان استفاده کنید. اگر به شاخه res پروژه دقت کنید می بینید که چندین شاخه در آن وجود دارد که همگی با نام drawable شروع می شوند:

android-ch16-04-drawable-directories

بهتر است یک نسخه از این عکس را متناسب به تراکم صفحه های متفاوت تولید کنید و هر کدام را در شاخه متناظر قرار دهید. مثلاً عکسی را که برای دستگاه های با تراکم hdpi ساخته اید باید در شاخه drawable-hdpi قرار دهید و …

نکته اصلی این است که همه این عکس ها باید هم اسم باشند.

برای درک بهتر موضوع، عکس زیر را که از شاخه res یک پروژه ساده اندروید گرفته شده است ببینید:

android-ch16-05-put-image-in-different-drawable-dir

همانطور که می بینید، در همه این شاخه ها فایلی به نام ic_launcher.png وجود دارد. در زمان اجرا، سیستم با توجه به رزولوشن (تراکم) صفحه نمایش دستگاه، عکس مربوطه را از یکی از این شاخه ها انتخاب می کند.

ساختن عکس برای رزولوشن های متفاوت

در میان دسته بندی های تراکم صفحه، در تراکم mdpi هر یک پیکسل تقریباً یک dip است. بنابراین معمولاً mdpi مبنای تعیین اندازه عکس برای سایر دسته بندی ها است. فرض کنید می خواهید یک عکس برای نمایش در برنامه بسازید که ابعادی در حدود 100dip در 100dip داشته باشد. از آنجایی که هر dip در تراکم mdpi حدود یک پیکسل است، باید یک عکس 100 پیکسل در 100 پیکسل برای صفحات نمایش با تراکم mdpi بسازید. سایر دسته بندی ها نسبت های مشخصی با mdpi دارند. برای مثال xhdpi تراکمی دو برابر mdpi دارد، بنابراین عکسی که برای صفحات با تراکم xhdpi ساخته می شود، باید 200 پیکسل در 200 پیکسل باشد. نسبت سایر تراکم ها به mdpi به شرح زیر است:

ldpi: از آنجایی که در این تراکم خاص، تعداد پیکسل ها کمتر از mdpi است، عکس ساخته شده باید 75×75 پیکسل باشد. نسبت ldpi به mdpi حدود 0.75 است.

hdpi: تراکم hdpi حدود 2 برابر تراکم ldpi و 1.5 برابر mdpi است. بنابراین عکس ساخته شده باید 150×150 پیکسل باشد.

xhdpi: تراکم xhdpi حدود 2 برابر mdpi است. بنابراین عکس ساخته شده باید 200×200 پیکسل باشد.

xxhdpi: تراکم xxhdpi حدود 3 برابر mdpi است پس عکس ساخته شده باید 300×300 پیکسل باشد.

xxxhdpi: تراکم xxxhdpi حدود 4 برابر mdpi است پس عکس ساخته شده باید 400×400 پیکسل باشد.

عکس زیر به درک این موضوع کمک می کند:

android-ch16-06-different-display-densities

(منبع عکس)

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

نکته: بهتر است ابتدا یک عکس با کیفیت و اندازه بزرگتر (مثلاً مناسب برای تراکم xxhdpi) بسازید و بعد نسخه هایی در ابعاد کوچکتر از آن عکس برای تراکم های دیگر بسازید.

استفاده از Android Asset Studio

همانطور که احتمالاً حدس می زنید، این که از هر عکس یا آیکون برنامه باید چندین نسخه مختلف بسازید، فرایندی سخت و زمانبر است. ولی متأسفانه هنوز فرایندی 100 درصد اتوماتیک برای این کار وجود ندارد. در حال حاضر یک راه حل نسبتاً مناسبی که می تواند تا حد زیادی این فرایند را تسهیل کند، استفاده از ابزاری برخط (آنلاین) است به نام Android Asset Studio.

android-ch16-07-android-asset-studio

مثلاً فرض کنید، می خواهیم یک آیکون بسازیم. تصویر اولیه را در آیکون فایندر جستجو می کنید و آن را در سایز بزرگ دانلود می کنیم:

android-ch16-08-download-icon-from-iconfinder

حالا Android Asset Studio را باز می کنیم و بر روی لینک Generic Icon کلیک می کنیم:

android-ch16-09-android-asset-studio-generic-icon

بر روی دکمه Image کلیک کنید و فایل دانلود شده را انتخاب کنید. سایز مورد نظرتان به dip را وارد کنید. نام فایل خروجی را مشخص کنید و …

android-ch16-10-android-asset-studio-download-result

فایل zip دانلود شده را نافشرده کنید و محتوای آن را دز پروژه خود کپی کنید!


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

استفاده از ImageView و ImageButton

در فصل 14 درباره ImageView و ImageButton مطالب مختصری نوشتم. حالا می خواهیم نگاه دقیقتری به این دو View پر کاربرد بیاندازیم.

عکس زیر را ببینید:

com.hamrahyar.nabzebazaar0

قسمت هایی که در عکس مشخص شده اند، ImageView هستند یا ImageButton. تنها تفاوتی که بین این دو View است، قابل کلیک بودن ImageButton است. اگر عکسی که می خواهید نمایش بدهید، آماده است، کافی است با ویژگی android:src آن را برای ImageView یا ImageButton مشخص کنید:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/some_image"
    ...
    />

در عکس بالا، دکمه های «بیشتر»، ImageButton اند.

استفاده از عکس به عنوان پس زمینه

از عکس ها می توانید به عنوان پس زمینه (background) برای View ها استفاده کنید. فرض کنید می خواهید صفحه ای مثل صفحه زیر بسازید:

beautiful-android-apps-Gogobot-Travel-Guide-1

برای این کار بعد از آماده کردن عکس مورد نظر، به View اصلی صفحه (که معمولاً چیدمانی Linear یا Relative است) یک ویژگی به نام android:background اضافه می کنیم:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/splash_background"
    ...
    />

در یکی دو فصل آینده بیشتر با ویژگی android:background کار خواهیم کرد.

اندروید آیکون پک

گوگل در سایت توسعه دهندگان اندروید، مجموعه ای از آیکونهای مورد نیاز برنامه های اندروید را در اندازه های متناسب با تراکم های مختلف برای دانلود قرار داده است. اکیداً توصیه می کنم از این مجموعه استفاده کنید:

android-actionbar-icon-pack-download

دلایلی که برای استفاده از این آیکونها ذکر می شود یکی استاندارد بودن آنها است و دیگری این که کاربران با آنها آشنا هستند و آنها را با عملکردهای مشابه در برنامه های دیگر هم دیده اند و بنابراین نیازی به آموزش کاربران نیست.

 

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail




51 فکر می‌کنند “آموزش اندروید، فصل 16: گرافیک در اندروید (بخش 1)

  1. مجتبی

    سلام
    دوست عزیز کارتون خیلی عالیه …
    با قدرت ادامه بدین ..
    شاید کسی تشکر نکنه از شما، اما بدونید که دارید خدمت بزرگی به هموطن هاتون می‌کنید
    موفق باشید

    پاسخ
    1. علی بهزادیان نژاد نویسنده

      سپاسگزارم از لطفت آقا مجتبا! با دلگرمی شما دوستان قطعاً توان بیشتری برای ادامه راه به دست می آید! موفق باشید!

      پاسخ
    1. علی بهزادیان نژاد نویسنده

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

      سپاسگزارم.

      پاسخ
  2. مجید

    سلام استاد .این یکی خیلی عالی بود قدم به قدم باشما و مهندس قربان نژاد پیش رفتن خیلی عالیه …تشکر از وقتی که میزارید برای ما دانشجو هاتون

    پاسخ
  3. محمد

    سلام
    برای طراحی گرافیک یک نرم افزار برای سایز پس زمینه برای گوشی های بزرگ چه چند در چند پیکسل باید باشه؟
    محاسبه سایز آیکون ها رو متوجه شدم ولی سایز کل صفحه رو چیکار کنم توی سایز های مختلف؟
    ممنون میشم پاسخ بدید کارم گیره

    پاسخ
    1. علی بهزادیان نژاد نویسنده

      سلام، برای پس زمینه روش های متفاوتی وجود داره. بهترین روش اینه که از یک رنگ ثابت برای پس زمینه استاده کنید و عکس ها را بدون توجه به سایز نمایشگر دستگاه در آن قرار دهید.

      پاسخ
  4. مهرداد

    چرا استاد خدا شما رو اینقدر مفید و گل آفریده مشاا.. بهتون حسودیم شد با این حسن نیت و آموزش بدون چشم داشت.فقط یک کلام مدیونتونیم همه کسایی که داریم آموزش خوب و خواناتون رو میبینیم.دوستتون داریییییییییییم.

    پاسخ
  5. مصطفی شارمی

    سلام آقای بهزادیان نژاد، ممنون از لطفتون
    می‌خواستم بدونم برای اینکه تصویری که تو یک ایمیج ویو نشون می‌دم وابسته به ریزلوشن صفحه نباشه چیکار باید بکنم. بازم ممنونم.

    پاسخ
    1. علی بهزادیان نژاد نویسنده

      سلام. کل مطلب این نوشته درباره همین کاره! یه بار دیگه با دقت بخونید!

      پاسخ
  6. Ali asgari

    سلام ممنون از اموزش مفیدتون من میخوام برنامه نویسی اندروید رو شروع کنم میخواستم ببینم شما کدام را پیشنهاد میکنید
    Intellij idea
    Android studio 1.0
    Eclipse
    ولی باز فکر کردم اندروید استودیو چون از طراحی متریال پشتیبانی میکنه ایا ان ها هم پشتیبانی میکنند

    پاسخ
    1. علی بهزادیان نژاد نویسنده

      سلام
      Idea رسمی نیست و توسط گوگل پشتیبانی نمیشه. Eclipse با پلاگین ADT و Android Studio رسمی‌اند و گوگل آن‌ها را پشتیبانی می‌کند.
      نکته اصلی اینه که گوگل به زودی توسعه پلاگین ADT را کنار می‌گذارد. بنابراین قطعا برای شروع کار اندروید استودیو رو توصیه می‌کنم.

      پاسخ
  7. مهدی

    سلام
    خیلی ممنون بابت آموزشهاتون .
    با توجه به تمام آنچه فرمودید بنده میخوام یا image button روی صفحه اصلیم 6 تا کلید درست کنم که با کلیک روی هر کدوم بره اکتیویتی بعدی. تمام فولدرهای گفته شده رو هم درست کردم و عکسها رو هم از اندروید است گرفتم . منتها مشکل اینجاست که جواب نمیده و روی شبیه ساز که میبینم صفحه ساخته شده رو رو هر دیوایس یه عکس العمل متفاوت داره. اندازه رو هم به layout هر چی بدم فرق نداره بر حسب dp امتحان کردم. wrap هم امتحان کردم ب.با این دستور عکسها رو میندازه رو هم.
    ایراد کار من کجاست؟

    پاسخ
  8. علی

    سلام داداش آموزش هاتون واقعا عالی هستن من همه آموزشها رو دنبال کردم ولی مال شما یه چیز دیگه است …
    فقط بی زحمت تا پایات ادامه بدید که این زحمات حیف است به ایستگاه آخر نرسه …

    خدا اجرتون بده

    پاسخ
  9. حدیث

    سلام
    خیلی عالی و کاملا کاربردی
    سرفراز باشید
    راستی
    ****خیلییییییییییییییییییییییییییییییییییییییییییییییییییی ممنووووووووووووووووووووووووووووووووووووووووووووووووون***

    پاسخ
  10. reza

    سلام
    یک برنامه نوشتم و با جنی موشن اجرا می کنم اندازه دکمه ها و textview ها همه سرجاشون هستن ولی داخل گوشی های مختلف همه شون بهم ریختن! یکی خیلی پایین اومده یکی خیلی رفته بالا ! باید چیکار کنم لطفا راهنمایی بفرمایید

    پاسخ
    1. Mohammad

      با توجه به تجربه ای که من داشتم احتمال داره به خاطر این باشه که تو طراحی اینترفیست و دیزاینت مشکل داشته باشی مثلاً به جای دادن مقادیر اندازه و ارتفاع و … به سیستم اندروید آن ها را به صورت dpi به سیستم داده باشی

      پاسخ
  11. امیر محمد

    سلام.خسته نباشید
    من دارم یه برنامه مینویسم که توش از عکس های درازی!!!استفاده کردم(مثلا 1200*4500) مشکلی که من دارم اینه که این عکس ها توی گوشی هایی با صفحه نمایش کوچیک باز نمیشه مثلا تمامی عکس ها تو یه تبلت 7 اینچی باز میشه ولی همشون تو یه گوشی 4 اینچی باز نمیشه.چطور این مشکل رو رفع کنم(البته چون تعداد عکس ها زیاده نمیتونم عکس ها رو جدا جدا تو پوشه های drawable بزارم)

    پاسخ
  12. میلاد

    سلام اقای بهزادیان عالی هس آموزشتون..ولی من هر کاری میکنم برای اکتیویتی اولم نمیتونم بک گروند از عکسای داخل رایانم استفاده کنم..چیکار کنم؟؟ لطفا جواب بدین..مرسی

    پاسخ
  13. مهدی

    سلام استاد
    در مورد اندازه عکس برای پس زمینه اشاره ای نکردید. اگه بخواییم عکسی رو به عنوان پس زمینه برای گوشی ها با اندازه صفحه نمایش های مختلف استفاده کنیم، طول و عرض عکس رو چطوری باید تنظیم کنیم.
    پوشه های ldpi,hdpi,xhdpi و … برای ست کردن اندازه عکس به عنوان ایکون یا اکشن بار استفاده میشه که طول و عرض عکس نهایی بصورت مربع میشه. اما پس زمینه موبایل بصورت مستطیل هستش .

    طول و عرض پس زمینه که بصورت مستطیل هستش رو چطوری باید تنظیم کنیم؟

    ممنون استاد.

    پاسخ
  14. اسماعیل

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

    پاسخ
  15. سوسو

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

    پاسخ
  16. عرفان

    سلام آقا علی خسته نباشید
    تو ورژن جدید اندروید استودیو v.2.2.3 این کارها لازمه یا خودش همه این کارهارو انجام میده؟ و نیازی ب ساختن این فولدرها نیست؟
    اگ اینطوری باشه من تو اپم 137 عکس استفاده کردم 5 پوشه بسازم میشه حدود 700 عکس ک حجم رو میترکونه و مردم دانلود نمیکنن

    پاسخ

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *