آموزش ساخت GUI اپلیکیشن در برنامه نویسی زامارین

ساخت GUI اپلیکیشن

TextView

TextView ، مؤلفه ی بسیار مهمی از ویجتهای (widgets) اندروید می باشد. این مؤلفه ، عمدتاً برای نمایش دادن متون در یک صفحه Android استفاده می شود.

برای ایجاد یک textview ، به سادگی فایل main.axml را باز کنیم و کد زیر را در بین تگ های چیدمان خطی اضافه می کنیم.

<TextView 
   android:text = "Hello I am a text View" 
   android:layout_width = "match_parent" 
   android:layout_height = "wrap_content" 
   android:id = "@+id/textview1" />

Button

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

<Button 
   android:id = "@+id/MyButton" 
   android:layout_width = "fill_parent" 
   android:layout_height = "wrap_content" 
   android:text = "@string/Hello" />

فایل Resources / Values / Strings.xml را باز می کنیم و کد زیر را در بین تگ <resources> تایپ می کنیم.

<string name="Hello">Click Me!</string>

کد فوق ، مقدار کلیدی را که ایجاد کرد ه ایم ، فراهم می کند. سپس ، فایل MainActivity.cs را باز می کنیم و action را برای انجام داده شدن ، در هنگامی که بر روی کلید کلیک می شود ، ایجاد می کنیم. کد زیر را در متد base.OnCreate (هندل) می نویسیم.

Button button = FindViewById<Button>(Resource.Id.MyButton); 
button.Click += delegate { button.Text = "You clicked me"; };

کد بالا ، متن “You Clicked Me” را در هنگامی که کاربر بر روی کلید کلیک می کند ، نمایش می دهد.

<< -->FindViewById ، این متد ، ID ی یک view را که قبلاً شناسایی شده بود ، پیدا می کند. این متد ، عملیات جستجو را برای ID در فایل layout با پسوند  .axml انجام می دهد.

Chechbox

یک چک باکس ، زمانی که فرد بخواهد بیش از یک گزینه را از میان گروهی از گزینه ها انتخاب کند ، استفاده می شود. در این مثال ، ما قصد داریم ، یک Chechbox را ایجاد کنیم که در زمان انتخاب گزینه ، پیام it has been checked را نشان می دهد ، یا در صورت انتخاب نشدن ، پیام  it has been unchecked را نمایش می دهد.

برای شروع ، ما فایل Main.axml را در پروژه خود باز می کنیم و خط کد زیر را برای ایجاد checkbox تایپ می کنیم.

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "#d3d3d3" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <CheckBox 
      android:text = "CheckBox" 
      android:padding = "25dp" 
      android:layout_width = "300dp" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/checkBox1" 
      android:textColor = "@android:color/black" 
      android:background = "@android:color/holo_blue_dark" /> 
</LinearLayout>
در ادامه ، به فایل MainActivity.cs ، برای افزودن کد عملکرد می رویم.
CheckBox checkMe = FindViewById<CheckBox>(Resource.Id.checkBox1); 
checkMe.CheckedChange += (object sender, CompoundButton.CheckedChangeEventArgs e) => { 
   CheckBox check = (CheckBox)sender; 
   if(check.Checked) { 
      check.Text = "Checkbox has been checked"; 
   } else { 
      check.Text = "Checkbox has not been checked"; 
   } 
};

در کد بالا ، ما ابتدا checkbox را با استفاده از findViewById پیدا می کنیم. سپس ، یک متد handler را برای checkbox خود و handler خود ایجاد می کنیم ، یک دستور if else ایجاد می کنیم که پیام را بسته به نتیجه انتخاب شده ، نشان می دهد.

CompoundButton.CheckedChangeEventArgs : این متد ، یک رویداد را هنگامی که حالت checkbox تغییر می کند ، راه اندازی می کند.

نوار پیشرفت

نوار پیشرفت (progress bar) ، کنترلی است که برای نشان دادن پیشرفت عملیات ، استفاده می شود. برای اضافه کردن یک نوار پیشرفت ، خط کد زیر را در فایل Main.axml اضافه می کنیم.

<ProgressBar 
   style="?android:attr/progressBarStyleHorizontal" 
   android:layout_width = "match_parent" 
   android:layout_height = "wrap_content" 
   android:id = "@+id/progressBar1" />

سپس ، به فایل MainActivity.cs می رویم و مقدار نوار پیشرفت را تنظیم می نماییم.

در کد فوق ، ما یک نوار پیشرفت را با مقدار 35 ایجاد کرده ایم.

Radio Button ها

کلید رادیویی ، ویجت اندرویدی است که به شخص اجازه می دهد ، یک گزینه را از مجموعه ای از گزینه ها انتخاب کنن. در این بخش ، ما قصد داریم یک گروه رادیویی را که حاوی لیستی از اتومبیل ها است ، ایجاد کنیم که یک کلید رادیویی انتخاب شده را بازیابی می کند.

ابتدا ، ما یک گروه رادیویی و یک textview را همان طور که در کد زیر نشان داده شده است ، اضافه می کنیم:

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "@android:color/darker_gray" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <TextView 
      android:text = "What is your favourite Car" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/textView1" 
      android:textColor = "@android:color/black" /> 
   <RadioGroup 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/radioGroup1" 
      android:backgroundTint = "#a52a2aff" 
      android:background = "@android:color/holo_green_dark"> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Ferrari" 
      android:id = "@+id/radioFerrari" /> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Mercedes" 
      android:id = "@+id/radioMercedes" /> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Lamborghini" 
      android:id = "@+id/radioLamborghini" />
   <RadioButton 
      android:text = "Audi" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/radioAudi" /> 
   </RadioGroup> 
</LinearLayout>      

برای انجام یک action ، هنگامی که روی یک کلید رادیویی کلیک می شود ، یک activity را اضافه می کنیم. به فایل MainActivity.cs می رویم و یک هندلر رویداد جدید ایجاد می کنیم و همان طور که در کد زیر نشان داده شده است ، اضافه می نماییم.

private void onClickRadioButton(object sender, EventArgs e) { 
   RadioButton cars = (RadioButton)sender; 
   Toast.MakeText(this, cars.Text, ToastLength.Short).Show 
   (); 
}

()Toast.MakeText : این یک متد view است که برای نمایش دادن پیام / خروجی در یک پنجره پاپ کوچک ، استفاده می شود. در زیر متد ()OnCreate ، درست بعد از ()SetContentView ، قطعه کد زیر را اضافه می کنیم. این کار ، هر یک از کلید های رادیویی را ضبط کرده و آنها را به هندلر رویداد که ما ایجاد کرده ایم ، اضافه خواهد نمود.

RadioButton radio_Ferrari = FindViewById<RadioButton> 
   (Resource.Id.radioFerrari); 
   RadioButton radio_Mercedes = FindViewById<RadioButton> 
   (Resource.Id.radioMercedes); 
   RadioButton radio_Lambo = FindViewById<RadioButton> 
   (Resource.Id.radioLamborghini); 
   RadioButton radio_Audi = FindViewById<RadioButton> 
   (Resource.Id.radioAudi); 
   radio_Ferrari.Click += onClickRadioButton; 
   radio_Mercedes.Click += onClickRadioButton; 
   radio_Lambo.Click += onClickRadioButton; 
   radio_Audi.Click += onClickRadioButton; 

اکنون ، اپلیکیشن را run می کنیم. باید تصویر زیر به عنوان خروجی نمایش داده شود.

Toggle Button ها

کلید Toggle (جابجایی) ، برای ایجاد تناوب بین دو وضعیت استفاده می شود، برای مثال ، وضعیت را می توان بین ON و OFF را تغییر دهد. فایل Resources / layout / Main.axml را باز کرده و خطوط کد زیر را برای ایجاد یک کلید جابجایی اضافه می کنیم.

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "#d3d3d3" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <ToggleButton 
      android:id = "@+id/togglebutton" 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:textOn = "Torch ON" 
      android:textOff = "Torch OFF" 
      android:textColor = "@android:color/black" /> 
</LinearLayout>

ما می توانیم action ها را به نوار toggle هنگامی که کلیک می شود ، اضافه کنیم. فایل MainActivity.cs را باز کرده و بعد از کلاس متد ()OnCreate ، خطوط کد زیر را اضافه می کنیم.

ToggleButton togglebutton = FindViewById<ToggleButton> (Resource.Id.togglebutton); 
togglebutton.Click += (o, e) => { 
   if (togglebutton.Checked) 
      Toast.MakeText(this, "Torch is ON", ToastLength.Short).Show (); 
   else 
      Toast.MakeText(this, "Torch is OFF", 
      ToastLength.Short).Show(); 
};

اکنون ، هنگامی که اپ را run می کنیم ، باید خروجی زیر نشان داده شود:

Ratings Bar

یک Ratings Bar (نوار رتبه) ، عنصری از فرم است که از ستاره هایی ساخته می شود که کاربران اپ می توانند برای ارزیابی مواردی که ما برای آنها فراهم کرده ایم ، استفاده کنند. در فایل Main.axml خود ، یک نوار رتبه جدید با 5 ستاره ایجاد می کنیم.

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "#d3d3d3" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <RatingBar 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/ratingBar1" 
      android:numStars = "5" 
      android:stepSize = "1.0" /> 
</LinearLayout>

با run کردن اپ ، خروجی زیر باید نمایش داده شود:

Autocomplete TextView

این یک textview است که پیشنهادات کامل را در حالی که یک کاربر در حال تایپ است ، نشان می دهد. ما قصد داریم یک autocomplete textview را با لیستی از نام های افراد و یک کلید ایجاد کنیم که با کلیک  شدن بر روی کلید ، نام انتخابی ما را نشان می دهد.

فایل Main.axml را باز کرده و کد زیر را در آن می نویسیم.

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:layout_width = "fill_parent" 
   android:background = "#d3d3d3" 
   android:layout_height = "fill_parent"> 
   <TextView 
      android:text = "Enter Name" 
      android:textAppearance = "?android:attr/textAppearanceMedium" 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/textView1" 
      android:padding = "5dp" 
      android:textColor = "@android:color/black" /> 
   <AutoCompleteTextView 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/autoComplete1" 
      android:textColor = "@android:color/black" /> 
   <Button 
      android:text = "Submit" 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/btn_Submit" 
      android:background="@android:color/holo_green_dark" /> 
</LinearLayout>

کد بالا ، یک TextView را برای تایپ کردن ، AutoCompleteTextView را برای نمایش دادن پیشنهادات ، و یک کلید را برای نمایش دادن نام های وارد شده از طریق TextView ، تولید می کند. برای اضافه کردن عملکرد ، به فایل MainActivity.cs می رویم.

یک متد هندلر رویداد جدید را به صورت زیر ایجاد می کنیم.

protected void ClickedBtnSubmit(object sender, System.EventArgs e){ 
   if (autoComplete1.Text != ""){ 
      Toast.MakeText(this, "The Name Entered =" 
         + autoComplete1.Text, ToastLength.Short).Show(); 
   } else { 
      Toast.MakeText(this, "Enter a Name!", ToastLength.Short).Show(); 
   } 
}

عندلر رویداد ایجاد شده ، بررسی می کند که آیا autocomplete textview خالی است یا خیر. اگر خالی نباشد ، در این صورت متن autocomplete  انتخاب شده را نمایش می دهد. کد زیر را در کلاس ()OnCreate تایپ می کنیم.

autoComplete1 = FindViewById<AutoCompleteTextView>(Resource.Id.autoComplete1); 
btn_Submit = FindViewById<Button>(Resource.Id.btn_Submit);  
var names = new string[] { "John", "Peter", "Jane", "Britney" }; 
ArrayAdapter adapter = new ArrayAdapter<string>(this,           
   Android.Resource.Layout.SimpleSpinnerItem, names); 
autoComplete1.Adapter = adapter; 
btn_Submit.Click += ClickedBtnSubmit; 

ArrayAdapter : این هندلر مجموعه است که آیتم های داده را از یک مجموعه لیست می خواند و آنها را به یک view باز می گرداند یا آنها را بر روی صفحه ، نمایش می دهد.

اکنون ، هنگامی که اپلیکیشن را run می کنیم ، باید خروجی زیر را نمایش داده شود.