Thiết kế giao diện và xử lý sự kiện trong Android với Xamarin sẽ hướng dẫn bạn cách thiết kế giao diện Android với các view cơ bản cũng như cách xử lý sự kiện. Như các bạn đã biết, để thiết kế giao diện Android với Android Studio chúng ta sẽ mở tập tin xml tương ứng với Activity mà chúng ta đang thiết kế.

Và nếu như trong Android Studio, mỗi một form sẽ gồm một activity (Java) và một layout (xml) thì trong Visual Studio mỗi một form cũng gồm một acitivy (C#) và một layout (axml)

Thiết kế giao diện và xử lý sự kiện trong Android với Xamarin – Thiết kế giao diện

Để có thể thiết kế được giao diện ứng dụng, việc đầu tiên chúng ta cần làm là mở tập tin axml, sau đó lựa chọn các view thích hợp rê và thả vào vị trí thích hợp.

1. Mở tập tin axml: Mở rộng Resources -> mở rộng layout -> mở tập tin axml tương ứng với activity mà chúng ta muốn thiết kế. Trong hình bên dưới chúng tôi đang chọn Main.axml tương ứng với activity MainActivity.cs

2. Sử dụng Toolbox nơi chứa các view được dùng để thiết kế giao diện ứng dụng người dùng (GUI)

Hình sau đây là một ví dụ về thiết kế giao diện trong Android. Các view mà chúng tôi sử dụng gồm TextView, EditText và Button. Tùy theo từng yêu cầu cụ thể mà bạn có thể thêm bớt các view sao cho phù hợp

3. Sử dung Properties: Đầu tiên chúng ta chọn view muốn thiết lập -> thay đổi những thuộc tính tương ứng như layout_width, layout_height, text, layout_gravity, id, onClick, …Tùy theo từng view cụ thể mà chúng ta sẽ sử dụng những thuộc tính nào.

Thiết kế giao diện và xử lý sự kiện trong Android với Xamarin – Xử lý sự kiện

Sự kiện thể hiện sự tương tác giữa ứng dụng và người dùng. Khi người dùng chạm vào một button, chạm và giữ một dòng trong ListView, …ứng dụng sẽ xử lý yêu cầu mà người dùng muốn. Đó chính là sự kiện.

Để tiện theo dõi, chúng tôi lấy ví dụ khi người dùng chạm vào nút “Thoát” thì phát sinh sự kiện click và ứng dụng sẽ bị đóng. Hoặc khi người dùng nhập vào một số thập phân và chọn “Chuyển đổi” ứng dụng sẽ hiển thị số nhị phân tương ứng.

Xử lý sự kiện là xử lý cần thiết trong hầu hết các ứng dụng và bao gồm 2 bước sau

Bước 1: Đăng ký sự kiện cho các view Bước 2: Xử lý sự kiện (Cài đặt xử lý cụ thể theo yêu cầu)

Theo sau đây là một ví dụ mẫu về đăng ký và xử lý sự kiện cho nút “Thoát”

Bước 1: Đăng ký sự kiện cho nút “Thoát”.

Chọn nút “Thoát” mở màn hình Designer -> tại thuộc tính onClick, nhập tên phương thức mà chúng ta sẽ phải cài đặt xử lý bên tập tin cs.

Bước 2: Cài đặt xử lý

Mở tập tin .cs tương ứng với layout -> Khai báo và cài đặt xử lý cho phương thức đã khai báo tại layout. Say đây là xử lý cụ thể cho nút “Thoát”

[Java.Interop.Export("CloseAction")]
 // Note: add Mono.Android.Export reference
 public void CloseAction(Android.Views.View v)
 {
   Finish();
 }

Trong đó CloseAction là tên phương thức mà chúng ta đã khai báo tại thuộc tính onClick ở bước 1. Lệnh Finish() được sử dụng để thoát ứng dụng.

Thiết kế giao diện và xử lý sự kiện trong Android với Xamarin – Bài tập thực hành

Yêu cầu: Sau khi người dùng hoàn thành việc lựa chọn và chạm nút ‘SMS – Place you order’ , đơn đặt hàng sẽ được hiển thị lên màn hình. Hình bên dưới sẽ cho bạn thấy điều đó.

Lưu ý:

– Tên khách hàng (name) và số điện thoại (phone) bắt buộc nhập – Mặc định chọn ‘Round’ – Phải có ít nhất một trong ‘Pepperoni’, ‘Mushroom’ và ‘Veggies’ được chọn