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

در این کد لبه، شما یک اپلیکیشن اندرویدی ساده خواهید ساخت که متن را نمایش می دهد. با درک بیشتر اجزای رابط کاربری (UI) در اندروید، می‌توانید متن را روی صفحه قرار دهید.

پیش نیازها

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

آنچه خواهید آموخت

  • عناصر رابط کاربری، مانند Views و ViewGroups چیست.
  • نحوه نمایش متن در TextView در یک برنامه
  • نحوه تنظیم ویژگی‌ها، مانند متن، فونت و حاشیه در TextView .

آنچه خواهید ساخت

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

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

آنچه شما نیاز دارید

  • یک رایانه با Android Studio نصب شده است.

پروژه Empty Activity ایجاد کنید

  1. برای شروع، یک پروژه جدید Kotlin در Android Studio با استفاده از قالب Empty Activity ایجاد کنید.
  2. برنامه را «تولدت مبارک» صدا کنید، با حداقل سطح API 19 (KitKat).

مهم: اگر با ایجاد یک پروژه جدید در Android Studio آشنا نیستید، برای جزئیات بیشتر به ایجاد و اجرای اولین برنامه اندروید خود مراجعه کنید.

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

هنگامی که این برنامه تولدت مبارک را با الگوی Empty Activity ایجاد کردید، Android Studio منابعی را برای یک برنامه اصلی Android تنظیم کرد، از جمله "Hello World!" پیام در وسط صفحه در این لبه کد، یاد خواهید گرفت که چگونه آن پیام به آنجا می رسد، چگونه متن آن را تغییر دهید تا بیشتر یک تبریک تولد باشد، و چگونه پیام های اضافی را اضافه و قالب بندی کنید.

درباره رابط های کاربری

رابط کاربری (UI) یک برنامه همان چیزی است که روی صفحه می بینید: متن، تصاویر، دکمه ها و بسیاری از انواع دیگر عناصر. نحوه نمایش برنامه چیزها به کاربر و نحوه تعامل کاربر با برنامه است.

هر یک از این عناصر چیزی است که View نامیده می شود. تقریباً هر چیزی که روی صفحه برنامه خود می بینید یک View است. Views می توانند تعاملی باشند، مانند یک دکمه قابل کلیک یا یک فیلد ورودی قابل ویرایش.

در این کد لبه، شما با نوعی View کار خواهید کرد که برای نمایش متن است و TextView نامیده می شود.

Views در یک برنامه اندرویدی به تنهایی روی صفحه نمایش شناور نیستند. Views با یکدیگر رابطه دارند. به عنوان مثال، یک تصویر ممکن است در کنار برخی از متن ها باشد و دکمه ها ممکن است یک ردیف را تشکیل دهند. برای سازماندهی Views ، آنها را در یک ظرف قرار می دهید. ViewGroup محفظه‌ای است که اشیاء View می‌توانند در آن بنشینند و مسئول چیدمان View‌ Views در داخل آن است. چیدمان یا چیدمان می‌تواند بسته به اندازه و نسبت ابعاد صفحه‌نمایش دستگاه Android که برنامه روی آن اجرا می‌شود، تغییر کند، و این چیدمان می‌تواند با این که دستگاه در حالت عمودی یا افقی قرار دارد، تطبیق یابد.

یکی از انواع ViewGroup یک ConstraintLayout است که به شما کمک می کند Views داخل آن را به روشی انعطاف پذیر مرتب کنید.

درباره Layout Editor

ایجاد رابط کاربری با مرتب کردن Views و ViewGroups بخش بزرگی از ایجاد یک برنامه Android است. Android Studio ابزاری به نام Layout Editor به شما کمک می کند تا این کار را انجام دهید. برای تغییر "Hello World!" از ویرایشگر Layout استفاده خواهید کرد. متن را به "تولدت مبارک!"، و بعداً برای استایل دادن به متن ارسال کنید.

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

  • در سمت چپ (1) پنجره Project است که قبلاً آن را دیده اید. تمام فایل هایی که پروژه شما را تشکیل می دهند را فهرست می کند.
  • در مرکز می توانید دو طرح (4) و (5) را ببینید که نشان دهنده طرح صفحه برای برنامه شما هستند. نمایش سمت چپ (4) تقریبی نزدیک از ظاهر صفحه نمایش شما هنگام اجرای برنامه است. به آن نمای طراحی می گویند.
  • نمایش سمت راست (5) نمای Blueprint است که می تواند برای عملیات خاص مفید باشد.
  • پالت (2) حاوی لیست هایی از انواع مختلف Views است که می توانید به برنامه خود اضافه کنید.
  • درخت مؤلفه (3) نمایش متفاوتی از نماهای صفحه شماست. تمام نماهای صفحه نمایش شما را فهرست می کند.
  • در سمت راست (6) صفات هستند. ویژگی های یک View را به شما نشان می دهد و به شما امکان می دهد آنها را تغییر دهید.

درباره Layout Editor و نحوه پیکربندی آن در راهنمای مرجع توسعه دهنده بیشتر بخوانید.

اسکرین شات مشروح از کل Layout Editor :

بیایید برخی تغییرات را در ویرایشگر چیدمان ایجاد کنیم تا برنامه شما بیشتر شبیه یک کارت تولد شود!

پیام Hello World را تغییر دهید

  1. در Android Studio پنجره Project را در سمت چپ پیدا کنید.
  2. به این پوشه ها و فایل ها توجه داشته باشید: پوشه برنامه بیشتر فایل های برنامه را دارد که شما آنها را تغییر خواهید داد. پوشه res برای منابعی مانند تصاویر یا طرح‌بندی صفحه است. پوشه layout مخصوص طرح بندی صفحه است. فایل activity_main.xml حاوی توضیحاتی در مورد چیدمان صفحه شماست.
  3. پوشه برنامه ، سپس پوشه res و سپس پوشه layout را باز کنید.
  4. روی activity_main.xml دوبار کلیک کنید.
    با این کار activity_main.xml در Layout Editor باز می شود و طرح بندی که در نمای Design توضیح می دهد را نشان می دهد.
  1. به فهرست نماها در Component Tree نگاه کنید. توجه داشته باشید که یک ConstraintLayout و یک TextView در زیر آن وجود دارد.
    اینها رابط کاربری برنامه شما را نشان می دهند. TextView تورفتگی دارد زیرا در داخل ConstraintLayout قرار دارد. همانطور که Views بیشتری را به ConstraintLayout اضافه می کنید، آنها به این لیست اضافه می شوند.
  2. توجه داشته باشید که TextView دارای "Hello World!" در کنار آن، که متنی است که هنگام اجرای برنامه مشاهده می کنید.
  3. در Component Tree ، روی TextView کلیک کنید.
  4. ویژگی ها را در سمت راست پیدا کنید.
  5. بخش Declared Attributes را پیدا کنید.
  6. توجه داشته باشید که ویژگی text در بخش Declared Attributes حاوی Hello World است! .

ویژگی text متنی را نشان می دهد که در داخل TextView چاپ شده است.

  1. روی ویژگی متن کلیک کنید که در آن Hello World! متن است.
  2. آن را تغییر دهید و بگویید تولدت مبارک! ، سپس کلید Enter را فشار دهید. اگر اخطاری در مورد رشته کدگذاری شده مشاهده کردید، فعلا نگران آن نباشید. نحوه خلاص شدن از شر آن اخطار را در نرم افزار کد بعدی یاد خواهید گرفت.
  3. توجه داشته باشید که متن در نمای طراحی تغییر کرده است .....(این عالی است، می توانید بلافاصله تغییرات خود را ببینید!)
  4. برنامه خود را اجرا کنید، و اکنون می گوید تولدت مبارک!

کارت خوب بود! شما اولین تغییرات خود را در یک برنامه اندروید انجام دادید.

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

TextView فعلی را حذف کنید

  1. در ویرایشگر Layout ، برای انتخاب TextView در مرکز طرح، کلیک کنید.
  2. کلید Delete را فشار دهید.
    Android Studio TextView را حذف می‌کند و برنامه شما اکنون فقط یک ConstraintLayout را در ویرایشگر طرح‌بندی و درخت مؤلفه نشان می‌دهد.

یک TextView اضافه کنید

در این مرحله، یک TextView در سمت چپ بالای برنامه خود اضافه می کنید تا تبریک تولد را نگه دارید.

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

  1. TextView پیدا کنید. هم در دسته Common و هم در دسته Text ظاهر می شود.
  2. یک TextView را از پالت به سمت چپ بالای سطح طراحی در Layout Editor بکشید و آن را رها کنید.
    لازم نیست دقیق باشید، فقط آن را نزدیک گوشه سمت چپ بالا بیندازید.
  3. توجه داشته باشید که یک TextView اضافه شده است و به یک علامت تعجب قرمز در درخت Component توجه کنید.
  4. نشانگر خود را روی علامت تعجب نگه دارید، پیام هشداری مبنی بر اینکه نما محدود نشده است و هنگام اجرای برنامه به موقعیت دیگری می‌پرد، خواهید دید. در مرحله بعد آن را برطرف خواهید کرد.

TextView را در موقعیت قرار دهید

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

محدودیت هایی که به بالا و سمت چپ اضافه می کنید دارای حاشیه خواهند بود. یک حاشیه مشخص می کند که یک View چقدر از لبه ظرف خود فاصله دارد.

  1. در Attributes سمت راست، Constraint Widget را در بخش Layout پیدا کنید. مربع نمایانگر دیدگاه شماست.
  2. روی + در بالای مربع کلیک کنید. این برای محدودیت بین بالای نمای متن شما و لبه بالای طرح محدودیت است.
  3. فیلدی با یک عدد برای تنظیم حاشیه بالا ظاهر می شود. حاشیه فاصله TextView تا لبه کانتینر، ConstraintLayout است. عددی که مشاهده می کنید بسته به جایی که TextView را رها کرده اید متفاوت خواهد بود. وقتی حاشیه بالایی را تنظیم می‌کنید، Android Studio به‌طور خودکار محدودیتی را از بالای نمای متنی به بالای ConstrainLayout اضافه می‌کند.
  4. حاشیه بالایی را به 16 تغییر دهید.
  1. همین کار را برای حاشیه سمت چپ انجام دهید.
  2. متن را برای تبریک تولد دوست خود تنظیم کنید، به عنوان مثال "تولدت مبارک، سام!" و Enter را فشار دهید.
  3. توجه داشته باشید که نمای طراحی به روز می شود تا نشان دهد برنامه شما چگونه خواهد بود.

TextView دیگری را اضافه کرده و قرار دهید

کارت تولد شما به خط دوم متن در گوشه پایین سمت راست نیاز دارد که در این مرحله مانند کار قبلی آن را اضافه خواهید کرد. به نظر شما حاشیه های این TextView باید چقدر باشد؟

  1. یک TextView جدید را از پالت بکشید و آن را نزدیک سمت راست پایین نمای برنامه در ویرایشگر چیدمان رها کنید.
  2. حاشیه سمت راست را 16 تنظیم کنید.
  3. حاشیه پایین را 16 تنظیم کنید.
  4. در ویژگی‌ها ، ویژگی متن را برای امضای کارت خود تنظیم کنید، برای مثال «از اِما».
  5. برنامه خود را اجرا کنید شما باید آرزوی تولد خود را در سمت چپ بالا و امضای خود را در پایین سمت راست ببینید.

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

شما متنی را به رابط کاربری خود اضافه کردید، اما هنوز شبیه برنامه نهایی نیست. در این کار، نحوه تغییر اندازه، رنگ متن و سایر ویژگی‌هایی را که بر ظاهر TextView تأثیر می‌گذارند، یاد خواهید گرفت. شما همچنین می توانید با فونت های مختلف آزمایش کنید.

  1. روی اولین TextView در درخت Component کلیک کنید و بخش Common Attributes را در پنجره Attributes پیدا کنید. ممکن است لازم باشد برای پیدا کردن آن به پایین اسکرول کنید.
  2. به ویژگی های مختلف از جمله fontFamily ، textSize و textColor توجه کنید.
  3. به دنبال textPearance باشید .
  4. اگر textPearance باز نشد، روی مثلث پایین کلیک کنید.
  5. textSize را روی 36sp تنظیم کنید.
  1. به تغییر در Layout Editor توجه کنید.
  2. فونتFamily را به گاه به گاه تغییر دهید.
  3. فونت های مختلف را امتحان کنید تا ببینید چه شکلی هستند. حتی گزینه‌های بیشتری برای فونت‌ها در پایین لیست، در زیر فونت‌های بیشتر وجود دارد...
  4. وقتی فونت های مختلف را امتحان کردید، fontFamily را روی sans-serif-light تنظیم کنید.
  5. روی کادر ویرایش ویژگی textColor کلیک کنید و شروع به تایپ سیاه کنید.
    توجه داشته باشید که در حین تایپ، اندروید استودیو فهرستی از رنگ‌ها را نشان می‌دهد که حاوی متنی است که تاکنون تایپ کرده‌اید.
  6. @android:color/black را از لیست رنگ‌ها انتخاب کنید و Enter را فشار دهید.
  7. در TextView با امضای خود، textSize ، textColor و fontFamily را برای مطابقت تغییر دهید.
  8. برنامه خود را اجرا کنید و به نتیجه نگاه کنید.

تبریک می گویم، شما اولین گام ها را برای ایجاد یک برنامه کارت تولد برداشته اید!

  • Layout Editor به شما کمک می کند تا برای برنامه اندروید خود رابط کاربری ایجاد کنید.
  • تقریباً هر چیزی که روی صفحه برنامه خود می بینید یک View است.
  • TextView یک عنصر رابط کاربری برای نمایش متن در برنامه شما است.
  • ConstraintLayout محفظه ای برای سایر عناصر رابط کاربری است.
  • Views باید به صورت افقی و عمودی در یک ConstraintLayout شوند.
  • یکی از راه های موقعیت یابی View با حاشیه است.
  • یک حاشیه نشان می دهد که یک View چقدر از لبه ظرفی که در آن قرار دارد فاصله دارد.
  • می توانید ویژگی هایی مانند فونت، اندازه متن و رنگ را در TextView تنظیم کنید.