طراحی ظاهر اپلیکیشن در زامارین

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

پروژه زامارین را ایجاد میکنیم و نام آن را Phoneword میگذاریم.

Layout در Resourses

محل قرار گرفتن UI  برنامه به صورت xml می باشد.داخل این فولدر main.axml را مشاهده میکنیم که همان ui پیش فرض برنامه است که به صورت خودکار ایجاد شده است.

 

1.روی main.axmlکلیک میکنیم تا در در قسمتandroid designer باز شود .

طراحی UI برنامه زامارین

2.دکمه hello word click meکه به صورت پیش فرض قرار داده شده است را با کلیک روی آن و فشردن دکمه delete پاک میکنیم.

از toolbox  میتوانیم هر ابزارکی که میخواهیم را انتخاب کنیم و به داخل محیط Designer بکشیم، در آموزش های آینده طریقه چیدن المان ها به صورت منظم کنار هم را فرا خواهیم گرفت .

به یاد داشته باشید که( برای پیدا کردن المان ها میتوان از جستجو واقع در بالای toolbox نیز استفاده کرد)

3.در toolbox روی (tool text (large کلیک می کنم و ان را به داخل android  designerمیکشیم.

(text (large

حالا در قسمت properties میتوانیم خصوصیات این ابزارک را تغییر دهیم.

خصوصیت هایی که تغییر میدهیم textو id است

Text  را به “Enter a phone word” تغییر میدهیم

id: را به id/txtheader+@ تغییر میدهیم.

id یکی از موارد مهم تست که باید تنظیم گردد تا در طول برنامه بتوانیم به این  المان دسترسی داشته باشیم.

 

4.از toolbox ، این بار TextView را انتخاب میکنیم و زیر text قبلی قرار میدهیم.

بهproperties  میرویم و موارد زیر را قرار میدهیم

Text: 1 -855-XAMARIN

Id:@+id/PhoneNumberText

قرار دادن text و id برای المان ها

 

5.از toolbox ، این بار button را انتخاب میکنیم و به داخل designer میکشیم و زیر TextView قرار می دهیم و مجددا به سراغ properties می رویم و موارد زیر را تغییر می دهیم.

Id:@+id/TranslateButton

Text:Translate

قرار دادن button در layout

قرار دادن text و id برای button

6.از toolbox ، یک button دیگر را به زیر button قبلی اضافه میکنیم و از داخل properties موارد زیر را تغییر میدهیم.

Id:@+id/CallButton

text:Call

7.ظاهر main.axmlبا اضافه شدن المان ها ، به صورت زیر در می آید.

ui نهایی

در ادامه این آموزش ها قصد داریم که کلاسی بنویسیم که شماره کارکتری ما را به عدد تبدیل کند و بعد از آن به سراغ activity که در واقع همان code behind برنامه می باشد می رویم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

3 + 5 =