Cơ chế Nội tại

Xamarin.Forms cung cấp một lớp trừu tượng trên các thành phần UI gốc của nền tảng mục tiêu. Lớp trừu tượng này đảm nhiệm việc cung cấp các chỉ thị cần thiết cho trình biên dịch Xamarin để chuẩn hóa các phần tử giao diện, đảm bảo chúng được render dưới dạng các thành phần gốc trên từng nền tảng. Do ngôn ngữ phát triển chính của Xamarin là C#, nên XAML được lựa chọn làm ngôn ngữ đánh dấu chính.

Trong cấu trúc Xamarin.Forms, thư viện chính được phân phối qua NuGet. Dù gói NuGet cho iOS không hiển thị phụ thuộc nào, các phiên bản Android và Windows Phone lại phụ thuộc vào một số thư viện hỗ trợ. Thư viện Xamarin.Forms.Core chứa các thành phần UI, khai báo XAML và các tính năng liên quan đến ràng buộc dữ liệu. Thư viện này có thể được bao gồm trong các dự án lớp lớp di động hoặc các dự án lớp di động có thể chia sẻ mã.

Cấu trúc Dự án

Để tạo ứng dụng Xamarin.Forms cho iOS, Android và/hoặc Windows Phone, có thể sử dụng các mẫu dự án trong phần "Cross-Platform". Dù mẫu dự án lớp di động (PCL) tạo ra các mẫu ứng dụng Xamarin.Forms, mẫu dự án chia sẻ tạo ra một dự án chia sẻ với các tệp tham chiếu đến các dự án ứng dụng gốc.

Sau khi khởi tạo dự án, việc chọn mẫu "Blank App (Xamarin.Forms Portable)" sẽ tạo ra một giải pháp bao gồm bốn dự án, một dự án với tên dự án và ba dự án đặc trưng cho nền tảng.

Các Thành phần Giao diện

Các thành phần Xamarin.Forms có thể được chia thành ba nhóm chính dựa trên vị trí và mục đích trong cấu trúc giao diện.

Trang

Trang là các thành phần tổ chức bố cục và cung cấp các điểm điều hướng. Các loại trang có thể được kế thừa, triển khai hoặc thiết kế bằng XAML.

TabbedPage

TabbedPage cho phép tạo các phần điều hướng ngang. Trên Android, nó tạo ra thanh điều hướng tab và hoạt động tương ứng. Trên Windows Phone, nó tạo ra điều khiển Pivot. Trên iOS, nó tạo ra thanh tab và các trang liên quan.

Ví dụ về triển khai:

var navigationTabs = new TabbedPage();

navigationTabs.Pages.Add(new ContentPage
{
    Header = "Mới nhất",
    Content = new StackLayout
    {
        VerticalAlignment = LayoutOptions.Center,
        Items = {
            new TextLabel {
                Alignment = TextAlignment.Center,
                Text = "Trang tải lên gần đây"
            }
        }
    }
});

// Thêm các tab khác tương tự
MainPage = navigationTabs;

MasterDetailPage

MasterDetailPage cung cấp cấu trúc nơi trang chủ chứa danh sách menu và trang chi tiết thực hiện điều hướng. Khi chi tiết được bọc trong NavigationPage, giao diện sẽ được thêm vào ngăn xếp điều hướng, cho phép truy cập dễ dàng vào trang trước đó.

Ví dụ triển khai:

var masterDetail = new MasterDetailPage();
masterDetail.MasterBehavior = MasterBehavior.Popover;
masterDetail.Master = new MenuView(masterDetail);
masterDetail.Detail = new NavigationPage(new ContentPage
{
    Title = "Chi tiết",
    Content = new StackLayout
    {
        VerticalAlignment = LayoutOptions.Center,
        Items = {
            new TextLabel {
                Alignment = TextAlignment.Center,
                Text = "Nội dung chi tiết"
            }
        }
    }
});

MainPage = masterDetail;

NavigationPage

NavigationPage là một triển khai trừu tượng của lớp Page. Mục đích chính của nó là tạo ra một ngăn xếp điều hướng trong ngữ cảnh ứng dụng.

CarouselPage

CarouselPage cho phép người dùng điều hướng giữa các trang cùng cấp bằng cử chỉ lướt hoặc vuốt. Nó tương tự với PanoramaView trên Windows Phone 7.

Ví dụ triển khai bằng XAML:

<CarouselPage x:Class="Xamarin.App.Views.SlideshowView">
  <ContentPage Title="Trang đầu">
    <StackLayout HeightRequest="50" VerticalAlignment="Center" BackgroundColor="Silver">
      <TextLabel Text="Nội dung trang đầu tiên" Alignment="Center"></TextLabel>
    </StackLayout>
  </ContentPage>
  <ContentPage Title="Trang thứ hai">
    <StackLayout HeightRequest="50" VerticalAlignment="Center" BackgroundColor="Gray">
      <TextLabel Text="Nội dung trang thứ hai" Alignment="Center"></TextLabel>
    </StackLayout>
  </ContentPage>
  <ContentPage Title="Trang thứ ba">
    <StackLayout HeightRequest="50" VerticalAlignment="Center" BackgroundColor="Silver">
      <TextLabel Text="Nội dung trang thứ ba" Alignment="Center"></TextLabel>
    </StackLayout>
  </ContentPage>
</CarouselPage>

Bố cục

Các thành phần bố cục cho phép sắp xếp các thành phần UI theo các chiến lược khác nhau.

ScrollView

ScrollView là một thành phần phổ biến, thường được kết hợp với các thành phần bố cục khác như StackLayout. Khi kết hợp với StackLayout, nếu chiều cao tính toán của StackLayout lớn hơn khu vực hiển thị, ScrollView cho phép cuộn nội dung.

Ví dụ triển khai:

<ScrollView>
  <StackLayout x:Name="contentLayout">
    <Grid Padding="10" ColumnSpacing="4">...</Grid>
    <Grid Padding="10" ColumnSpacing="4">...</Grid>
  </StackLayout>
</ScrollView>

Grid

Grid tương tự như Grid trong WPF, dùng để tổ chức các thành phần con trong cấu trúc lưới. Ví dụ:

<Grid Padding="10" ColumnSpacing="4">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="40" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="60" />
  </Grid.ColumnDefinitions>
  <Image Grid.RowSpan="2" Grid.Column="1" Source="mapicon.png" HeightRequest="40" WidthRequest="40"/>
  <TextLabel Grid.Row="0" Grid.Column="0" Text="Tiêu đề" FontSize="16"/>
  <TextLabel Grid.Row="1" Grid.Column="0" Text="{Binding Description}" FontSize="14" />
</Grid>

RelativeLayout

RelativeLayout cung cấp cơ chế tổ chức các thành phần con dưới dạng hình chữ nhật trôi nổi. Các giá trị LayoutBounds có thể chấp nhận đơn vị thiết bị hoặc đơn vị tỷ lệ.

Ví dụ triển khai bằng code:

relativeLayout.Children.Add(image,
    Constraint.RelativeToParent(parent => parent.Width/2 - 50),
    Constraint.RelativeToParent(parent => parent.Height/2 - 50),
    Constraint.Constant(100), Constraint.Constant(100));

Thành phần Giao diện

Các thành phần giao diện trong Xamarin.Forms được gọi là "view", là các trừu tượng của các thành phần hoặc widget trên nền tảng mục tiêu.

Label và Entry

Label dùng để hiển thị văn bản chỉ đọc, trong khi Entry và Editor cung cấp khả năng chỉnh sửa cho một dòng hoặc nhiều dòng.

Picker và TimePicker

Picker dùng để chọn giá trị từ danh sách, trong khi TimePicker và DatePicker chuyên dụng hơn cho việc chọn thời gian và ngày tháng.

ListView

ListView là thành phần chính để hiển thị tập hợp các mục. Nó hỗ trợ ràng buộc dữ liệu và các thao tác chuyên dụng như tải xuống, lệnh ngữ cảnh và chọn.

Ví dụ triển khai:

var recentItems = new List<ItemData>
{
    new ItemData("Sarajevo trip on 04.10", "Chi tiết chuyến đi", "profileicon.png"),
    new ItemData("Istanbul trip on 23.09", "Chi tiết chuyến đi", "mapicon.png"),
    // Thêm các mục khác
};

recentItemsListView.ItemsSource = recentItems;

Phong cách và Triggers

Phong cách giúp tổ chức và tái sử dụng các thuộc tính của thành phần UI. Thay vì định nghĩa lại từng thuộc tính cho mỗi thành phần, có thể tạo ra một phong cách chung.

Ví dụ về phong cách:

<ContentPage.Resources>
  <ResourceDictionary>
    <Style TargetType="TextLabel">
      <Setter Property="HorizontalAlignment" Value="StartAndExpand" />
      <Setter Property="VerticalAlignment" Value="Center" />
    </Style>
    <Style x:Key="HeaderStyle" TargetType="TextLabel">
      <Setter Property="FontSize" Value="24" />
      <Setter Property="TextColor" Value="White" />
    </Style>
  </ResourceDictionary>
</ContentPage.Resources>

Tích hợp Dịch vụ và Phân tích

Xamarin cung cấp các cơ chế để tích hợp dịch vụ nền tảng và phân tích ứng dụng.

DependencyService

DependencyService cho phép truy cập vào các triển khai nền tảng thông qua các giao diện trừu tượng.

Ví dụ triển khai:

public interface IAlertService
{
    void ShowAlert(string message);
}

// Triển khai cho Android
[assembly: Dependency(typeof(AlertService))]
namespace Xamarin.App.Droid.Services
{
    public class AlertService : IAlertService
    {
        public void ShowAlert(string message)
        {
            Toast.MakeText(Application.Context, message, ToastLength.Long).Show();
        }
    }
}

// Sử dụng trong mã chia sẻ
DependencyService.Get<IAlertService>().ShowAlert("Chúc mừng!");

Xamarin Insights

Xamarin Insights là nền tảng phân tích và báo cáo lỗi dành riêng cho các ứng dụng Xamarin. Nó cung cấp dữ liệu thời gian thực về cách người dùng tương tác với ứng dụng và các vấn đề phát sinh.

Ví dụ triển khai:

Insights.Initialize("API_KEY", this.ApplicationContext);
Insights.Identify("user@example.com", new Dictionary<string, string>
{
    {Insights.Traits.Name, "John Smith"},
    {Insights.Traits.Email, "user@example.com"}
});