برنامه نویسی و طراحی سایت

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

جمع‌بندی

faradars mobile

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

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

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

کلیک کنید

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

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

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

کلیک کنید

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

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

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

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

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

کلیک کنید

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

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

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

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

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

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

آموزش کاتلین – پیاده سازی معماری MVP برای توسعه اپلیکیشن های اندروید با Kotlin
فیلم آموزش کاتلین – پیاده سازی معماری MVP برای توسعه اپلیکیشن های اندروید با Kotlin در تم آف

کلیک کنید

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

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

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

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

کلیک کنید

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

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

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

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

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

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

آموزش سمت سرور اندروید با Parse Platform به زبان کاتلین Kotlin
فیلم آموزش سمت سرور اندروید با Parse Platform به زبان کاتلین Kotlin در تم آف

کلیک کنید

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

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

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

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

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

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

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

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

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

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

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

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

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

کلیک کنید

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

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

     کلیک کنید.

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

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

     کلیک کنید.

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

     کلیک کنید.

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

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

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

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

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

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

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

کلیک کنید

  • اگر پنجره 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

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

مطلب پیشنهادی:

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

شروع مطالعه

 

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

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

آموزش سمت سرور اندروید با Parse Platform به زبان کاتلین Kotlin
فیلم آموزش سمت سرور اندروید با Parse Platform به زبان کاتلین Kotlin در تم آف

کلیک کنید

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

     گزینه Run ‘app’

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

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

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

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

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

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

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

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

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

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

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

آموزش کاتلین – پیاده سازی معماری MVP برای توسعه اپلیکیشن های اندروید با Kotlin
فیلم آموزش کاتلین – پیاده سازی معماری MVP برای توسعه اپلیکیشن های اندروید با Kotlin در تم آف

کلیک کنید

  • یک دستگاه اندرویدی مانند گوشی یا تبلت.
  • یک کابل داده برای اتصال دستگاه اندرویدی به کامپیوتر از طریق درگاه 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

       کلیک کنید.

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

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

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

آموزش کتابخانه ویو بایندینگ در کاتلین –  View Binding در Kotlin
فیلم آموزش کتابخانه ویو بایندینگ در کاتلین – View Binding در Kotlin در تم آف

کلیک کنید

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

نمایش اسنک بار

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

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

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

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

آموزش اینتلیجی آیدیا در جاوا و کاتلین – توسعه نرم افزار با IntelliJ IDEA
فیلم آموزش اینتلیجی آیدیا در جاوا و کاتلین – توسعه نرم افزار با IntelliJ IDEA در تم آف

کلیک کنید

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

فرگمنت و اکتیویتی در اندروید

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

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

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

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

مطلب پیشنهادی:

کار با فرگمنت‌ها در برنامه‌نویسی اندروید

شروع مطالعه

 

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

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

آموزش جت پک کامپوز Jetpack Compose برای ساخت رابط کاربری اندروید – مقدماتی
فیلم آموزش جت پک کامپوز Jetpack Compose برای ساخت رابط کاربری اندروید – مقدماتی در تم آف

کلیک کنید

هر عنصر مورد استفاده در فایل طرح‌بندی «ویو» (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

 را باز کرد.

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

کلیک کنید

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

 یا Code

 به حالت Design

 تغییر داد.

حالت نمایش Component Tree

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

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

بستن Component Tree

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

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

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

 است.

آموزش برنامه نویسی اندروید Android – مقدماتی
فیلم آموزش برنامه نویسی اندروید Android – مقدماتی در تم آف

کلیک کنید

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

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

نمای ConstraintLayout

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

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

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

 است که textview_first

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

 با نام button_first

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

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

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

 مشاهده کرد.



   

   

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

مطلب پیشنهادی:

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

شروع مطالعه

 

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

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

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

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

آموزش برنامه نویسی اندروید Android – پیشرفته
فیلم آموزش برنامه نویسی اندروید Android – پیشرفته در تم آف

کلیک کنید

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

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

 را تغییر داد.

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

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

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

 بر روی عنصر textview_first

 کلیک کرد.

ویژگی های متن

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

 و در بخش Declared Attributes

 ویژگی text

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

پنل attributes

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

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

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

کلیک کنید

در حالتی که textview_first

 در بخش Component Tree

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

 بر روی textAppearance

 کلیک کرد.‌

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

کلیک کنید

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

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

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

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

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

آموزش سمت سرور اندروید با Parse Platform به زبان کاتلین Kotlin
فیلم آموزش سمت سرور اندروید با Parse Platform به زبان کاتلین Kotlin در تم آف

کلیک کنید

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

  • نحوه تعریف منابع مختلف برای پروژه
  • افزودن و استفاده از «منابع رنگ» (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

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

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

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

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

آموزش کاتلین – پیاده سازی معماری MVP برای توسعه اپلیکیشن های اندروید با Kotlin
فیلم آموزش کاتلین – پیاده سازی معماری MVP برای توسعه اپلیکیشن های اندروید با Kotlin در تم آف

کلیک کنید

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

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

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

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

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

  • در ساختار Component Tree

     گزینه ConstraintLayout

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

انتخاب ConstraintLayout
  • در پنل Attributes

     مشخصه background

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

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

     کلیک کرد.

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

     کلیک کرد.

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

     و colorPrimaryDark

     متفاوت باشد.

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

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

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

کلیک کنید

  • باید ابتدا فایل 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

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

مطلب پیشنهادی:

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

شروع مطالعه

 

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

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

آموزش کتابخانه ویو بایندینگ در کاتلین –  View Binding در Kotlin
فیلم آموزش کتابخانه ویو بایندینگ در کاتلین – View Binding در Kotlin در تم آف

کلیک کنید

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

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

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

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

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

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

آموزش اینتلیجی آیدیا در جاوا و کاتلین – توسعه نرم افزار با IntelliJ IDEA
فیلم آموزش اینتلیجی آیدیا در جاوا و کاتلین – توسعه نرم افزار با IntelliJ IDEA در تم آف

کلیک کنید

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

  • ابتدا در فایل 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

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

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

     و Button

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

محدودیت های بین ویوهای مختلف

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

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

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

کلیک کنید

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

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

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

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

انتخاب بخش palette در ویرایشگر طرح بندی
  • بر روی بخش Buttons

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

افزودن button به رابط کاربری
  • در انتها می‌توان مشاهده کرد که Button

     به بخش Component Tree

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

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

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

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

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

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

کلیک کنید

  • همانند تصویر زیر مکان نما را روی دایره بالایی دکمه قرار دهید.
انتخاب موقعیت بالای دکمه
  • بر روی دایره بالایی دکمه کلیک کرده و آن را به سمت دایره پایین TextView

     بکشید.

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

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

قرار گیری دکمه در پایین textview
  • با بررسی کد XML

     مربوط به Button

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

app:layout_constraintTop_toBottomOf="@+id/textview_first"

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

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

     بخش مربوط به id

     را بیابید.

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

     به toast_button

     تغییر دهید.

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

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

آموزش سمت سرور اندروید با Parse Platform به زبان کاتلین Kotlin
فیلم آموزش سمت سرور اندروید با Parse Platform به زبان کاتلین Kotlin در تم آف

کلیک کنید

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

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

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

     را حذف کنید.

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

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

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

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

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

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

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

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

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

آموزش کاتلین – پیاده سازی معماری MVP برای توسعه اپلیکیشن های اندروید با Kotlin
فیلم آموزش کاتلین – پیاده سازی معماری MVP برای توسعه اپلیکیشن های اندروید با Kotlin در تم آف

کلیک کنید

مشخصه text

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

 ، TextView

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

android:text="BUTTON"

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

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

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

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

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

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

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

     مربوط به دکمه toast_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

     شد.

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

     فایل strings.xml

     را باز کنید.


   ... 
   Toast
  • برنامه را برای بررسی خروجی نهایی مجدداً اجرا کنید.
رابط کاربری نهایی برنامه بعد از تغییر منابع رشته

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

 اضافه کرد.

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

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

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

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

کلیک کنید

  • همانند تغییری که برای دکمه 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

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





   

   

   

   

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

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

آموزش کتابخانه ویو بایندینگ در کاتلین –  View Binding در Kotlin
فیلم آموزش کتابخانه ویو بایندینگ در کاتلین – View Binding در Kotlin در تم آف

کلیک کنید

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

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

آموزش اینتلیجی آیدیا در جاوا و کاتلین – توسعه نرم افزار با IntelliJ IDEA
فیلم آموزش اینتلیجی آیدیا در جاوا و کاتلین – توسعه نرم افزار با IntelliJ IDEA در تم آف

کلیک کنید

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

  • در فایل colors.xml

     مقدار screenBackground

     را به #2196F3

     تغییر دهید.

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

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

     تغییر دهید.

#BBDEFB

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

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

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

android:background="@color/buttonBackground"

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

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

آموزش برنامه نویسی اندروید Android – مقدماتی
فیلم آموزش برنامه نویسی اندروید Android – مقدماتی در تم آف

کلیک کنید

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

  • برای دکمه Toast

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

     و برای دکمه Random

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

     قرار دهید.

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

     موجود در پنل  Attributes

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

تنظیم ويژگی margin برای دکمه ها در پروژه برنامه نویسی کاتلین در اندروید استودیو

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

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

آموزش برنامه نویسی اندروید Android – پیشرفته
فیلم آموزش برنامه نویسی اندروید Android – پیشرفته در تم آف

کلیک کنید

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

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

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

     حذف کنید.

  • اندازه متن TextView

     را به عدد 72sp

     تغییر دهید.

  • فونت متن TextView

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

     تغییر دهید.

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

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

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

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

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

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

کلیک کنید

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

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

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

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

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

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

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

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

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

بهترین زبان برنامه نویسی اندروید چیست ؟ – راهنمای 2022

شروع مطالعه

 

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

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

موجب می‌شود که در زمان فشردن دکمه توسط کاربر پیغامی از نوع 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
  • در انتها بر روی دکمه Toast

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

نمایش پیغام toast در اندروید استودیو

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

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

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

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

کلیک کنید

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

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

 متن TextView

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

  • در فایل fragment_first.xml

     باید id

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

     را بیابید.

  • در فایل FirstFragment.kt

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

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

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

view.findViewById
  • در کلاس 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

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

رویداد کلیک دکمه count در اندروید استودیو

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

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

آموزش پروژه محور اندروید استودیو – ساخت بازی Snake
فیلم آموزش پروژه محور اندروید استودیو – ساخت بازی Snake در تم آف

کلیک کنید

در گام بعدی، رویداد کلیک دکمه 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

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

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

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

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

آموزش گیت  و گیت هاب در اندروید استودیو - Git و GitHub در Android Studio
فیلم آموزش گیت و گیت هاب در اندروید استودیو – Git و GitHub در Android Studio در تم آف

کلیک کنید

  • ویژگی 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

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

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

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

آموزش مقدماتی استفاده از نقشه مپ Map در برنامه نویسی اندروید
فیلم آموزش مقدماتی استفاده از نقشه مپ Map در برنامه نویسی اندروید در تم آف

کلیک کنید

  • در فایل colors.xml

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

#26C6DA
  • در فایل fragment_second.xml

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

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

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

تغییر رنگ پس زمینه در پروژه کاتلین در اندروید استودیو
  • علاوه بر این، از طریق کد XML

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

android:background="@color/screenBackground2"

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

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

مطلب پیشنهادی:

اندروید استودیو چیست ؟ – از صفر تا صد Android Studio

شروع مطالعه

 

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

در زمان ایجاد پروژه از ساختار 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

     کلیک کنید.

مطلب پیشنهادی:

24 کتاب آموزش برنامه نویسی اندروید که باید بخوانید – فهرست ضروری

شروع مطالعه

 

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

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

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

کلیک کنید

در فرگمنت اول دکمه 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
  • برنامه را اجرا کنید. با چند مرتبه کلیک بر روی دکمه 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
  • برنامه را اجرا کنید و چند مرتبه بعد از کلیک بر روی دکمه Count

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

     کلیک کنید.

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

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

مطلب پیشنهادی:

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

شروع مطالعه

 

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

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

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

کلیک کنید

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

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

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

کلیک کنید

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

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

آموزش سمت سرور اندروید با Parse Platform به زبان کاتلین Kotlin
فیلم آموزش سمت سرور اندروید با Parse Platform به زبان کاتلین Kotlin در تم آف

کلیک کنید

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

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

آموزش کاتلین – پیاده سازی معماری MVP برای توسعه اپلیکیشن های اندروید با Kotlin
فیلم آموزش کاتلین – پیاده سازی معماری MVP برای توسعه اپلیکیشن های اندروید با Kotlin در تم آف

کلیک کنید

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

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

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

کلیک کنید

جمع‌بندی

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

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

کلیک کنید

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

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

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

دیدگاهتان را بنویسید

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.