天天看点
返回

释放：在Xamarin Native中嵌入Xamarin.Forms

如果你像我一样，当你准备开始编写一个新的应用程序时，你面临这个问题，“Xamarin Native或Xamarin.Forms？”唯一正确的答案应该是“是”。 其实我想告诉你，这根本不应该是一个选择; 您只需开始编码，就完全有信心你走在正确的道路上。

介绍Xamarin.Forms嵌入

在Microsoft Build 2017上，我们发布了Xamarin.Forms Embedding，可以使用任何ContentPage并将其添加到您的本机应用程序。

其核心是XAMarin.Forms是一个共享的UI工具包，使您能够编写一个单一的UI来定位Android，iOS和UWP。 它还提供服务，以支持快速的应用程序开发，如导航，依赖关系管理和消息传递。 因此，您可以将整个应用程序写入Xamarin.Forms，而不需要触摸底层的本机OS层。 但是有一个底层！

Xamarin.Forms建立在Xamarin.iOS和Xamarin.Android基础之上，Xamarin.Android是用于生产具有100％访问平台API的高性能本机应用程序的最佳解决方案。

释放：在Xamarin Native中嵌入Xamarin.Forms

让我们来看看iOS的外观。

将Xamarin.Forms页面添加到Xamarin.iOS

过去一个月，我的家乡圣路易斯的天气一直是一个很大的故事，严重的雨水和淹水，所以我很痴迷户外活动。 看看Xamarin天气示例应用程序，您会看到我们有Android，iOS和UWP本机应用程序。

释放：在Xamarin Native中嵌入Xamarin.Forms

虽然搜索专案很好，我想存储搜索记录并比较位置。 我将向您展示我是如何在iOS上进行的，并在所有三个平台上使用Xamarin.Forms进行共享。

我添加了一个新的共享项目（或PCL）来托管Xamarin.Forms页面。 作为附注，您可以将ContentPage直接插入到您的本机项目中，并使用XAML为您的UI编写整个Xamarin本机应用程序。

Xamarin.Forms项目和每个平台项目都需要参考Xamarin.Forms 3.0早期版本的发行版。 在新的共享项目中，我有我的HistoryPage.xaml和（为了演示简单）我设置了我的BindingContext到页面。 MVVM模式也可以在这里工作得很好。

当你审查这个XAML，你会注意到这里没有什么特别的; 没有什么不同，如果这是一个Xamarin.Forms应用程序从上到下。 这个XAML现在在Xamarin处处可见。 这是强大的！

点击(此处)折叠或打开

  1. ?xml version="1.0" encoding="utf-8" ?>
  2. ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4.              x:Class="Weather.Forms.HistoryPage">
  5.     Grid BackgroundColor="#002050">
  6.         Image Source="buildheader.jpg" VerticalOptions="Start" />
  7.         StackLayout VerticalOptions="Fill">
  8.             StackLayout.Margin>
  9.                 OnIdiom x:TypeArguments="Thickness">
  10.                     OnIdiom.Phone>
  11.                         OnPlatform x:TypeArguments="Thickness">
  12.                             On Platform="iOS" Value="10,80,10,10">/On>
  13.                             On Platform="WinRT, UWP, Android" Value="10">/On>
  14.                         /OnPlatform>
  15.                     /OnIdiom.Phone>
  16.                     OnIdiom.Tablet>
  17.                         OnPlatform x:TypeArguments="Thickness">
  18.                             On Platform="iOS" Value="10,80,10,10">/On>
  19.                             On Platform="WinRT, UWP, Android" Value="10">/On>
  20.                         /OnPlatform>
  21.                     /OnIdiom.Tablet>
  22.                     OnIdiom.Desktop>
  23.                         OnPlatform x:TypeArguments="Thickness">
  24.                             On Platform="WinRT, UWP" Value="20">/On>
  25.                         /OnPlatform>
  26.                     /OnIdiom.Desktop>
  27.                 /OnIdiom>
  28.             /StackLayout.Margin>
  29.             BoxView HeightRequest="120"/>
  30.             Label Text="Your Places">
  31.                 Label.TextColor>
  32.                         OnPlatform x:TypeArguments="Color">
  33.                             On Platform="Android" Value="GhostWhite">/On>
  34.                             On Platform="UWP, iOS" Value="White">/On>
  35.                         /OnPlatform>
  36.                 /Label.TextColor>
  37.                 Label.FontSize>
  38.                     OnPlatform x:TypeArguments="x:Double">
  39.                         On Platform="iOS" Value="24">/On>
  40.                         On Platform="WinRT, UWP, Android" Value="18">/On>
  41.                     /OnPlatform>
  42.                 /Label.FontSize>
  43.             /Label>
  44.             ListView x:Name="HistoryItems" VerticalOptions="Fill" BackgroundColor="Transparent">
  45.                 ListView.ItemTemplate>
  46.                     DataTemplate>
  47.                         ViewCell>
  48.                             Grid>
  49.                                 Grid.ColumnDefinitions>
  50.                                     ColumnDefinition Width="50">/ColumnDefinition>
  51.                                     ColumnDefinition>/ColumnDefinition>
  52.                                     ColumnDefinition Width="100">/ColumnDefinition>
  53.                                 /Grid.ColumnDefinitions>
  54.                                 Label Text="{Binding WeatherIcon}" FontSize="18" Grid.Column="0" VerticalTextAlignment="Center" TextColor="White">
  55.                                     Label.FontFamily>
  56.                                         OnPlatform x:TypeArguments="x:String">
  57.                                             On Platform="UWP" Value="/Assets/WeatherIcons.ttf#Weather Icons">/On>
  58.                                             On Platform="iOS" Value="Weather Icons">/On>
  59.                                             On Platform="Android" Value="WeatherIcons.ttf#Weather Icons">/On>
  60.                                         /OnPlatform>
  61.                                     /Label.FontFamily>
  62.                                 /Label>
  63.                                 Label Text="{Binding LocationName}" Grid.Column="1" VerticalOptions="Center" TextColor="White">
  64.                                     Label.FontSize>
  65.                                         OnPlatform x:TypeArguments="x:Double">
  66.                                             On Platform="iOS" Value="18">/On>
  67.                                             On Platform="WinRT, UWP, Android" Value="14">/On>
  68.                                         /OnPlatform>
  69.                                     /Label.FontSize>
  70.                                 /Label>
  71.                                 Label Text="{Binding PostalCode}" VerticalOptions="Center" TextColor="White" Grid.Column="2" VerticalTextAlignment="Center">
  72.                                     Label.FontSize>
  73.                                         OnPlatform x:TypeArguments="x:Double">
  74.                                             On Platform="iOS" Value="18">/On>
  75.                                             On Platform="WinRT, UWP, Android" Value="14">/On>
  76.                                         /OnPlatform>
  77.                                     /Label.FontSize>
  78.                                 /Label>
  79.                             /Grid>
  80.                         /ViewCell>
  81.                     /DataTemplate>
  82.                 /ListView.ItemTemplate>
  83.             /ListView>
  84.             StackLayout Orientation="Horizontal" HorizontalOptions="Center">
  85.                 Label Text="{Binding PlatformName}" TextColor="White" VerticalTextAlignment="Center">
  86.                     Label.FontSize>
  87.                         OnPlatform x:TypeArguments="x:Double">
  88.                             On Platform="iOS" Value="24">/On>
  89.                             On Platform="WinRT, UWP, Android" Value="18">/On>
  90.                         /OnPlatform>
  91.                     /Label.FontSize>
  92.                 /Label>
  93.                 Label TextColor="Red" VerticalTextAlignment="Center">
  94.                     Label.Text>
  95.                         OnPlatform x:TypeArguments="x:String">
  96.                             On Platform="UWP" Value="">/On>
  97.                             On Platform="iOS" Value="">/On>
  98.                             On Platform="Android" Value="">/On>
  99.                         /OnPlatform>
  100.                     /Label.Text>
  101.                     Label.FontSize>
  102.                         OnPlatform x:TypeArguments="x:Double">
  103.                             On Platform="iOS" Value="24">/On>
  104.                             On Platform="WinRT, UWP, Android" Value="18">/On>
  105.                         /OnPlatform>
  106.                     /Label.FontSize>
  107.                     Label.FontFamily>
  108.                         OnPlatform x:TypeArguments="x:String">
  109.                             On Platform="UWP" Value="Segoe MDL2 Assets">/On>
  110.                             On Platform="iOS" Value="FontAwesome">/On>
  111.                             On Platform="Android" Value="FontAwesome.otf#FontAwesome">/On>
  112.                         /OnPlatform>
  113.                     /Label.FontFamily>
  114.                 /Label>
  115.                 Label Text=" Xamarin.Forms" VerticalTextAlignment="Center" TextColor="White">
  116.                     Label.FontSize>
  117.                         OnPlatform x:TypeArguments="x:Double">
  118.                             On Platform="iOS" Value="24">/On>
  119.                             On Platform="WinRT, UWP, Android" Value="18">/On>
  120.                         /OnPlatform>
  121.                     /Label.FontSize>
  122.                 /Label>
  123.             /StackLayout>
  124.         /StackLayout>
  125.     /Grid>
  126. /ContentPage>

您可以期待您充分利用图像和自定义字体。 在代码中，您将看到可以使用XAML编译器来预编译XAML，MessagingCenter进行消息传递，并且所有数据绑定都可以正常工作。

点击(此处)折叠或打开

  1. [XamlCompilation(XamlCompilationOptions.Compile)]
  2. public partial class HistoryPage : ContentPage
  3. {
  4.     public const string HistoryItemSelected = "HistoryItemSelected";
  5.     public HistoryPage()
  6.     {
  7.         InitializeComponent();
  8.         HistoryItems.ItemsSource = HistoryRecorder.LocationHistory;
  9.         HistoryItems.ItemTapped += HistoryItemsOnItemTapped;
  10.         BindingContext = this;
  11.     }
  12.     public string PlatformName => $"{Device.RuntimePlatform} ";
  13.     private void HistoryItemsOnItemTapped(object sender, ItemTappedEventArgs itemTappedEventArgs)
  14.     {
  15.         var historyItem = itemTappedEventArgs.Item as HistoryItem;
  16.         if (historyItem == null)
  17.         {
  18.             return;
  19.         }
  20.         MessagingCenter.Send(this, HistoryItemSelected, historyItem.PostalCode);
  21.     }
  22. }

要在Xamarin.iOS应用程序中使用HistoryPage，我现在只需要做两件事情：

  1. 用Forms.Init（）初始化窗体。
  2. 将页面添加到我的视图。

点击(此处)折叠或打开

  1. namespace WeatherApp.iOS
  2. {
  3.     [Register ("AppDelegate")]
  4.     public class AppDelegate : UIApplicationDelegate
  5.     {
  6.         UINavigationController _navigation;
  7.         UIViewController _historyViewController;
  8.         ...
  9.         public override bool FinishedLaunching (UIApplication application, NSDictionary launchOptions)
  10.         {
  11.             // #1 INITIALIZE
  12.             Forms.Init();
  13.             ...
  14.         }
  15.         public void ShowHistory()
  16.         {
  17.             if (_historyViewController == null)
  18.             {
  19.                 // #2 ADD
  20.                 _historyViewController = new HistoryPage().CreateViewController();
  21.             }
  22.             _navigation.PushViewController(_historyViewController, true);
  23.         }
  24.     }
  25. }

注意方法CreateViewController（）的返回值是UIViewController。 从这一点开始，您与本地控件的交互方式遵循相同的规则，就像您从一开始就将其定义为UIViewController一样 - 因为您已经做到了！ 在Android上CreateFragment（* Context *）返回本机片段，而在UWP上CreateFrameworkElement（）返回本机的FrameworkElement。

释放：在Xamarin Native中嵌入Xamarin.Forms

下一步是什么

在您的帮助下，我们将继续验证我们的实施，并确保它们都按需要工作。 在Xamarin.Forms的非UI部分中，NavigationService不受Xamarin.Forms应用程序的支持，而DependencyService和MessagingCenter完全可以运行。

这里还有待完成的工作。 现在，ContentPage完全支持，但我们也认为我们可以在控件（和自定义控件）级别执行此操作。 我们需要仔细查看Application.Resources和共享样式。 我们还在查看我们的模板和IDE支持，使其易于使用Xamarin.Forms无处不在。

今天开始嵌入！

嵌入的Xamarin.Forms 3.0预览已发布到自定义的NuGet Feed。 为拿到它，为实现它：

  • 向NuGet管理器添加新的源代码：https://www.myget.org/F/xamarinforms-dev/api/v3/index.json
  • 选中预发行
  • 选择并安装功能名称为“Embedding”的软件包 - 3.0.0.100-embeddingpreview

该天气演示应用程序代码的来源可在GitHub上获得：https://github.com/davidortinau/build2017-new-in-xamarin-forms

您可以看到，您可以从Xamarin.iOS，Xamarin.Android和UWP开始，并在任何有益于您的地方引入Xamarin.Forms。 或者您可以从Xamarin.Forms开始，最终迁移到Xamarin.iOS，Xamarin.Android，UWP以及其他XAMarin.Forms将来带给您的任何地方。 现在你可以做更多的事情，用更好的方式使用你的代码！

这是一个预览功能，所以我们需要你的反馈！ 加入我们的论坛，请与我们分享您的经验。

移动开发 ui 人工智能
上一篇: Java 访问控制权限一、介绍二、详解三、总结
下一篇: 将android工程导入eclipse中找不到 R文件的解决方法

继续阅读