ساخت بازی در اندروید قسمت چهارم

سلام خدمت همه عزیزان

در خدمتتونم با قسمت چهارم از سری آموزش های بازی سازی در اندروید.

خب تا اینجا یک سری مقدمات از جاوا براتون گفتم، بدون اینکه حرفی از اندروید و بازی سازی وسط بیاد. واسه تنوع بد نیست موازی با آموزش های جاوامون یک بازی ساده بسازیم و هر چقدر بیشتر از جاوا و اندروید گفتیم سطح بازی ها رو بالاتر ببریم. به نظرم رسید جالب تر میشه اگه جاوارو با بازی سازی در اندروید یاد بگیرید. البته قرار نیست فعلا تئوری بازی سازی بگم براتون؛ همون مباحثی رو از جاوا که قرار بود خیلی محض قبل از شروع اندروید کار کنیم، داریم انتقالشون میدیم به محیط برنامه نویسی اندروید! برای این جلسه و جلسه آینده شمارو با تمامی topicهای مورد نیازی که برای شروع برنامه نویسی اندروید لازم دارید آشنا میکنم. البته فقط تئوریکال نخواهد بود! ما یک رابط کاربری ساده برای منوی اولین بازیمون خواهیم ساخت و کمی هم با کدهای جاوا در اندروید رو به رو میشیم. در ادامه خواهید دید که چطور میتونید برنامه تون رو روی شبیه ساز اندروید یا یک دستگاه اندرویدی واقعی اجرا کنید. نکته مهمی که باید همینجا بهش اشاره کنم، اینه که به تمامی این topic ها تقریبا سطحی پرداخته میشه؛ عمق ماجرا خیلی بیشتر از این حرفاس و هرچقدر که بیشتر پیش بریم درکتون از اندروید و این مفاهیم عمیق تر میشه. فعلا برای یادگیری جاوا نیازی نیست بیشتر از اینایی که دارم میگم بدونید! بعد از این که این مقدمات رو گفتم، مفاهیم جاوارو ادامه میدیم و هم زمان از اون مفاهیم در جهت تکمیل بازی هامون استفاده میکنیم.

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

- به مسیر نصب SDKتون برید. فایل zipی که با عنوان intel از سایت دانلود کردید رو داخل پوشه extras قرار بدید و اکسترکتش کنید (Extract here). وارد پوشه intel و بعد پوشه HAXM بشید، فایل ستاپ intelhaxm-android رو اجرا کنید برای نصب نسخه جدید haxm. مراحل نصب هم خیلی ساده س و فکر نمیکنم نیازی به توضیح داشته باشه.

- اگه احیانا haxm براتون نصب نشد (به دلایلی که جلسه اول گفتم!) باید فایل armeabi-v7a رو از سایت دانلود کنید و داخل پوشه system-images در مسیر نصب SDK، اکسترکتش کنید.

- داخل پوشه extras اگه پوشه ای به نام "google" دارید، فایل های google_play_services و usb_driver رو داخلش قرار بدید و اکسترکت کنید. اگه هم پوشه google رو ندارید، خودتون دقیقا با همین نام ایجادش کنید و اون دوتا فایل zip رو داخلش اکسترکت کنید.

- داخل پوشه extras اگه پوشه ای به نام "android" دارید، فایل support رو داخل اون پوشه قرار بدید و اکسترکت کنید. اگه هم این پوشه رو ندارید، خودتون دقیقا با نام android ایجادش کنید و بعد فایل support رو داخلش اکسترکت کنید.

- در مسیر نصب SDK پوشه samples رو ایجاد کنید و فایل زیپ android-23-samples رو که از سایت دانلود کردید داخل این پوشه اکسترکت کنید.

- و در نهایت، در مسیر نصب SDK وارد پوشه platforms بشید و پوشه android-23 رو دیلیت کنید! فایلی که با عنوان android-23-platform از سایت دانلود کردید داخل پوشه platforms اکسترکت کنید.

قدم اول اینه که برای اولین بازیمون یک پروژه اندروید ایجاد کنیم. هر پروژه اندروید حاوی فایل هایی هستش که یک برنامه اندروید رو میسازه! برای ساخت یک پروژه جدید، اندروید استودیو رو اجرا کنید و روی گزینه Start a new Android Studio project کلیک کنید:

اگه این دایالوگ رو نمیبینید و مستقیما اندروید استودیو براتون باز میشه احتمالا به خاطر اینه که قبلا با اندروید استودیو پروژه ایجاد کردید؛ که در این صورت از  menu bar ، زیر منوی file و آپشن New ، روی New project کلیک کنید 

پنجره configuration برای پروژه ای که ایجاد کردید ظاهر میشه؛

- بازی اولمون به نوعی بازی ریاضیه؛ بد نیست اسمش رو بذاریم Math Game.

- برای فیلد company domain نام دامنه خودتون یا شرکتتون رو وارد کنید یا اگه هم نام دامنه ای ندارید بذاریدش example.org.

- همونطور که در حال وارد کردن نام دامنه هستید، اگه دقت کنید میبینید که پایینش، اندروید استودیو در حال آپدیت کردنه نام پکیج برنامه س.

- نام پکیج در اندروید به طور دیفالت از قرارداد reverse DNS استفاده میکنه؛ به این شکل که اگه شرکت یا شخص سازنده محصولِ product، نام دامنه ثبت شده example.org رو داشته باشه، رشته reverse-DNSش "org.example.product" خواهد بود.

- کانوِنشن reverse DNS به این منظور استفاده شده تا جلوی تصادفات احتمالی ناشی از هم نام بودن پکیج هارو بگیره. از اونجا که نام دامنه ها منحصر به فرد هستند و هیچ دو نام دامنه یکسانی وجود نداره، پس نباید هیچ دو برنامه اندرویدی نام پکیج یکسانی داشته باشن.

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

- در نهایت یک لوکیشن برای قرارگیری فایل های پروژه تون تعیین کنید و روی Next کلیک کنید:

برای پنجره بعدی تنها چک-باکس Phone and Tablet رو تیک خورده بذارید و تیک باقی چک-باکس ها رو بردارید. تو این صفحه میتونید مشخص کنید که میخواید برنامه تون چه دستگاه هایی رو ساپورت کنه! فعلا برای نسخه Minimum SDKتون API 16 یا اندروید 4.1 رو انتخاب کنید، بعدا بیشتر در مورد تفاوت نسخه های اندروید خواهید آموخت. روی Next کلیک کنید:

از این پنجره میتونید یک صفحه (یا اکتیویتی) آماده، مناسب با نیازتون، به برنامه اضافه کنید. این صفحات یک سری الگو یا template هستن. وقتی شما word یا powerpoint هم باز میکنید از این قبیل templateها بهتون پیشنهاد میشه! اگه یک برنامه نویس حرفه ای باشید نیازی به این ها ندارید، و میتونید خودتون استارت همه چی رو از صفر بزنید، اما خب فعلا دانش ما در این حد نیست! برای منوی بازیمون نیاز به یک صفحه داریم که قالب Blank Activity براش مناسبه. انتخابش کنید و روی Next کلیک کنید:

اینجا هم نیاز به هیچ تغییری نیست. روی Finish کلیک کنید:

به طور دیفالت زمانی که اندروید استودیو باز میشه دایالوگ tip of the day براتون بالا میاد. بعضی از نکاتی که بهش اشاره میکنه ممکنه الان براتون قابل درک نباشه چون هنوز دارید جاوا یاد میگیرید، اما خیلیاشون واقعا مفیدن و من خودم به شخصه shortcutهای خیلی خوبی ازش یاد گرفتم! بهتون پیشنهاد میکنم هر بار چند ثانیه از وقتتون رو اختصاص بدید و نگاهی به این نکته ها بندازید. در ضمن همونطور که جلسه اول هم گفتم اندروید استودیو از IntelliJ IDEA ساخته شده و شما میتونید لیست کاملی از shortcutهاش رو از این لینک مشاهده کنید:

https://www.jetbrains.com/idea/help/keyboard-shortcuts-you-cannot-miss.html

روی close کلیک کنید تا tip of the day براتون بسته شه.

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

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

1. Project Explorer

2. The Editor

3. Menu bar

4. Toolbar

5. Navigation bar

6. Important tool windows

هر قسمت رو به طور مجزا توضیح میدم:

1. از این قسمت میتونید تمامی فایل ها و فلدرهایی رو که اندروید استودیو برای پروژه تون ایجاد کرده مشاهده کنید. اکسپلورر تو تصویر بالا روی Android view قرار داره؛ Android view دقیقا همون شکلی نیست که اکسپلوررِ ویندوز فایل ها و فلدرهای پروژه رو نمایش میده! بلکه کمی ساده تر و برجسته تر شدن تا مدیریت و جستجوی فایل های پروژه برامون آسون تر شه. پیشنهاد من اینه که همیشه اکسپلورر رو روی Project view قرار بدید، چون این mode دسترسی بهتری به عناصر موجود درون پروژه براتون فراهم میکنه (تصویر پایین). اگه اکسپلورر براتون باز نیست، یا اگه بازه و تحت شرایطی خواستید بسته باشه، از کلیدهای ترکیبی alt + 1 در ویندوز استفاده کنید.

2. اولاً بگم که وقتی اندروید استودیو باز میشه دوتا tab اون بالا براتون بازه، و به طور دیفالت فایل content_main.xml براتون نمایش داده میشه. اگه تعجب کردید که چرا اسکرین شات من با محیط شما تفاوت داره به خاطر همینه! کافیه فایل MainActivity.java رو برای نمایش انتخاب کنید. این ناحیه (یعنی ناحیه 2) ادیتور IDE محسوب میشه. پنجره ادیتور بسته به نوع فایلی که داریم ویرایش میکنیم تغییر میکنه. همونطور که خودتون دیدید برای فایل content_main.xml که رابط کاربری تنها صفحه برنامه رو تعریف میکنه، یک نمایش از ادیتور رو داشتیم که متشکل از تصویر یک گوشی Nexus 4 و تعدادی بند و بساط دیگه بوده، که ما میتونیم از این ابزار برای طراحی ویژوال رابط کاربریمون استفاده کنیم، اما برای فایل MainActivity.java که حاوی کدهای جاوای برنامه ست، نمایش بالا از ادیتور رو داریم!

3. مشابه نقش menu bar در اکثر برنامه ها؛ دسترسی به تمامی قابلیت های اندروید استودیو رو برامون فراهم میکنه.

4. تولبار یا نوار ابزار، کلی آپشن تک-کلیکی مفید داره که میتونیم برای انجام کارهایی مثل deploying و debugging بازی هامون استفاده کنیم. اگه کرسر موس رو روی هرکدوم از آیکون های تولبار ببرید یک پاپ-آپ براتون نمایش داده میشه و جزئیات بهتری در اختیارتون قرار میده.

5. نویگیشن بار شبیه یک file path یا مسیر فایل عمل میکنه، و دقیقا نشون میده فایلی که در حال حاضر در ادیتور بازه، کجای پروژه واقع شده.

6. اینا هم چندتا tab هستند که اگه یه بار روشون کلیک کنید ظاهر میشن و با یک کلیک دیگه برمیگردن سر جای اولشون! جلوتر درباره شون توضیح میدم.

منظور از android view  و project view  که بالا بهشون اشاره کردم.

خب بیاید یه کم بیشتر درباره قسمت های مختلف رابط کاربری اندروید استودیو و اینکه چطور پنجره ادیتور میتونه مثل ربات های سری فیلم های ترنسفرمرز خودش رو تبدیل به طراحِ UI وبژوال کنه، صحبت کنیم! بعد از اینکه به اندازه کافی با visual designer اندروید استودیو آشنا شدید میتونیم یک صفحه ی منوی ساده برای بازیمون بسازیم.

قبلش در مورد UI باید بدونید؛ رابط کاربری یا UI، کانکشن بین برنامه شما و کاربرهای برنامه شماست. در واقع برای کاربر، UI، خود برنامه محسوب میشه، چون تنها با این قسمت از برنامه تون تعامل داره! UIها در اندروید میتونن به طور کامل با کدهای جاوا ساخته شن، یا، همونطور که ما خواهیم دید، با استفاده از طراح ویژوال (visual designer) بدون حتی یک خط از جاوا! طراح ویژوال اندروید استودیو به طور اتوماتیک کد UI رو برای برنامه مون تولید میکنه. البته همونطور که بعد از ساخت رابط کاربری منوی بازیمون بررسی میکنیم، برای اینکه بتونیم UI رو وادار کنیم تا کار مفیدی انجام بده، نیاز داریم تا باهاش تعامل داشته باشیم، و این تعامل همواره توسط کدهای جاوا صورت میگیره! ما خیلی زیاد وارد بحث توسعه رابط کاربری اندروید نمیشیم، چون یک مبحث مفصل و مجزاس و ربطی هم به کار ما نداره، بلکه جزئی اصلی از اپلیکیشن های غیر بازی محسوب میشه و باید رجوع کنید به دوره اندروید خانم مقاری. به جاش ما زمان بیشتری رو صرف رسم پیکسل ها و تصاویر برای ساخت بازی هامون خواهیم کرد. با این حال، یک UI عادی و قابل قبول کاربردهای خودش رو داره، و طراح ویژوال اندروید استودیو سریع ترین و آسون ترین راه برای شروعه!

خب رو تب content_main.xml کلیک کنید .

اگه سهواً tabش رو بستید، از Project Explorer، مسیر پایین رو دنبال کنید،

Math Game - app - src - main - res - layout

و روش دابل کلیک کنید تا در پنجره ادیتور براتون باز شه:

بعد از یه loading  کوتاه یک چیزی خیلی شبیه به این تصویر رو خواهد دید

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

ناحیه 1، پَلِت (یا Palette) نامیده میشه. شما میتونید عناصر UI اندروید رو از بین عناصر موجود در این قسمت انتخاب کنید و خیلی ساده روشون کلیک کرده و dragشون کنید روی طرح رابط کاربریتون. ناحیه 2، نمایش ویژوال رابط کاربری ای هستش که شما در حال ساختش هستید؛ همون جایی که شما عناصر drag شده از پلت رو رها میکنید! سمت راست ادیتور (بالا)، ناحیه Component Tree رو میبینید. component tree بهتون اجازه میده تا راحت تر ساختار یک UI پیچیده رو بررسی و کنترل کنید، یا هر عنصر خاصی از UI رو که در نظر دارید راحت تر select کنید. پایین component tree پنل properties قرار داره. اینجا شما میتونید خصوصیات هر عنصری از UI رو که select کردید تنظیم کنید! برای مثال چیزهای ساده ای مثل رنگ، سایز و ... یا پراپرتی های پیشرفته تر.

ناحیه 5 رو من در حاشیه توضیح میدم. ببینید، دو تا تب design و text که در این ناحیه قرار دارن بهتون اجازه میدن تا بین دو نمایش اصلی که اندروید استودیو برای این نوع از فایل های layout (همون فایل های رابط کاربری) فراهم میکنه، سوییچ کنید! نمایش design، نمایش دیفالت هستش و درباره ش همین الان توضیح دادم. نمایش text، همین UI در حال ساختتون رو نشون میده، اما کدی رو نمایش میده که به جای palette و component tree، به طور خودکار برای ما تولید شده! در حال حاضر نیازی نیست که شما از این کد سر درآرید یا نگرانش باشید، چون این کد به طور کامل توسط اندروید استودیو برای ما اداره میشه! البته بد نیست که گهگاهی بین این دوتا tab سوییچ کنید تا کم کم درک کنید که برای مثال وقتی ما یک عنصری رو از پلت به رابط کاربریمون اضافه میکنیم، طراح ویژوال اندروید استودیو چه کدی رو برامون ایجاد میکنه! هر تغییری که در یک نمایش (design یا text) اعمال کنید، visual designer به طور خودکار در اون یکی نمایش براتون اعمال میکنه! اما خب طبیعیه که فعلا برای یادگیری جاوا هیچ نیازی بهش نداریم. این کد eXtensible Markup Language یا به طور خلاصه XML نامیده میشه.

قبل از اینکه ادامه بدیم، مساله ای باید حل شه! به خاطر یک سری از تغییراتی که گوگل از اندروید استودیوی 1.4 به بعد در نحوه مقداردهی اولیه پروژه برای API 23 اعمال کرده، عنصری به نام Floating Action Button به طور دیفالت در UI برنامه تون قرار میگیره:

ما نیازی بهش نداریم و قرار هم نیست استفاده ای ازش بشه. بهتون نشون میدم چطور کدهای مربوط بهش رو کامنت کنید تا نقشی تو برنامه تون نداشته باشه. پس لطفا مِن بعد هر بار که یک پروژه جدید ایجاد کردیم این مراحلو برای اون پروژه هم اجرا کنید.

فایل MainActivity.java اگه باز هست رو tabش کلیک کنید، یا اگه نیست از Project Explorer مسیر پایین رو دنبال کنید:

MathGame - app - src - main - java - org.example.mathgame

و روش دابل کلیک کنید؛

کدی که از FloatingActionButton شروع میشه رو تا انتهای جایی که یک آکولاد بسته ، یک پرانتز بسته و یک : داریم mark کنید 

و کلید های crtl + / رو فشار بدید ( / همون کلید علامت سواله که بالای crtl سمت راست کیبورد قرار داره ! ) تا این قسمت از کد کامنت شه .

فایل activity_main.xml رو از همون مسیری که برای content_main.xml طی کردید پیدا کنید و روش دابل کلیک کنید، و به جای نمایش design، نمایش textش رو انتخاب کنید،

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

بسیار خب. تا اینجا یک مرور کلی از visual designer اندروید استودیو، و یک نگاه اجمالی خیلی خفیف تر (!) به کدی که به طور خودکار برامون تولید میکنه، داشتیم! برای قدم بعدی، نگاهی سریع به بعضی از عناصر مفید UI در اندروید (که میخوایم در پروژه مون استفاده کنیم) و نحوه اضافه کردنشون به UI، میندازیم و چندتا از پراپرتی های کلیدی هر کدومشون رو بررسی کنیم. در نهایت این قابلیت رو پیدا خواهید کرد تا از آموخته هاتون برای ساخت منوی بازی استفاده کنید.

لطف کنید و یک بار دیگه فایل content_main.xml رو در ادیتور باز کنید، یا اگه بازه رو tabش کلیک کنید. واسه اینکه نکته مبهمی باقی نمونه به طور کامل همه چی رو با تصویر توضیح میدم! در حال حاضر باید یک همچین وضعیتی بر محیط ادیتورتون حاکم باشه:

از قسمت component tree، رو فلش کنار ...shown in کلیک کنید تا عناصری که در حال حاضر در UI برنامه وجود دارن براتون نمایش داده شه:

همونطور که قابل مشاهده س، یک RelativeLayout (که جلوتر میگم وظیفه ش چیه) و یک Text View در UI قرار دارن. اگه رو متن !Hello, World که روی صفحه نمایش گوشی در حال نمایشه کلیک کنید، 2تا اتفاق جالب می افته:

- پنجره component tree خود به خود TextView رو select کرد.

- پنل properties تا قبل از این خالی بود، اما الان پراپرتی های متفاوتی برامون نمایش داده میشه که اختصاص دارن به TextView.

- نتیجه: هر عنصری از UI چه از روی صفحه نمایش گوشی و چه از پنجره component tree سلکت شه، پنل properties پراپرتی های مربوط به اون عنصر رو نمایش میده.

خب TextView چیه؟ TextView یک ویجت هستش که میتونه متنی رو به کاربر نمایش بده. اگه به palette نگاهی بندازید میبینید که در قسمت widgets، انواع مختلفی از TextViewها (در واقع 4 نوع!) از قبیل Plain TextView یا Large Text و ... برای نمایش سایزهای مختلفی از متن موجوده! (متن !Hello, World با استفاده از ویجت Small Text نمایش داده شده!) میتونیم از TextView برای نمایش عنوان بازیمون در صفحه منو استفاده کنیم.

ویجت Large Text رو از palette انتخاب کنبد و dragش کنید روی صفحه نمایش گوشی. هیچ فرقی نمیکنه کجای UI قرارش بدید، اما بلافاصله کلیک تون رو رها نکنید! پیشنهاد میکنم ویجت رو دور تا دور صفحه نمایش گوشی drag کنید تا ببینید اندروید استودیو چطور به طور گرافیکی برای موقعیت های مختلف، آپشن در اختیارتون قرار میده! برای مثال تو تصویر پایین میتونید ببینید وقتی که ویجت در حال drag شدن در مرکز صفحه نمایشه، designer به چه شکلی در میاد:

بعد از اینکه جایگاه مورد نظرتون رو یافتید و کلیک چپ موس رو رها کردید، ویجت به UI اضافه میشه:

لطفا به قسمت component tree دقت کنید، یک عنصر دیگه به عناصر UI اضافه شد! به طور دیفالت برای این TextView متن Large Text نمایش داده میشه که خب میتونیم تغییرش بدیم. همچنین مشخصه که به طور دیفالت ویجت Large Text متن بزرگ تری رو نسبت به ویجت Small Text (متن Hello World) برامون فراهم کرده. البته میشه خیلی راحت این سایزها رو هم تغییر داد!

برای تغییر سایز متن باید بریم سراغ پنل properties. اول مطمئن شید که TextViewتون select شده؛ از این پنل پراپرتی textSize رو پیدا کنید، (پراپرتی ها به ترتیب حروف الفبای انگلیسی در این پنل قرار گرفتن، باید اسکرول کنید!) روی فیلد خالی سمت راستش کلیک کنید، مقدار "100sp" رو تایپ کنید و کلید enter رو فشار بدید:

با متنی بسی بزرگ تر مواجه میشید! پس میتونیم سایز متن TextViewمون رو با افزایش یا کاهش مقدار وارد شده در این فیلد اصلاح کنیم. واحد sp مخفف scaled pixels هستش؛ یک سیستم اندازه گیری که سعی میکنه متن رو تقریبا برابر با اندازه اصلیش در تراکم های مختلف از صفحه نمایش مقیاس کنه!

اگه دوست داشتید با چندتا از پراپرتی های دیگه هم کار کنید، برای مثال مقدار پراپرتی text رو میتونید از Large Text به یک مقدار دیگه تغییر بدید تا TextView متن دیگه ای رو نمایش بده. البته چون پراپرتی text یک پراپرتی خیلی پرکاربرد هستش علاوه بر پنل properties، با دابل کلیک کردن روی TextView فیلدی برای ویرایش این پراپرتی و پراپرتی id که جلوتر درباره ش توضیح میدم، براتون فراهم میشه:

در نهایت TextView رو سلکت کنید و کلید delete روی کیبوردتون رو فشار بدید تا از UI دیلیت شه. TextView اول که خود پروژه با متن Hello World به UI برنامه اضافه کرده بود رو هم به همین شکل دیلیت کنید:

یک صفحه خالی داریم، اما پنل properties خالی نیست! چون تنها عنصر UI، یعنی عنصر RelativeLayout سلکت شده، و به نظر میرسه عنصری نامرئی باشه!  RelativeLayout یکی از چندین نوع عنصر layout محسوب میشه (اگه به قسمت بالای پنجره palette نگاه کنید، آپشن های اصلی عنصر layout رو میتونید ببینید!). هر عنصر layoutی به عنوان یک base برای کنترل و چینش ویجت های دیگه ی رابط کاربری، مثل TextViewها، Buttonها و ... فراهم شده. اگه بخوام یک مثال ملموس بزنم، layout رو مثل سفره ای فرض کنید که ما برای چیدن ویجت های دیگه پهنش میکنیم، و البته این سفره برای ویجت های خودش تصمیم گیری میکنه که به چه شکلی اجازه چیده شدن دارند، افقی، عمودی، وابسته به هم (relative) و یا حالت های مختلف دیگه. ما از همین نوع عنصر layout، یعنی عنصر RelativeLayout، برای رابط کاربری منوی بازیمون استفاده خواهیم کرد.

در رابطه با کلمه layout، لطفا دقت کنید که برنامه نویسای اندروید این کلمه رو 2 جا به کار میبرن، با 2 تعریف متفاوت، و این ممکنه کمی گیجتون کنه!

- تعریف اول: همون layout خودمون (!) که بالا درباره ش توضیح دادم؛ یک عنصر در رابط کاربری که نحوه چینش عنصرهای فرزند خودش رو تعیین میکنه.

- تعریف دوم: یک نوع resource (فایل های افزوده شده به پروژه که کد میتونه ازشون استفاده کنه!) که رابط کاربری صفحه ای از برنامه رو تعریف میکنه و به عنوان یک فایل با فرمت xml ذخیره میشه. مثل فایل های content_main.xml و activity_main.xml، که اگه به دایرکتوریشون در  اکسپلورر هم دقت کنید میبینید که در زیرشاخه layout، از شاخه res یا منابع قرار دارند:

ویجت ImageView ویجت مورد بحث بعدیست؛ خیلی نباید سورپرایز شید اگه بگم برای نمایش تصاویر ازش استفاده میشه! یک راهکار خیلی ساده ست و البته سریع، برای اضافه کردن artworkهامون به بازی. از پنجره پلت، عنصر ImageView رو که در قسمت Widgets قرار گرفته، رو طرح رابط کاربریتون drag و بعد هم رهاش کنید. دقیقا مشابه با TextView میتونید در مرکز طرحتون قرارش بدید یا هر جای دلخواهی که مد نظرتون بود:

چون هنوز مشخص نکردیم که ImageView چه تصویری رو نمایش بده، به نظر میرسه که عنصر جدیدی به UI اضافه نشده! اما از قسمت component tree میتونید مشاهده کنید که یک ImageView در UI وجود داره. اگه ImageView سلکت نیست از پنجره component tree سلکتش کنید، از پنل properties پراپرتی src رو پیدا کنید، و روی فیلد خالی کنارش کلیک کنید. همونطور که میبینید آپشنی براتون فراهم شده که اگه روش کلیک کنید آپشن های بیشتری در اختیارتون قرار میده:

این ها تمامی تصاویری هستند که میتونیم در این ImageView نمایش بدیم! جاست فُر فان، از تب System، آیکون sym_def_app_icon رو از شاخه Drawable انتخاب و ok کنید:

البته بعدا خواهید دید که ما میتونیم هر تصویری که دلمون میخواد به این لیست اضافه کنیم! و این یک راه ساده و قدرتمند برای ساخت یک منوی بازی جذابه. برای عنصر ImageView مقدار پراپرتی layout:width رو (که ابتدای پنل properties قرار داره) به 150dp، و مقدار پراپرتی layout:height رو هم به 150dp تغییر بدید (به طور دیفالت هر دو wrap_content هستند!). واحد dp یک راه اندازه دادن به عناصر و ویجت های UI هستش که باعث میشه در دستگاه های مختلف با تعداد پیکسل های متفاوت این اندازه نسبتا ثابت بمونه:

بسیار عالی. در نهایت این ImageView رو هم دیلیت کنید! آخرین Viewای که درباره ش صحبت میکنیم ButtonView هستش. نامش گویاست! دکمه ای که شما برای کاربر فراهم میکنید تا کاربر گرامی فشارش بده و خب به تبعش یک اتفاقی هم در برنامه بی افته! چند نوع از ButtonView در پنجره پلت (قسمت Widgets) موجوده، مثل Button و Small Button، و اگه پایین تر هم برید Image Button. ما از یک ButtonViewی معمولی که با عنوان Button لیبل شده استفاده میکنیم. شما میتونید متن روی Buton رو هم مثل TextView با استفاده از پراپرتی text در پنل properties یا دابل کلیک کردن روی خود Button تغییر بدید.

خب کارمون واسه این جلسه تمومه! با چیزهایی که یاد گرفتید سعی کنید UIی پایین رو خودتون بسازید. فعلا فقط برامون مهمه که منوی بازیمون کاربردی باشه و بتونیم ازش استفاده کنیم! برای بازی های بعدی یاد میگیرید که چیزهای بیشتری به منوتون اضافه کنید (مثل انیمیشن های مختلف) تا ظاهر جذاب تری پیدا کنه. جلسه آینده ابتدا ساخت همین منو رو خیلی کوتاه توضیح میدم و دیگه کاری با طراحی UI نداریم و با زبان کد صحبت خواهیم کرد!