Android Kotlin Fundamentals 02.1: طرح‌بندی خطی با استفاده از ویرایشگر Layout

این کد لبه بخشی از دوره آموزشی Android Kotlin Fundamentals است. اگر به ترتیب روی کدها کار کنید، بیشترین ارزش را از این دوره خواهید گرفت. همه کدهای دوره در صفحه فرود کد لبه های کدهای Android Kotlin Fundamentals فهرست شده اند.

آنچه از قبل باید بدانید

• ایجاد یک برنامه اصلی اندروید در Kotlin.
• اجرای یک برنامه اندروید روی شبیه ساز یا روی یک دستگاه.
• اصول اولیه LinearLayout .
• ایجاد یک برنامه ساده که از LinearLayout و TextView استفاده می کند.

چیزی که یاد خواهید گرفت

• نحوه کار با View و ViewGroup .
• نحوه مرتب کردن نماها در یک Activity با استفاده از LinearLayout.
• نحوه استفاده از ScrollView برای نمایش محتوای قابل پیمایش
• چگونه نمایان بودن یک View را تغییر دهیم.
• نحوه ایجاد و استفاده از منابع رشته و ابعاد.
• نحوه ایجاد یک طرح بندی خطی با استفاده از ویرایشگر چیدمان اندروید استودیو.

کاری که خواهی کرد

• برنامه AboutMe را ایجاد کنید.
• برای نمایش نام خود یک TextView به طرح اضافه کنید.
• ImageView.
• برای نمایش متن قابل پیمایش یک ScrollView اضافه کنید.

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

در این کار، پروژه AboutMe Android Studio را ایجاد می کنید.

1. Android Studio را باز کنید، اگر از قبل باز نشده است.
2. اگر پروژه ای از قبل در Android Studio باز است، File > New > New Project را انتخاب کنید.
   
   
   
3. اگر پروژه ای از قبل باز نشده است، + Start a new project Android Studio را در گفتگوی Welcome to Android Studio انتخاب کنید.
   
   
   
4. در گفتگوی Create New Project ، در تب Phone and Tablet ، الگوی Empty Activity را انتخاب کنید. روی Next کلیک کنید.
   
   
   
5. در گفتگوی بعدی Create New Project ، پارامترهای زیر را تنظیم کرده و روی Finish کلیک کنید.
   

صفت	ارزش
نام نرم افزار	درمورد من
نام شرکت اندروید	com.android.example.AboutMe (یا دامنه خودتان)
ذخیره مکان	مکان پیش فرض را ترک کنید یا آن را به فهرست دلخواه خود تغییر دهید.
زبان	کاتلین
حداقل سطح API	API 19: Android 4.4 (KitKat)
این پروژه از برنامه های فوری پشتیبانی می کند	این چک باکس را پاک کنید.
از مصنوعات AndroidX استفاده کنید	این کادر را انتخاب کنید.

Android Studio یک لحظه طول می کشد تا فایل های پروژه را تولید کند.

6. برنامه خود را اجرا کنید رشته "Hello World" را در صفحه خالی خواهید دید.
   

الگوی Empty Activity یک فعالیت خالی ایجاد می کند، Mainactivity.kt . این الگو همچنین یک فایل طرح بندی به نام activity_main.xml ایجاد می کند. فایل layout دارای ConstraintLayout به عنوان ViewGroup ریشه است و دارای یک TextView به عنوان محتوای آن است.

در این کار، ViewGroup ریشه تولید شده را به LinearLayout تغییر می دهید. شما همچنین عناصر UI را به صورت عمودی مرتب می کنید.

مشاهده گروه ها

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

در یک گروه نمای LinearLayout ، عناصر رابط کاربری به صورت افقی یا عمودی مرتب می شوند.

طرح ریشه را طوری تغییر دهید که از یک گروه نمای LinearLayout استفاده کند:

1. قسمت Project > Android را انتخاب کنید. در app/res/layout پوشه، فایل activity_main.xml را باز کنید.
2. تب Text را انتخاب کنید و گروه نمای ریشه را از ConstraintLayout به LinearLayout تغییر دهید.
3. TextView را حذف کنید. در عنصر LinearLayout ، ویژگی android:orientation را اضافه کنید و آن را به vertical تنظیم کنید.

قبل از:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

بعد از:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

Layout Editor یک ابزار طراحی بصری در اندروید استودیو است. به جای نوشتن کد XML با دست برای ساخت طرح‌بندی برنامه‌تان، می‌توانید از Layout Editor برای کشیدن عناصر UI به ویرایشگر طراحی استفاده کنید.

برای مشاهده Layout Editor، روی تب Design کلیک کنید. تصویر زیر بخش هایی از Layout Editor را نشان می دهد.

ویرایشگر طراحی : یک نمایش بصری از چیدمان صفحه شما را در نمای طراحی، نمای طرح اولیه یا هر دو نمایش می دهد. ویرایشگر طراحی بخش اصلی Layout Editor است.

نوار ابزار: دکمه‌هایی را برای پیکربندی ظاهر طرح‌بندی شما در ویرایشگر طراحی و تغییر برخی ویژگی‌های طرح‌بندی ارائه می‌دهد. به عنوان مثال، برای تغییر صفحه نمایش خود در ویرایشگر طراحی، از Select Design Surface استفاده کنید منوی کشویی:

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

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

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

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

مرحله 1: یک TextView اضافه کنید

1. فایل res/layout/activity_main.xml را باز کنید، اگر از قبل باز نشده باشد.
2. به تب Text بروید و کد را بررسی کنید. کد دارای یک LinearLayout به عنوان گروه نمای اصلی خود است. ( گروه های مشاهده ، نماهایی هستند که حاوی نماهای دیگری هستند.)
   
   LinearLayout دارای ویژگی های مورد نیاز layout_height ، layout_width و orientation است که به طور پیش فرض vertical است.
3. برای باز کردن Layout Editor به تب Design بروید.

توجه: برگه Design و تب Text یک طرح را نشان می دهند، فقط به روشی متفاوت. تغییراتی که در یک برگه ایجاد می کنید در برگه دیگر منعکس می شود.

4. نمای متنی را از صفحه پالت روی ویرایشگر طراحی بکشید.
   
   
   
5. به صفحه Component Tree توجه کنید. نمای متنی جدید به عنوان عنصر فرزند گروه نمای والد، که LinearLayout است، قرار می گیرد.
   
   
6. اگر از قبل باز نشده است، پنجره Attributes را باز کنید. (برای باز کردن صفحه، روی TextView جدید اضافه شده در ویرایشگر طراحی دوبار کلیک کنید.)
7. ویژگی های زیر را در قسمت Attributes تنظیم کنید:

صفت	ارزش
شناسه	name_text
متن	آن را به نام خود تنظیم کنید. (یکی از فیلدهای متنی نماد آچاری را نشان می‌دهد که نشان می‌دهد برای فضای نام tools است. یکی بدون آچار برای فضای نام android است—این همان قسمت متنی است که می‌خواهید.)
textPearance > textSize	20sp
textPearance > textColor	@android:color/black
textPearance > textAlignment	مرکز

مرحله 2: یک منبع رشته ایجاد کنید

در Component Tree ، در کنار TextView, یک نماد هشدار مشاهده خواهید کرد . برای مشاهده متن هشدار، مانند تصویر زیر، روی نماد کلیک کنید یا به آن اشاره کنید.

برای رفع اخطار، یک منبع رشته ایجاد کنید:

1. در قسمت Attributes ، روی سه نقطه کنار ویژگی متنی که روی نام خود تنظیم کرده‌اید، کلیک کنید. ویرایشگر منبع باز می شود.
   
   
   
2. در گفتگوی منابع ، افزودن منبع جدید > مقدار رشته جدید را انتخاب کنید.
3. در گفتگوی New String Value Resource ، قسمت نام منبع را روی name تنظیم کنید. فیلد مقدار منبع را به نام خود تنظیم کنید. روی OK کلیک کنید. توجه داشته باشید که اخطار از بین رفته است.
   
   
   
4. فایل res/values/strings.xml را باز کنید و به دنبال منبع رشته جدید ایجاد شده به name بگردید.

<string name="name">Aleks Haecky</string>

مرحله 3: یک منبع بعد ایجاد کنید

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

1. در فایل activity_main.xml ، به تب Text بروید.
2. در خط textSize ، روی عدد ( 20sp ) کلیک کنید و Alt+Enter ( Option+Enter در مک) را تایپ کنید. از منوی باز شده گزینه Extract dimension resource را انتخاب کنید.
3. در گفتگوی Extract Resource ، text_size را در قسمت Resource name وارد کنید. روی OK کلیک کنید.
   
   
   
4. فایل res/values/dimens.xml را باز کنید تا کد تولید شده زیر را ببینید:

<dimen name="text_size">20sp</dimen>

توجه: اگر فایل dimens.xml از قبل در پوشه res/values ​​شما موجود نبود، Android Studio آن را ایجاد می‌کند.

5. فایل MainActivity.kt را باز کنید و کد زیر را در انتهای تابع onCreate() جستجو کنید:

setContentView(R.layout.activity_main)

تابع setContentView() فایل طرح بندی را به Activity متصل می کند. فایل منبع layout مشخص شده R.layout.activity_main است:

• R یک مرجع به منبع است. این یک کلاس تولید شده خودکار با تعاریف برای همه منابع موجود در برنامه شما است.
• layout.activity_main نشان می دهد که منبع یک طرح به نام activity_main است.

6. برنامه خود را اجرا کنید یک TextView با نام شما نمایش داده می شود.
   
   

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

بالشتک در مقابل حاشیه

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

اندازه نما شامل بالشتک آن نیز می شود. موارد زیر معمولاً از ویژگی های padding استفاده می شوند:

• android:padding padding را برای هر چهار لبه نما مشخص می کند.
• android:paddingTop padding را برای لبه بالایی مشخص می کند.
• android:paddingBottom padding را برای لبه پایینی مشخص می کند.
• android:paddingStart padding را برای لبه "شروع" نما مشخص می کند.
• android:paddingEnd padding را برای لبه "پایان" نما مشخص می کند.
• android:paddingLeft padding را برای لبه سمت چپ مشخص می کند.
• android:paddingRight padding را برای لبه سمت راست مشخص می کند.

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

• android:layout_margin یک حاشیه برای هر چهار طرف نما مشخص می کند.
• android:layout_marginBottom فضای خارج از سمت پایین این نما را مشخص می کند.
• android:layout_marginStart فضای خارج از سمت "شروع" این نما را مشخص می کند.
• android:layout_marginEnd فضای انتهایی این نما را مشخص می کند.
• android:layout_marginLeft فضای سمت چپ این نما را مشخص می کند.
• android:layout_marginRight فضای سمت راست این نما را مشخص می کند.

راست/چپ در مقابل شروع/پایان

«راست» و «چپ» همیشه به سمت راست و چپ صفحه اشاره دارند، چه برنامه شما از جریان چپ به راست (LTR) یا از راست به چپ (RTL) استفاده کند. "شروع" و "پایان" همیشه به شروع و پایان جریان اشاره دارد:

• برای یک جریان LTR، شروع = چپ و پایان = راست.
• برای یک جریان RTL، start=راست و end=چپ.

اگر برنامه شما API سطح 17 (اندروید 4.2) یا بالاتر را هدف قرار می دهد:

• از "شروع" و "پایان" به جای "چپ" و "راست" استفاده کنید.
• برای مثال، android:layout_marginLeft باید تبدیل به android:layout_marginStart تا از زبان‌های RTL پشتیبانی کند.

اگر می خواهید برنامه شما با نسخه های پایین تر از اندروید 4.2 کار کند؛ یعنی اگر targetSdkVersion یا minSdkVersion برنامه ۱۶ یا کمتر باشد:

• "شروع" و پایان" را علاوه بر "چپ" و "راست" اضافه کنید.
• برای مثال، از android:paddingLeft و android:paddingStart استفاده کنید.

مرحله 1: بالشتک اضافه کنید

برای قرار دادن فاصله بین نام خود و لبه بالای نمای متن name ، بالشتک بالایی اضافه کنید.

1. فایل activity_main.xml را در تب Design باز کنید.
2. در Component Tree یا در ویرایشگر طراحی، روی نمای متن کلیک کنید تا پنجره Attributes آن باز شود.
3. در بالای صفحه Attributes ، روی نماد دو فلش کلیک کنید برای دیدن تمام ویژگی های موجود
4. Padding را جستجو کنید، آن را گسترش دهید و روی سه نقطه ... در کنار ویژگی بالا کلیک کنید. گفتگوی منابع ظاهر می شود.
5. در گفتگوی منابع ، Add new resource > New dimen Value را انتخاب کنید.
6. در گفتگوی New Dimension Value Resource ، یک منبع small_padding dimen مقدار 8dp کنید.
   
   مخفف dp مخفف چگالی مستقل است. اگر می خواهید یک عنصر UI روی صفحه نمایش هایی با تراکم های مختلف به یک اندازه به نظر برسد، از dp به عنوان واحد اندازه گیری خود استفاده کنید. با این حال، هنگام تعیین اندازه متن، همیشه از sp (پیکسل های مقیاس پذیر) استفاده کنید.
7. روی OK کلیک کنید.

مرحله 2: یک حاشیه اضافه کنید

برای دور کردن نمای متن name از لبه عنصر والد، یک حاشیه بالا اضافه کنید.

1. در قسمت Attributes ، "margin" را جستجو کنید تا Layout_Margin را پیدا کنید.
2. Layout_Margin را باز کنید و روی سه نقطه ... در کنار ویژگی بالا کلیک کنید.
3. یک منبع جدید به نام dimen layout_margin کنید و آن را 16dp کنید. روی OK کلیک کنید.

مرحله 3: یک فونت اضافه کنید

برای اینکه نمای متن name بهتر به نظر برسد، از فونت Android Roboto استفاده کنید. این فونت بخشی از کتابخانه پشتیبانی است و شما فونت را به عنوان منبع اضافه می کنید.

1. در قسمت Attributes عبارت "fontFamily" را جستجو کنید.
2. در قسمت fontFamily ، روی پیکان کشویی کلیک کنید ، به پایین لیست بروید و فونت های بیشتر را انتخاب کنید.
3. در گفتگوی منابع ، rob را جستجو کرده و Roboto را انتخاب کنید. در لیست پیش نمایش ، Regular را انتخاب کنید.
4. دکمه رادیویی افزودن فونت به پروژه را انتخاب کنید.
5. روی OK کلیک کنید.
   
   

پوشه res اکنون دارای یک پوشه font است که حاوی یک فایل فونت roboto.ttf است. ویژگی @font/roboto به TextView شما اضافه شده است.

مرحله 4: استایل را استخراج کنید

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

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

1. روی TextView در Component Tree کلیک راست کرده و Refactor > Extract Style را انتخاب کنید.
2. در گفتگوی Extract Android Style ، چک باکس layout_width ، چک باکس layout_height ، و چک باکس textAlignment را پاک کنید. این ویژگی‌ها معمولاً برای هر نما متفاوت هستند، بنابراین نمی‌خواهید بخشی از سبک باشند.
3. در قسمت Style name ، NameStyle را وارد کنید.
4. روی OK کلیک کنید.
   
   
   
5. یک استایل نیز یک منبع است، بنابراین استایل در پوشه res/values/ در یک فایل styles.xml ذخیره می شود. styles.xml باز کنید و کد ایجاد شده برای استایل NameStyle را بررسی کنید که شبیه به این خواهد بود:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. activity_main.xml باز کنید و به تب Text بروید. توجه داشته باشید که سبک تولید شده در نمای متنی به عنوان style="@style/NameStyle" استفاده می شود.
7. برنامه را اجرا کنید و متوجه تغییرات فونت و بالشتک اطراف TextView خود شوید.

اکثر برنامه های اندرویدی دنیای واقعی از ترکیبی از نماها برای نمایش تصاویر، نمایش متن و پذیرش ورودی از کاربر به صورت متن یا رویدادهای کلیک تشکیل شده اند. در این کار، یک نمای برای نمایش یک تصویر اضافه می کنید.

ImageView نمایی برای نمایش منابع تصویر است. به عنوان مثال، یک ImageView می تواند منابع Bitmap مانند فایل های PNG، JPG، GIF یا WebP را نمایش دهد یا می تواند یک منبع Drawable مانند یک نقشه برداری را نمایش دهد.

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

1. فایل طرح‌بندی را در تب Design نمایش دهید، سپس ImageView را از صفحه پالت به زیر name_text در درخت Component بکشید. گفتگوی منابع باز می شود.
2. اگر از قبل انتخاب نشده است، Drawable را انتخاب کنید.
3. android را باز کنید، اسکرول کنید و btn_star_big_on را انتخاب کنید. این ستاره زرد است .
4. روی OK کلیک کنید.
   
   
   
   تصویر ستاره به طرح زیر نام شما اضافه می شود. از آنجایی که شما یک LinearLayout عمودی دارید، نماهایی که اضافه می کنید به صورت عمودی تراز هستند.
   
   
5. به تب Text بروید و به کد ImageView تولید شده نگاه کنید. عرض روی match_parent تنظیم شده است، بنابراین نما به اندازه عنصر والد آن گسترده خواهد بود. ارتفاع روی wrap_content تنظیم شده است، بنابراین ارتفاع نمای به اندازه محتوای آن خواهد بود. ImageView به btn_star_big_on اشاره می کند.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. برای تغییر نام id ImageView ، روی "@+id/imageView" راست کلیک کرده و Refactor > Rename را انتخاب کنید.
7. در گفتگوی تغییر نام ، id را روی @+id/star_image کنید. روی Refactor کلیک کنید.
   
   
   

نکته: Refactor > Rename همه موارد یک ویژگی یا نام متغیر را در پروژه برنامه شما تغییر نام می دهد.

8. در تب Design ، در Component Tree ، روی نماد هشدار کلیک کنید کنار star_image . این اخطار مربوط به یک محتوای توصیف نشده است که صفحه‌خوان‌ها contentDescription آن برای توصیف تصاویر برای کاربر استفاده می‌کنند.
9. در قسمت Attributes ، روی سه نقطه ... در کنار ویژگی contentDescription کلیک کنید. گفتگوی منابع باز می شود.
10. در گفتگوی منابع ، افزودن منبع جدید > مقدار رشته جدید را انتخاب کنید. قسمت نام منبع را روی yellow_star و قسمت مقدار منبع را روی Yellow star قرار دهید. روی OK کلیک کنید.
11. از پنجره Attributes برای اضافه کردن یک حاشیه بالای 16dp (که @dimen/layout_margin ) به yellow_star استفاده کنید تا تصویر ستاره را از نام جدا کنید.
12. برنامه خود را اجرا کنید نام شما و تصویر ستاره در UI برنامه شما نمایش داده می شود.
    
    

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

تصویر زیر نمونه ای از یک ScrollView را نشان می دهد که حاوی LinearLayout است که حاوی چندین نمای دیگر است.

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

مرحله 1: یک ScrollView که حاوی TextView است اضافه کنید

1. فایل activity_main.xml را در تب Design باز کنید.
2. یک نمای پیمایشی را با کشیدن آن به ویرایشگر طراحی یا در درخت اجزاء به طرح‌بندی بکشید. نمای اسکرول را زیر تصویر ستاره قرار دهید.
3. برای بررسی کد تولید شده، به تب Text بروید.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

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

4. یک id به ScrollView اضافه کنید و آن را bio_scroll کنید. افزودن یک id به ScrollView به سیستم اندروید دسته ای برای نمایش می دهد تا وقتی کاربر دستگاه را می چرخاند، سیستم موقعیت اسکرول را حفظ می کند.
5. در داخل ScrollView ، کد LinearLayout را حذف کنید، زیرا برنامه شما فقط یک نمای قابل پیمایش دارد—یک TextView .
6. یک TextView را از پالت به درخت کامپوننت بکشید. TextView را به عنوان عنصر فرزند bio_scroll در زیر bio_scroll قرار دهید.
   
   
7. شناسه نمای متن جدید را روی bio_text کنید.
8. سپس یک سبک برای نمای متن جدید اضافه می کنید. در قسمت Attributes ، روی سه نقطه ... در کنار ویژگی style کلیک کنید تا گفتگوی Resources باز شود.
9. در گفتگوی منابع ، NameStyle را جستجو کنید. NameStyle را از لیست انتخاب کرده و روی OK کلیک کنید. نمای متن اکنون از سبک NameStyle استفاده می کند که در یک کار قبلی ایجاد کرده اید.
   
   

مرحله 2: بیوگرافی خود را به TextView جدید اضافه کنید

1. strings.xml باز کنید، یک منبع رشته ای به نام bio ایجاد کنید و متنی طولانی درباره خودتان یا هر چیزی که می خواهید قرار دهید.
   

توجه داشته باشید:

• از \n برای نشان دادن شکست خط استفاده کنید.
• اگر از آپاستروف استفاده می کنید، باید با اسلش از آن فرار کنید. مثلا:
  " You mustn\'t forget the backslash. "
• برای متن پررنگ از <b>...</b> و برای متن ایتالیک از <i>...</i> استفاده کنید. مثلا:
  "This text is <b>bold</b> and this text is <i>italics</i>."

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

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. در نمای متنی bio_text ، مقدار ویژگی text را روی منبع رشته bio که حاوی بیوگرافی شما است، تنظیم کنید.
3. برای سهولت خواندن متن bio_text ، فاصله بین خطوط را اضافه کنید. از ویژگی lineSpacingMultiplier استفاده کنید و به آن مقدار 1.2 بدهید.
   
   
   
   توجه کنید که چگونه در ویرایشگر طراحی، متن bio تا لبه‌های کناری صفحه اجرا می‌شود. برای رفع این مشکل، می‌توانید ویژگی‌های padding چپ، شروع، راست و پایان را به ریشه LinearLayout اضافه کنید. شما نیازی به اضافه کردن لایه پایین ندارید، زیرا متنی که تا پایین اجرا می شود به کاربر سیگنال می دهد که متن قابل پیمایش است.
4. اضافه کردن صفحه شروع و پایان 16dp به LinearLayout ریشه.
5. به تب Text بروید، منبع ابعاد را استخراج کنید و نام آن را layout_padding .
   
   

توجه: با شروع از سطح 17 API، به جای «چپ» و «راست» برای padding و حاشیه، از «شروع» و «پایان» استفاده کنید تا برنامه خود را با زبان‌های RTL مانند عربی تطبیق دهید.

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

تبریک می گویم!

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

پروژه اندروید استودیو: AboutMe

توجه: همه چالش های کدنویسی اختیاری هستند.

در ScrollView ، یک ImageView در بالای TextView اضافه کنید. هنگامی که برنامه را اجرا می کنید، این تصویر، بر خلاف ستاره، زمانی که متن به سمت بالا حرکت می کند، از دید خارج می شود.

نکته: نمای اسکرول فقط می تواند یک نمای فرزند داشته باشد. شما باید دو نمای قابل پیمایش، ImageView و TextView را در یک LinearLayout .

• ViewGroup ای است که می تواند نماهای دیگری نیز داشته باشد. LinearLayout و ScrollView گروه های مشاهده هستند.
• LinearLayout یک گروه نمایش است که نماهای فرزند خود را به صورت افقی یا عمودی مرتب می کند.
• هنگامی که نیاز به نمایش محتوا روی صفحه دارید، مانند متن طولانی یا مجموعه ای از تصاویر، از ScrollView استفاده کنید. نمای پیمایشی می تواند فقط یک نمای کودک داشته باشد. اگر می‌خواهید بیش از یک نما را اسکرول کنید، یک ViewGroup مانند LinearLayout را به ScrollView اضافه کنید و نماها را در داخل ViewGroup قرار دهید.
• Layout Editor یک ویرایشگر طراحی بصری در اندروید استودیو است. می‌توانید از ویرایشگر طرح‌بندی برای ساختن طرح‌بندی برنامه خود با کشیدن عناصر رابط کاربری به داخل طرح‌بندی استفاده کنید.
• استایل مجموعه ای از ویژگی هایی است که ظاهر یک نما را مشخص می کند. به عنوان مثال، یک سبک می تواند رنگ فونت، اندازه فونت، رنگ پس زمینه، padding و حاشیه را مشخص کند.
• می توانید تمام قالب بندی یک نما را در یک سبک استخراج و جمع آوری کنید. برای اینکه ظاهری یکدست به برنامه خود بدهید، از این سبک برای نماهای دیگر استفاده مجدد کنید.

دوره بی ادبی:

• توسعه برنامه های اندروید با Kotlin

مستندات توسعه دهنده اندروید:

• طرح بندی ها
• ViewGroup
• View
• طرح بندی خطی
• ScrollView
• پشتیبانی از تراکم پیکسل های مختلف (dp)
• با Layout Editor یک UI بسازید
• مستندات اندروید استودیو
• سبک ها و تم ها

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

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

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

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

یه این سوالات پاسخ دهید

سوال 1

کدام یک از موارد زیر یک گروه نمایش است؟

EditText ویرایش متن

▢ LinearLayout

▢ TextView

▢ Button

سوال 2

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

▢ LinearLayout > TextView ، TextView ، ImageView

▢ ScrollView > LinearLayout > TextView ، Button ، Button ، ScrollView > TextView

▢ TextView > TextView ، ImageView ، ScrollView

سوال 3

سبک ها منابعی هستند که در styles.xml تعریف شده اند. با استفاده از استایل‌ها، می‌توانید رنگ‌ها، فونت‌ها، اندازه متن و بسیاری ویژگی‌های دیگر یک نما را تعریف کنید. درست یا غلط؟

▢ درست است

▢ نادرست

سوال 4

ScrollView یک گروه نمایش است که می تواند هر تعداد بازدید یا گروه ها را به عنوان فرزندان خود مشاهده کند. درست یا غلط؟

▢ درست است

▢ نادرست

سوال 5

کدام عنصر UI را می توان برای نمایش تصاویر در برنامه خود استفاده کرد؟

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

درس بعدی را شروع کنید: 2.2: افزودن تعامل با کاربر

برای پیوند به دیگر کدهای این دوره، به صفحه فرود کد لبه‌های کد پایه Android Kotlin Fundamentals مراجعه کنید.