آکادمی آموزش آنلاین طوسی

نحوه قرار دادن یک عکس روی رابط کاربری (آموزش Splash Screen قسمت دوم)

اهداف آموزشی این درس:

1. نحوه اضافه کردن یک عکس به رابط کاربری پروژه

2. نحوه لینک دادن به یک عکس از طریق فایل XML

3. نحوه Center کردن عناصر قرار گرفته روی U

پس از بررسی نحوه وارد کردن یک عکس به داخل یک پروژه اپلیکیشن اندرویدی، در این آموزش قصد داریم به بررسی این موضوع بپردازیم که به چه نحو می توان یک عکس را روی UI قرار داد:

برای شروع کار فایل main.xml را باز کرده و همانند تصویر بالا روی Tab مربوط به Graphical Layout کلیک می کنیم. سپس قصد داریم تا TextView روی UI را حذف کرده و رنگ پس زمینه Layout را به رنگ سفید تغییر می دهیم. سپس Gravity این Layout را برابر با مقدار center قرار می دهیم:

پس از اعمال تغییرات همانطور که در تصویر فوق مشخص است روی Tab مربوط به main.xml کلیک می کنیم و با کد زیر مواجه خواهیم شد:

 

 

همانطور که می بینیم Layout ما از جنس LinearLayout است. به منظور اضافه کردن یک عکس به Layout خود می بایست کد خود را به شکل زیر تکمیل کنیم:

 

 

 

 

همانطور که در کد فوق می بینیم به منظور اضافه کردن یک عکس روی UI می بایست از تگی تحت عنوان ImageView استفاده کنیم. همانطور که در آموزش های گذشته توضیح دادیم از متدهای layout_width و layout_height به منظور مشخص کردن ابعاد عکس خود استفاده می کنیم. سپس برای آنکه به عکسی که در آموزش گذشته وارد پروژه خود کردیم لینک دهیم بایستی از متدی تحت عنوان src که مخفف واژه Source به معنی "منبع" است استفاده نماییم.

برای لینک دادن به یک عکس ابتدا علامت @ را قرار داده سپس واژه drawable را نوشته یک علامت / قرار می دهیم و در نهایت نام فایل خود را می نویسیم (به خاطر داشته باشیم که پسوند نام فایل تصویری که png است را به هیچ وجه نمی بایست در فایل XML بنویسیم). با کلیک کردن روی Tab مربوط به Graphical Layout با تصویر زیر مواجه خواهیم شد:

می بینیم که رنگ پس زمینه سفید شده است، متن روی UI حذف شده است، عکس مد نظر روی UI قرار گرفته است و این در حالی است که این عکس به خاطر وجود ویژگی center مربوط به Layout در وسط UI قرار گرفته است.

به منظور بررسی راه کار دومی که با استفاده از آن می توانیم یک عکس را روی UI قرار دهیم اقدام به حذف عکس کرده و UI ما به شکل زیر در خواهد آمد:

پس از حذف عکس موجود روی UI همانطور که در تصویر فوق با یک فلش کوچک نشان داده شده است روی Tab مربوط به Images & Media کلیک کرده و همانطور که می بینیم با نشانگر موس گزینه ImageView را گرفته و روی UI می کشیم(به محض قرار گرفتن نشانگر موس روی UI یک علامت به علاوه کنار نشانگر موس قرار خواهد گرفت).

اکنون پس از آنکه دکمه موس خود را رها کنیم خواهیم دید که پنجره جدیدی به صورت زیر نمایان خواهد شد:

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

پس از کلیک کردن روی هر یک از عکس های موجود در این لیست در قسمت سمت راست همانطور که با یک کادر قرمز رنگ مشخص شده است یک Preview یا "پیش نمایش" از آن عکس نشان داده خواهد شد. حال پس از انتخاب عکس مد نظر می توانیم روی گزینه OK کلیک نماییم:

همانطور که در تصویر فوق می بینیم همانند روش پیش این عکس به UI اضافه شده است. برای آنکه ببینیم کد مرتبط با این ImageView به چه صورت است روی Tab مرتبط با main.xml کلیک می کنیم:

 

 

 

 

می بینیم کدی همانند روش اول به فایل XML اضافه شده است با این تفاوت که این بار یک Property مرتبط با id هم به کد اضافه شده است که اکلیپس به صورت خودکار id یی تحت عنوان imageView1 برای این تصویر در نظر گرفته است.

نکته ای که در ارتباط با هر روش مورد استفاده به منظور اضافه کردن یک تصویر روی UI می بایست همواره مد نظر داشته باشیم Value یی است که برای src در نظر می گیریم. اگر به خاطر داشته باشیم ما عکس مد نظر خود را داخل فولدر drawable-mdpi که مخصوص دستگاه هایی با صفحه نمایشی با تراکم پیکسلی متوسط است قرار دادیم اما این در حالی است که در فایل XML زمانیکه می خواهیم به این عکس لینک دهیم به جای آدرس drawable-mdpi/splash_image از آدرس drawable/splash_image استفاده کرده ایم.

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

از همین رو است که در فایل XML می بایست فقط و فقط برای استفاده از یک عکس ابتدا علامت @ را نوشته سپس نام فولدر drawable را نوشته در نهایت با قرار دادن یک علامت / نام تصویر مد نظر را به کد خود اضافه می کنیم.

برای مثال اگر این اپلیکیشن را روی دستگاهی با صفحه نمایشی را تراکم پیکسلی بالا اجرا کنیم، سیستم عامل اندروید به بررسی این موضوع خواهد پرداخت که آیا نسخه ای از این تصویر برای دستگاه هایی با تراکم پیکسلی بالا در نظر گرفته شده و در فولدر drwable-hdpi قرار داده شده است یا خیر. چنانچه چنین تصویری موجود، سیستم عامل از آن استفاده خواهد کرد و چنانچه موجود نبود به نزدیک ترین فولدر به drawable-hdpi خواهد رفت و از آن استفاده خواهد کرد. به طور مثال در این اپلیکیشن ما تنها یک عکس در فولدر drawable-mdpi قرار داده ایم. حال سیستم به سراغ این فولدر رفته و عکس موجود در آن را بزرگ می کند تا برای دستگاه ما که یک دستگاه با تراکم پیکسلی بالا است بهینه شود. نکته بسیار مهمی در ارتباط با نامگذاری تصاویر که همواره بایستی مد نظر قرار دهیم این است که به طور مثال تصویر splash_image یی که برای فولدر drawable-mdpi در نظر می گیریم می بایست صد در صد با نسخه های دیگری از همان تصویر که برای فولدرهای دیگری همچون -drawable hdpi و drawable-ldpi در نظر می گیریم "نام یکسانی" داشته باشد.

در واقع از آنجا که در فایل XML فقط نام drawable را می نویسیم سپس نام تصویر مد نظر را اضافه می کنیم، اگر نام تصاویر متفاوت باشند سیستم عامل اندروید نخواهد توانست این مسئله را تشخیص دهد بنابراین اگر نام تصویری که در فولدر drawable-hdpi قرار دارد splash باشد سیستم عامل اندروید نمی تواند این تصویر را به رسمیت بشناسد بنابراین نخواهد توانست از این تصویر در حین اجرای اپلیکیشن استفاده کند.

 

پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم:

1. تگ مربوط به اضافه کردن یک تصویر چه نام دارد؟

2. چند راه برای اضافه کردن یک تصویر روی UI وجود دارد؟

3. به چه شکل می توان عناصر روی UI در مرکز Layout قرار داد؟

4. نحوه لینک دادن به یک تصویر در فایل XML چگونه است؟

5. چرا در فایل XML به جای نوشتن آدرس کامل فولدر فقط از نام drawable استفاده می کنیم؟

6. اگر نام نسخه های مختلف یک تصویر یکسان در فولدر های متفاوت با یکدیگر فرق کنند چه اتفاقی خواهد افتاد؟

برای مشاهده نظرات وارد سایت شوید یا ثبت‌نام کنید.

60th_Session,_Putting_An_Image_on_the_UI.pdf

لینک دانلود فایل درس آموزش 60. نحوه قرار دادن یک عکس روی رابط کاربری (آموزش Splash Screen قسمت دوم)

سرفصل های آموزشی دوره رایگان برنامه نویسی اندروید Android

منبع این درس در سایت سکان (www.sokanacademy.com)