Đồng nhất giao diện iOS và Android dùng Material Design trong Xamarin.Forms

Giới thiệu

Như chúng ta đã biết, khi chúng ta thực thi ứng dụng Xamarin.Forms, giao diện các điều khiển ứng dụng sẽ thay đổi tương ứng với cách các điều khiển này được định nghĩa trên các nền tảng Android và iOS. Điều này dẫn đến giao diện ứng dụng sẽ khác nhau trên thiết bị iOS và thiết bị Android. Để đồng nhất giao diện ứng dụng Xamarin.Forms trên iOS và Android, Google đã tạo ra thư viện Material Design

Cài đặt Material Design

Trong Visual Studio 2019, để sử dụng thư viện Material Design, đầu tiên chúng ta phải cài NuGet Package tên Xamarin.Forms.Visual.Material:

Chú ý: Lưu ý phiên bản Material hình trên là v4.5.0.617 nên chúng ta cần cập nhật phiên bản Xamarin.Forms tương ứng với phiên bản hiện tại của Material nếu không sẽ phát sinh lỗi NuGet Warning NU1605

Sử dụng Material Design

Cấu hình Android

Phiên bản Android tối thiểu dùng Material là 5.0 (API 21).
Phiên bản TargetFramework là 9.0 (API 28)

Thêm phương thức Init()

Ứng dụng Android: Trong tập tin MainActivity.cs tìm đến phương thức onCreate và thêm phương thức Xamarin.Forms.FormsMaterial.Init phía dưới phương thức Xamarin.Forms.Forms.Init:


protected override void OnCreate(Bundle savedInstanceState)

{

   ...

   Xamarin.Essentials.Platform.Init(this, savedInstanceState);

   global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

   global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);

   LoadApplication(new App());

}

Ứng dụng iOS: Trong tập tin AppDelegate.cs tìm đến phương thức FinishedLaunching và thêm phương thức Xamarin.Forms.FormsMaterial.Init phía dưới phương thức Xamarin.Forms.Forms.Init:


public override bool FinishedLaunching(UIApplication app, NSDictionary options)

{

  global::Xamarin.Forms.Forms.Init();

  global::Xamarin.Forms.FormsMaterial.Init();

  LoadApplication(new App());

  return base.FinishedLaunching(app, options);

}

Các điều khiển hỗ trợ bởi Material Design

HIện tại, Material Design chỉ hỗ trợ các điều khiển sau:

Sử dụng Material Design

Bài viết này minh họa cách dùng thư viện Material trong ứng dụng Xamarin.Forms đơn giản trên nền tảng Android.

Giả sử giao diện ứng dụng chúng ta chỉ có một Button được chứa trong StackLayout, tập tin MainPage.xaml có nội dung 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:d="http://xamarin.com/schemas/2014/forms/design"

   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   mc:Ignorable="d"

   x:Class="App1.MainPage">

    <StackLayout>

       <!-- Place new controls here -->

       <Button Text="Click Here"/>

    </StackLayout>

</ContentPage>

Thực thi ứng dụng

Chúng ta có thể áp dụng Material Design cho Button của ứng dụng bằng cách thêm thuộc tính Visual đến ContentPage:

Hình trên cho thấy giá trị của Visual có thể là:

Default: Điều khiển được định nghĩa mặc định bởi iOS hay Android( giống hình thực thi ứng dụng trên). Khi chúng ta không dùng thuộc tính Visual trong ContentPage cũng tương đương với việc chúng ta dùng Visual với giá trị Default.
Material: Điều khiển được định nghĩa bởi thư viện Material Design.

Thêm Visual với giá trị Material đến ContentPage:


<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

  xmlns:d="http://xamarin.com/schemas/2014/forms/design"

  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

  mc:Ignorable="d"

  x:Class="App1.MainPage"

  Visual="Material">

   <StackLayout>

     <!-- Place new controls here -->

     <Button Text="Click Here"/>

   </StackLayout>

</ContentPage>

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

Chúng ta cũng có thể viết mã C# để áp dụng Material đến Button theo các bước sau:

Xóa thuộc tính Visual trong ContentPage chúng ta vừa thêm từ MainPage.xaml
Mở tập tin MainPage.xaml.cs, tìm đến phương thức MainPage và viết lại như sau:


public MainPage()

{

  InitializeComponent();

  this.Visual = VisualMarker.Material;

}

Từ khóa this là thể hiện lớp ContentPage hiện tại với thuộc tính Visual. Thuộc tính Visual này sẽ tham chiếu đến thuộc tính Material hay Default của giao diện IVisual bằng cách thực thi lớp VisualMarker.

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

Như vậy, với Material Design, chúng ta không còn quá lo lắng về việc không đồng bộ giao diện giữa iOS và Android khi phát triển một ứng dụng Xamarin.Forms.

Trần Ngọc Minh Notes

Stay hungry, stay foolish!