ساختن رابط کاربری ساده در Android Studio

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

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

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

طراحی رابط کاربری

ساختن رابط کاربری ساده در Android Studio

در این بخش ما به شما آموزش خواهیم داد که چه طور با ابزار Android Studio Layout Editor یک رابط کاربری شامل یک text box و یک button بسازید.

طراحی رابط کاربری با Layout Editor

مراحل زیر را به ترتیب برای طراحی رابط کاربری، دنبال کنید:

۱- در پنجره ی Project برنامه ی Android Studio، مسیر app > res > layout > activity_main.xml را دنبال کنید.

۲- برای اینکه گزینه های بیشتر  Layout Editor راببنید. از مسیر View > Tool Windows > Project پنجره ی Project را مخفی کنید.

۳- اگر editor کد منبع XML را نمایش داد. روی سربرگ Design ، از پایین پنجره، کلیک کنید.

۴-سپس روی گزینه ی Select Design Surface  و گزینه Blueprint کلیک کنید.

۵- از منوی toolbar بخش Layout Editor روی Show   کلیک کنید. سپس تیک گزینه Show Constraints را بزنید.

۶-گزینه ی Autoconnect را از toolbar، غیر فعال کنید.

۷- در  toolbar روی Default Margins  کلیک کرده و ۱۶ را انتخاب کنید.

۸- روی علامت Device in Editor در toolbar، کلیک کرده و گزینه ی ۵٫۵, ۱۴۴۰ × ۲۵۶۰, ۵۶۰dpi را انتخاب کنید.

اکنون Editor به شکل زیر نمایش داده می شود.

نمایش تنظیم نهایی Editor

در قسمت سمت چپ و پایین، پنجره ی Component Tree قرار دارد که سلسله مراتب نمایش اشیا را نشان می دهد. در حال حاضر فقط شی TextView را دارد.

ConstraintLayout یک طرح است که موقعیت قرارگیری اشیا را بر اساس ارتباط آن ها با هم در یک سلسله مراتب، نمایش می دهد.

برای مثال:

• نمایش A حدودا ۱۶dp از بالای طرح والد فاصله دارد.
• نمایش A حدودا ۱۶dp از سمت چپ طرح والد فاصله دارد.
• نمایش B حدود ۱۶dp از سمت راست نمایش A ، فاصله دارد.
• نمایش B به سطح بالای نمایش A ، منتقل می شود.

ConstraintLayout

ایجاد یک text box

۱-اول، شما نیاز به حذف آنچه که در حال حاضر در طرح دیده می شود دارید. بنابراین روی TextView در پنجره Component Tree کلیک کنید. سپس کلید Delete را فشار دهید.

۲- در منوی Palette روی Text کلیک کنید. تا کنترل های text در دسترس قرار بگیرد.

۳- یک کنترل  Plain Text را به نمای design editor، درگ کنید.

۴- روی نمای design editor، کلیک کنید. اکنون شما می توانید، اندازه ی کنترل ها و مکان آنها را تغییر دهید.

۵- روی علامت لنگر در بالا کلیک کرده و آن را نگه دارید. سپس آن را تا بالای طرح بکشید. که مشخص می کند فاصله از بالا باید ۱۶dp، باشد.

۶- مانند مرحله ۵، فاصله را به همان میزان، از سمت چپ نیز تنظیم کنید.

تنظیم فاصله ی کنترل TextBox

افزودن یک Button

۱- در منوی Palette روی Buttons کلیک کنید.

۲-سپس کنترل Button را به نمای design editor درگ کنید.

۳- یک فاصله از سمت چپ Button تا سمت راست TextBox ایجاد کنید.

۴- برای اینکه کنترل ها، در دید افقی محدود شود.روی Button کلیک کرده و سپس روی Edit Baseline در نمای Edit Baseline کلیک کنید.

۵- Baseline داخل کنترل Button ظاهر می شود. سپس روی آن کلیک کرده و آن را به Baseline داخل کنترل TextBox درگ کنید.

تغییر دادن UI strings

برای نمایش UI، روی Select Design Surface در toolbar، کلیک کنید. سپس روی Design کلیک کنید.

توجه کنید. که برچسب کنترل Text با “Name” پر شده و button نیز با عنوان “Button” برچسب گذاری شده است.

اکنون مراحل زیر را دنبال کنید:

۱- پنجره ی Project را باز کنید.سپس مسیر  app > res > values > strings.xml را دنبال کنید.

این یک فایل منبع است، که در آن شما باید تمام رشته های UI خود را مشخص کنید.

انجام این کار،به شما اجازه می دهد که تمام رشته های UI را در یک مکان مدیریت کنید. و یافتن تغییرات و مدیریت آن، آسان تر می شود.

۲- روی Open editor در بالای پنجره ی editor، کلیک کنید. این کار Translations Editor را باز می کند.

۳- جهت افزودن یک رشته برای کنترل text box، روی Add Key  کلیک کنید. سپس ویرایش های زیر را انجام دهید:

الف- در پنجره ی Add Key ، در فیلد key عنوان “edit_message” را وارد کنید.

ب- در فیلد Default value ، عبارت “Enter a message” را وارد کنید.

ت- در نهایت روی OK کلیک کنید.

۴-یک key دیگر با نام “button_send” و مقدار value آن را “Send” ، قرار دهید.

برای بازگشت به بخش طراحی، مجدد روی activity_main.xml کلیک کنید. سپس مراحل زیر را دنبال کنید:

۱- روی کنترل text box که اضافه کردید کلیک کنید.تا پنجره ی Attributes در سمت راست، ظاهر شود.

اگر پنجره ی Attributes ظاهر نشد . روی Attributes  در حاشیه راست، کلیک کنید.

۲- تنظیم ویژگی text (که با “Name” تنظیم شده است) سپس مقدار value را حذف کنید.

۳-ویژگی hint را قرار دهید. سپس روی Pick a Resource  از سمت راست کنترل text box کلیک کنید.

سپس از لیست ظاهر شده روی edit_message کلیک کنید.

۴- اکنون روی کنترل button کلیک کنید. ویژگی text را (که در حال حاضر با “Button” تنظیم شده است) را قرار دهید.

سپس روی Pick a Resource ، کلیک کرده و سپس button_send را انتخاب کنید.

افزودن key

تنظیم ثابت بودن اندازه ی TextBox

برای اینکه طراحی ویژگی responsive را داشته باشد و در صفحه نمایش های مختلف بخوبی ظاهر شود. مراحل زیر را انجام دهید:

قبل از هر کاری، روی Show   در نوار toolbar کلیک کرده و سپس Blueprint را انتخاب کنید.

۱- هر دو نما را انتخاب کنید(با کلیک روی یکی و نگه داشتن Shift و سپس انتخاب دیگری).

سپس روی هر دو نما راست کلیک کرده و گزینه های Chain > Create Horizontal Chain را انتخاب کنید.

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

نتایج گزینه ی Create Horizontal Chain

۲- کنترل button را انتخاب کرده و پنجره ی Attributes را بازکنید. از نمای بالای پنجره Attributes استفاده کرده و حاشیه  سمت راست را با مقدار ۱۶ تنظیم کنید.

۳- روی text box، کلیک کنید تا صفات آن نمایش داده شود. عرض داخل آن را در حالت Match Constraints تنظیم کنید.

 Match constraints به این معنی است. که عرض افقی متن را طوری تنظیم کنید که کنترل text box فضای خالی افقی نداشته باشد.

تنظیم حالت Match Constraints

۴-در نهایت طرح برنامه ی شما آماده می شود.

آماده شدن طرح

اجرا کردن برنامه

روی گزینه ی Apply Changes از منوی toolbar کلیک کنید. تا تغییرات اعمال شود. سپس روی Run کلیک نمایید.

کلام آخر

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