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

۲۹۰۷ بازدید
آخرین به‌روزرسانی: ۲۴ اردیبهشت ۱۴۰۲
زمان مطالعه: ۳۲ دقیقه
آموزش کاتلین در اندروید استودیو با ساخت یک اپ ساده

امروز با توجه به همه‌گیری سیستم عامل اندروید بسیاری از افراد به دنبال پیاده‌سازی ایده‌های خود در قالب اپلیکیشن اندروید هستند. معرفی زبان برنامه‌نویسی کاتلین (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 در سمت راست باز است، روی دکمه کوچک کردن در گوشه سمت راست بالا کلیک کنید تا مخفی شود.
آموزش مخفی کردن پنجره 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  باید مراحل زیر را به ترتیب انجام داد.

فعال کردن 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) هستند.
Attributes Panel

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

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

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

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

حالت نمایش Component Tree

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

بستن Component Tree

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

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

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

نمای ConstraintLayout  در واقع نوعی view group  است. در این مثال نیز نمای ConstraintLayout  شامل یک ویو از نوع TextView  است که textview_first  نامیده می‌شود و همچنین ویویی از نوع Button  با نام button_first  را در بر می‌گیرد.

مشاهده ساختار درختی

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

1<androidx.constraintlayout.widget.ConstraintLayout
2  ... >
3
4   <TextView
5      ...  />
6
7   <Button
8      ...  />
9
10</androidx.constraintlayout.widget.ConstraintLayout>

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

 

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

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

برای تغییر از طریق کد، ابتدا باید حالت نمایش را روی Code  قرار داد و سپس ویژگی‌های عنصر TextView  را تغییر داد.

1<TextView
2   android:layout_width="wrap_content"
3   android:layout_height="wrap_content"
4   android:text="Hello first fragment"
5   ... />

در نمونه کد بالا، خصوصیت text  به متن نمایش داده شده توسط TextView  اشاره دارد و با تغییر آن می‌توان متن نمایشی را تغییر داد. در روش دیگر برای تغییر ویژگی‌های مربوط به عناصر باید در بخش Component Tree  بر روی عنصر textview_first  کلیک کرد.

ویژگی های متن

سپس در پنل سمت راست یعنی Attributes  و در بخش Declared Attributes  ویژگی text  را همانند تصویر زیر به مقدار دلخواه تغییر داد.

پنل attributes

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

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

در حالتی که textview_first  در بخش Component Tree  به حالت انتخاب قرار دارد، همانند تصویر زیر در ویرایشگر طرح‌بندی باید در بخش Common Attributes  بر روی textAppearance  کلیک کرد.‌

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

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

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

انتخاب رنگ برای متن

در این لیست اولین رنگ که مربوط به رنگ خاکستری است را با نام @android:color/darker_gray  انتخاب کنید. سپس، در صورت نیاز سایر بخش‌های مربوطه را نیز می‌توان تغییر داد. در نهایت، با قراردادن حالت نمایش بر روی کد می‌توان نمونه کد XML  را به صورت زیر مشاهده کرد.

1<TextView
2   android:id="@+id/textview_first"
3   android:layout_width="wrap_content"
4   android:layout_height="wrap_content"
5   android:fontFamily="sans-serif-condensed"
6   android:text="@string/hello_first_fragment"
7   android:textColor="@android:color/darker_gray"
8   android:textSize="30sp"
9   android:textStyle="bold"

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

خروجی نهایی بعد از تغییرات متن

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

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

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

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

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

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

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

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

 

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

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

  • در سمت چپ پنل Project  ، برای باز شدن فایل منابع رنگ باید دو مرتبه بر روی بخش res > values > colors.xml  کلیک کرد.
باز کردن بخش منابع رنگ
  • با باز شدن فایل colors.xml  در ویرایشگر اندروید استودیو، می‌توان 3 رنگ مشخص شده در این بخش را مشاهده کرد. رنگ‌های موجود در این بخش را می‌توان در طراحی رابط کاربری برنامه مشاهده کرد. به عنوان مثال، رنگ بنفش به کار رفته در نوار بالایی (app bar) برنامه نیز از رنگ‌های موجود در این بخش انتخاب شده است.
1<resources>
2    <color name="colorPrimary">#6200EE</color>
3    <color name="colorPrimaryDark">#3700B3</color>
4    <color name="colorAccent">#03DAC5</color>
5</resources>
  • اکنون باید به سراغ فایل fragment_first.xml  رفت تا کدهای XML  مربوط به طرح‌بندی برنامه را مشاهده کرد.
  • در این بخش باید «مشخصه» (Property) جدیدی را به TextView  با نام android:background  اضافه کرد و مقدار @color  را در این بخش قرار داد. بعد از تایپ کلمه @color  همانند تصویر زیر منویی برای انتخاب ظاهر می‌شود.
منوی انتخاب رنگ
  • در منوی ظاهر شده گزینه @color/colorPrimaryDark  را باید انتخاب کرد.
  • در نهایت مشخصه android:textColor  را تغییر داده و مقدار @android:color/white  را برای آن انتخاب می‌کنیم.

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

رابط کاربری برنامه بعد از تغییر رنگ متن

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

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

  • ابتدا فایل colors.xml  را باز و رنگ جدیدی با نام screenBackground  را به مجموعه رنگ‌های قبلی به صورت زیر اضافه می‌کنیم.
1<color name="screenBackground">#FFEE58</color>
  • سپس، فایل fragment_first.xml  باید انتخاب کرد.
  • در ساختار Component Tree  گزینه ConstraintLayout  را انتخاب می‌کنیم.
انتخاب ConstraintLayout
  • در پنل Attributes  مشخصه background  را انتخاب می‌کنیم.
  • با نوشتن حرف c در این بخش، منویی همانند تصویر زیر ظاهر شده که امکان انتخاب رنگ مورد نظر را به کاربر می‌دهد.
انتخاب پس زمینه
  • در قسمت پس‌زمینه همانند تصویر زیر باید بر روی بخش زرد رنگ موجود در سمت چپ مشخصه background  کلیک کرد.
انتخاب رنگ
  • در ادامه کادری برای انتخاب رنگ به کاربر نمایش داده می‌شود. برای تعیین رنگ سفارشی نیز می‌توان بر روی گزینه Custom  کلیک کرد.
تعیین رنگ سفارشی
  • در نهایت، به آسانی می‌توان رنگ پس‌زمینه را تغییر داد. ذکر این نکته نیز ضروری است که رنگ انتخابی باید با رنگ‌های colorPrimary  و colorPrimaryDark  متفاوت باشد.

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

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

  • باید ابتدا فایل fragment_first.xml  از بخش Component Tree  را باز کرده و سپس، گزینه ConstraintLayout  را انتخاب کرد.
بخش Component Tree
  • در پنل Attributes  بخش Layout  را باید پیدا کرده و گسترش داد.
بخش Layout
  • مقدار هر دو مشخصه layout_width  و layout_height  بر روی match_parent  تنظیم شده است. بنابراین، این بخش تمام صفحه نمایش را در بر می‌گیرد.
  • همانند تصویر زیر تمام پس‌زمینه صفحه نمایش از رنگ تعیین شده برای screenBackground  استفاده می‌کند.
رنگ مورد استفاده در پس زمینه
  • ویو textview_first  را انتخاب کنید. در حال حاضر مشخصه‌های عرض و ارتفاع این ویو دارای مقدار wrap_content  هستند، به این معنا که مقدار این دو مشخصه ارتباط مستقیمی با محتوای درون این ویو دارد.
  • عرض و ارتفاع ویو را به مقدار match_constraint  تغییر دهید. منظور از match_constraint  این است که ویو می‌تواند تا حداکثر مقدار ممکن بزرگ شود. در این حالت متن موجود در TextView  به سمت بالا چپ منتقل می‌شود و TextView  نیز همانند تصویر زیر از لحاظ ابعاد تا ویو button  تغییر می‌کند.
تغییر ابعاد textview
  • برای درک بهتر مفاهیم موجود در مبحث تغییر عرض و ارتفاع ویوها در رابط کاربری می‌توان عرض ویو را بر روی match_constraint  و ارتفاع آن را بر روی wrap_content  قرار داد و نتیجه را مشاهده کرد. علاوه بر این، می‌توان عرض و ارتفاع ویو button_first  را نیز تغییر داد.
  • در انتها عرض و ارتفاع هر دو ویو TextView  و Button  را به مقدار اولیه یعنی wrap_content  باید تغییر داد.

 

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

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

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

افزودن دکمه به رابط کاربری

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

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

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

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

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

  • ابتدا در فایل fragment_first.xml  محدودیت‌های مربوط به ویو TextView  را مشاهده کنید.
1app:layout_constraintBottom_toTopOf="@id/button_first"
2app:layout_constraintEnd_toEndOf="parent"
3app:layout_constraintStart_toStartOf="parent"
4app:layout_constraintTop_toTopOf="parent"
  • مقادیر موجود در نمونه کد بالا موقعیت TextView  در رابط کاربری را مشخص می‌کنند. بر همین اساس می‌توان موقعیت‌های چهارگانه (بالا، پایین، چپ، راست) یک ویو را نسبت به موقعیت‌های چهارگانه ویوی دیگر محدود کرد.
  • ویو textview_first  را از بخش Component Tree  انتخاب کرده و از پنل Attributes  بخش Constraint Widget  را مشاهده کنید.
بخش constraint widget
  • با توجه به تصویر بالا مربع موجود در مرکز، ویو انتخاب شده را نمایش می‌دهد. هر کدام از نقاط خاکستری رنگ نیز محدودیتی را در بالا، پایین، چپ و راست نشان می‌دهند. در ادامه، تصویر زیر محدودیت‌های بین TextView  و Button  را به خوبی نمایش می‌دهد.
محدودیت های بین ویوهای مختلف

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

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

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

  • در گوشه بالا سمت چپ ویرایشگر طرح‌بندی بخش Palette  را انتخاب کنید. برای مشاهده تمام ویو‌های موجود در این بخش می‌توان از بالا به پایین عمل پیمایش را انجام داد.
انتخاب بخش palette در ویرایشگر طرح بندی
  • بر روی بخش Buttons  کلیک کرده و آن را بر روی نمای طرح‌بندی بکشید.
افزودن button به رابط کاربری
  • در انتها می‌توان مشاهده کرد که Button  به بخش Component Tree  که زیر مجموعه ConstraintLayout  اضافه شده است.

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

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

  • همانند تصویر زیر مکان نما را روی دایره بالایی دکمه قرار دهید.
انتخاب موقعیت بالای دکمه
  • بر روی دایره بالایی دکمه کلیک کرده و آن را به سمت دایره پایین TextView  بکشید.
جابجایی button
  • در نهایت دکمه به سمت بالا منتقل می‌شود و دقیقاً در پایین TextView  قرار می‌گیرد.
قرار گیری دکمه در پایین textview
  • با بررسی کد XML  مربوط به Button  می‌توان محدودیت جدید اضافه شده به آن را مشاهده کرد.
1app:layout_constraintTop_toBottomOf="@+id/textview_first"

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

  • بر روی دکمه موجود در رابط کاربری کلیک کنید.
  • در پنل Attributes  بخش مربوط به id  را بیابید.
  • مقدار آن را از button  به toast_button  تغییر دهید.

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

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

  • سمت راست دکمه Next  را به سمت راست صفحه نمایش محدود کنید.
  • محدودیت سمت چپ دکمه Next  را حذف کنید.
  • در ادامه موقعیت بالا و پایین دکمه Next  را محدود کنید تا بالای دکمه به پایین TextView  و پایین آن به پایین صفحه محدود شود. سمت راست دکمه به سمت راست صفحه محدود شده است.
  • در انتها نیز موقعیت پایین TextView  را به پایین صفحه محدود کنید.

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

رابط کاربری نهایی برنامه

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

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

مشخصه text  که مربوط به متن نمایشی است در بسیاری از ویو‌های رابط کاربری از جمله: Button  ، TextView  و سایر موارد کاربرد دارد. برای تعریف این ویژگی می‌توان به صورت زیر عمل کرد.

1android:text="BUTTON"

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

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

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

  • در فایل طرح‌بندی برنامه ویژگی text  مربوط به دکمه toast_button  را بیابید.
1<Button
2   android:id="@+id/toast_button"
3   android:layout_width="wrap_content"
4   android:layout_height="wrap_content"
5   android:text="Button"
  • در کد بالا ویژگی text  به جای ارجاع به منابع رشته‌ای مستقیماً در بخش طرح‌بندی قرار گرفته است.
  • برای رفع این مشکل، همانند تصویر زیر بر روی کد مشخص شده کلیک کنید. در سمت چپ آیکونی با تصویر لامپ نمایش داده می‌شود.
افزودن منابع رشته‌ای به برنامه
  • بر روی تصویر لامپ کلیک و در منوی باز شده گزینه Extract string resource  را انتخاب کنید.
انتخاب گزینه extract string resource
  • در کادر محاوره‌ای نمایش داده شده مقدار بخش Resource name  را به toast_button_text  و مقدار بخش Resource value  را به Toast  تغییر دهید و در انتها بر روی دکمه OK  کلیک کنید.
تغییر منابع پروژه
  • در نهایت با مشاهده کد XML  مربوط به دکمه toast_button  می‌توان متوجه تغییر مقدار ویژگی text  به @string/toast_button_text  شد.
1<Button
2   android:id="@+id/button"
3   android:layout_width="wrap_content"
4   android:layout_height="wrap_content"
5   android:text="@string/toast_button_text"
  • در گام بعدی برای مشاهده فایل منابع رشته‌ای از مسیر res > values > strings.xml  فایل strings.xml  را باز کنید.
1<resources>
2   ... 
3   <string name="toast_button_text">Toast</string>
4</resources>
  • برنامه را برای بررسی خروجی نهایی مجدداً اجرا کنید.
رابط کاربری نهایی برنامه بعد از تغییر منابع رشته

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

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

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

  • همانند تغییری که برای دکمه Toast  انجام شد، شناسه دکمه Next  را از مقدار button_first  به random_button  باید تغییر داد.
  • در صورت مشاهده کادر محاوره‌ای که درخواست بروزرسانی تمام کاربرد‌های دکمه Next  در برنامه را دارد، باید بر روی Yes  کلیک کرد. با این کار تمام ارجاعات به دکمه مورد نظر در برنامه برطرف می‌شود.
بروزرسانی ارجاعات دکمه
  • در فایل strings.xml  بر روی منبع رشته‌ای next  کلیک راست کنید.
  • در منوی ظاهر شده گزینه Refactor > Rename  را انتخاب کرده و نام را به random_button_text  تغییر دهید.
  • بر روی گزینه Refactor  کلیک کرده و کادر محاوره‌ای را ببندید.
  • مقدار رشته را از Next  به Random  تغییر دهید.

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

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

طرح نهایی برنامه با 3 دکمه

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

  • در فایل fragment_first.xml  دکمه جدیدی را به رابط کاربری اضافه کنید و آن را بین دکمه Toast  و Random  قرار دهید.
  • همانند دو دکمه دیگر محدودیت‌هایی عمودی را برای دکمه جدید باید اعمال کرد. بالای دکمه جدید را به پایین TextView  محدود کرده و پایین آن را به پایین صفحه محدود کنید.
  • در زمینه محدودیت‌های افقی نیز سمت چپ دکمه جدید را باید به سمت راست دکمه Toast  و سمت راست آن را به سمت چپ دکمه Random  محدود کرد. در نهایت رابط کاربری برنامه به صورت زیر خواهد بود.
رابط کاربری برنامه با دکمه جدید در پروژه کاتلین اندروید استودیو
  • در ادامه باید به سراغ کد XML  مربوط به دکمه جدید رفته و مقدار ویژگی text  آن را به Button  تغییر داد.

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

1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout <?xml version="1.0" encoding="utf-8"?>
3<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
4   xmlns:app="http://schemas.android.com/apk/res-auto"
5   xmlns:tools="http://schemas.android.com/tools"
6   android:layout_width="match_parent"
7   android:layout_height="match_parent"
8   android:background="@color/screenBackground"
9   tools:context=".FirstFragment">
10
11   <TextView
12       android:id="@+id/textview_first"
13       android:layout_width="wrap_content"
14       android:layout_height="wrap_content"
15       android:background="@color/colorPrimaryDark"
16       android:fontFamily="sans-serif-condensed"
17       android:text="@string/hello_first_fragment"
18       android:textColor="@android:color/white"
19       android:textSize="30sp"
20       android:textStyle="bold"
21       app:layout_constraintBottom_toBottomOf="parent"
22       app:layout_constraintEnd_toEndOf="parent"
23       app:layout_constraintStart_toStartOf="parent"
24       app:layout_constraintTop_toTopOf="parent" />
25
26   <Button
27       android:id="@+id/random_button"
28       android:layout_width="wrap_content"
29       android:layout_height="wrap_content"
30       android:text="@string/random_button_text"
31       app:layout_constraintBottom_toBottomOf="parent"
32       app:layout_constraintEnd_toEndOf="parent"
33       app:layout_constraintTop_toBottomOf="@+id/textview_first" />
34
35   <Button
36       android:id="@+id/toast_button"
37       android:layout_width="wrap_content"
38       android:layout_height="wrap_content"
39       android:text="@string/toast_button_text"
40       app:layout_constraintBottom_toBottomOf="parent"
41       app:layout_constraintStart_toStartOf="parent"
42       app:layout_constraintTop_toBottomOf="@+id/textview_first" />
43
44   <Button
45       android:id="@+id/button2"
46       android:layout_width="wrap_content"
47       android:layout_height="wrap_content"
48       android:text="Button"
49       app:layout_constraintBottom_toBottomOf="parent"
50       app:layout_constraintEnd_toStartOf="@+id/random_button"
51       app:layout_constraintStart_toEndOf="@+id/toast_button"
52       app:layout_constraintTop_toBottomOf="@+id/textview_first" />
53</androidx.constraintlayout.widget.ConstraintLayout>

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

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

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

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

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

  • در فایل colors.xml  مقدار screenBackground  را به #2196F3  تغییر دهید.
  • رنگ جدیدی با نام buttonBackground  ایجاد کنید و مقدار آن را برابر #BBDEFB  تغییر دهید.
1<color name="buttonBackground">#BBDEFB</color>

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

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

1android:background="@color/buttonBackground"

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

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

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

  • برای دکمه Toast  حاشیه سمت چپ را برابر مقدار 24dp  و برای دکمه Random  حاشیه سمت راست را برابر 24dp  قرار دهید.
  • راه دیگر برای تنظیم ویژگی margin استفاده از Constraint Widget  موجود در پنل  Attributes  است. همانند تصویر زیر می‌توان برای هر سمت عنصر میزان margin را تعیین کرد.
تنظیم ويژگی margin برای دکمه ها در پروژه برنامه نویسی کاتلین در اندروید استودیو

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

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

  • رنگ پس‌زمینه مربوط به TextView  که با ویژگی android:background  شناخته می‌شود را از کد XML  حذف کنید.
  • اندازه متن TextView  را به عدد 72sp  تغییر دهید.
  • فونت متن TextView  را به مقدار sans-serif  تغییر دهید.

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

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

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

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

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

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

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

در این صفحه دکمه Toast  در صورت فشرده شدن باید پیغامی را به کاربر نمایش دهد و دکمه Count  نیز در صورت فشرده شدن توسط کاربر، مقدار نمایش داده شده در TextView  را بروزرسانی کند. در این بخش از آموزش کاتلین در اندروید استودیو موارد زیر مورد بررسی قرار خواهد گرفت.

  • نحوه پیدا کردن یک ویو با استفاده از id  مشخص شده برای آن در رابط کاربری
  • نحوه افزودن رویداد کلیک برای دکمه‌های برنامه
  • نحوه دریافت و تنظیم مقدار برای ویژگی‌های ویو از طریق کدنویسی در برنامه

 

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

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

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

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

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

  • از مسیر «app > java > com.example.android.myfirstapp > FirstFragment» فایل FirstFragment.kt  را باز کنید.
  • همان طور که پیش‌تر نیز عنوان شد به کمک id  می‌توان ویو‌های مختلف در برنامه را از یکدیگر تفکیک کرد. برای این منظور نیاز است از متد findViewByID()  استفاده شود. در نتیجه، کد برنامه می‌تواند دکمه random_button  را به وسیله id  آن پیدا کند.
  • در ادامه برای ایجاد رویداد کلیک برای دکمه از متد setOnClickListener  باید استفاده شود.
  • سپس در بدنه رویداد کلیک ساخته شده پیغام toast مورد نظر را ایجاد می‌کنیم. در کد زیر نحوه نمایش پیغام toast آورده شده است.
1// find the toast_button by its ID and set a click listener
2view.findViewById<Button>(R.id.toast_button).setOnClickListener {
3   // create a Toast with some text, to appear for a short time
4   val myToast = Toast.makeText(context, "Hello Toast!", Toast.LENGTH_SHORT)
5   // show the Toast
6   myToast.show()
7}
  • در انتها بر روی دکمه Toast  کلیک و نتیجه را مشاهده کنید.
نمایش پیغام toast در اندروید استودیو

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

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

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

  • در فایل fragment_first.xml  باید id  مشخص شده برای TextView  را بیابید.
1<TextView 
2    android:id="@+id/textview_first"
  • در فایل FirstFragment.kt  رویداد کلیکی برای دکمه count_button  ایجاد کنید. به دلیل زیاد بودن کدهای این بخش در بدنه رویداد کلیک از تابع countMe()  استفاده کنید.
1view.findViewById<Button>(R.id.count_button).setOnClickListener {
2   countMe(view)
3}
  • در کلاس FirstFragment  تابع countMe()  را ایجاد کنید. این تابع در زمان کلیک بر روی دکمه Count  اجرا می‌شود.
1private fun countMe(view: View) {
2
3}
  • برای دریافت TextView  برنامه که متن مورد نظر را نمایش می‌دهد از متد findViewById()  استفاده کنید.
1  ...
2   // Get the text view
3   val showCountTextView = view.findViewById<TextView>(R.id.textview_first)
  •  مقدار showCountTextView  را دریافت کرده و در متغیر countString  از نوع رشته ذخیره کنید.
1 ...
2   // Get the value of the text view.
3   val countString = showCountTextView.text.toString()
  • مقدار دریافتی را به متغیر عددی تبدیل کرده و آن را یک واحد افزایش دهید.
1   ...
2   // Convert value to a number and increment it
3   var count = countString.toInt()
4   count++
  • مقدار جدید به دست آمده را به ویژگی text  مربوط به TextView  اختصاص دهید.
1 ...
2   // Display the new value in the text view.
3   showCountTextView.text = count.toString()
  • کد کامل مربوط به تابع countMe  در ادامه ارائه شده است.
1private fun countMe(view: View) {
2   // Get the text view
3   val showCountTextView = view.findViewById<TextView>(R.id.textview_first)
4
5   // Get the value of the text view.
6   val countString = showCountTextView.text.toString()
7
8   // Convert value to a number and increment it
9   var count = countString.toInt()
10   count++
11
12   // Display the new value in the text view.
13   showCountTextView.text = count.toString()
14}
  • در نهایت بر روی دکمه COUNT  کلیک و نتیجه را مشاهده کنید.
رویداد کلیک دکمه count در اندروید استودیو

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

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

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

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

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

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

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

  • از مسیر app > res > layout > fragment_second.xml  فایل fragment_second.xml  را باز کنید.
  • محدودیت موجود بین TextView  و Button  را حذف کنید.
حذف محدودیت بین textview و button در اندروید استودیو
  • از بخش کناری TextView  دیگری به صفحه اضافه کنید. از این TextView  برای نمایش عدد تصادفی استفاده می‌شود.
  • از پنل Attributes  مشخصه id  را برای TextView  برابر @+id/textview_random  قرار دهید.
  • رنگ متن TextView  را برابر @android:color/white  و اندازه متن را برابر 72sp  قرار دهید.
  • ویژگی متن TextView  را تا زمانی که عدد تصادفی تولید شود، برابر "R"  قرار دهید.
  • در ادامه کد XML  مربوط به TextView  ارائه شده است.
1<TextView
2   android:id="@+id/textview_random"
3   android:layout_width="wrap_content"
4   android:layout_height="wrap_content"
5   android:text="R"
6   android:textColor="@android:color/white"
7   android:textSize="72sp"
8   android:textStyle="bold"
9   app:layout_constraintBottom_toTopOf="@+id/button_second"
10   app:layout_constraintEnd_toEndOf="parent"
11   app:layout_constraintStart_toStartOf="parent"
12   app:layout_constraintTop_toBottomOf="@+id/textview_second"
13   app:layout_constraintVertical_bias="0.45" />

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

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

  • ویژگی android:text  مربوط به TextView  را همانند مثال‌های قبلی از منابع رشته‌ای پروژه انتخاب کنید.
1android: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  ارائه شده است.
1<TextView
2   android:id="@+id/textview_header"
3   android:layout_width="0dp"
4   android:layout_height="wrap_content"
5   android:layout_marginStart="24dp"
6   android:layout_marginLeft="24dp"
7   android:layout_marginTop="24dp"
8   android:layout_marginEnd="24dp"
9   android:layout_marginRight="24dp"
10   android:text="@string/random_heading"
11   android:textColor="@color/colorPrimaryDark"
12   android:textSize="24sp"
13   app:layout_constraintEnd_toEndOf="parent"
14   app:layout_constraintStart_toStartOf="parent"
15   app:layout_constraintTop_toTopOf="parent" />

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

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

  • در فایل colors.xml  یک رنگ جدید اضافه کنید.
1<color name="screenBackground2">#26C6DA</color>
  • در فایل fragment_second.xml  که رابط کاربری اکتیویتی دوم برنامه را نمایش می‌دهد، رنگ پس‌زمینه ConstraintLayout  را تغییر دهید. برای این منظور می‌توان از تغییر پنل Attributes  همانند تصویر زیر این کار را انجام داد.
تغییر رنگ پس زمینه در پروژه کاتلین در اندروید استودیو
  • علاوه بر این، از طریق کد XML  نیز می‌توان رنگ پس‌زمینه را به صورت زیر تغییر داد.
1android: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  شناسایی شود.
1val showCountTextView = view.findViewById<TextView>(R.id.textview_first)
  • متن نمایش داده شده در textview_first  را از نوع رشته‌ای به نوع «عدد صحیح» (Int) تبدیل کنید.
1val currentCount = showCountTextView.text.toString().toInt()
  • متغیر currentCount  را به عنوان آرگومان ورودی متد actionFirstFragmentToSecondFragment()  مشخص کنید.
1val action = FirstFragmentDirections.actionFirstFragmentToSecondFragment(currentCount)
  • در ادامه یک کنترلر برای عملکرد مورد نظر ایجاد کنید.
1findNavController().navigate(action)
  • کد کامل مربوط به این بخش در ادامه ارائه شده است.
1override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
2   super.onViewCreated(view, savedInstanceState)
3
4   view.findViewById<Button>(R.id.random_button).setOnClickListener {
5       val showCountTextView = view.findViewById<TextView>(R.id.textview_first)
6       val currentCount = showCountTextView.text.toString().toInt()
7       val action = FirstFragmentDirections.actionFirstFragmentToSecondFragment(currentCount)
8       findNavController().navigate(action)
9   }
10
11   // find the toast_button by its ID
12   view.findViewById<Button>(R.id.toast_button).setOnClickListener {
13       // create a Toast with some text, to appear for a short time
14       val myToast = Toast.makeText(context, "Hello Toast!", Toast.LENGTH_SHORT)
15       // show the Toast
16       myToast.show()
17   }
18
19   view.findViewById<Button>(R.id.count_button).setOnClickListener {
20       countMe(view)
21   }
22}
  • برنامه را اجرا کنید. با چند مرتبه کلیک بر روی دکمه Count  عدد نمایش داده شده در صفحه را تغییر دهید. در نهایت، بر روی دکمه Random  کلیک کنید و به صفحه بعد منتقل شوید.

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

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

  • در فایل SecondFragment.kt  در بالای صفحه کد زیر را وارد کنید.
1import androidx.navigation.fragment.navArgs
  • در فایل SecondFragment.kt  قبل از متد onViewCreated()  کد زیر را برای مشخص کردن آرگومان‌ها وارد کنید.
1val args: SecondFragmentArgs by navArgs()
  • در فایل SecondFragment.kt  کدهای زیر را برای دریافت آرگومان ارسالی Count  و سپس تنظیم آن برای textview_header  را وارد کنید.
1val count = args.myArg
2val countText = getString(R.string.random_heading, count)
3view.findViewById<TextView>(R.id.textview_header).text = countText
  • کد زیر را برای تولید عدد تصادفی بین 0 و متغیر Count  وارد کنید.
1val random = java.util.Random()
2var randomNumber = 0
3if (count > 0) {
4   randomNumber = random.nextInt(count + 1)
5}
  • کد زیر را برای تبدیل عدد تصادفی ایجاد شده به متغیر از نوع رشته‌ای و سپس تنظیم آن برای textview_random  وارد کنید.
1view.findViewById<TextView>(R.id.textview_random).text = randomNumber.toString()
  • کد کامل مربوط به این بخش در ادامه ارائه شده است.
1    val args: SecondFragmentArgs by navArgs()
2
3    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
4        super.onViewCreated(view, savedInstanceState)
5
6        view.findViewById<Button>(R.id.button_second).setOnClickListener {
7            findNavController().navigate(R.id.action_SecondFragment_to_FirstFragment)
8        }
9
10        val count = args.myArg
11        val countText = getString(R.string.random_heading, count)
12        view.findViewById<TextView>(R.id.textview_header).text = countText
13
14        val random = java.util.Random()
15        var randomNumber = 0
16        if (count > 0) {
17            randomNumber = random.nextInt(count + 1)
18        }
19        view.findViewById<TextView>(R.id.textview_random).text = randomNumber.toString()
20    }
  • برنامه را اجرا کنید و چند مرتبه بعد از کلیک بر روی دکمه Count  و تغییر عدد نمایش داده شده، بر روی دکمه Random  کلیک کنید.
خروجی نهایی برنامه کاتلین با اندروید استودیو

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

 

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

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

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

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

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

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

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

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

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

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

جمع‌بندی

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

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

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

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

بر اساس رای ۸ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
Android Developers
۱ دیدگاه برای «آموزش کاتلین در اندروید استودیو با ساخت یک اپ ساده»

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

نظر شما چیست؟

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