طراحی رابط کاربری در اندروید

در این درس، شما می خواهید با استفاده از ویرایشگر لایوت، یک لایوت که شامل یک Text Box و یک Button است ایجاد کنید. در درس بعدی شما، میخواهید یک برنامه که به لمس دکمه پاسخ دهد (بوسیله ارسال محتوای تکست باکس به دیگر اکتیویتی ها) بسازید.

•  یک ویرایشگر لایوت باز کنید
• یک Text Box اضافه کنید
• یک Button اضافه کنید
• رشته یک UI را تغییر دهید
• یک Text Box با اندازه قابل تغییر بسازید

تصویر نهایی طرح (لایوت)

UI  (رابط کاربری) یک برنامه اندرویدی از یک سلسله مراتب از لایوت ها ساخته شده است (اشیاء ViewGroup) و ویجت ها (اشیاء View). لایوت¬ها قالبهای نامرئی هستند که چگونگی قرارگیری Viewهای فرزند روی صفحه را کنترل می کنند. ویجت ها اجزای رابط کاربری هستند، به عنوان مثال دکمه و جعبه های متن.

شکل 2- در تصویر مشاهده می کنید که چگونه Layout دارای اشیاء View است که از ViewGroup انشعاب پیدا کرده است.
اندروید یک واژه xml را برای ViewGroup و کلاس های View فراهم می کند، بنابراین بیشتر UI (رابط کاربری) شما از فایلهای xml تعریف شده است.
با این حال، در این آموزش شما می بینید بجای نوشتن کدهای xml، چطور یک لایوت را با استفاده از ویرایشگر لایوت در اندروید استودیو، تنها با کشیدن و رها کردن اشیاء می سازیم.
باز کردن لایوت ادیتور
توجه: انتظار ما اینست که شما در حال استفاده از اندروید استودیو 2.3 یا بالاتر هستید و ادامه درس قبلی را دنبال می کنید.
برای شروع، workspace خود را به صورت زیر تنظیم می¬کنیم:
1- در پنجره project اندروید استودیو، مسیر app > res > layout > activity_main.xml را باز می کنیم.

2- برای فضای بیشتر در ویرایشگر لایوت، پنجره Project را از مسیر زیر پنهان کنید.
View > Tool Windows > Project
(یا روی      Project   که در سمت چپ اندروید استودیو قرار دارد، کلیک کنید.)
3- اگر ویرایشگر شما سورس xml را نشان داد، روی تب design از پایین پنجره کلیک کنید.
4- روی Show Blueprint      کلیک کنید تا فقط لایوت blueprint ظاهر شود.

5- مطمئن شوید که Constrainst روشن (ON) باشد. اگر ماوس را روی آن نگه دارید Hide Constrainst   نمایش داده می شود. (زیرا Constrainst در حال نمایش است).
6- مطمئن شوید که Autoconnect ، خاموش (OFF) باشد. اگر ماوس را روی آن نگه دارید Turn On Autoconnect    ظاهر می شود (زیرا حالا Off است)
7- روی Defult Margins     در نوار ابزار کلیک کنید و 16 را انتخاب کنید. (شما می¬توانید حاشیه را برای view های بعدی تنظیم کنید)

8-  روی Device in Editor    در نوار ابزار کلیک کنید و Pixel XL را انتخاب کنید.
ویرایشگر شما حالا باید شبیه تصویر زیر باشد.

ویرایشگر لایوت activity_main.xml را نمایش می دهد.
پنجره درختی Component (سمت چپ- پایین) سلسله مراتب لایوت ها را نشان می دهد. در این مورد می بینیم که ریشه ConstraintLayout، فقط شامل یک شی TextView است.

constraintLayout یک لایوت است که موقعیت را برای Viewهای فرزند در لایوت پدر در View اصلی روی Constrainst ها تعریف می کند. به این ترتیب، شما می توانید هر دو طرح بندی ساده و پیچیده را با یک View سلسله مراتبی مسطح ایجاد کنید، که از لایوت های تو درتو (یک لایوت داخل یک لایوت، که در شکل 2 نشان داده شده است) اجتناب می¬کند در این صورت می توانید زمان مورد نیاز برای رسم یک UI را افزایش دهید.

شکل 4- تصویر دو View که داخل یک ConstraintLayout قرار گرفته است.
برای مثال، شما می¬توانید لایوت زیر را ایجاد کنید (در شکل 4)

View A، 16dp از سمت بالا از لایوت پدر فاصله دارد.
View A، 16dp از سمت چپ از لایوت پدر فاصله دارد.
View B به فاصله 16dp از سمت راست View A قرار گرفته است.
View B، به بالای View A تراز شده است.
در بخش های زیر شما می¬خواهید لایوتی شبیه به این بسازید.
اضافه کردن یک Text Box
1- نخست، شما نیاز دارید آنچه که در لایوت است را حذف کنید. بنابرین روی TextView در پنجره درختی Component کلیک کنید، سپس دکمه Delete را فشار دهید.
2- از Palette سمت چپ پنجره، روی Text در Pane سمت چپ کلیک کنید، و سپس Plain Text را داخل ویرایشگر طراحی بکشید و آنرا نزدیک بالای لایوت رها کنید.
این یک ویجت EditText است که ورودی متن قبول می¬کند.
3- روی Plain Text در ویرایشگر طراحی کلیک کنید. حالا می¬توانید دستگیره های تغییر اندازه را روی هر گوشه (مربع)، و Constrainst را در هر طرف (دایره) ببینید.

برای کنترل بهتر، شما ممکن است ویرایشگر را تا 75% بزرگ کنید برای این کار روی دکمه مورد نظر در جعبه ابزار کلیک کنید.
4- روی دستگیره کلیک کنید و به سمت بالا بکشید تا به بالای لایوت وصل شود. آن یک Constrainst است که مشخص می کند view باید 16dp از بالای لایوت (زیرا شما بصورت پیش فرض حاشیه را به 16 dp تنظیم می کنید) فاصله داشته باشد.

5- به طور مثال، یک Constrainst از سمت چپ View تا سمت چپ از لایوت ایجاد کنید.
نتیجه باید شبیه تصور 5 باشد.

تصویر 5- در این تصویر جعبه متن به سمت بالا و چپ لایوت پدر محدود شده است.
اضافه کردن دکمه
1- از پنجره Palette، روی ویجت¬ها در pane سمت چپ کلیک کنید، و Button را داخل ویرایشگر طراحی درگ کنید و آن را سمت راست رها کنید.
2- یک Constrainst از سمت چپ دکمه به سمت راست Text Box ایجاد کنید.

3- برای Constrainst کردن View ها در تراز بندی افقی، شما باید یک Constrainst بین خطوط اصلی متن ایجاد کنید. بنابراین روی دکمه کلیک کنید و سپس روی Baseline Constraint ، کلیک کنید که به طور مستقیم در ویرایشگر طراحی زیر view انتخاب شده، ظاهر می شود. خطوط اصلی لنگر در داخل دکمه ظاهر می¬شود. روی لنگرکلیک کنید، نگه دارید و سپس آن را تا خطوط اصلی لنگر ظاهر شده در Text Box درگ کنید.
نتیجه باید شبیه تصویر 6 شود.

شکل 6- دکمه به سمت راست Text Box و خطوط اصلی محدود شده است.
توجه: همچنین شما می توانید تراز بندی افقی با استفاده از لبه های بالا و پایین ایجاد کنید، اما دکمه شامل بالشتک هایی در اطراف تصویر خود است، بنابراین اگر شما آن را با نگاه کردن تراز کنید، این تراز بندی اشتباه است.
تغییر رشته های UI (رابط کاربری)
روی Show Design در نوار ابزار کلیک کنید تا رابط کاربری نمایش داده شود. توجه کنید که متن ورودی با “Name” و برچسب دکمه با “Button” پر شده است. بنابراین حالا می خواهیم این رشته ها را تغییر دهیم.

1- پنجره Project را باز کنید و سپس مسیر زیر را باز کنید.
app > rese > values > strings.xml
این فایل، یک منبع رشته ای است که شما باید همه رشته های UI (رابط کاربری) را در آن مشخص کنید. بنابراین شما می¬توانید تمام رشته های یک UI را در یک مکان واحد مدیریت کنید که باعث پیدا کردن، بروزرسانی و محلی سازی می¬شود. (با رشته کدهای سخت افزاری در لایوت یا کد برنامه مقایسه می شود)
2- روی Open editor که بالای پنجره ویرایشگر است کلیک کنید. این، مترجم ویرایشگر را باز می کند، که یک رابط کاربری ساده برای اضافه کردن و ویرایش رشته های پیش فرض شما فراهم می کند و کمک می کند همه رشته های ترجمه را بصورت سازماندهی شده نگه دارید.

3- روید Add key   برای ایجاد رشته جدید از “hint text” برای Text Box کلیک کنید.
1- برای نام کلید عبارت “edit_message” را وارد کنید.
2- برای مقدار آن عبارت “Enter a message” را وارد کنید.
3- روی ok کلیک کنید.
4- یک کلید دیگر با نام “button_send” با مقدار “send” اضافه کنید.
حالا شما می¬توانید این رشته را برای هر View تنظیم کنید. بنابراین با کلیک روی activity_main.xml به فایل لایوت رفته و رشته ها را به صورت زیر اضافه کنید:
1- روی Text Box در لایوت کلیک کنید و اگر پنجره Properties در سمت راست قابل مشاهده نیست می توانید از نوار سمت راست  properties   آن را ظاهر کنید.
2- قرار دادن ویژگی hint و سپس کلیک روی  pick a resource (سمت راست جعبه متن). در کادری که ظاهر می شود روی edit_message  از لیست دابل کلیک کنید.
3- هنوز هم ویژگی جعبه متن را مشاهده می¬کنید، این مقدار را برای ویژگی متن حذف کنید (در حال حاضر با “Name” تنظیم شده است)
4- حالا روی دکمه در لایوت کلیک کنید، ویژگی text را تعیین کنید، روی Pick a Resource  کلیک کنید و سپس button_send انتخاب کنید.

ساخت جعبه متن با قابلیت تغییر اندازه
برای پاسخگویی به اندازه¬های مختلف صفحه نمایش، شما می¬توانید جعبه متن را امتداد دهید تا همه فضای افقی را پر کند. (بعد از محاسبه کردن دکمه و حاشیه)
قبل از ادامه دادن، روی Show Blueprint    در نوار ابزار ویرایشگر لایوت کلیک کنید.
1- هر دو View را انتخاب کنید (روی اولی کلیک کنید و پس از نگه داشتن shift روی دیگری کلیک کنید) و سپس روی View کلیک راست کنید و Center Horizontal را انتخاب نمایید.

شکل8 – نتیجه کلیک روی Center Horizontally
با اینکه هدف شما مرکز نمایش نیست، ولی این یک راه سریع برای ایجاد یک زنجیره بین دو View است. یک زنجیره constraint دو طرفه است که به شما اجازه می دهد بین دو یا بیشتر از چند View زنجیری را به صورت یکنواخت قرار دهید. با این حال، این حاشیه های افقی را حذف می¬کند، بنابراین شما می توانید آن را تغییر دهید.
2- دکمه را انتخاب کنید و پنجره properties را باز کنید. هر دو حاشیه چپ و راست را با 16 تنظیم کنید.
3- جعبه متن را انتخاب کنید و فقط حاشیه چپ را به 16 تنظیم کنید.
4- هنوز ویژگی¬های Text Box را مشاهده می کنید، روی نماد عرض کلیک کنید تا به Match Constraints تنظیم شود، همانطور که با شماره 1 در شکل 9 نشان داده شده است.

شکل 9- برای تغییر عرض به Match Constraints کلیک کنید
“Match constraints” به معنای عرض هست که حالا بوسیله Constraintsهای افقی و حاشیه ها مشخص شده است. از این رو Text Box در فضای افقی امتداد پیدا می¬کند (بعد از محاسبه برای دکمه وهمه حاشیه ها)
اکنون لایوت طراحی شده است و باید مانند شکل 10 نمایش داده شود.

شکل 10- Text Box در حال حاضر برای تکمیل فضا باقی مانده است

اگر لایوت شما به آن چیزی که انتظار داشتید شبیه نشد ، ببیند که چه چیزی باید XML شما را شبیه سازی کند و آن را با متن زیر مقایسه کنید. (اگر ویژگی های شما در یک سفارش متفاوت ظاهر شود، این درست است.)
کد XML :

<?xml version="1.0" encoding="utf-8">
<android.support.constraint.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="com.example.myfirstapp.MainActivity">;

<EditText
android:id="@+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="@string/edit_message"
android:inputType="textPersonName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button"
android:layout_marginLeft="16dp" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send"
app:layout_constraintBaseline_toBaselineOf="@+id/editText"
app:layout_constraintLeft_toRightOf="@+id/editText"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>

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

اجرای برنامه
اگر برنامه شما از درس قبل روی دستگاه نصب شده است، به سادگی روی Apply Change در نوار ابزار کلیک کنید تا برنامه با لایوت جدید بروزرسانی شود یا روی Run کلیک کنید تا برنامه نصب و اجرا شود.
دکمه هنوز هیچ کاری انجام نمی دهد. برای شروع یک activity دیگر هنگامی که دکمه تاچ می شود، به درس بعدی مراجعه کنید.
منبع: https://developer.android.com/training/basics/firstapp/building-ui.html