Xamarin.Forms là gì?

Xamarin.Forms là một thư viện cho phép các nhà phát triển có thể tạo ra các giao diện người dùng (User Interface) có thể được chia sẻ một cách dễ dàng giữa các hệ điều hành (cross-platform) như Android, iOS, Windows Phone.

Phát triển ứng dụng Android thường yêu cầu dùng Java hay Kotlin. Nếu bạn là người chỉ biết C# và muốn phát triển ứng dụng cho nền tảng Android thì Xamarin.Forms có thể là một sự khởi đầu.

Công cụ và cài đặt

Bài viết này (và các bài viết sau) minh họa cách tạo các ứng dụng Xamarin.Forms bằng cách dùng công cụ Visual Studio (tôi đang dùng Visual Studio 2017) và kiểm tra ứng dụng trên máy ảo Genymotion.

Trong quá trình cài Visual Studio cần chọn và cài đặt Xamarin.Forms. Có thể kiểm tra đã cài đặt Xamarin.Forms hay chưa bằng cách tạo một ứng dụng mới trong Visual Studio:

  • Chọn File > New > Project
  • Tại khung bên trái chọn Installed > Visual C# > Cross-Platform. Nếu trong Visual C# chưa có Cross-Platform tức là Xamarin.Forms chưa được cài đặt. Có thể cài đặt thêm Xamarin.Forms vào Visual Studio bằng cách chọn liên kết Open Visual Studio Installer:

  • Trong Visual Studio Installer, chọn Mobile Development in .NET và cài đặt:

  • Để kiểm tra các ứng dụng Xamarin.Forms chúng ta có thể cài đặt và sử dụng máy ảo AVD (Android Virtual Device) có sẵn trong Visual Studio nhưng máy ảo AVD có nhược điểm là khá chậm. Một giải pháp khác là dùng Genymotion.

Ứng dụng đầu tiên

Tạo ứng dụng Xamarin.Forms đầu tiên bằng cách:

  • Chọn File > New > Project
  • Tại khung bên trái chọn Installed > Visual C# > Cross-Platform.
  • Chọn Mobile App (Xamarin.Forms). Điền tên dự án là HelloWorld trong mục Name, chọn vị trí lưu tại Location:

  • Nhấn OK. Vì chúng ta chỉ quan tâm đến phát triển ứng dụng trên Android nên chỉ cần chọn Android tại Platform trong cửa sổ New Cross Platform App và nhấp OK:

Cửa sổ Solution Explorer sẽ trông như sau:

Trong quá trình tạo ứng dụng, chúng ta sẽ làm việc nhiều với 3 tập tin: App.xaml, MainPage.xaml và MainActivity.cs. Nội dung của các tập tin này ban đầu như sau:

App.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HelloWorld.App">
<Application.Resources>

<!-- Application resource dictionary -->

</Application.Resources>
</Application>

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HelloWorld"
x:Class="HelloWorld.MainPage">

<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="Center"
HorizontalOptions="Center" />

</ContentPage>

MainActivity.cs


using System;

using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace HelloWorld.Droid
{
[Activity(Label = "HelloWorld", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;

base.OnCreate(bundle);

global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
}
}
}

Chúng ta có thể chạy thử ứng dụng ban đầu này bằng cách chọn máy ảo Android đã cài sẵn trong Visual Studio:

Tuy nhiên, dùng các AVD sẽ chậm nên chúng ta có thể dùng máy ảo Genymotion. Mở Genymotion

Chọn thiết bị ảo tùy ý và nhấn nút Start. Một máy ảo sẽ sẵn sàng như sau:

Lúc này, trong Visual Studio sẽ xuất hiện thêm tùy chọn máy ảo Genymotion:

Thực thi bằng máy ảo Genymotion, kết quả:

Ngừng thực thi bằng cách nhấn vào nút Stop Debugging trong Visual Studio:

Mở tập tin MainPage.xaml và thay đổi nội dung thuộc tính Text của Label như sau:


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HelloWorld"
x:Class="HelloWorld.MainPage">

<Label Text="Hello World! I am Ngoc Minh."
VerticalOptions="Center"
HorizontalOptions="Center" />

</ContentPage>

Thực thi lại ứng dụng:

Đây là một ứng dụng Xamarin.Forms đơn giản. Chúng ta sẽ tìm hiểu nhiều hơn về Xamarin.Forms trong các bài sau.