آموزش کاتلین در اندروید استودیو با ساخت یک اپ ساده | تم آف

امروز با توجه به همه‌گیری سیستم عامل اندروید بسیاری از افراد به دنبال پیاده‌سازی ایده‌های خود در قالب اپلیکیشن اندروید هستند. معرفی زبان برنامه‌نویسی کاتلین (Kotlin) در سال‌های اخیر توسط گوگل به عنوان دومین زبان رسمی برنامه‌نویسی اندروید توجه بسیاری از علاقه‌مندان و برنامه نویسان این حوزه را به خود جلب کرده است. از این رو، در این نوشتار سعی شده است آموزش کاتلین در اندروید استودیو به صورت پروژه محور و در قالب ساخت اپلیکیشن ارائه شود. مطالعه این مطلب برای آشنایی با اصول برنامه‌نویسی اندروید با کاتلین مناسب است. در مطلب آموزش کاتلین در اندروید استودیو به مباحثی از جمله نصب اندروید استودیو، کار با ویرایشگر طرح‌بندی، راه‌اندازی شبیه ساز، تعاملی کردن برنامه، کار با فرگمنت‌ها و سایر موارد مهم در توسعه اندروید پرداخته شده است.

پیش درآمد آموزش کاتلین در اندروید استودیو

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

زبان برنامه نویسی کاتلین چیست؟

«کاتلین» (Kotlin) زبانی با «تایپ ایستا» (Statically-Typed) و همه‌منظوره است که قابلیت اجرا بر روی «ماشین مجازی جاوا» (Java Virtual Machine | JVM) را دارد. این زبان نوظهور در سال‌ ۲۰۱۷ میلادی (۱۳۹۶ شمسی) توسط گوگل به عنوان دومین زبان رسمی توسعه اندروید معرفی شد.

تا پیش از این، زبان محبوب و قدرتمند جاوا (Java) تنها زبان رسمی برای توسعه اپلیکیشن‌های اندروید بود، اما کاتلین با ویژگی‌های جذاب خود از جمله قابلیت تعامل با جاوا توانسته است نظر مثبت برنامه‌نویسان اندروید را به خود جلب کند. منظور از قابلیت تعامل با جاوا در کاتلین این است که می‌توان همزمان از کدهای جاوا در کنار کدهای کاتلین استفاده کرد و این مورد فرایند مهاجرت به این زبان برنامه نویسی را آسان‌تر کرده است.

کاتلین یا جاوا کدامیک بهتر است؟

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

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

از سوی دیگر زبان کاتلین نیز با معرفی ویژگی‌های جدید و کاربردی از جمله «امنیت در برابر مقادیر تهی» (Null Saftey)، «کلاس‌های داده» (Data Classes)، «تابع اکستنشن» (Extension)، «برنامه‌نویسی تابعی» (Programming Functional) و سایر موارد توانسته است توجه بسیاری از توسعه‌دهندگان اندروید را به خود جلب کند.

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

بازار کار کاتلین چگونه است؟

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

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

آموزش کاتلین در اندروید استودیو با ساخت اپلیکیشن

قبل از شروع ساخت اپلیکیشن در کاتلین باید در گام نخست با زبان برنامه‌نویسی کاتلین و «سینتکس» (Syntax) آن آشنا بود. علاوه بر این، برای برنامه نویسی اندروید نیز باید با ابزارهای مورد نیاز برای توسعه نظیر «کیت توسعه نرم افزاری اندروید» (SDK)، «محیط یکپارچه توسعه» (IDE)، شبیه‌ساز اندرویدی و سایر موارد آشنایی داشت.

در این نوشته سعی شده است تا آموزش کاتلین در اندروید استودیو در قالب ساخت اپلیکیشن به صورت پروژه محور ارائه شود. اگر برنامه‌نویس با تجربه‌ای هستید یا سابقه ساخت اپلیکیشن با زبان‌های مشابه نظیر جاوا را داشته‌اید، حتی بدون تجربه کار با کاتلین نیز می‌توانید این نوشته را دنبال کنید.

در ادامه اصلی‌ترین بخش‌های ارائه شده در این نوشته فهرست شده‌اند.

• نحوه استفاده از «اندروید استودیو» (Android Studio) برای ساخت اپلیکیشن را فرا خواهید گرفت.
• فرایند اجرای اپلیکیشن اندروید بر روی شبیه‌ساز آموزش داده خواهد شد.
• توانایی تعاملی کردن «رابط کاربری» (User Interface) برنامه را خواهید داشت.
• نحوه جابجایی بین صفحات مختلف برنامه با استفاده از «اینتنت» (Intent) را فرا خواهید گرفت.

نصب اندروید استودیو اولین گام آموزش کاتلین در اندروید استودیو

این نوشته به آموزش کاتلین در اندروید استودیو اختصاص دارد. در نتیجه، اولین گام برای شروع کار نصب اندروید استودیو به عنوان محیط توسعه است. اندروید استودیو محیط توسعه کاملی است که ابزارهایی برای توسعه، «دیباگ» (Debugging | اشکال‌زدایی) و آزمایش عملکرد برنامه را در اختیار توسعه‌دهندگان اندروید قرار می‌دهد. همچنین، اندروید استودیو از شبیه‌ساز داخلی برای اجرای برنامه‌های کامپایل شده برخوردار است.

اندروید استودیو در سیستم‌عامل‌های مختلف همچون ویندوز، لینوکس (Linux) و macOS قابل دسترسی است. همچنین، «کیت توسعه جاوا» (Java Development Kit) نیز در کنار اندروید استودیو قرار دارد. مراحل نصب اندروید استودیو در سیستم‌عامل‌های مختلف مشابه است.

در ادامه به طور مختصر مراحل نصب اندروید استودیو آورده شده است.

• به صفحه دریافت (+) اندروید استودیو از سایت مرجع رفته و بر اساس دستورالعمل‌های ارائه شده مراحل دانلود و نصب اندروید استودیو را دنبال کنید.
• تنظیمات پیش‌فرض را برای تمام مراحل بپذیرید و از انتخاب تمام بخش‌ها برای نصب مطمئن شوید.
• بعد از اتمام نصب نرم‌افزار ،سایر بخش‌های اضافی نظیر «کیت توسعه اندروید» (Android SDK) دانلود و نصب خواهند شد. این بخش با توجه به کیفیت و سرعت اینترنت ممکن است کمی به طول انجامد.
• بعد از کامل شدن مراحل نصب، می‌توان اندروید استودیو را اجرا و اولین پروژه اندرویدی را در آن ایجاد کرد.

ساخت پروژه جدید گام دوم در آموزش کاتلین در اندروید استودیو

در این بخش از نوشته آموزش کاتلین در اندروید استودیو اولین پروژه اندرویدی خود را ایجاد خواهید کرد. این برنامه رشته Hello World

 را بر روی صفحه نمایش شبیه‌ساز یا دستگاه اندرویدی نمایش می‌دهد. تصویر زیر خروجی مورد انتظار از برنامه ساخته شده است.

در انتهای این بخش از نوشته قادر خواهید بود که:

• پروژه اندرویدی جدیدی را در محیط اندروید استودیو ایجاد کنید.
• شبیه‌ساز اندرویدی مورد نظر خود را ایجاد کنید.
• اپلیکیشن اندرویدی خود را بر روی شبیه‌ساز اجرا کنید.
• در صورت دسترسی به دستگاه اندرویدی، اپلیکیشن خود را بر روی دستگاه اجرا کنید.

گام اول: ساخت پروژه در اندروید استودیو

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

• اندروید استودیو را اجرا کنید.
• در پنجره Welcome to Android Studio

   بر روی اولین گزینه یعنی Start a new Android Studio project

   کلیک کنید.

• سپس در پنجره بعدی گزینه Basic Activity

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

   کلیک کنید.

• نام مورد نظر خود برای اپلیکیشن را انتخاب کنید.
• از انتخاب زبان کاتلین برای پروژه اطمینان حاصل کنید.
• برای سایر بخش‌‌ها از تنظیمات پیش‌فرض استفاده کنید.
• بر روی دکمه Finish

   کلیک کنید.

بعد از انجام مراحل بالا در اندروید استودیو:

• پوشه‌ای برای پروژه ایجاد می‌شود. این پوشه معمولاً در پوشه‌ای به نام AndroidStudioProjects

   در دایرکتوری اصلی قرار دارد.

• اندروید استودیو مراحل ساخت (Build) پروژه را انجام می‌دهد (این مورد ممکن است کمی طول بکشد). اندروید استودیو از Gradle به عنوان سیستم ساخت خود استفاده می‌کند.
• در نهایت، اندروید استودیو «ویرایشگر کد» (Code Editor) را باز می‌کند.

گام دوم: تنظیم صفحه نمایش

در اولین اجرای پروژه در اندروید استودیو پنجره‌های زیادی باز می‌شود که ممکن است در ابتدا برای کاربر کمی گیج‌کننده به نظر برسد. برای سهولت کار با اندروید استودیو در این بخش چند پیشنهاد برای سفارشی کردن چیدمان ارائه شده است.

• اگر پنجره Gradle در سمت راست باز است، روی دکمه کوچک کردن در گوشه سمت راست بالا کلیک کنید تا مخفی شود.

• بسته به اندازه صفحه نمایش، برای این که فضای بیشتری در دسترس قرار گیرد، می‌توان اندازه صفحه سمت چپ که مربوط به پوشه‌های پروژه است را تغییر داد. در این حالت صفحه نمایش شما کمی مرتب‌تر به نظر می‌رسد.

گام سوم: بررسی ساختار و طرح پروژه

در گوشه سمت چپ قسمت بالایی اندروید استودیو باید ساختاری مشابه با تصویر زیر وجود داشته باشد.

بر اساس الگوی انتخابی کاربر در زمان ایجاد پروژه، اندروید استودیو تعدادی پوشه و فایل را برای پروژه ایجاد می‌کند. با استفاده از بخش Project View

 می‌توان ساختار فایل‌ها و پوشه‌های پروژه را مشاهده کرد. نحوه نمایش ساختار فایل‌های پروژه در این بخش به گونه‌ای است که کار با پروژه اندرویدی را برای برنامه‌نویس آسان می‌کند. در ادامه با توجه به تصویر بالا، توضیحاتی در خصوص مدیریت و کار با نمای پروژه در اندروید استودیو ارائه شده است.

• با دو بار کلیک کردن بر روی پوشه app

   می‌توان آن را گسترش داد و فایل‌های موجود در این بخش را مشاهده کرد. (شماره 1 در تصویر بالا)

• با کلیک کردن روی بخش Project

   می‌توان نمای پروژه را پنهان کرد و در صورت پنهان بودن آن را مجدداً به حالت نمایش در آورد. (شماره 2 در تصویر بالا)

• با انتخاب Project > Android

   می‌توان نمای پروژه فعلی را انتخاب کرد. (شماره 3 در تصویر بالا)

در نمای Project > Android

 3 یا 4 پوشه اصلی قابل مشاهده است: java

 ، manifests

 ، java (generated)

 و res

 . در ادامه هر کدام از پوشه‌های موجود مورد بررسی قرار گرفته‌اند.

پوشه manifests: این پوشه شامل فایل AndroidManifest.xml

 است. این فایل در برنامه‌نویسی اندروید حکم شناسنامه اپلیکیشن را دارد و تمام اجزای برنامه اندروید را توصیف می‌کند.

پوشه java: تمام فایل‌های نوشته شده به زبان کاتلین در این پوشه قرار می‌گیرند. پروژه‌های اندرویدی تمام فایل‌های زبان کاتلین را همراه با منابع زبان جاوا در این پوشه نگه می‌دارند. این پوشه شامل 3 زیر پوشه است.

• پوشه com.example.myfirstapp: فایل‌های کاتلین مرتبط با برنامه در این پوشه قرار دارد.
• پوشه (androidTest) com.example.myfirstapp: در این پوشه «تست‌های ابزاری» (Instrumented tests) مرتبط با برنامه قرار می‌گیرند. تست‌های ابزاری آزمایش‌هایی هستند که بر روی دستگاه اندرویدی اجرا می‌شوند.
• پوشه (test) com.example.myfirstapp: در این پوشه «تست‌های واحد» (Unit Test) مرتبط با برنامه قرار می‌گیرند. این تست‌ها برای اجرا به دستگاه اندرویدی نیاز ندارند.

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

• پوشه drawable: تمام تصاویر برنامه در این پوشه ذخیره می‌شوند.
• پوشه layout: این پوشه شامل فایل‌های طرح‌بندی رابط کاربری برای اکتیویتی‌های برنامه است.
• پوشه menu: این پوشه شامل فایل‌های xml

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

• پوشه mipmap: آیکون برنامه در این پوشه قرار دارد.
• پوشه navigation: این پوشه شامل نمودار ناوبری است و نحوه جابجایی بین بخش‌های مختلف برنامه را نمایش می‌دهد.
• پوشه values: این پوشه حاوی منابع استفاده شده در برنامه همچون رنگ‌ها و رشته‌ها است.

گام چهارم: راه اندازی شبیه ساز در اندروید استودیو

با استفاده از بخش AVD Manager

 موجود در اندروید استودیو می‌توان «دستگاه مجازی» (Virtual Device) یا «شبیه‌ساز» (Emulator) اندرویدی مد نظر خود را با پیکربندی دلخواه ایجاد کرد.

اولین گام ایجاد پیکربندی برای شبیه‌ساز مورد نظر است.

• در نوار ابزار اندروید استودیو از منوی Tools

   گزینه AVD Manager

   را باید انتخاب کرد.

• بر روی دکمه +Create Virtual Device

   کلیک کنید. (در صورتی که قبلاً شبیه‌ساز اندرویدی را ایجاد کرده‌اید، این پنجره لیستی از دستگاه‌های قبلی را به شما نمایش می‌دهد.)

• در ادامه پنجره Select Hardware

   فهرستی از شبیه‌ساز‌های از پیش پیکربندی شده را نمایش می‌دهد.

• یکی از دستگاه‌ها موجود مانند Pixel 2

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

   کلیک کنید.

• در بخش انتخاب System Image

   از سربرگ Recommended

   آخرین نسخه موجود را انتخاب کنید.

• اگر لینک دانلود در کنار آخرین نسخه وجود داشت، به این معنی است که هنوز نصب نشده است و ابتدا باید دانلود شود. در صورت نیاز، بر روی لینک کلیک کرده تا دانلود شروع شود و بعد از اتمام نیز بر روی Next

   کلیک کنید. این مرحله بسته به سرعت اینترنت ممکن است کمی طول بکشد.

• در کادر محاوره‌ای بعدی تنظیمات پیش‌فرض را پذیرفته و بر روی Finish

   کلیک کنید.

• اکنون AVD Manager

   شبیه‌ساز ساخته شده را نشان می‌دهد.

 

گام پنجم: اجرای برنامه بر روی شبیه ساز

این بخش از نوشته آموزش کاتلین در اندروید استودیو به نحوه اجرای برنامه بر روی شبیه‌ساز اختصاص دارد. برای اجرای برنامه بر روی شبیه‌ساز اندروید باید مراحل زیر را به ترتیب دنبال کرد.

• در نوار ابزار اندروید استودیو از منوی Run

   گزینه Run ‘app’

    را باید انتخاب کرد.

• سپس در منوی Run > Select Device

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

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

در ادامه برخی از پیام‌هایی که در فرایند اجرای برنامه در نوار وضعیت ظاهر می‌شوند، ارائه شده است.

	Gradle Build Running	در حال ساخت فایل gradle
	Waiting for target device to come online	در انتظار راه‌اندازی شبیه‌ساز اندرویدی
	Installing APK	در حال نصب فایل APK
	Launching activity	در حال اجرا شدن اکتیویتی برنامه

زمانی که فرایند ساخت برنامه به اتمام رسید و شبیه‌ساز نیز آماده شد، اندروید استودیو برنامه را در شبیه‌ساز اجرا می‌کند. خروجی مورد انتظار از برنامه باید مشابه تصویر زیر باشد.

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

گام ششم: اجرای برنامه بر روی دستگاه واقعی

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

• یک دستگاه اندرویدی مانند گوشی یا تبلت.
• یک کابل داده برای اتصال دستگاه اندرویدی به کامپیوتر از طریق درگاه USB.
• در صورت استفاده از سیستم‌عامل لینوکس یا ویندوز ممکن است مراحل بیشتری برای اجرای برنامه بر روی دستگاه اندرویدی لازم باشد. برای این مورد می‌توان مستندات سایت مرجع در این لینک (+) را مورد بررسی قرار داد.

برای اینکه اندروید استودیو امکان برقراری ارتباط با دستگاه اندرویدی را داشته باشد، باید قابلیت USB Debugging

 در دستگاه اندرویدی فعال شود. در سیستم عامل اندروید نسخه 4.2 و بالاتر صفحه Developer options

 به طور پیش‌فرض پنهان است. برای نمایش این صفحه و فعال کردن حالت USB Debugging

 باید مراحل زیر را به ترتیب انجام داد.

• در دستگاه اندرویدی باید وارد مسیر Settings > About phone

   شده و سپس 7 مرتبه بر روی بخش Build number

   کلیک کرد.

• اکنون به صفحه قبلی یعنی Settings

   بازگشته و بخش Developer options

   در انتهای لیست مربوطه ظاهر شده است. بر روی بخش Developer options

   کلیک کنید.

• در نهایت، گزینه USB Debugging

   را فعال کنید.

اکنون می‌توان دستگاه اندرویدی را به کامپیوتر متصل و برنامه را از طریق اندروید استودیو اجرا کرد. بعد از اتصال دستگاه اندرویدی به کامپیوتر نیاز است تا اجازه اجرا از طریق USB debugging

 داده شود.

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

• اولین راه‌حل احتمالی برای رفع مشکل، خارج شدن از اندروید استودیو و راه‌اندازی مجدد آن است.
• اگر اندروید استودیو دستگاه را شناسایی نکرد، می‌توان موارد زیر را امتحان کرد:
  • دستگاه اندرویدی را از کامپیوتر جدا کرده و مجدد وصل کنید.
  • اندروید استودیو را ریستارت کنید.
• اگر همچنان اندروید استودیو دستگاه را شناسایی نکرد یا آن را غیرمجاز اعلام کرد، مراحل زیر را دنبال کنید:
  • دستگاه اندرویدی را از کامپیوتر جدا کنید.
  • در دستگاه اندرویدی وارد مسیر Settings->Developer Options

     شوید.

  • بر روی گزینه Revoke USB Debugging authorizations

     کلیک کنید.

  • مجدداً دستگاه را به کامپیوتر متصل کنید.
  • در صورت درخواست مجوز با آن‌ها موافقت کنید.
• در نهایت، اگر همچنان مشکلات در این خصوص پابرجا بود، می‌توان مستندات سایت مرجع (+) در این خصوص را بررسی کرد.

گام هفتم: بررسی خروجی برنامه

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

با نگاه کردن به برنامه در شبیه‌ساز علاوه بر دکمه Next، می‌توان متوجه دکمه‌ای در گوشه سمت راست صفحه نیز شد. با فشردن این دکمه پیام کوتاهی در پایین صفحه نمایش داده می‌شود. این سبک نمایش پیام با عنوان Snackbar شناخته می‌شود و یکی از متداول‌ترین روش‌ها برای اطلاع رسانی به کاربران است.

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

 را نمایش می‌دهد. در ادامه می‌توان رویداد مورد نظر در زمان فشردن این گزینه را نیز در برنامه پیاده‌سازی کرد.

گام سوم آموزش کاتلین در اندروید استودیو بررسی بخش طراحی رابط کاربری

هر صفحه رابط کاربری در برنامه اندرویدی از یک یا چند «فرگمنت» (Fragment) تشکیل شده است.

فرگمنت‌ها همان طور که از نامشان پیداست جز مستقلی نیستند و در ارتباط با یکدیگر اکتیویتی مورد نظر را تشکیل می‌دهند. استفاده از فرگمنت‌ها کار سازماندهی و مدیریت بخش‌های مختلف برنامه را آسان‌تر می‌کند.

صفحه‌ای که متن Hello first fragment

 را نمایش می‌دهد، توسط فرگمنت FirstFragment

 ساخته شده است. این فرگمنت در زمان ساخت پروژه جدید در اندروید استودیو ایجاد شده است. هر فرگمنت استفاده شده در برنامه با فایل «طرح‌بندی» (Layout) مشخصی مرتبط است که رابط کاربری آن بخش را مشخص می‌کند. فایل‌های طرح‌بندی در فرمت XML

 تعریف می‌شوند.

 

اندروید استودیو برای طراحی رابط کاربری برنامه اندرویدی «ویرایشگر طرح‌بندی» (Layout Editor) را ارائه کرده است. در این ویرایشگر امکان ساخت و تغییر طرح‌بندی از طریق کدنویسی با زبان XML

 و همچنین استفاده از «ویرایشگر بصری تعاملی» (Interactive Visual Editor) وجود دارد.

هر عنصر مورد استفاده در فایل طرح‌بندی «ویو» (View) نامیده می‌شود. در این بخش از آموزش کاتلین در اندروید استودیو برخی از بخش‌های ویرایشگر طرح‌بندی مورد بررسی قرار می‌گیرند و نحوه تغییر خصوصیات و ویژگی‌های ویو‌ها نیز آموزش داده می‌شود.

گام اول: باز کردن ویرایشگر طرح‌بندی

برای دسترسی به ویرایشگر طرح‌بندی همانند تصویر زیر باید در سمت چپ پنل Project

 پوشه layout

 را از مسیر app > res > layout

 باز کرد.

در گام بعدی، باید بر روی فایل fragment_first.xml

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

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

• Pallette: این بخش در سمت چپ ویرایشگر طرح‌بندی قرار دارد و شامل مجموعه‌ای از ویو‌ها است که می‌توان آن‌ها را به برنامه اضافه کرد.
• Component Tree: این بخش در گوشه سمت چپ پایین ویرایشگر طرح‌بندی قرار دارد و ساختار ویو‌های مورد استفاده در برنامه را به صورت درختی نمایش ‌می‌دهد.
• Design Editor: این بخش در مرکز ویرایشگر طرح‌بندی قرار دارد و نمایشی بصری است از آنچه که در زمان کامپایل برنامه اندرویدی رخ می‌دهد. در این بخش امکان نمایش به صورت بصری یا کد XML

   یا هر دو حالت وجود دارد.

• Attributes Panel: در گوشه سمت راست بالای ویرایشگر طرح‌بندی همانند تصویر زیر 3 نماد وجود دارد. این نماد‌ها مربوط به نحوه نمایش رابط کاربری و به ترتیب بیانگر حالت‌های «کد» (Code Only)، «کد و طراحی» (Code + Design)، «طراحی» (Design Only) هستند.

در ادامه نوشته هر بخش به طور دقیق‌تری مورد بررسی قرار خواهد گرفت.

گام دوم: بررسی بخش Component Tree

برای مشاهده ساختار درختی طرح‌بندی برنامه باید ابتدا فایل fragment_first.xml

 را باز کرد.

در صورت عدم نمایش این بخش باید حالت نمایش را به جای Split

 یا Code

 به حالت Design

 تغییر داد.

این بخش نحوه چیدمان و ارتباط ویو‌های فایل طرح‌بندی برنامه را با یکدیگر به صورت سلسله مراتبی نمایش می‌دهد. با کلیک کردن بر روی برچسب عمودی Component Tree

 می‌توان این بخش را بست و مجدداً با کلیک در همین قسمت آن را بازگرداند.

گام سوم: مشاهده ساختار درختی

در ساختار درختی موجود در Component Tree

 باید به این نکته دقت داشت که ریشه سلسله مراتب ویو‌ها همواره نمایی از نوع ConstraintLayout

 است.

هر فایل طرح‌بندی دارای یک نمای ریشه است که تمام نماهای دیگر را در برمی‌گیرد. نمای ریشه همواره شامل مجموعه‌ای از ویو‌ها است که تحت عنوان view group

 شناخته می‌شود.

نمای ConstraintLayout

 در واقع نوعی view group

 است. در این مثال نیز نمای ConstraintLayout

 شامل یک ویو از نوع TextView

 است که textview_first

 نامیده می‌شود و همچنین ویویی از نوع Button

 با نام button_first

 را در بر می‌گیرد.

با قرار دادن نحوه نمایش بر روی حالت Code می‌توان ویو‌های رابط کاربری را در قالب کدهای XML

 مشاهده کرد.

نمونه کد بالا فایل طرح‌بندی برنامه را در قالب کد نشان می‌دهد.

 

گام چهارم: تغییر مقادیر ویژگی‌ها

برای تغییر مقادیر مربوط به ویو‌ها هم از طریق کدهای XML

 می‌توان تغییرات لازم را انجام داد و هم این کار از طریق پنل مربوطه در بخش Attributes

 قابل انجام است.

برای تغییر از طریق کد، ابتدا باید حالت نمایش را روی Code

 قرار داد و سپس ویژگی‌های عنصر TextView

 را تغییر داد.

در نمونه کد بالا، خصوصیت text

 به متن نمایش داده شده توسط TextView

 اشاره دارد و با تغییر آن می‌توان متن نمایشی را تغییر داد. در روش دیگر برای تغییر ویژگی‌های مربوط به عناصر باید در بخش Component Tree

 بر روی عنصر textview_first

 کلیک کرد.

سپس در پنل سمت راست یعنی Attributes

 و در بخش Declared Attributes

 ویژگی text

 را همانند تصویر زیر به مقدار دلخواه تغییر داد.

گام پنجم: تغییر ویژگی‌های نمایش متن

علاوه بر تغییر متن نمایشی می‌توان سایر ويژگی‌های مربوط به نمایش متن را نیز در ویرایشگر طرح‌بندی تغییر داد.

در حالتی که textview_first

 در بخش Component Tree

 به حالت انتخاب قرار دارد، همانند تصویر زیر در ویرایشگر طرح‌بندی باید در بخش Common Attributes

 بر روی textAppearance

 کلیک کرد.‌

ذکر این نکته نیز ضروری است که شاید برای یافتن این بخش نیاز باشد تا صفحه را به پایین پیمایش کرد. در گام بعدی می‌توان برخی از خصوصیات ظاهری متن را تغییر داد. به عنوان مثال، می‌توان فونت متن را تغییر یا اندازه متن را افزایش داد. همچنین، به متن قالب‌بندی بولد (Bold) را اعمال کرد.

برای تغییر رنگ متن باید خصوصیت text color

 را تغییر داد. برای این منظور باید در کادر مربوطه رنگ مورد نظر خود را وارد کرد. بعد از کلیک بر روی این بخش و وارد کردن حتی اولین حرف از رنگ مربوطه منویی کشویی همانند تصویر زیر با مقادیر ممکن باز می‌شود.

در این لیست اولین رنگ که مربوط به رنگ خاکستری است را با نام @android:color/darker_gray

 انتخاب کنید. سپس، در صورت نیاز سایر بخش‌های مربوطه را نیز می‌توان تغییر داد. در نهایت، با قراردادن حالت نمایش بر روی کد می‌توان نمونه کد XML

 را به صورت زیر مشاهده کرد.

در گام انتهایی با اجرای برنامه می‌توان تغییرات اعمال شده بر روی رشته Hello World!

 را مشاهده کرد.

گام ششم: نمایش تمام مشخصات

برای دسترسی به تمام مشخصات قابل انتخاب برای متن در پنل Attributes

 باید پیمایش به سمت پایین را انجام داد.

در تصویر زیر می‌توان فهرستی از تمام مشخصات قابل انتخاب برای TextView

 را مشاهده کرد.

ادامه آموزش کاتلین در اندروید استودیو با نحوه افزودن منابع به پروژه

تا اینجای نوشته آموزش کاتلین در اندروید استودیو نحوه تغییر مقادیر ویژگی‌ها بیان شد. در ادامه، نحوه ساخت «منابع» (Resources) مختلف قابل استفاده در پروژه آموزش داده خواهد شد.

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

• نحوه تعریف منابع مختلف برای پروژه
• افزودن و استفاده از «منابع رنگ» (Color Resources)
• تغییر ارتفاع و عرض بخش طرح‌بندی

 

گام اول: افزودن منابع رنگ به پروژه

در گام ابتدایی باید رنگ جدیدی را به منابع رنگ اضافه کرد. در ادامه، برای تغییر رنگ متن و پس‌زمینه آن باید به صورت زیر عمل کرد.

• در سمت چپ پنل Project

   ، برای باز شدن فایل منابع رنگ باید دو مرتبه بر روی بخش res > values > colors.xml

   کلیک کرد.

• با باز شدن فایل colors.xml

   در ویرایشگر اندروید استودیو، می‌توان 3 رنگ مشخص شده در این بخش را مشاهده کرد. رنگ‌های موجود در این بخش را می‌توان در طراحی رابط کاربری برنامه مشاهده کرد. به عنوان مثال، رنگ بنفش به کار رفته در نوار بالایی (app bar) برنامه نیز از رنگ‌های موجود در این بخش انتخاب شده است.

    #6200EE
    #3700B3
    #03DAC5

• اکنون باید به سراغ فایل fragment_first.xml

   رفت تا کدهای XML

   مربوط به طرح‌بندی برنامه را مشاهده کرد.

• در این بخش باید «مشخصه» (Property) جدیدی را به TextView

   با نام android:background

   اضافه کرد و مقدار @color

   را در این بخش قرار داد. بعد از تایپ کلمه @color

   همانند تصویر زیر منویی برای انتخاب ظاهر می‌شود.

• در منوی ظاهر شده گزینه @color/colorPrimaryDark

   را باید انتخاب کرد.

• در نهایت مشخصه android:textColor

   را تغییر داده و مقدار @android:color/white

   را برای آن انتخاب می‌کنیم.

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

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

گام دوم: افزودن رنگ جدید برای تغییر رنگ پس‌ زمینه

در این بخش از آموزش کاتلین در اندروید استودیو نحوه تغییر رنگ پس‌زمینه صفحه نمایش آموزش داده خواهد شد. برای این منظور باید مراحل زیر را به ترتیب دنبال کرد:

• ابتدا فایل colors.xml

   را باز و رنگ جدیدی با نام screenBackground

   را به مجموعه رنگ‌های قبلی به صورت زیر اضافه می‌کنیم.

#FFEE58

• سپس، فایل fragment_first.xml

   باید انتخاب کرد.

• در ساختار Component Tree

   گزینه ConstraintLayout

   را انتخاب می‌کنیم.

• در پنل Attributes

   مشخصه background

   را انتخاب می‌کنیم.

• با نوشتن حرف c در این بخش، منویی همانند تصویر زیر ظاهر شده که امکان انتخاب رنگ مورد نظر را به کاربر می‌دهد.

• در قسمت پس‌زمینه همانند تصویر زیر باید بر روی بخش زرد رنگ موجود در سمت چپ مشخصه background

   کلیک کرد.

• در ادامه کادری برای انتخاب رنگ به کاربر نمایش داده می‌شود. برای تعیین رنگ سفارشی نیز می‌توان بر روی گزینه Custom

   کلیک کرد.

• در نهایت، به آسانی می‌توان رنگ پس‌زمینه را تغییر داد. ذکر این نکته نیز ضروری است که رنگ انتخابی باید با رنگ‌های colorPrimary

   و colorPrimaryDark

   متفاوت باشد.

گام سوم: تغییر مشخصه عرض و ارتفاع

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

• باید ابتدا فایل fragment_first.xml

   از بخش Component Tree

   را باز کرده و سپس، گزینه ConstraintLayout

   را انتخاب کرد.

• در پنل Attributes

   بخش Layout

   را باید پیدا کرده و گسترش داد.

• مقدار هر دو مشخصه layout_width

   و layout_height

   بر روی match_parent

   تنظیم شده است. بنابراین، این بخش تمام صفحه نمایش را در بر می‌گیرد.

• همانند تصویر زیر تمام پس‌زمینه صفحه نمایش از رنگ تعیین شده برای screenBackground

   استفاده می‌کند.

• ویو textview_first

   را انتخاب کنید. در حال حاضر مشخصه‌های عرض و ارتفاع این ویو دارای مقدار wrap_content

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

• عرض و ارتفاع ویو را به مقدار match_constraint

   تغییر دهید. منظور از match_constraint

   این است که ویو می‌تواند تا حداکثر مقدار ممکن بزرگ شود. در این حالت متن موجود در TextView

   به سمت بالا چپ منتقل می‌شود و TextView

   نیز همانند تصویر زیر از لحاظ ابعاد تا ویو button

   تغییر می‌کند.

• برای درک بهتر مفاهیم موجود در مبحث تغییر عرض و ارتفاع ویوها در رابط کاربری می‌توان عرض ویو را بر روی match_constraint

   و ارتفاع آن را بر روی wrap_content

   قرار داد و نتیجه را مشاهده کرد. علاوه بر این، می‌توان عرض و ارتفاع ویو button_first

   را نیز تغییر داد.

• در انتها عرض و ارتفاع هر دو ویو TextView

   و Button

   را به مقدار اولیه یعنی wrap_content

   باید تغییر داد.

 

افزودن عناصر رابط کاربری در ادامه آموزش کاتلین در اندروید استودیو

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

در ادامه، نحوه افزودن دو دکمه دیگر به رابط کاربری آموزش داده خواهد شد و وضعیت رابط کاربری در انتها به صورت زیر خواهد بود.

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

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

گام اول: مشاهده محدودیت های ویو

طراحی رابط کاربری به کمک ConstraintLayout یکی از جدیدترین روش‌های طراحی است که توسط گوگل معرفی شده است. در این شیوه طراحی امکان طراحی لایه‌های پیچیده وجود دارد و دیگر برای طراحی یک صفحه نیاز به استفاده از لایه‌های تو در تو و سلسله مراتبی نیست.

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

• ابتدا در فایل fragment_first.xml

   محدودیت‌های مربوط به ویو TextView

   را مشاهده کنید.

app:layout_constraintBottom_toTopOf="@id/button_first"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"

• مقادیر موجود در نمونه کد بالا موقعیت TextView

   در رابط کاربری را مشخص می‌کنند. بر همین اساس می‌توان موقعیت‌های چهارگانه (بالا، پایین، چپ، راست) یک ویو را نسبت به موقعیت‌های چهارگانه ویوی دیگر محدود کرد.

• ویو textview_first

   را از بخش Component Tree

   انتخاب کرده و از پنل Attributes

   بخش Constraint Widget

   را مشاهده کنید.

• با توجه به تصویر بالا مربع موجود در مرکز، ویو انتخاب شده را نمایش می‌دهد. هر کدام از نقاط خاکستری رنگ نیز محدودیتی را در بالا، پایین، چپ و راست نشان می‌دهند. در ادامه، تصویر زیر محدودیت‌های بین TextView

   و Button

   را به خوبی نمایش می‌دهد.

گام دوم: افزودن دکمه و محدود کردن موقعیت آن‌ها

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

برای همین منظور ابتدا چند دکمه به رابط کاربری اضافه می‌کنیم و سپس، برخی محدودیت‌های دکمه Next

 را تغییر می‌دهیم. برای افزودن دکمه به رابط کاربری مراحل زیر را باید دنبال کرد.

• در گوشه بالا سمت چپ ویرایشگر طرح‌بندی بخش Palette

   را انتخاب کنید. برای مشاهده تمام ویو‌های موجود در این بخش می‌توان از بالا به پایین عمل پیمایش را انجام داد.

• بر روی بخش Buttons

   کلیک کرده و آن را بر روی نمای طرح‌بندی بکشید.

• در انتها می‌توان مشاهده کرد که Button

   به بخش Component Tree

   که زیر مجموعه ConstraintLayout

   اضافه شده است.

گام سوم: افزودن محدودیت به دکمه جدید

بعد از ایجاد دکمه جدید در این بخش موقعیت بالای این دکمه را به پایین TextView

 محدود خواهیم کرد. برای این منظور باید به صورت زیر عمل کرد.

• همانند تصویر زیر مکان نما را روی دایره بالایی دکمه قرار دهید.

• بر روی دایره بالایی دکمه کلیک کرده و آن را به سمت دایره پایین TextView

   بکشید.

• در نهایت دکمه به سمت بالا منتقل می‌شود و دقیقاً در پایین TextView

   قرار می‌گیرد.

• با بررسی کد XML

   مربوط به Button

   می‌توان محدودیت جدید اضافه شده به آن را مشاهده کرد.

app:layout_constraintTop_toBottomOf="@+id/textview_first"

قبل از افزودن دکمه جدید به رابط کاربری باید برچسب دکمه موجود را تغییر داد. برای این منظور طبق مراحل زیر باید عمل کرد.

• بر روی دکمه موجود در رابط کاربری کلیک کنید.
• در پنل Attributes

   بخش مربوط به id

   را بیابید.

• مقدار آن را از button

   به toast_button

   تغییر دهید.

گام چهارم: افزودن محدودیت های جدید

در ادامه برای تکمیل رابط کاربری و تعیین دقیق موقعیت هر کدام از عناصر موجود در آن، محدودیت‌های جدیدی باید برای هر عنصر اعمال شود.

• سمت راست دکمه Next

   را به سمت راست صفحه نمایش محدود کنید.

• محدودیت سمت چپ دکمه Next

   را حذف کنید.

• در ادامه موقعیت بالا و پایین دکمه Next

   را محدود کنید تا بالای دکمه به پایین TextView

   و پایین آن به پایین صفحه محدود شود. سمت راست دکمه به سمت راست صفحه محدود شده است.

• در انتها نیز موقعیت پایین TextView

   را به پایین صفحه محدود کنید.

در نهایت، بعد از افزودن و حذف محدودیت‌های مورد نظر رابط کاربری نهایی برنامه باید همانند تصویر زیر باشد.

گام پنجم: استخراج منابع رشته

در این بخش از آموزش کاتلین در اندروید استودیو، نحوه استفاده از «منابع رشته» (String Resource) در رابط کاربری توضیح داده شده است.

مشخصه text

 که مربوط به متن نمایشی است در بسیاری از ویو‌های رابط کاربری از جمله: Button

 ، TextView

 و سایر موارد کاربرد دارد. برای تعریف این ویژگی می‌توان به صورت زیر عمل کرد.

android:text="BUTTON"

این ساده‌ترین راه برای تعیین مقدار ویژگی text

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

به عنوان مثال، دکمه مشخصی با متن نمایشی Next

 در چند جای برنامه تعریف شده است و نیاز است تا متن آن به Back

 تغییر یابد. در این صورت باید متن تمام دکمه‌ها را به صورت جداگانه تغییر داد که این کار زمان زیادی را از توسعه‌دهنده می‌گیرد. در مثالی دیگر، برای تغییر زبان اپلیکیشن نیز باید به صورت جداگانه متن نمایشی هر کدام از عناصر را به متن مورد نظر تغییر داد.

استفاده از منابع رشته‌ای در اندروید استودیو علاوه بر صرفه‌جویی در زمان توسعه باعث می‌شود تا تغییرات نیز به سرعت در برنامه قابل پیاده‌سازی باشند. در ادامه، نحوه استفاده از منابع رشته‌ای در اندروید استودیو مورد بررسی قرار گرفته است.

• در فایل طرح‌بندی برنامه ویژگی text

   مربوط به دکمه toast_button

   را بیابید.

• در کد بالا ویژگی text

   به جای ارجاع به منابع رشته‌ای مستقیماً در بخش طرح‌بندی قرار گرفته است.

• برای رفع این مشکل، همانند تصویر زیر بر روی کد مشخص شده کلیک کنید. در سمت چپ آیکونی با تصویر لامپ نمایش داده می‌شود.

• بر روی تصویر لامپ کلیک و در منوی باز شده گزینه Extract string resource

   را انتخاب کنید.

• در کادر محاوره‌ای نمایش داده شده مقدار بخش Resource name

   را به toast_button_text

   و مقدار بخش Resource value

   را به Toast

   تغییر دهید و در انتها بر روی دکمه OK

   کلیک کنید.

• در نهایت با مشاهده کد XML

   مربوط به دکمه toast_button

   می‌توان متوجه تغییر مقدار ویژگی text

   به @string/toast_button_text

   شد.

• در گام بعدی برای مشاهده فایل منابع رشته‌ای از مسیر res > values > strings.xml

   فایل strings.xml

   را باز کنید.

   ... 
   Toast

• برنامه را برای بررسی خروجی نهایی مجدداً اجرا کنید.

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

 اضافه کرد.

گام ششم: بروزرسانی دکمه Next

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

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

• همانند تغییری که برای دکمه Toast

   انجام شد، شناسه دکمه Next

   را از مقدار button_first

   به random_button

   باید تغییر داد.

• در صورت مشاهده کادر محاوره‌ای که درخواست بروزرسانی تمام کاربرد‌های دکمه Next

   در برنامه را دارد، باید بر روی Yes

   کلیک کرد. با این کار تمام ارجاعات به دکمه مورد نظر در برنامه برطرف می‌شود.

• در فایل strings.xml

   بر روی منبع رشته‌ای next

   کلیک راست کنید.

• در منوی ظاهر شده گزینه Refactor > Rename

   را انتخاب کرده و نام را به random_button_text

   تغییر دهید.

• بر روی گزینه Refactor

   کلیک کرده و کادر محاوره‌ای را ببندید.

• مقدار رشته را از Next

   به Random

   تغییر دهید.

گام هفتم: افزودن سومین دکمه

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

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

• در فایل fragment_first.xml

   دکمه جدیدی را به رابط کاربری اضافه کنید و آن را بین دکمه Toast

   و Random

   قرار دهید.

• همانند دو دکمه دیگر محدودیت‌هایی عمودی را برای دکمه جدید باید اعمال کرد. بالای دکمه جدید را به پایین TextView

   محدود کرده و پایین آن را به پایین صفحه محدود کنید.

• در زمینه محدودیت‌های افقی نیز سمت چپ دکمه جدید را باید به سمت راست دکمه Toast

   و سمت راست آن را به سمت چپ دکمه Random

   محدود کرد. در نهایت رابط کاربری برنامه به صورت زیر خواهد بود.

• در ادامه باید به سراغ کد XML

   مربوط به دکمه جدید رفته و مقدار ویژگی text

   آن را به Button

   تغییر داد.

کد XML

 مربوط به طرح نهایی رابط کاربری در ادامه ارائه شده است.

تغییر ظاهر ویو های برنامه در آموزش کاتلین در اندروید استودیو

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

گام اول: افزودن منابع رنگ جدید

همان طور که پیش‌تر نیز عنوان شد، برای افزایش سرعت توسعه و همچنین، تسهیل در روند تغییرات مورد نیاز در برنامه می‌توان از «منابع» (Resources) استفاده کرد.

این منابع می‌توانند مربوط به رشته‌ها، رنگ‌ها و تمام بخش‌های کاربردی برنامه باشند. در ادامه رنگ جدیدی را به «منابع رنگی» (Color Resources) برنامه اضافه خواهیم کرد.

• در فایل colors.xml

   مقدار screenBackground

   را به #2196F3

   تغییر دهید.

• رنگ جدیدی با نام buttonBackground

   ایجاد کنید و مقدار آن را برابر #BBDEFB

   تغییر دهید.

#BBDEFB

گام دوم: افزودن رنگ پس زمینه برای دکمه ها

در فایل طرح‌بندی برنامه برای هر کدام از دکمه‌های موجود رنگ پس‌زمینه مشخص خواهد شد. این رنگ پس‌زمینه همان رنگ جدید ایجاد شده با نام buttonBackground

 در فایل منابع رنگی برنامه است.

android:background="@color/buttonBackground"

گام سوم: تغییر حاشیه سمت راست و چپ دکمه ها

یکی از ویژگی‌های مهم عناصر در رابط کاربری اندروید «حاشیه» (Margin) است. این ویژگی در واقع به فاصله بیرونی آن عنصر با سایر عناصر برنامه گفته می‌شود و در جهت‌های مختلف قابل تنظیم است.

در ادامه، برای دکمه‌های برنامه این خصوصیت تنظیم خواهد شد.

• برای دکمه Toast

   حاشیه سمت چپ را برابر مقدار 24dp

   و برای دکمه Random

   حاشیه سمت راست را برابر 24dp

   قرار دهید.

• راه دیگر برای تنظیم ویژگی margin استفاده از Constraint Widget

   موجود در پنل  Attributes

   است. همانند تصویر زیر می‌توان برای هر سمت عنصر میزان margin را تعیین کرد.

گام چهارم: تغییر ظاهر TextView

در ادامه تغییر رابط کاربری برنامه، تغییراتی را بر روی TextView اعمال خواهیم کرد.

• رنگ پس‌زمینه مربوط به TextView

   که با ویژگی android:background

   شناخته می‌شود را از کد XML

   حذف کنید.

• اندازه متن TextView

   را به عدد 72sp

   تغییر دهید.

• فونت متن TextView

   را به مقدار sans-serif

   تغییر دهید.

گام پنجم: اجرای برنامه

در نهایت بعد از انجام تغییرات فوق، ظاهر نهایی برنامه به صورت زیر خواهد بود. در صورت استفاده از رنگ‌ها و فونت‌های مختلف ممکن است ظاهر برنامه کمی متفاوت به نظر برسد.

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

تا به اینجا دکمه‌های اضافه شده در صفحه اصلی برنامه هیچ کاری نمی‌کنند، زیرا عملکرد مورد نظر برای هیچ کدام از آن‌ها تعریف نشده است.

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

در این صفحه دکمه Toast

 در صورت فشرده شدن باید پیغامی را به کاربر نمایش دهد و دکمه Count

 نیز در صورت فشرده شدن توسط کاربر، مقدار نمایش داده شده در TextView

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

• نحوه پیدا کردن یک ویو با استفاده از id

   مشخص شده برای آن در رابط کاربری

• نحوه افزودن رویداد کلیک برای دکمه‌های برنامه
• نحوه دریافت و تنظیم مقدار برای ویژگی‌های ویو از طریق کدنویسی در برنامه

 

گام اول: نمایش پیغام

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

موجب می‌شود که در زمان فشردن دکمه توسط کاربر پیغامی از نوع toast نمایش داده شود.

پیغام toast در اندروید در واقع پیام کوتاهی است که به صورت مختصر در پایین صفحه نمایش داده می‌شود. در تصویر زیر نمونه‌ای از این سبک نمایش پیام نشان داده شده است.

در ادامه نحوه ایجاد پیام toast در اندروید ارائه شده است.

• از مسیر «app > java > com.example.android.myfirstapp > FirstFragment» فایل FirstFragment.kt

   را باز کنید.

• همان طور که پیش‌تر نیز عنوان شد به کمک id

   می‌توان ویو‌های مختلف در برنامه را از یکدیگر تفکیک کرد. برای این منظور نیاز است از متد findViewByID()

   استفاده شود. در نتیجه، کد برنامه می‌تواند دکمه random_button

   را به وسیله id

   آن پیدا کند.

• در ادامه برای ایجاد رویداد کلیک برای دکمه از متد setOnClickListener

   باید استفاده شود.

• سپس در بدنه رویداد کلیک ساخته شده پیغام toast مورد نظر را ایجاد می‌کنیم. در کد زیر نحوه نمایش پیغام toast آورده شده است.

// find the toast_button by its ID and set a click listener
view.findViewById(R.id.toast_button).setOnClickListener {
   // create a Toast with some text, to appear for a short time
   val myToast = Toast.makeText(context, "Hello Toast!", Toast.LENGTH_SHORT)
   // show the Toast
   myToast.show()
}

• در انتها بر روی دکمه Toast

   کلیک و نتیجه را مشاهده کنید.

گام دوم: ایجاد رویداد کلیک برای دکمه COUNT

پیاده‌سازی رویداد کلیک برای دکمه Toast

 به دلیل نمایش پیغام و ارتباط نداشتن با سایر ویو‌های برنامه بسیار ساده بود.

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

پیاده‌سازی خواهد شد که موجب بروزرسانی و تغییر در سایر ویو‌های برنامه می‌شود. در واقع با فشردن دکمه COUNT

 متن TextView

 برنامه یک واحد افزایش می‌یابد.

• در فایل fragment_first.xml

   باید id

   مشخص شده برای TextView

   را بیابید.

• در فایل FirstFragment.kt

   رویداد کلیکی برای دکمه count_button

   ایجاد کنید. به دلیل زیاد بودن کدهای این بخش در بدنه رویداد کلیک از تابع countMe()

   استفاده کنید.

view.findViewById(R.id.count_button).setOnClickListener {
   countMe(view)
}

• در کلاس FirstFragment

   تابع countMe()

   را ایجاد کنید. این تابع در زمان کلیک بر روی دکمه Count

   اجرا می‌شود.

private fun countMe(view: View) {

}

• برای دریافت TextView

   برنامه که متن مورد نظر را نمایش می‌دهد از متد findViewById()

   استفاده کنید.

  ...
   // Get the text view
   val showCountTextView = view.findViewById(R.id.textview_first)

•  مقدار showCountTextView

   را دریافت کرده و در متغیر countString

   از نوع رشته ذخیره کنید.

 ...
   // Get the value of the text view.
   val countString = showCountTextView.text.toString()

• مقدار دریافتی را به متغیر عددی تبدیل کرده و آن را یک واحد افزایش دهید.

   ...
   // Convert value to a number and increment it
   var count = countString.toInt()
   count++

• مقدار جدید به دست آمده را به ویژگی text

   مربوط به TextView

   اختصاص دهید.

 ...
   // Display the new value in the text view.
   showCountTextView.text = count.toString()

• کد کامل مربوط به تابع countMe

   در ادامه ارائه شده است.

private fun countMe(view: View) {
   // Get the text view
   val showCountTextView = view.findViewById(R.id.textview_first)

   // Get the value of the text view.
   val countString = showCountTextView.text.toString()

   // Convert value to a number and increment it
   var count = countString.toInt()
   count++

   // Display the new value in the text view.
   showCountTextView.text = count.toString()
}

• در نهایت بر روی دکمه COUNT

   کلیک و نتیجه را مشاهده کنید.

پیاده سازی دومین فرگمنت آخرین گام در آموزش کاتلین در اندروید استودیو

تا به اینجای آموزش کاتلین در اندروید استودیو صفحه اول برنامه به طور کامل پیاده‌سازی شد.

در گام بعدی، رویداد کلیک دکمه Random

 پیاده‌سازی خواهد شد تا عددی تصادفی بین 0 و عدد فعلی در صفحه دوم برنامه نمایش داده شود.

در این بخش از آموزش کاتلین در اندروید استودیو نحوه ارسال اطلاعات به «فرگمنت» (Fragment) بعدی در برنامه آموزش داده خواهد شد.

گام اول: افزودن TextView برای نمایش عدد تصادفی

در مرکز صفحه مربوط به فرگمنت دوم یک TextView

 برای نمایش عدد تصادفی قرار دارد. در ادامه این TextView

 پیاده‌سازی خواهد شد.

• از مسیر app > res > layout > fragment_second.xml

   فایل fragment_second.xml

   را باز کنید.

• محدودیت موجود بین TextView

   و Button

   را حذف کنید.

• از بخش کناری TextView

   دیگری به صفحه اضافه کنید. از این TextView

   برای نمایش عدد تصادفی استفاده می‌شود.

• از پنل Attributes

   مشخصه id

   را برای TextView

   برابر @+id/textview_random

   قرار دهید.

• رنگ متن TextView

   را برابر @android:color/white

   و اندازه متن را برابر 72sp

   قرار دهید.

• ویژگی متن TextView

   را تا زمانی که عدد تصادفی تولید شود، برابر “R”

   قرار دهید.

• در ادامه کد XML

   مربوط به TextView

   ارائه شده است.

گام دوم: تغییر TextView برای نمایش عدد تصادفی

در ادامه تغییراتی رو در TextView

 بالای صفحه ایجاد خواهیم کرد.

• ویژگی android:text

   مربوط به TextView

   را همانند مثال‌های قبلی از منابع رشته‌ای پروژه انتخاب کنید.

android:text="@string/hello_second_fragment"

• از پنل Attributes

   مشخصه id

   را برای TextView

   برابر textview_header

    قرار دهید.

• ویژگی ارتفاع را برابر wrap_content

   قرار دهید تا در صورت نیاز ارتفاع با توجه محتوای TextView

   تغییر کند.

• مقدار ویژگی margin را برای بالا، چپ و راست برابر 24dp

   قرار دهید.

• رنگ متن TextView

   را برابر @color/colorPrimaryDark

    و اندازه متن را برابر 24sp

   قرار دهید.

• در فایل strings.xml

   مقدار hello_second_fragment

   به Here is a random number between 0 and %d.

   تغییر دهید.

• با استفاده از گزینه Refactor > Rename

   نام hello_second_fragment

   به random_heading

   تغییر دهید.

• در ادامه کد XML

   مربوط به این TextView

   ارائه شده است.

گام سوم: تغییر رنگ پس زمینه صفحه دوم

در این بخش رنگ پس‌زمینه صفحه دوم برنامه را تغییر داده خواهد شد.

• در فایل colors.xml

   یک رنگ جدید اضافه کنید.

#26C6DA

• در فایل fragment_second.xml

   که رابط کاربری اکتیویتی دوم برنامه را نمایش می‌دهد، رنگ پس‌زمینه ConstraintLayout

   را تغییر دهید. برای این منظور می‌توان از تغییر پنل Attributes

   همانند تصویر زیر این کار را انجام داد.

• علاوه بر این، از طریق کد XML

   نیز می‌توان رنگ پس‌زمینه را به صورت زیر تغییر داد.

android:background="@color/screenBackground2"

در حال حاضر، رابط کاربری برنامه برای صفحه دوم تکمیل شده است، اما در صورت انتخاب دکمه Random

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

 

گام چهارم: بررسی نمودار ناوبری در اندروید استودیو

در زمان ایجاد پروژه از ساختار Basic Activity

 به عنوان الگوی پروژه استفاده شد. در زمان استفاده از این الگو برای ساخت پروژه جدید، اندروید استودیو دو فرگمنت و یک «نمودار ناوبری» (Navigation Graph) برای اتصال این دو در برنامه مشخص می‌کند.

علاوه بر این، دکمه‌ای را نیز برای رفتن از فرگمنت اول به فرگمنت دوم نیز تعیین می‌کند. این همان دکمه‌ای است که به دکمه Random

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

• از مسیر app > res > navigation > nav_graph.xml

   فایل nav_graph.xml

   را انتخاب کنید.

• صفحه‌ای شبیه «ویرایشگر طرح‌بندی» (Layout Editor) در نمای طراحی ظاهر می‌شود. همان طور که در تصویر زیر نیز مشخص است، فرگمنت‌ها با چند فلش نشان داده شده‌اند. علاوه بر این، با دکمه‌های +

   و –

   در گوشه پایین سمت راست می‌توان عمل بزرگنمایی را انجام داد.

در این بخش می‌توان به صورت آزادانه عناصر را در نمودار ناوبری جابجا کرد.

گام پنجم: ایجاد آرگومان برای ناوبری

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

• در بخش Navigation Graph

   بر روی FirstFragment

   کلیک کنید.

• بخش Actions

   از پنل Attributes

   نشان می‌دهد که در زمان رفتن به فرگمنت SecondFragment

   چه اتفاقی رخ می‌دهد.

• بر روی SecondFragment

   کلیک کنید.

• بخش Arguments

   چیزی را نمایش نمی‌دهد.

• بر روی دکمه +

   موجود در بخش Arguments

   کلیک کنید.

• در کادر محاوره‌ای باز شده در قسمت Name

   مقدار myArg

   را وارد و در بخش Type

   گزینه Integer

   را انتخاب کنید.

• در انتها بر روی دکمه Add

   کلیک کنید.

 

گام ششم: ارسال متغیر به فرگمنت دوم

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

در فرگمنت اول دکمه Random

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

 به فرگمنت دوم ارسال شود.

• از مسیر app > java > com.example.myfirstapp > FirstFragment

   فایل FirstFragment.kt

   را باز کنید.

• در تابع onViewCreated()

   رویداد کلیک دکمه مورد نظر را بیابید.

• کد موجود در این بخش را با کد زیر جایگزین کنید تا textview_first

   شناسایی شود.

val showCountTextView = view.findViewById(R.id.textview_first)

• متن نمایش داده شده در textview_first

   را از نوع رشته‌ای به نوع «عدد صحیح» (Int) تبدیل کنید.

val currentCount = showCountTextView.text.toString().toInt()

• متغیر currentCount

   را به عنوان آرگومان ورودی متد actionFirstFragmentToSecondFragment()

   مشخص کنید.

val action = FirstFragmentDirections.actionFirstFragmentToSecondFragment(currentCount)

• در ادامه یک کنترلر برای عملکرد مورد نظر ایجاد کنید.

findNavController().navigate(action)

• کد کامل مربوط به این بخش در ادامه ارائه شده است.

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
   super.onViewCreated(view, savedInstanceState)

   view.findViewById(R.id.random_button).setOnClickListener {
       val showCountTextView = view.findViewById(R.id.textview_first)
       val currentCount = showCountTextView.text.toString().toInt()
       val action = FirstFragmentDirections.actionFirstFragmentToSecondFragment(currentCount)
       findNavController().navigate(action)
   }

   // find the toast_button by its ID
   view.findViewById(R.id.toast_button).setOnClickListener {
       // create a Toast with some text, to appear for a short time
       val myToast = Toast.makeText(context, "Hello Toast!", Toast.LENGTH_SHORT)
       // show the Toast
       myToast.show()
   }

   view.findViewById(R.id.count_button).setOnClickListener {
       countMe(view)
   }
}

• برنامه را اجرا کنید. با چند مرتبه کلیک بر روی دکمه Count

   عدد نمایش داده شده در صفحه را تغییر دهید. در نهایت، بر روی دکمه Random

   کلیک کنید و به صفحه بعد منتقل شوید.

گام هفتم: بروزرسانی فرگمنت دوم برای محاسبه و نمایش عدد تصادفی

در بخش قبلی کد مورد نظر باعث ارسال متغیر موجود به فرگمنت دوم می‌شد. در گام بعدی باید برای دریافت و نمایش متغیر ارسالی در SecondFragment.kt

 باید تغییراتی صورت پذیرد.

• در فایل SecondFragment.kt

   در بالای صفحه کد زیر را وارد کنید.

import androidx.navigation.fragment.navArgs

• در فایل SecondFragment.kt

   قبل از متد onViewCreated()

   کد زیر را برای مشخص کردن آرگومان‌ها وارد کنید.

val args: SecondFragmentArgs by navArgs()

• در فایل SecondFragment.kt

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

   و سپس تنظیم آن برای textview_header

   را وارد کنید.

val count = args.myArg
val countText = getString(R.string.random_heading, count)
view.findViewById(R.id.textview_header).text = countText

• کد زیر را برای تولید عدد تصادفی بین 0 و متغیر Count

   وارد کنید.

val random = java.util.Random()
var randomNumber = 0
if (count > 0) {
   randomNumber = random.nextInt(count + 1)
}

• کد زیر را برای تبدیل عدد تصادفی ایجاد شده به متغیر از نوع رشته‌ای و سپس تنظیم آن برای textview_random

   وارد کنید.

view.findViewById(R.id.textview_random).text = randomNumber.toString()

• کد کامل مربوط به این بخش در ادامه ارائه شده است.

    val args: SecondFragmentArgs by navArgs()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        view.findViewById(R.id.button_second).setOnClickListener {
            findNavController().navigate(R.id.action_SecondFragment_to_FirstFragment)
        }

        val count = args.myArg
        val countText = getString(R.string.random_heading, count)
        view.findViewById(R.id.textview_header).text = countText

        val random = java.util.Random()
        var randomNumber = 0
        if (count > 0) {
            randomNumber = random.nextInt(count + 1)
        }
        view.findViewById(R.id.textview_random).text = randomNumber.toString()
    }

• برنامه را اجرا کنید و چند مرتبه بعد از کلیک بر روی دکمه Count

   و تغییر عدد نمایش داده شده، بر روی دکمه Random

   کلیک کنید.

تصویر بالا نمایانگر خروجی نهایی برنامه است.

 

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

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

کاربردهای کاتلین به جز برنامه‌نویسی اندروید چیست؟

کاتلین در زمره زبان‌های برنامه‌نویسی همه‌منظوره قرار می‌گیرد، به این معنی که می‌توان از آن در حوزه‌های مختلفی استفاده کرد. معمولاً از زبان کاتلین برای «توسعه چند پلتفرمی» (Cross-Platform) در زمینه توسعه اپلیکیشن‌های موبایل، برنامه‌نویسی اندروید، جاوا اسکریپت و برنامه‌نویسی سمت سرور استفاده می‌شود.

بهترین کتاب آموزش کاتلین در اندروید استودیو چیست؟

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

آیا از کاتلین در برنامه‌نویسی وب نیز می‌توان استفاده کرد؟

بله. علاوه بر استفاده از کاتلین برای توسعه بک‌اند (Back-End) با توجه به تعامل کاتلین با جاوا اسکریپت می‌توان از آن برای «برنامه نویسی سمت کلاینت یا کاربر» (Client-Side Programming) نیز استفاده کرد. کاتلین با توجه به ویژگی‌هایی که دارد می‌تواند از کتابخانه‌های رایج جاوا اسکریپت استفاده کند.

کاتلین یا فلاتر کدامیک بهتر است؟

برای مقایسه کاتلین و فلاتر (Flutter) باید این نکته را در نظر گرفت که کاتلین زبان رسمی برای توسعه اندروید است، در حالی که فلاتر به عنوان محبوب‌ترین فریمورک توسعه چند پلتفرمی شناخته می‌شود. در نتیجه، در مقایسه این دو باید به شرایط و نیاز‌های افراد یا سازمان‌ها توجه شود.

جمع‌بندی

ظهور زبان برنامه‌نویسی کاتلین در سال‌های اخیر توجه بسیاری از علاقه‌مندان به برنامه نویسی اندروید را به خود جلب کرده است.

قابلیت‌های جذاب کاتلین، موجب شده است تا برنامه نویسان اندرویدی که سال‌ها به کمک زبان جاوا اقدام به ساخت اپلیکیشن می‌کردند، نیز به دنبال مهاجرت به این زبان باشند.

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

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