Xây dựng ứng dụng GUI với Xamarin

TextView

TextView là một thành phần rất quan trọng của các widget Android. Nó chủ yếu được sử dụng để hiển thị văn bản trên màn hình Android. Để tạo một textview, chỉ cần mở main.axml và thêm đoạn code sau vào giữa các thẻ layout tuyến tính.

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

Button (nút)

Button (nút) là một control được sử dụng để kích hoạt một sự kiện khi nó được nhấp. Trong tệp Main.axml của bạn, nhập code sau đây để tạo button.

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

Mở Resources\Values\Strings.xml và nhập dòng code sau vào giữa thẻ <resource>.

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

Đoạn code trên cung cấp giá trị của button mà chúng ta đã tạo. Tiếp theo, chúng ta mở MainActivity.cs và tạo hành động sẽ được thực hiện khi nhấp vào button. Nhập code sau bên dưới phương thức base.OnCreate (bundle).

Button button = FindViewById<Button>(Resource.Id.MyButton); 
button.Click += delegate { button.Text = "You clicked me"; };
Nút ứng dụng

Đoạn code trên hiển thị “You Clicked Me” khi người dùng nhấp vào button.

FindViewById << -> Phương thức này tìm ID của một view được xác định. Nó tìm kiếm id trong tập tin layout .axml.

FindViewById

Checkbox

Một checkbox được sử dụng khi một người muốn chọn nhiều hơn một tùy chọn từ một nhóm các tùy chọn. Trong ví dụ này, chúng ta sẽ tạo một checkbox mà trên đó đã chọn, hiển thị một thông báo rằng nó đã được kiểm tra, nếu không nó sẽ hiển thị không được chọn.

Để bắt đầu, chúng ta mở tệp Main.axml trong dự án và nhập dòng code sau đây để tạo 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>

Tiếp theo, hãy truy cập MainActivity.cs để thêm code chức năng.

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"; 
   } 
};

Từ đoạn code trên, trước tiên chúng ta tìm kiếm checkbox bằng findViewById. Tiếp theo, chúng ta tạo một phương thức xử lý cho checkbox và trong trình xử lý, chúng ta tạo một câu lệnh if khác hiển thị thông báo tùy thuộc vào kết quả được chọn.

CompoundButton.CheckedChangeEventArss → Phương thức này kích hoạt một sự kiện khi trạng thái checkbox thay đổi.

Hộp kiểm đã được kiểm tra

Progress Bar (Thanh tiến trình)

Thanh tiến trình là một điều khiển được sử dụng để hiển thị tiến trình của một hoạt động. Để thêm thanh tiến trình, hãy thêm dòng code sau vào tệp Main.axml .

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

Tiếp theo, đi đến MainActivity.cs và đặt giá trị của thanh tiến trình.

ProgressBar pb = FindViewById<ProgressBar>(Resource.Id.progressBar1); 
pb.Progress = 35;

Trong đoạn code trên, chúng ta đã tạo một thanh tiến trình có giá trị 35.

Radio Button (nút radio)

Đây là một tiện ích Android cho phép một người chọn một trong số các tùy chọn. Trong phần này, chúng ta sẽ tạo ra một nhóm radio chứa danh sách những chiếc xe sẽ lấy lại radio button đã kiểm tra.

Đầu tiên, chúng ta thêm một nhóm radio và textview như được hiển thị trong đoạn code sau –

<?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>

Để thực hiện một hành động, khi nhấp vào radio button, chúng ta thêm một hoạt động. Tới MainActivity.cs và tạo ra một xử lý sự kiện mới như hình dưới đây.

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

Toast.MakeText () → Đây là phương thức xem được sử dụng để hiển thị message/output (tin nhắn/đầu ra) trong một cửa sổ bật lên nhỏ. Ở dưới cùng của phương thức OnCreate () ngay sau SetContentView (), thêm đoạn code sau. Thao tác này sẽ chụp từng radio button và thêm chúng vào trình xử lý sự kiện mà chúng ta đã tạo.

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;

Bây giờ, chạy ứng dụng của bạn. Nó sẽ hiển thị màn hình sau đây như đầu ra –

Hiển thị đầu ra

Toggle Button (nút chuyển đổi)

Nút chuyển đổi được sử dụng để luân phiên giữa hai trạng thái, ví dụ: nút có thể chuyển đổi giữa BẬT và TẮT. Mở Resources\layout\Main.axml và thêm các dòng code sau để tạo nút chuyển đổi.

<?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>

Chúng ta có thể thêm hành động vào thanh chuyển đổi khi được nhấp. Mở MainActivity.cs và thêm các dòng code sau sau lớp phương thức 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(); 
};

Bây giờ, khi bạn chạy ứng dụng, nó sẽ hiển thị đầu ra sau –

Đuốc và TẮT

Ratings Bar (thanh xếp hạng)

Thanh xếp hạng là một yếu tố hình thức được tạo thành từ các ngôi sao mà người dùng ứng dụng có thể sử dụng để xếp hạng những thứ bạn đã cung cấp cho họ. Trong tập tin Main.axml của bạn, tạo một thanh đánh giá mới với 5 sao.

<?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>

Khi chạy ứng dụng, nó sẽ hiển thị đầu ra sau –

Xếp hạng ứng dụng

Autocomplete Textview (tự động hoàn thành Textview)

Đây là một textview hiển thị các đề xuất đầy đủ trong khi người dùng đang gõ. Chúng ta sẽ tạo một textview tự động hoàn thành có chứa danh sách tên của mọi người và một nút bấm khi nhấp sẽ hiển thị cho chúng ta tên đã chọn.

Mở Main.axml và viết code sau đây.

<?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>

Đoạn code trên tạo ra một TextView để gõ, AutoCompleteTextView để hiển thị các đề xuất và một button để hiển thị các tên được nhập từ TextView. Tới MainActivity.cs để thêm các chức năng.

Tạo một phương thức xử lý sự kiện mới như dưới đây.

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(); 
   } 
}

Trình xử lý đã tạo kiểm tra xem textview tự động hoàn thành có trống hay không. Nếu nó không trống, thì nó sẽ hiển thị văn bản tự động hoàn thành đã chọn. Nhập code sau vào bên trong lớp 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 – Đây là một tập hợp trình xử lý đọc các mục dữ liệu từ một tập hợp danh sách và trả về chúng dưới dạng view  hoặc hiển thị chúng trên màn hình.

Bây giờ, khi bạn chạy ứng dụng, nó sẽ hiển thị đầu ra sau.

Xem tự động hoàn thành

 

 

 

 

 

 

 

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *