Bài tập thực hành Phát triển ứng dụng trên thiết bị di động 1

LAB 05: THIẾT KẾ GIAO DIỆN (tt)

MỤC TIÊU
• Sử dụng các Layout trong Xamarin.
• Sử dụng các thành phần giao diện có dạng danh sách:
o Spinner
o ListView
o GridView

NỘI DUNG
Sử dụng Visual Studio, tạo các ứng dụng Xamarin Android sau đây:

Ví dụ 1: Tạo ứng dụng có đối tượng Spinner:

Spinner là đối tượng giao diện trong Android cho phép người dùng có thể chọn từ một
danh sách có sẵn.

Ví dụ sau đây sẽ tạo một Spinner bao gồm danh sách tên của các hành tinh. Khi người
dùng chọn một mục (item) nào đó, chương trình sẽ bắt sự kiện và hiển thị thông tin về
item đã được chọn trên Spinner.
Bài tập thực hành Phát triển ứng dụng trên thiết bị di động 2

Bước 1: Tạo project mới với tên HelloSpinner.

Bước 2: Hiệu chỉnh lại file Resources/Values/Strings.xml như sau:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">HelloSpinner</string>
<string name="planet_prompt">Choose a planet</string>
<string-array name="planets_array">
<item>Mercury</item>
<item>Venus</item>
<item>Earth</item>
<item>Mars</item>
<item>Jupiter</item>
<item>Saturn</item>
<item>Uranus</item>
<item>Neptune</item>
</string-array>
</resources>
Bước 3: Mở file Resources/Layout/Main.axml và chèn thêm code XML như sau:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dip"
android:layout_width="match_parent"
android:layout_height=" match_parent ">
<TextView
android:layout_width="match_parent "
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="@string/planet_prompt"
/>
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent "
android:layout_height="wrap_content"
android:prompt="@string/planet_prompt"
/>
</LinearLayout>

Lưu ý:
Thuộc tính android:text của TextView và android:prompt của Spinner đều tham chiếu đến
thẻ có tên planet_prompt trong file tài nguyên Strings.xml.

Bước 4: mở file MainActivity.cs và bổ sung thêm code như sau:

using Android.App;
using Android.OS;
using Android.Runtime;
using AndroidX.AppCompat.App;
using Android.Widget;

namespace SpinnerSample
{
Bài tập thực hành Phát triển ứng dụng trên thiết bị di động 3

[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher =

true)]
public class MainActivity : AppCompatActivity
{
Spinner spinner;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);

spinner = FindViewById<Spinner>(Resource.Id.spinner);

ArrayAdapter adapter = ArrayAdapter.CreateFromResource(

this,Resource.Array.planets_array,
Android.Resource.Layout.SimpleSpinnerDropDownItem);

spinner.Adapter = adapter;

spinner.ItemSelected += Spinner_ItemSelected;

private void Spinner_ItemSelected(object sender,

AdapterView.ItemSelectedEventArgs e)
{
Toast.MakeText(this,spinner.GetItemAtPosition(e.Position).ToString() ,
ToastLength.Short).Show();
}

public override void OnRequestPermissionsResult(int requestCode, string[]

permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
{
Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode,
permissions, grantResults);

base.OnRequestPermissionsResult(requestCode, permissions, grantResults);

}
}
}
Bài tập thực hành Phát triển ứng dụng trên thiết bị di động 4

Bước 5: Thực thi ứng dụng:

Ví dụ 2: Tạo ứng dụng có đối tượng ListView đơn giản

ListView là một dạng danh sách trong có chứa các item để người dùng chọn:
Bài tập thực hành Phát triển ứng dụng trên thiết bị di động 5

Để tạo và nạp dữ liệu vào ListView ta thực hiện như sau:

Bước 1: Tạo project mới với tên HelloListView.
Bước 2: Tạo file XML với tên list_item.xml và lưu vào thư mục Resources/Layout. Nội dung như
sau:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
android:textSize="16sp">
</TextView>

File này được dùng để định nghĩa cách một item được hiển thị như thế nào trên ListView.

Bước 3: Mở file activity_main.xml để tạo giao diện cho ứng dụng:

<?xml version="1.0" encoding="utf-8"?>
Bài tập thực hành Phát triển ứng dụng trên thiết bị di động 6

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

Bước 3: Mở file MainActivity.cs và bổ sung thêm các code cần thiết:

using Android.App;
using Android.OS;
using Android.Runtime;
using AndroidX.AppCompat.App;
using Android.Widget;

namespace ListViewSimple
{
[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher =
true)]
public class MainActivity : AppCompatActivity
{
ListView listView;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
listView = FindViewById<ListView>(Resource.Id.listView);
string[] countries = new string[] {
"Afghanistan","Albania","Algeria","American Samoa","Andorra",
"Angola","Anguilla","Antarctica","Antigua and Barbuda","Argentina",
"Armenia","Aruba","Australia","Austria","Azerbaijan"
};

ArrayAdapter adapter = new ArrayAdapter<string>(this,

Resource.Layout.list_item,countries);
listView.Adapter = adapter;

//tạo sự kiện khi chọn item trên listView:

listView.ItemClick += ListView_ItemClick;
}

private void ListView_ItemClick(object sender,

AdapterView.ItemClickEventArgs e)
{
Toast.MakeText(this, listView.GetItemAtPosition(e.Position).ToString(),
ToastLength.Short).Show();
}
Bài tập thực hành Phát triển ứng dụng trên thiết bị di động 7

public override void OnRequestPermissionsResult(int requestCode, string[]

permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
{
Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode,
permissions, grantResults);

base.OnRequestPermissionsResult(requestCode, permissions, grantResults);

}
}
}
Bước 4: Chạy thử ứng dụng

Nếu muốn sử dụng dữ liệu được load từ file Resources/Values/Strings.xml. Ta thực hiện như sau:

Mở file Resources/Values/Strings.xml và soạn nội dung như dưới đây:

<?xml version="1.0" encoding="utf-8"?>

<resources>
<string name="app_name">HelloListView</string>
<string-array name="countries_array">
<item>Bahrain</item>
<item>Bangladesh</item>
<item>Barbados</item>
<item>Belarus</item>
<item>Belgium</item>
<item>Belize</item>
<item>Benin</item>
</string-array>
</resources>
Bài tập thực hành Phát triển ứng dụng trên thiết bị di động 8

Sử lại cách khai báo biến adapter, lúc này ta sẽ nạp dữ liệu từ file Strings.XML vào
biến:

ArrayAdapter adapter = ArrayAdapter.CreateFromResource(this,

Resource.Array.countries_array, Resource.Layout.list_item);

Thực thi chương trình, sẽ có kết quả như sau:

*** HẾT ***