لطفا صبر کنید ...

ساخت UI (رابط کاربری) ساده در اندروید

سعید هوشیار

توسط سعید هوشیار

مدیر سایت
دیدگاه ها: 0
بازدید ها : 2611
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

در لیداوب آموختید که اجرای برنامه روی گوشی تلفن همراه یا شبیه ساز تلفن همراه را راه اندازی کنید. در این مقاله  از توسعه نرم افزار اندوید یاد می‌گیرید که چگونه یک رابط کاربری یا user interface را به صورت اصولی طراحی کنید.


ساخت UI ساده

این مقاله به شما آموزش می‌دهد به وسیله Android studio layout editor  طرح‌هایی بسازید که شامل Textbox  و  Button  باشد. در مقاله بعدی شما فرا خواهید گرفت که چگونه با کلیک بر button  محتوای TextBox  را به یک Activity  دیگر ارسال کنید.

ساخت رابط

ساخت رابط کاربری در اپلیکیشن اندروید از سلسله مراتب طرح ( ViewGroup ) و ویجت (View) پیروی می‌کند. طرح (layouts)  مخزن‌های قابل رویتی هستند که جایگاه قرار گیری زیر شاخه Views  در صفحه را مشخص می‌کنند. ویجت‌ها رابط‌های کاربری همانند buttons  و  text boxes  هستند.

android studio ساخت رابط کاربری ساده

اندروید فرهنگ لغتی از واژگان کلاس‌های  ViewGroup  و View  فراهم کرده، پس بیشترین رابط کاربری شما در فایل XML  تعریف می‌شود. به هر حال این در به جای اینکه به شما نشان دهد، چگونه فایل XML  را بنویسید،  این درس به شما نشان می‌دهد چگونه با Android studio Layout Editor،  می‌توان به راحتی طرح‌های دلخواه خود را پیاده سازی کنید.

ویرایشگر طراحی(Layout Editor ) خود را باز کنید

نکته : از شما انتظار میرود که از Android Studio 2.3 یا بالاتر استفاده کنید.

برای شروع محیط کار خود را اینگونه که به شما آموزش میدهیم بسازید :

  1. در پنجره پروژه، app>res>layout>activity_main.xml   را باز کنید.
  2. برای داشتن فضای بیشتر برای ویرایشگر طراحی،   پنجره Project  را پنهان کنید. با استفاده از این مسیر :   View>Tool Windows>Project   (یا بروی گزینه project android studio ساخت رابط کاربری ساده  در سمت چپ Android studio  کلیک کنید.)
  3. اگر ویرایشگر شما سورس XML  را نشان می‌دهد، Design  را در پایین صفحه کلیک کنید.
  4. برویandroid studio ساخت رابط کاربری ساده Show Blueprint  کلیک کنید تا Blueprint نشان داده شود.
  5. مطمئن شوید گزینه‌ی Constration  روشن باشد.tooltip  در قسمت toolbar  باید hideConstrationsandroid studio ساخت رابط کاربری ساده  را نمایش دهد.
  6. مطمئن شوید که Autoconnect  خاموش باشد. tooltip  در قسمت toolbar  باید Turn On Autoconnectandroid studio ساخت رابط کاربری ساده   را نشان دهد.
  7. بروی Default Margin android studio ساخت رابط کاربری ساده در قسمت toolbar  کلیک کنید و ۱۶ را انتخاب کنید.
  8. بروی Device in Editor android studio ساخت رابط کاربری ساده در قسمت toolbar  کلیک کنید و Pixel XL  را انتخاب کنید.

ویرایشگر شما باید همانند تصویر زیر باشد.

android studio ساخت رابط کاربری ساده

در Component Tree  در قسمت پایین سمت چپ سلسله مراتب نمایشی طراحی شما را به شما نمایش می‌دهد. در این طرح شاخه اصلی شما ConstraintLayout  و حاوی یک TextView است.

 

اضافه کردن text box

  1. برای شروع شما باید محتوای زمینه طراحی خود را جای کنید. پس در قسمت Component tree  بروی TextView  کلیک کنید و Delete را بزنید.
  2. در قسمت Palette،   در پنجره سمت چپ بروی  Text   کلیک کنید،  سپس Plain Text  را بوسیله موس (mouse) بکشید و در صفحه طراحی خود در قسمت بالای صفحه آن را قرار دهید (Drag And Drop ). این همان EditText  است که plain text  در آن قرار می‌گیرد.
  3. بروی view  در ویرایشگر طرح کلیک کنید. حالا انوازه کردن سایز‌ها را در زوایای طراحی خود ببینید. برای کنترل بهتر حتما زوم خود را در ویرایشگر طراحی خود از 75٪ به بالا انتخاب کنید. ‌می‌توانید از قسمت Toolbar  این کار را انجام دهید.
  4. روی نشانه بالا کلیک کنید و نگه دارید و آن را بالا بکشید تا به بالای صفحه طراحی شما چفت شود و آن را رها کنید. این کار به این معنا است که اکنون فاصله طرح شما از بالای صفحه طراحی 16dp است. (این به این خاطر است که پیش فرض شما بر روی 16dp  انتخاب شده است)
  5. به همین ترتیب برای سمت چپ طرح خود نیز همین کار را انجام دهید تا فاصله آن از دیواره‌ی طرح 16dp شود.

android studio ساخت رابط کاربری ساده

اضافه کردن Button

  1. در پنجره Palette، بر روی Widgets در قسمت چپ کلیک کنید و Button  را در صفحه طراحی خود بکشید و در نزدیکی بالای صفحه سمت راست رها کنید(drag&drop).
  2. یک فاصله مابین سمت راست Button  که در سمت چپ text box  قرار گرفته، بگذارید.
  3. در محدود کردن view  خود به افقی در alignment، نیاز است که یک محدودیت مابین خط‌های اصلی متن خود قرار دهید. پس روی Button  کلیک کنید، سپس بروی Baseline Constraintandroid studio ساخت رابط کاربری ساده  کلیک کنید که به نظر در ویرایشگر طراحی دقیقا روبروی طرحی که انتخاب (select) کردید است. نشانه خط اصلی متن در داخل button  به نظر می‌رسد. روی آن کلیک کنید و نگه دارید و آن را بکشید و بروی خط اصلی text box  رها کنید. همانند تصویر.

android studio ساخت رابط کاربری ساده

نکته : همچنین شما می‌توانید alignment افقی را بوسیله لبه‌های بالا و پایین بسازید،  ولی button  شامل لایه‌ ای (padding) در اطراف آن است. پس تصویر alignment  اشتباه است اگر تصاویر را این‌گونه تراز کنید.

اندازه text box  را قابل انعطاف کنید

برای اینکه لایه تصویر شما سایز دستگاه‌های مختلف را ساپورت کند، شما باید بسط Text box  را به fill_parent  تغییر دهید.

قبل از اینکه ادامه دهید بروی Show Blueprint  Show Blueprint android studio ساخت رابط کاربری ساده در toolbar  صفحه طراحی خود کلیک کنید.

  1. بروی هر دو view کلیک کنید(بر روی یکی کلیک کنید سپس shift  را نگه دارید و بروی دیگری کلیک کنید)، سپس کلیک راست کنید و گزینه‌ی Center Horziontally  را بزنید.

با اینکه طراحی شما در وسط قرار نگرفته است، ولی این بهترین راه برای chain (متصل) کردن ۲ view  است. زنجیر کردن دوطرفه محدودی است که بین بیشتر از ۲ view  قرار می‌گیرد و برای هماهنگی آن view ها است. با این حال horizontal margins را نیز از بین می‌برد. شما می‌توانید تنظیمات آن را برگردانید.

  1. Button  را انتخاب کنید و پنجره‌ی Properties  را باز کنید. margin چپ و راست را 16dp بگذارید.
  2. Text box  را انتخاب کنید و margin چپ را 16dp بگذارید.
  3. روی شاخ (عرض) کلیک کنید و آن را روی Match Constraints تنظیم کنید. همانند تصویر.

android studio ساخت رابط کاربری ساده

“match Constraints” به این معنا است که عرض با محدودیت افقی مشخص شده است. از این رو text box  در صورت استفاده تا آخرین فضای افقی امتداد پیدا می‌کند.

در حال حاضر طرح شما آماده شده و باید همانند تصویر زیر باشد.

android studio ساخت رابط کاربری ساده

اجرای برنامه

اگر برنامه شما بروی دستگاه اندوید شما نصب شده است ، بروی گزینه ی Apply Change   در قسمت toolbar  کلیک کنید تا برنامه با طراحی سایت جدید شما به روزرسانی شود یا Run را کلیک کنید تا برنامه بروی دستگاه شما نصب شود.

Button  همچنان کاری انجام نمی‌دهد. برای باز کردن Activity  جدید وقتی Button  را فشار می‌دهید، مقالات بعدی لیداوب را دنبال کنید.

ما را با نظرات خود حمایت کنید.

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های