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

در این درس، شما می خواهید با استفاده از ویرایشگر لایوت، یک لایوت که شامل یک 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- مطمئن شوید که Constraints روشن (ON) باشد. اگر ماوس را روی آن نگه دارید Hide Constraints نمایش داده می شود. (زیرا Constraints در حال نمایش است).
6- مطمئن شوید که Autoconnect ، خاموش (OFF) باشد. اگر ماوس را روی آن نگه دارید Turn On Auto connect    ظاهر می شود (زیرا حالا Off است)
7- روی Default Margins  در نوار ابزار کلیک کنید و 16 را انتخاب کنید. (شما می¬توانید حاشیه را برای view های بعدی تنظیم کنید)