Chinaunix首页 | 论坛 | 博客
  • 博客访问: 5437169
  • 博文数量: 895
  • 博客积分: 17977
  • 博客等级: 上将
  • 技术积分: 8691
  • 用 户 组: 普通用户
  • 注册时间: 2005-08-26 09:59
个人简介

一个好老好老的老程序员了。

文章分类

全部博文(895)

文章存档

2021年(2)

2020年(10)

2019年(40)

2018年(88)

2017年(130)

2015年(5)

2014年(12)

2013年(41)

2012年(36)

2011年(272)

2010年(1)

2009年(53)

2008年(65)

2007年(47)

2006年(81)

2005年(12)

分类: Android平台

2017-10-29 20:26:10

在过去一年中,我们一直在研究几个“大事”,使您能够在更多平台上创建更多性能更强的应用程序。 随着我们最新的稳定版本2.4.0,我们在Android上引入了性能优化的渲染器,绰号“快速渲染器”。 虽然更快的平台渲染器是一个明显的胜利,但您真正开始看到使用它们与新功能相结合的巨大收获,在2.5.0上推出,称为布局压缩。 不要被那些以性能为重点的提升黯然失色,我们也在此预览中发布表单嵌入。 我们很高兴将这些改进放在我们的公共路线图的页面上,并把它们放在你手中。 请阅读有关如何从这些梦幻般的改进开始受益的详细信息等等。

大事1:布局压缩

在优化性能布局时,无论是为了更平滑的动画还是渲染速度,您都可以快速了解平面视图层次结构的价值。 以此页面为例:

点击(此处)折叠或打开 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ContentPage
  3.     xmlns=""
  4.     xmlns:x=""
  5.     xmlns:local="clr-namespace:ProfileLayout"
  6.     x:Class="ProfileLayout.ProfileLayoutPage"
  7.     xmlns:views="using:ProfileLayout.Views"
  8.     xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
  9.     xmlns:converters="using:ProfileLayout.Converters;"
  10.     Title="Profile"
  11.     BackgroundColor="#F3F3F3">
  12.     <ContentPage.Resources>
  13.         <ResourceDictionary>
  14.             <converters:InvertedBoolConverter x:Key="InvertedBoolConverter"/>
  15.     
  16.             <!-- Global Colors -->
  17.             <Color
  18.                 x:Key="primaryColor">#303030</Color>
  19.             <Color
  20.                 x:Key="secondaryColor">#C9AE98</Color>
  21.             <Color
  22.                 x:Key="validationColor">#FF3F56</Color>
  23.             <Color
  24.                 x:Key="callToActionColor">#4E8B4F</Color>
  25.             <Color
  26.                 x:Key="accentColor">White</Color>
  27.             <Color
  28.                 x:Key="darkAccentColor">#7c6a5c</Color>
  29.             <!-- Global Sizes -->
  30.             <x:Double
  31.                 x:Key="mediumTextSize">20</x:Double><x:Double
  32.                 x:Key="smallTextSize">14</x:Double><x:Double
  33.                 x:Key="standardPadding">10</x:Double>
  34.  
  35.             <!-- Global Element Styles -->
  36.             <Style
  37.                 TargetType="Entry">
  38.                 <Setter
  39.                     Property="HeightRequest"
  40.                     Value="44" />
  41.                 <Setter
  42.                     Property="TextColor"
  43.                     Value="{StaticResource darkAccentColor}" />
  44.             </Style>
  45.  
  46.             <Style
  47.                 TargetType="NavigationPage"><Setter
  48.                     Property="BarBackgroundColor"
  49.                     Value="{StaticResource primaryColor}" /></Style><Style
  50.                 TargetType="Frame"><Setter
  51.                     Property="BackgroundColor"
  52.                     Value="{StaticResource accentColor}" /><Setter
  53.                     Property="Padding"
  54.                     Value="{StaticResource standardPadding}" /><Setter
  55.                     Property="HasShadow"
  56.                     Value="False" /><Setter
  57.                     Property="OutlineColor"
  58.                     Value="{StaticResource secondaryColor}" /></Style><!-- Label Styles --><Style
  59.                 x:Key="switchLabel"
  60.                 TargetType="Label"><Setter
  61.                     Property="TextColor"
  62.                     Value="#999999" /><Setter
  63.                     Property="VerticalOptions"
  64.                     Value="Center" /><Setter
  65.                     Property="HorizontalOptions"
  66.                     Value="FillAndExpand" /></Style><!-- Button Styles --><Style
  67.                 x:Key="callToActionButton"
  68.                 TargetType="Button"><Setter
  69.                     Property="BackgroundColor"
  70.                     Value="{StaticResource callToActionColor}" /><Setter
  71.                     Property="TextColor"
  72.                     Value="{StaticResource accentColor}" /><Setter
  73.                     Property="FontSize"
  74.                     Value="{StaticResource mediumTextSize}" /></Style>
  75.             <Style
  76.                 x:Key="primaryButton"
  77.                 TargetType="Button">
  78.                 <Setter
  79.                     Property="BackgroundColor"
  80.                     Value="{StaticResource primaryColor}" />
  81.                 <Setter
  82.                     Property="TextColor"
  83.                     Value="{StaticResource accentColor}" />
  84.                 <Setter
  85.                     Property="FontSize"
  86.                     Value="{StaticResource smallTextSize}" /></Style>
  87.  
  88.             <Style
  89.                 x:Key="nakedButton"
  90.                 TargetType="Button">
  91.                 <Setter
  92.                     Property="BackgroundColor"
  93.                     Value="Transparent" />
  94.                 <Setter
  95.                     Property="TextColor"
  96.                     Value="{StaticResource accentColor}" />
  97.                 <Setter
  98.                     Property="BorderColor"
  99.                     Value="Transparent"/>
  100.                 <Setter
  101.                     Property="BorderWidth"
  102.                     Value="0"/>
  103.                 <Setter
  104.                     Property="FontSize"
  105.                     Value="{StaticResource mediumTextSize}" /></Style>
  106.  
  107.             <Style
  108.                 x:Key="whiteClearButton"
  109.                 TargetType="Button">
  110.                 <Setter
  111.                     Property="BackgroundColor"
  112.                     Value="Transparent" />
  113.                 <Setter
  114.                     Property="BorderColor"
  115.                     Value="{StaticResource accentColor}" />
  116.                 <Setter
  117.                     Property="BorderWidth"
  118.                     Value="1" />
  119.                 <Setter
  120.                     Property="TextColor"
  121.                     Value="{StaticResource accentColor}" />
  122.                 <Setter
  123.                     Property="FontSize"
  124.                     Value="{StaticResource smallTextSize}" />
  125.             </Style>
  126.  
  127.             <Style
  128.                 x:Key="secondaryButton"
  129.                 TargetType="Button"><Setter
  130.                     Property="BackgroundColor"
  131.                     Value="{StaticResource secondaryColor}" /><Setter
  132.                     Property="TextColor"
  133.                     Value="{StaticResource accentColor}" /><Setter
  134.                     Property="FontSize"
  135.                     Value="{StaticResource smallTextSize}" /><Setter
  136.                     Property="FontAttributes"
  137.                     Value="Bold" /></Style><Style
  138.                 x:Key="footerButton"
  139.                 TargetType="Button"><Setter
  140.                     Property="BackgroundColor"
  141.                     Value="{StaticResource secondaryColor}" /><Setter
  142.                     Property="TextColor"
  143.                     Value="{StaticResource accentColor}" /><Setter
  144.                     Property="FontSize"
  145.                     Value="{StaticResource smallTextSize}" /><Setter
  146.                     Property="FontAttributes"
  147.                     Value="Bold" /><Setter
  148.                     Property="HorizontalOptions"
  149.                     Value="FillAndExpand" /></Style>
  150.         </ResourceDictionary>
  151.     </ContentPage.Resources>
  152.     <ContentPage.Padding>
  153.         <OnPlatform x:TypeArguments="Thickness" iOS="0,0,0,0" Android="0,0,0,0" />
  154.     </ContentPage.Padding>
  155.  
  156.     <ContentPage.Content>
  157.         
  158.         <StackLayout
  159.             Spacing="0"
  160.             VerticalOptions="FillAndExpand"
  161.             HorizontalOptions="FillAndExpand">
  162.             <AbsoluteLayout
  163.                 BackgroundColor="#909090"
  164.                 HorizontalOptions="FillAndExpand"
  165.                 HeightRequest="60">
  166.                 <AbsoluteLayout.Padding>
  167.                     <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" Android="0,0,0,0" />
  168.                 </AbsoluteLayout.Padding>
  169.                 <Button
  170.                     Margin="10,10"
  171.                     FontSize="12"
  172.                     Text="Cancel"
  173.                     BackgroundColor="Transparent"
  174.                     Command="{Binding CancelCommand}"
  175.                     Style="{StaticResource nakedButton}"/>
  176.                 <Image
  177.                     AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.36, 0.7"
  178.                     AbsoluteLayout.LayoutFlags="All"
  179.                     BackgroundColor="Transparent"
  180.                     HeightRequest="36"
  181.                     Source="microsoft_gray.png" />
  182.                 <Button
  183.                     IsVisible="{Binding IsLoggedIn}"
  184.                     Margin="10,10"
  185.                     BackgroundColor="Transparent"
  186.                     AbsoluteLayout.LayoutBounds="1, 0, AutoSize, AutoSize"
  187.                     AbsoluteLayout.LayoutFlags="PositionProportional"
  188.                     FontSize="12"
  189.                     Text="Logout"
  190.                     Command="{Binding LogoutCommand}"
  191.                     Style="{StaticResource nakedButton}"/>
  192.             </AbsoluteLayout>
  193.  
  194.             <Label
  195.                 HorizontalOptions="FillAndExpand"
  196.                 BackgroundColor="#D1D1D1"
  197.                 HeightRequest="22"
  198.                 TextColor="#000000"
  199.                 FontSize="14"
  200.                 HorizontalTextAlignment="Center"
  201.                 Text="{Binding Title}"/>
  202.  
  203.             <ScrollView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  204.  
  205.             <StackLayout
  206.             Spacing="0"
  207.             VerticalOptions="FillAndExpand"
  208.             HorizontalOptions="FillAndExpand">
  209.  
  210.                 <Button
  211.                     Margin="0,10,0,0"
  212.                     IsVisible="{Binding CanEdit}"
  213.                     Text=" EDIT "
  214.                     Style="{StaticResource primaryButton}"
  215.                     BackgroundColor="#9B9B9B"
  216.                     HeightRequest="35"
  217.                     HorizontalOptions="Center"
  218.                     Command="{Binding ToggleEditModeCommand}"
  219.                     />
  220.  
  221.                 <Button
  222.                     Margin="0,10,0,0"
  223.                     IsVisible="{Binding IsEditing}"
  224.                     Text=" EDITING "
  225.                     BackgroundColor="#9B9B9B"
  226.                     Style="{StaticResource primaryButton}"
  227.                     HeightRequest="35"
  228.                     HorizontalOptions="Center"
  229.                     Command="{Binding ToggleEditModeCommand}"
  230.                 />
  231.  
  232.             <StackLayout
  233.                 Margin="20"
  234.                 Spacing="20"
  235.                 HorizontalOptions="FillAndExpand"
  236.                 Orientation="Horizontal">
  237.  
  238.                 <StackLayout
  239.                     Spacing="10"
  240.                     Orientation="Vertical">
  241.  
  242.                         <controls:CircleImage
  243.                             x:Name="ProfilePic"
  244.                             Source="david.jpg"
  245.                             BorderThickness="3"
  246.                             BorderColor="#9B9B9B"
  247.                             Aspect="AspectFill">
  248.                             <controls:CircleImage.WidthRequest>
  249.                                 <OnPlatform x:TypeArguments="x:Double"
  250.                                   iOS="104"
  251.                                   Android="104"
  252.                                   WinPhone="104"/>
  253.                             </controls:CircleImage.WidthRequest>
  254.                             <controls:CircleImage.HeightRequest>
  255.                                 <OnPlatform x:TypeArguments="x:Double"
  256.                                   iOS="104"
  257.                                   Android="104"
  258.                                   WinPhone="104"/>
  259.                             </controls:CircleImage.HeightRequest>
  260.                         </controls:CircleImage>
  261.  
  262.                         <Button
  263.                             IsVisible="{Binding CanSave}"
  264.                             Text="Change Photo"
  265.                             Style="{StaticResource nakedButton}"
  266.                             FontSize="12"
  267.                             BorderColor="Transparent"
  268.                             BorderWidth="0"
  269.                             BackgroundColor="Transparent"
  270.                             TextColor="#303030"
  271.                         >
  272.                         </Button>
  273.                     </StackLayout>
  274.  
  275.                 <StackLayout
  276.                     Spacing="10"
  277.                     HorizontalOptions="FillAndExpand"
  278.                     Orientation="Vertical">
  279.  
  280.  
  281.                     <Entry
  282.                         IsVisible="{Binding IsLoggedIn, Converter={StaticResource InvertedBoolConverter}}"
  283.                         HorizontalOptions="FillAndExpand"
  284.                         Placeholder="Username"
  285.                         Text="{Binding Username}"
  286.                         x:Name="UsernameEntry" />
  287.  
  288.                     <Label
  289.                         IsVisible="{Binding IsLoggedIn}"
  290.                         Text="{Binding Username}"
  291.                         TextColor="#303030"
  292.                         FontSize="12"
  293.                         FontAttributes="Bold"
  294.                         HeightRequest="40"
  295.                         VerticalTextAlignment="Center"
  296.                     />
  297.  
  298.                     <Entry
  299.                         IsEnabled="{Binding CanSave}"
  300.                         x:Name="EmailEntry"
  301.                         HorizontalOptions="FillAndExpand"
  302.                         Placeholder="Email"
  303.                         Text="{Binding UserEmail}" />
  304.  
  305.                 </StackLayout>
  306.             </StackLayout>
  307.  
  308.             <Grid Margin="20, 0, 20, 0">
  309.                 <Grid.RowDefinitions>
  310.                     <RowDefinition Height="53" />
  311.                     <RowDefinition Height="53" />
  312.                     <RowDefinition Height="60" />
  313.                     <RowDefinition Height="28" />
  314.                     <RowDefinition Height="*" />
  315.                     <RowDefinition Height="45" />
  316.                 </Grid.RowDefinitions>
  317.  
  318.                 <Grid.ColumnDefinitions>
  319.                     <ColumnDefinition Width="1*"/>
  320.                     <ColumnDefinition Width="1*"/>
  321.                 </Grid.ColumnDefinitions>
  322.  
  323.                 <Entry
  324.                     Grid.Row="0" Grid.Column="0"
  325.                     IsEnabled="{Binding CanSave}"
  326.                     x:Name="FirstNameEntry"
  327.                     HorizontalOptions="FillAndExpand"
  328.                     Placeholder="First Name"
  329.                     Text="{Binding FirstName}" />
  330.  
  331.                 <Entry
  332.                     Grid.Row="0" Grid.Column="1"
  333.                     IsEnabled="{Binding CanSave}"
  334.                     x:Name="LastNameEntry"
  335.                     HorizontalOptions="FillAndExpand"
  336.                     Placeholder="Last Name"
  337.                     Text="{Binding LastName}" />
  338.                 
  339.                 <Entry
  340.                     Grid.Row="1" Grid.Column="0"
  341.                     IsEnabled="{Binding CanSave}"
  342.                     x:Name="PasswordEntry"
  343.                     IsPassword="true"
  344.                     HorizontalOptions="FillAndExpand"
  345.                     Placeholder="Password"
  346.                     Text="{Binding UserPassword}" />
  347.  
  348.                 <Entry
  349.                     Grid.Row="1" Grid.Column="1"
  350.                     IsEnabled="{Binding CanSave}"
  351.                     x:Name="ConfirmPasswordEntry"
  352.                     IsPassword="true"
  353.                     HorizontalOptions="FillAndExpand"
  354.                     Placeholder="Confirm Password"
  355.                     Text="{Binding ConfirmUserPassword, Mode=TwoWay}" />
  356.  
  357.  
  358.                 <Label
  359.                     Grid.Row="2" Grid.ColumnSpan="2"
  360.                     IsEnabled="{Binding CanSave}"
  361.                     Margin="10"
  362.                     Text="Password must be 8 digits long and include 1 number and 1 capital letter."
  363.                     TextColor="#303030"
  364.                     FontSize="12"
  365.                     HorizontalOptions="FillAndExpand"
  366.                 />
  367.  
  368.                 <views:StrengthIndicators
  369.                     IsEnabled="{Binding CanSave}"
  370.                     Strength="{Binding PasswordStrength}"
  371.                     HorizontalOptions="Center"
  372.                     Grid.Row="3" Grid.ColumnSpan="2" />
  373.  
  374.                 <StackLayout
  375.                     Margin="0,20,0,40"
  376.                     Grid.Row="4" Grid.ColumnSpan="2"
  377.                     IsVisible="{Binding IsLoggedIn}">
  378.  
  379.                     <BoxView
  380.                         Margin="30,10"
  381.                         BackgroundColor="#9B9B9B"
  382.                         HorizontalOptions="FillAndExpand"
  383.                         HeightRequest="1"
  384.                         />
  385.  
  386.                     <Label
  387.                         Text="Connected Accounts:"
  388.                         HorizontalOptions="Center"
  389.                         TextColor="#303030"
  390.                         FontSize="12"/>
  391.  
  392.                     <views:ConnectSocialButtonView
  393.                         HorizontalOptions="Center"
  394.                         BindingContext="{Binding FacebookVM}" />
  395.                 
  396.                     <views:ConnectSocialButtonView
  397.                         HorizontalOptions="Center" BindingContext="{Binding TwitterVM}" />
  398.  
  399.                     <views:ConnectSocialButtonView
  400.                     HorizontalOptions="Center" BindingContext="{Binding YouTubeVM}" />
  401.                 
  402.                     <views:ConnectSocialButtonView
  403.  
  404.                     HorizontalOptions="Center" BindingContext="{Binding InstagramVM}" />
  405.  
  406.                 </StackLayout>
  407.  
  408.                 <Button
  409.                     Grid.Row="5" Grid.ColumnSpan="2"
  410.                     IsVisible="{Binding CanSave}"
  411.                     HeightRequest="45"
  412.                     x:Name="SaveButton"
  413.                     Style="{StaticResource primaryButton}"
  414.                     Text=" Submit "
  415.                     HorizontalOptions="Center"
  416.                     Command="{Binding SaveCommand}">
  417.                 </Button>
  418.             </Grid>
  419.             </StackLayout>
  420.         </ScrollView>
  421.  
  422.         </StackLayout>
  423.     </ContentPage.Content>
  424. </ContentPage>


源码:

注意:此页面根本没有优化。 事实上,你可能会指出许多应该改变的事情。

 

复合这个平均布局,需要为平台渲染器创建额外的容器渲染器和包装器,并且在视图树中产生比所需的更多视图,大约130个此示例。

考虑到执行布局需要用于测量和布局的子对象递归。 UI越深(视图中的视图),需要的迭代越多。 布局压缩允许您指定不必要的嵌套,并允许Xamarin.Forms选择不创建该布局视图。

使用Xamarin Inspector,我们可以查看此页面的UI分层,无需布局压缩或启用快速渲染器:

现在在MainActivity.cs中启用快速渲染器:

点击(此处)折叠或打开

  1. public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
  2.   {
  3.     protected override void OnCreate(Bundle bundle)
  4.     {
  5.       ...
  6.   
  7.       global::Xamarin.Forms.Forms.SetFlags("FastRenderers_Experimental");
  8.       global::Xamarin.Forms.Forms.Init(this, bundle);
  9.  
  10.       ...
  11.     }
  12.   }
然后启用布局压缩。 要启用布局压缩,请标识要压缩和添加的布局(StackLayout,AbsoluteLayout,Grid,RelativeLayout),并使用CompressedLayout.IsHeadless =“true”启用它。 例如:

点击(此处)折叠或打开

  1. <StackLayout
  2.             Spacing="0"
  3.             CompressedLayout.IsHeadless="true"
  4.             VerticalOptions="FillAndExpand"
  5.             HorizontalOptions="FillAndExpand">
  6. ...
  7. </StackLayout>
现在看看布局树分层:



这些视觉效果的改善是显而易见的。 我会保存一些计数,看看我们能够平铺UI。

  • 默认值:130渲染器
  • 布局压缩:111渲染
  • 布局压缩+快速渲染器:70个渲染器

这个问题自然就成了,“这使得我的应用程序能加快多少?”这取决于您的视图的复杂性,所使用的操作系统的版本以及运行的设备而有所不同。 虽然每个人都受益,但我们预计会看到旧设备的最大差异。

因为布局压缩消除了布局的渲染器,请注意,您以前希望成为该渲染器一部分的任何内容将不再存在:

  • 背景颜色
  • 手势
  • 转换
  • 等等

版式压缩可在iOS和Android上使用。

大事2:表单嵌入

在2017年,我们展示了采用Xamarin.Forms ContentPage并将其嵌入到Xamarin.iOS,Xamarin.Android和UWP应用程序中。即使这是一个非常早期的预览,它并没有阻止许多人探索可能性。从那时起,我们一直在清理实施,解决我们早期测试中发现的问题(谢谢早期采用者!),并验证我们的新功能的用例。

你可能想要做什么?

  • 使用现有的Xamarin.Forms页面,并将其用于不使用Xamarin.Forms的另一个Xamarin iOS,Android或UWP应用程序。
  • 使用Xamarin.Forms启动项目,以提供原型的速度和轻松性,然后逐页迁移到Xamarin本机。
  • 将共享页面添加到任何现有的改变整个架构的Xamarin应用程序。

这只是开始。现在,是否从Xamarin.Forms开始是毫无疑问的。使用Xamarin.Forms到处都适用于您的应用程序!

大事3:改进了macOS桌面支持

Xamarin.Forms在移动领域长大,扩展到桌面模式是一个过程。 在Xamarin.Forms 2.4.0中,我们介绍了macOS支持的预览,我已经看到一些令人印象深刻的应用程序。 您的反馈有助于确定我们最需要增加支持的地方,所以在2.5.0中你会得到:

应用程式退出

从应用程序的任何地方,您可以调用Application.Current.Quit()退出。

菜单

桌面应用程序可以处理与触摸或移动应用程序不同的菜单 在此预览中,您可以在右键单击添加上下文菜单,并将菜单附加到应用程序的顶层,以便它们显示在macOS的顶部栏中。

例如,下面我们在C#中构建一个菜单,并将其附加到我们视图中的Label。 右键单击标签将打开上下文菜单。

点击(此处)折叠或打开

  1. var mainMenu = new Menu();
  2. var locationMenu = new Menu { Text = “Location” };
  3. var changeItem = new MenuItem
  4. {
  5. Text = “Change”,
  6. Command = new Command((obj) =&gt;
  7. {
  8. Navigation.PushModalAsync(new LocationEntryPage());
  9. })
  10. };
  11. locationMenu.Items.Add(changeItem);
  12.  
  13. var refreshItem = new MenuItem { Text = "Refresh", Command = _vm.ReloadCommand }; MenuItem.SetAccelerator(refreshItem, Accelerator.FromString("cmd+r")); locationMenu.Items.Add(refreshItem); mainMenu.Add(locationMenu);


源码:

加速器

加速器,也称为关键修饰符,允许您添加键盘快捷键来激活菜单项。 在这个例子中,我们将cmd + R加速器添加到刷新菜单项。


点击(此处)折叠或打开

  1. MenuItem.SetAccelerator(refreshItem, Accelerator.FromString("cmd+r"));


然后将加速器添加到顶级菜单项,并可从应用程序的任何位置使用。


今天预览!

Xamarin.Forms 2.5.0.19271现在在NuGet上可用。 要更新,请打开NuGet软件包管理器,启用预发布选项,并更新所有项目引用。

新版本号码是什么?
Our builds are now being generated from Visual Studio Team Services which simply generates a different build number.我们的构建现在是从Visual Studio Team Services生成的,它只生成不同的版本号。


阅读(2924) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~