در این کد لبه، شما یک اپلیکیشن اندرویدی ساده خواهید ساخت که متن را نمایش می دهد. با درک بیشتر اجزای رابط کاربری (UI) در اندروید، میتوانید متن را روی صفحه قرار دهید.
پیش نیازها
- آموزش ساخت اپلیکیشن جدید در اندروید استودیو
- چگونه یک برنامه را در شبیه ساز یا در دستگاه اندروید خود اجرا کنیم.
آنچه خواهید آموخت
- عناصر رابط کاربری، مانند
Views
وViewGroups
چیست. - نحوه نمایش متن در
TextView
در یک برنامه - نحوه تنظیم ویژگیها، مانند متن، فونت و حاشیه در
TextView
.
آنچه خواهید ساخت
- یک برنامه اندروید که تبریک تولد را در قالب متن نمایش می دهد.
پس از اتمام کار، برنامه شما به این شکل خواهد بود.
آنچه شما نیاز دارید
- یک رایانه با Android Studio نصب شده است.
پروژه Empty Activity ایجاد کنید
- برای شروع، یک پروژه جدید Kotlin در Android Studio با استفاده از قالب Empty Activity ایجاد کنید.
- برنامه را «تولدت مبارک» صدا کنید، با حداقل سطح API 19 (KitKat).
مهم: اگر با ایجاد یک پروژه جدید در Android Studio آشنا نیستید، برای جزئیات بیشتر به ایجاد و اجرای اولین برنامه اندروید خود مراجعه کنید.
- برنامه خود را اجرا کنید برنامه باید مانند تصویر زیر باشد.
هنگامی که این برنامه تولدت مبارک را با الگوی 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 را تغییر دهید
- در Android Studio پنجره Project را در سمت چپ پیدا کنید.
- به این پوشه ها و فایل ها توجه داشته باشید: پوشه برنامه بیشتر فایل های برنامه را دارد که شما آنها را تغییر خواهید داد. پوشه res برای منابعی مانند تصاویر یا طرحبندی صفحه است. پوشه layout مخصوص طرح بندی صفحه است. فایل
activity_main.xml
حاوی توضیحاتی در مورد چیدمان صفحه شماست. - پوشه برنامه ، سپس پوشه res و سپس پوشه layout را باز کنید.
- روی
activity_main.xml
دوبار کلیک کنید.
با این کارactivity_main.xml
در Layout Editor باز می شود و طرح بندی که در نمای Design توضیح می دهد را نشان می دهد.
- به فهرست نماها در Component Tree نگاه کنید. توجه داشته باشید که یک
ConstraintLayout
و یکTextView
در زیر آن وجود دارد.
اینها رابط کاربری برنامه شما را نشان می دهند.TextView
تورفتگی دارد زیرا در داخلConstraintLayout
قرار دارد. همانطور کهViews
بیشتری را بهConstraintLayout
اضافه می کنید، آنها به این لیست اضافه می شوند. - توجه داشته باشید که
TextView
دارای "Hello World!" در کنار آن، که متنی است که هنگام اجرای برنامه مشاهده می کنید. - در Component Tree ، روی
TextView
کلیک کنید. - ویژگی ها را در سمت راست پیدا کنید.
- بخش Declared Attributes را پیدا کنید.
- توجه داشته باشید که ویژگی text در بخش Declared Attributes حاوی Hello World است! .
ویژگی text متنی را نشان می دهد که در داخل TextView
چاپ شده است.
- روی ویژگی متن کلیک کنید که در آن Hello World! متن است.
- آن را تغییر دهید و بگویید تولدت مبارک! ، سپس کلید Enter را فشار دهید. اگر اخطاری در مورد رشته کدگذاری شده مشاهده کردید، فعلا نگران آن نباشید. نحوه خلاص شدن از شر آن اخطار را در نرم افزار کد بعدی یاد خواهید گرفت.
- توجه داشته باشید که متن در نمای طراحی تغییر کرده است .....(این عالی است، می توانید بلافاصله تغییرات خود را ببینید!)
- برنامه خود را اجرا کنید، و اکنون می گوید تولدت مبارک!
کارت خوب بود! شما اولین تغییرات خود را در یک برنامه اندروید انجام دادید.
کارت تولدی که میسازید با آنچه اکنون در برنامه خود دارید متفاوت به نظر میرسد. به جای متن کوچک در مرکز، به دو پیام بزرگتر نیاز دارید، یکی در بالا سمت چپ و دیگری در گوشه پایین سمت راست. در این کار، TextView
موجود را حذف میکنید، و دو TextViews
جدید اضافه میکنید، و یاد میگیرید که چگونه آنها را در ConstraintLayout
قرار دهید.
TextView فعلی را حذف کنید
- در ویرایشگر Layout ، برای انتخاب
TextView
در مرکز طرح، کلیک کنید. - کلید Delete را فشار دهید.
Android StudioTextView
را حذف میکند و برنامه شما اکنون فقط یکConstraintLayout
را در ویرایشگر طرحبندی و درخت مؤلفه نشان میدهد.
یک TextView اضافه کنید
در این مرحله، یک TextView
در سمت چپ بالای برنامه خود اضافه می کنید تا تبریک تولد را نگه دارید.
پالت در سمت چپ بالای ویرایشگر طرحبندی حاوی فهرستهایی از انواع مختلف Views
است که بر اساس دستهبندی سازماندهی شدهاند و میتوانید آنها را به برنامه خود اضافه کنید.
-
TextView
پیدا کنید. هم در دسته Common و هم در دسته Text ظاهر می شود. - یک
TextView
را از پالت به سمت چپ بالای سطح طراحی در Layout Editor بکشید و آن را رها کنید.
لازم نیست دقیق باشید، فقط آن را نزدیک گوشه سمت چپ بالا بیندازید. - توجه داشته باشید که یک
TextView
اضافه شده است و به یک علامت تعجب قرمز در درخت Component توجه کنید. - نشانگر خود را روی علامت تعجب نگه دارید، پیام هشداری مبنی بر اینکه نما محدود نشده است و هنگام اجرای برنامه به موقعیت دیگری میپرد، خواهید دید. در مرحله بعد آن را برطرف خواهید کرد.
TextView را در موقعیت قرار دهید
برای کارت تولد، TextView
باید در نزدیکی گوشه سمت چپ بالا و کمی فضای اطراف آن باشد. برای رفع اخطار، محدودیتهایی را به TextView
اضافه میکنید که به برنامهتان میگوید چگونه آن را قرار دهد. محدودیتها جهتها و محدودیتهایی هستند که یک View
میتواند در یک طرحبندی باشد.
محدودیت هایی که به بالا و سمت چپ اضافه می کنید دارای حاشیه خواهند بود. یک حاشیه مشخص می کند که یک View
چقدر از لبه ظرف خود فاصله دارد.
- در Attributes سمت راست، Constraint Widget را در بخش Layout پیدا کنید. مربع نمایانگر دیدگاه شماست.
- روی + در بالای مربع کلیک کنید. این برای محدودیت بین بالای نمای متن شما و لبه بالای طرح محدودیت است.
- فیلدی با یک عدد برای تنظیم حاشیه بالا ظاهر می شود. حاشیه فاصله
TextView
تا لبه کانتینر،ConstraintLayout
است. عددی که مشاهده می کنید بسته به جایی کهTextView
را رها کرده اید متفاوت خواهد بود. وقتی حاشیه بالایی را تنظیم میکنید، Android Studio بهطور خودکار محدودیتی را از بالای نمای متنی به بالایConstrainLayout
اضافه میکند. - حاشیه بالایی را به 16 تغییر دهید.
- همین کار را برای حاشیه سمت چپ انجام دهید.
- متن را برای تبریک تولد دوست خود تنظیم کنید، به عنوان مثال "تولدت مبارک، سام!" و Enter را فشار دهید.
- توجه داشته باشید که نمای طراحی به روز می شود تا نشان دهد برنامه شما چگونه خواهد بود.
TextView دیگری را اضافه کرده و قرار دهید
کارت تولد شما به خط دوم متن در گوشه پایین سمت راست نیاز دارد که در این مرحله مانند کار قبلی آن را اضافه خواهید کرد. به نظر شما حاشیه های این TextView
باید چقدر باشد؟
- یک
TextView
جدید را از پالت بکشید و آن را نزدیک سمت راست پایین نمای برنامه در ویرایشگر چیدمان رها کنید. - حاشیه سمت راست را 16 تنظیم کنید.
- حاشیه پایین را 16 تنظیم کنید.
- در ویژگیها ، ویژگی متن را برای امضای کارت خود تنظیم کنید، برای مثال «از اِما».
- برنامه خود را اجرا کنید شما باید آرزوی تولد خود را در سمت چپ بالا و امضای خود را در پایین سمت راست ببینید.
تبریک می گویم! شما برخی از عناصر رابط کاربری را در برنامه خود اضافه کرده و در آن قرار داده اید.
شما متنی را به رابط کاربری خود اضافه کردید، اما هنوز شبیه برنامه نهایی نیست. در این کار، نحوه تغییر اندازه، رنگ متن و سایر ویژگیهایی را که بر ظاهر TextView
تأثیر میگذارند، یاد خواهید گرفت. شما همچنین می توانید با فونت های مختلف آزمایش کنید.
- روی اولین
TextView
در درخت Component کلیک کنید و بخش Common Attributes را در پنجره Attributes پیدا کنید. ممکن است لازم باشد برای پیدا کردن آن به پایین اسکرول کنید. - به ویژگی های مختلف از جمله fontFamily ، textSize و textColor توجه کنید.
- به دنبال textPearance باشید .
- اگر textPearance باز نشد، روی مثلث پایین کلیک کنید.
- textSize را روی 36sp تنظیم کنید.
- به تغییر در Layout Editor توجه کنید.
- فونتFamily را به گاه به گاه تغییر دهید.
- فونت های مختلف را امتحان کنید تا ببینید چه شکلی هستند. حتی گزینههای بیشتری برای فونتها در پایین لیست، در زیر فونتهای بیشتر وجود دارد...
- وقتی فونت های مختلف را امتحان کردید، fontFamily را روی sans-serif-light تنظیم کنید.
- روی کادر ویرایش ویژگی textColor کلیک کنید و شروع به تایپ سیاه کنید.
توجه داشته باشید که در حین تایپ، اندروید استودیو فهرستی از رنگها را نشان میدهد که حاوی متنی است که تاکنون تایپ کردهاید. - @android:color/black را از لیست رنگها انتخاب کنید و Enter را فشار دهید.
- در
TextView
با امضای خود، textSize ، textColor و fontFamily را برای مطابقت تغییر دهید. - برنامه خود را اجرا کنید و به نتیجه نگاه کنید.
تبریک می گویم، شما اولین گام ها را برای ایجاد یک برنامه کارت تولد برداشته اید!
- Layout Editor به شما کمک می کند تا برای برنامه اندروید خود رابط کاربری ایجاد کنید.
- تقریباً هر چیزی که روی صفحه برنامه خود می بینید یک
View
است. -
TextView
یک عنصر رابط کاربری برای نمایش متن در برنامه شما است. -
ConstraintLayout
محفظه ای برای سایر عناصر رابط کاربری است. -
Views
باید به صورت افقی و عمودی در یکConstraintLayout
شوند. - یکی از راه های موقعیت یابی
View
با حاشیه است. - یک حاشیه نشان می دهد که یک
View
چقدر از لبه ظرفی که در آن قرار دارد فاصله دارد. - می توانید ویژگی هایی مانند فونت، اندازه متن و رنگ را در
TextView
تنظیم کنید.
-
View
-
TextView
-
ConstraintLayout
- dp در مقابل sp
- ویرایشگر چیدمان در اندروید استودیو