使用Xamarin Forms进行移动应用程序开发

明王

移动应用程序已有10年历史。在过去的十年中，我们看到网站经过重新设计，可以扩展并响应各种移动设备，如平板电脑和智能手机，以提供移动原生应用UI。然而，随着移动应用程序越来越受智能手机和平板电脑在iOS，Android和Windows这三个主要平台上的销售增长的影响，这使得现有的设计机构，网页设计师和开发人员处于一个十字路口。如何在利用团队现有的设计和开发技能的同时支持这些移动平台的开发，而无需花时间学习新的编程语言，如Android for Java，Objective-C for iOS和C＃for Windows。什么是XAMARIN形式？Xamarin Forms是一个移动应用程序平台，与Windows和Mac上提供的Microsoft Visual Studio IDE捆绑在一起。借助Xamarin Forms，设计人员和开发人员可以从单个共享C＃代码库构建适用于iOS，Android和Windows的本机应用程序。在过去的两年里，我花了很多时间学习Xamarin Forms为客户开发应用程序，我决定创建这篇文章，让网页设计师和Web开发人员深入了解使用Xamarin Forms开发应用程序以及在开发过程中学到的一些经验教训。通过本文，我将假设您具有编程语言的基础级别，或者设计人员可以很好地理解HTML和CSS。XAMARIN Forms如何运作Xamarin Forms的工作原理是将您创建的UI元素从共享PCL（可移植类库）UI代码映射到Windows，Android和iOS上相应的本机等效代码。所以这意味着您的应用程序完全是原生的！每个Xamarin Forms页面分为两部分。用于处理UI和CODE BEHIND文件的Visual部分的XAML文件，用于处理该页面的行为，例如按钮和显示数据。 用户界面…… XAML或C＃？Xamarin Forms为您提供了两个创建应用程序用户界面的选项。XAML首先是XAML（可扩展应用程序标记语言）。对于前端设计人员而言，这是一种理想的移动UI开发方法。如果您有使用XML，HTML，CSS等创建UI的经验或知识，您会发现熟悉使用此标记，尤其是借助Visual Studios有用的intellisense。对于任何现有的.NET开发人员来说，使用WPF或Silverlight开发桌面应用程序的好消息，您将能够在几乎没有学习曲线的情况下运行，并且您习惯使用的XAML标记差不多。下面是使用XAML创建的简单UI的示例。正如您所看到的，所有元素都包含在HTML中，如标记，并且在每个标记中都有可以设置值的属性。<?xml version="1.0" encoding="UTF-8"?><TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="MyApp.MainPage"><TabbedPage.Children><ContentPage Title="Profile" Icon="Profile.png"><StackLayout Spacing="20" Padding="20" VerticalOptions="Center"><Entry Placeholder="Username" Text="{Binding Username}"/><Entry Placeholder="Password" Text="{Binding Password}" IsPassword="true"/><Button Text="Login" TextColor="White" BackgroundColor="#77D065" Command="{Binding LoginCommand}"/></StackLayout></ContentPage><ContentPage Title="Settings" Icon="Settings.png"><!-- Settings --></ContentPage></TabbedPage.Children></TabbedPage>C＃第二个选项是在代码中创建UI。如果您是Web开发人员，知道C＃或其他面向对象的编程语言，或者可能是Web开发人员更习惯于后端编程，那么这可能是您决定创建移动应用程序用户界面的选项。对于不习惯编程标记的设计人员来说，语法可能看起来很奇怪，但这里的内容是上面的XAML标记和下面的C＃代码产生完全相同的UI。using Xamarin.Forms;var profilePage = new ContentPage {Title = "Profile",Icon = "Profile.png",Content = new StackLayout {Spacing = 20, Padding = 50,VerticalOptions = LayoutOptions.Center,Children = {new Entry { Placeholder = "Username" },new Entry { Placeholder = "Password", IsPassword = true },new Button {Text = "Login",TextColor = Color.White,BackgroundColor = Color.FromHex("77D065") }}}};var settingsPage = new ContentPage {Title = "Settings",Icon = "Settings.png",(...)};var mainPage = new TabbedPage { Children = { profilePage, settingsPage } };下图显示了我们通过XAML和C＃中的标记创建的UI以及它在iOS，Android和Windows三个平台上的外观。那么……对于UI来说最好的？根据我在成为完整堆栈.NET开发人员之前从前端设计背景获得的经验，我会说我当然发现使用XAML创建UI是首选方法，因为它为您提供了一个与我在其中创建的HTML网页类似的层次结构过去。一旦您了解了控件，布局和相关属性，就可以非常直接地从响应式Web设计中获取您所知的设计概念，并将其应用于本机移动应用程序界面。同样，您选择的UI选项完全取决于您当前的技能组合以及您最适合学习的内容，但是，对于Xamarin Forms的新手，我觉得XAML将是您的最佳选择。因此，对于本文的其余部分，我将向您展示的所有UI示例都将使用XAML标记。页面，布局和控制像大多数现代网站一样，移动应用具有类似的用户界面和页面元 Xamarin Forms为您提供开箱即用的一套良好的页面，布局和控件，让您开始开发移动应用程序。PAGES您可以使用五种主要页面类型构建UI，这些类型包括ContentPage，MasterDetailPage，NavigationPage，TabbedPage和CarouselPage。内容页面 这是Xamarin Forms中最简单的页面类型，ContentPage只能包含一个元素。在下面的示例中，我们有一个带有单个按钮元素的内容页面。在实际应用程序中，只有一个元素的页面非常少，因此通常内容页面将具有单个布局容器，然后您可以向布局添加许多控件元素。 MASTERDETAIL PAGE该页面类型基本上有两个部分：“主”和“细节”。主页面通常是一个布局，其中包括一个汉堡包样式菜单，其中包含您可以导航到的页面列表。从菜单中选择其中一个页面后，布局将显示“详细信息”页面，该页面是所选页面的内容。 导航页面导航页面用于通过您的应用程序提供导航体验，以便向前和向后导航。导航页面使用堆栈格式，这意味着当您向前导航时，当前页面将被推送到堆栈下方，新页面将被提升到堆栈顶部，同样为了向后移动，当前页面将弹回并且上一页面被推送到堆栈顶部。这种类型的页面通常用于数据输入的Web样式表单。在下面的示例中，我们在用户登录应用程序后看到一个注册页面，但是在左上角注意到您看到一个向后箭头按钮。这向用户显示他们可以向后导航到上一页。 TABBED PAGE与网站上的标签一样，TabbedPage使您能够以标签菜单格式显示多个页面。这种类型的页面类型经常出现在新闻应用程序中，用于分隔文章或部分的类型。如果您查看手机上的Twitter应用程序，您将看到一个TabbedPage示例，其中包含一组分隔标签的图标。 CAROUSEL PAGE与此页面的名称一样，它是一种页面类型，允许您拥有可以使用手指滑动手势导航到的子页面或对象的集合。此页面类型通常用于图库/视频集合的图库样式应用程序。这种类型的页面使用的一个很好的例子是像Instagram这样的照片库应用程序。 LAYOUTSXamarin Forms再次提供了大量的布局，以适应您希望开发的任何类型的应用程序。这些布局是StackLayout，AbsoluteLayout，RelativeLayout，GridLayout，ContentView，ScrollView，最后是Frame。在本文中，我将重点介绍在使用Xamarin Forms开始创建移动应用程序时更有可能使用的三个主要内容。 STACKLAYOUTStackLayout可能是您在Xamarin Forms中创建用户界面时使用最常用的布局。StackLayout允许您默认在水平或垂直方向上在一行中显示多个元素。您还可以使用StackLayout作为基本布局创建更复杂的用户界面，然后在其中嵌套其他StackLayout或其他布局。您可以在下面的示例中看到有一个基本StackLayout，其中包含五个子元素，两个标签，两个Entry Cells，最后一个按钮。查看所有子元素如何以垂直堆栈格式排列。下面是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"x:Class="LoginNavigation.LoginPage"Title="Login"><ContentPage.ToolbarItems><ToolbarItem Text="Sign Up" Clicked="OnSignUpButtonClicked" /></ContentPage.ToolbarItems><ContentPage.Content><StackLayout VerticalOptions="StartAndExpand"><Label Text="Username" /><Entry x:Name="usernameEntry" Placeholder="username" /><Label Text="Password" /><Entry x:Name="passwordEntry" IsPassword="true" /><Button Text="Login" Clicked="OnLoginButtonClicked" /><Label x:Name="messageLabel" /></StackLayout></ContentPage.Content></ContentPage>绝对布局如果您正在寻找对UI中元素的更多控制，例如在屏幕上定位和调整大小，那么这就是您的布局。正在使用的AbsoluteLayout的好例子是应用程序的登录页面。例如，让我们来看看捷豹的移动应用程序，您可以看到屏幕顶部中央有一个Jaguar徽标，然后是一组位于屏幕底部的按钮和标签。 网格我想在这里介绍的最后一个布局是GridLayout。GridLayout用于按行和列排列UI元素。这里的主要内容是不要将此布局与HTML表格混淆，并希望能够使用它来显示Web样式表数据。GridLayout仅用于布置元素。使用GridLayout的好例子是Windows 10 Metro风格磁贴接口，电话键盘或计算器应用程序界面下面的示例。 一旦您在Xamarin Forms中使用布局变得更加舒适，您将看到组合和嵌套布局的无限潜力，以实现出色的用户界面。CONTROLS任何使用过Microsoft Visual Studio IDE的人都会熟悉一个可以用来构建用户界面的预设控件的工具箱，在Xamarin Forms中，你可以立即使用30个左右的控件。再次像大多数网站设计一样，当您使用Xamarin Forms找到自己的方式时，考虑到移动应用程序用户界面的相似性，您将主要使用较小的一组控件。下面我们将介绍一些你将在Xamarin Forms中使用的主要控件，很快就会在控件中开始注意到你可以设置控件元素的属性，这些属性可以用于定位，改变外观或创建一个使用控件时的事件。如果您来自网页设计背景，您会发现这些属性可以让您熟悉。在网页设计的早期，元素的外观和显示主要来自标记中的内联属性，但现在几乎所有网站都使用CSS来处理控件属性及其各自的值。这里的好消息是Xamarin Forms采用了类似的标准，你可以像在下面的控件中看到的那样在内联标记中设置值，或者你可以在App.xaml文件的应用程序资源字典中设置样式规则。LABEL像网站上的标签一样，此控件用于显示文本。通常，在登录表单文本框之类的元素之上使用标签来指示用户他们应该在该控件中输入什么。<Label Text="Username:" HorizontalOptions="CenterAndExpand"FontAttributes="Bold" Margin="0,0,0,5" ></Label>DATEPICKER Datepickers在UI中用于捕获某人的出生日期或日历样式应用程序，以选择创建条目的日期。在下面的标记中，您将看到属性“x：name”，此属性用于为您的控件提供一个ID，您可以在代码隐藏文件中引用该ID以执行更多动态任务。<DatePicker x:Name="phDOB" Date="{Binding Path=DateTimeNow}"HorizontalOptions="EndAndExpand"></DatePicker>PICKER选择器控件是移动应用程序，相当于Web上的下拉列表。与网站一样，这可以是硬编码值，也可以是数据驱动的。你可以看到你声明了Picker控件然后有一个子标签Picker.Items，你可以在这里添加你希望在Picker中显示的值。在我的示例中，我显示了一个字符串列表，这可以是您希望显示的任何数据类型的列表。<Picker x:Name="PaymentTypes" Title="Select Your Payment Method"><Picker.Items><x:String>Credit Card</x:String><x:String>Debit Card</x:String><x:String>Cash</x:String></Picker.Items></Picker>PROGRESS BAR一个理想的可视指示器控件，用于显示用户在填写具有多个页面的表单时可能正在使用应用程序的进度。您将在HeightRequest下方的标记中看到一个新属性，此值设置为显示进度条线的粗细。您可以使用进度条控件的X：Name引用在代码隐藏文件中设置此值来管理进度条“进度”值。您可以设置的值是0到1之间的小数，它指定着色条的分数。因此，例如要设置该值，您可以通过将以下内容添加到代码隐藏文件ApplicationProgress.Progress = 0.2f来声明该值。<ProgressBar x:Name="ApplicationProgress" HeightRequest="5"></ProgressBar>滑块此控制不应与您经常在网站上看到的滑块旋转木马混淆。此控件通常用于设置页面，例如智能手机屏幕上的亮度指示器。注意标记最小值和最大值中的2个属性。您可以将这些值设置为所需的值，默认情况下，如果不设置这些属性，则最小值从0开始，最大值为1。<Slider x:Name="slider" Minimum="0" Maximum="10" />列表显示ListView是移动应用程序设计中最常用的UI控件之一。它的主要功能是显示通常需要滚动的数据列表。移动应用中的ListView示例将是您手机中的联系人列表，短信列表，Twitter或Facebook源，甚至可能是产品页面。在现实世界的移动应用程序中，ListView通常填充来自数据库或远程Web服务的动态数据。在下面的标记中，您将看到我们如何声明ListView，然后我们有一个子标记ListView.ItemTemplate，在此标记中我们可以设置我们希望列表的显示方式以及ListView中的数据。我们如何在DataTemplate标记中设置我们执行此操作的数据。ListView有两个内置的DataTemplates供您使用，TextCell和ImageCell。在这个例子中，我们使用的是TextCell。TextCell模板有两个属性Text和Detail，在下面的屏幕截图中，这是一个简单的事件应用程序，您会看到Text属性显示事件的位置，Text下面的Detail显示事件的Date。ListView对于移动应用程序的良好UI非常重要，因此您应该花时间学习ListView控件的所有方面。<ListView x:Name="eventsListView" ItemSelected="eventsListView_ItemSelected" HasUnevenRows="True"><ListView.ItemTemplate><DataTemplate><TextCell Text="{Binding Location}" Detail="{Binding Date}" /</DataTemplate></ListView.ItemTemplate></ListView>活动指示器ActivityIndi​​cator控件通常用于向用户显示移动应用程序中发生的事情。一个很好的例子是，如果用户在表单中输入了邮政编码并单击按钮以查找完整地址，则可能需要几秒钟才能返回数据，因此这是一个很好的控件，用于向用户显示应用程序正在研究一些东西并且不仅仅是崩溃了。活动指示器的外观和样式将在应用程序的目标平台上有所不同。<ActivityIndicator IsRunning="true" IsVisible="True" Color ="White"/> 条目此控件基本上是Web设计者所称的文本框。输入文本的简单元素。通常用于表格。在下面的标记中，您可以看到可以在Entry控件中设置的几个属性。另外两个要注意的是占位符，您可以在Entry控件中设置占位符文本，以便为用户提供应输入内容的一些指示。第二个是键盘，这是一个很好的属性，您可以在其中指定用户输入文本时要显示的设备上的键盘类型，例如，如果用户输入的电话号码，您可以选择“电话“这将强制设备显示数字键盘，就像打电话时的电话键盘一样。通过正确使用键盘属性，这使您的UI更易于用户使用。<Entry x:Name="txtUser" Margin="0,0,0,10" BackgroundColor="White" Placeholder="Username" FontSize="Small" TextColor="#a41f35" Keyboard="Default"></Entry>按钮Button控件是另一个控件，Button控件主要用于在按下Button时触发事件。在下面的标记中，您可以设置许多属性来设置按钮和文本的样式，但要特别注意的一个属性是“单击”。这是单击按钮时触发的单击事件，您可以处理在页面的代码隐藏文件中单击按钮时要执行的操作。在用户输入用户名和密码后，按钮点击的示例将在登录页面上，然后事件将用户导航到欢迎屏幕或仪表板。<Button Text="Login" BackgroundColor="#a41f35" FontAttributes="Bold" TextColor="White" Clicked="LoginButton_Clicked" HeightRequest="50"/>有关Xamarin Forms中所有可用控件的更深入细节以及一些高级用法，请查看Microsoft的此链接。 https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/controls/viewsSTYLES为了减少重复编写相同的XAML标记来设置UI元素的样式，Xamarin Forms为您提供了在App.xaml页面中显式设置样式的方法，该标记名为ResourceDictionary。这与用于网页设计的CSS类似。您可以为特定控件设置样式，并可以使用名为X：Key的引用属性将这些样式应用于UI中的控件。在下面的示例中，您将看到我为Button控件设置了样式并创建了一个名为PrimaryButton的X：Key引用。<ResourceDictionary><Style x:Key="PrimaryButton" TargetType="Button"><Setter Property="BackgroundColor" Value="Red"/><Setter Property="TextColor" Value="#FFFFFF"/><Setter Property="BorderRadius" Value="20"/><Setter Property="FontAttributes" Value="Bold"/></Style</ResourceDictionary>现在使用我在资源字典中设置的这种样式，在我的XAML页面中我声明了一个按钮并应用样式我使用“Style”属性并提供值PrimaryButton。您将看到我使用关键字StaticResource为此值添加前缀，这是告诉Xamarin Forms该控件的样式元素是App.xaml页面中的静态资源。<Button Text =“Login”Style =“{StaticResource PrimaryButton}”/>通过使用ResourceDictionary来存储您的Style元素，您的XAML标记变得更清晰，更简洁。另外一个好处是，如果您决定更改应用主题作为更新的一部分，您只能在一个地方更改属性，而不必浏览所有应用页面并单独更改它们。扩展XAMARIN形式扩展Xamarin Forms应用程序的默认功能并非易事。Visual Studio预先打包了自己的插件和扩展库存储库NUGET PACKAGE MANAGER。这使您可以从世界各地的开发人员下载和安装基本库，第三方工具和插件，这有助于缩短开发时间并简化应用程序。以下是Xamarin社区编制的流行插件列表。您将看到这是https://github.com/xamarin/XamarinComponents的详尽列表 NEWTONSOFT.JSON 用于序列化和反序列化字符串和对象的流行JSON框架。这是一种与Web服务之间传输数据的安全方式。 https://components.xamarin.com/view/json.netMICROSOFT.NET.HTTP当您需要使用HTTP / REST Web服务端点来写入和读取数据时，这是一个必不可少的包。SQLITE-NET-PCLSQLite-net是一个开源且轻量级的库，为Xamarin表单应用程序提供了简便的SQLite数据库存储。在大多数优秀的网站上，显示的内容必须始终保持新鲜和最新，以保持用户的兴趣和移动应用程序，这一点更为重要。在网页设计中，为了使您的内容动态化，通常需要连接到SQL Server或Oracle实例来发送和接收数据。通常，移动应用程序设计为轻量级，使用此类数据库和结构可能会导致您的应用程序性能下降。那么答案是什么…… SQLite！幸运的是，SQLite在处理数据时填补了空白，并且是移动应用程序开发的数据库。SQLite是一个轻量级的关系数据库，作为应用程序安装的一部分安装在用户的设备上。 https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/databases 下一个是什么？您将同意我在此处介绍的内容Xamarin Forms是一个非常强大的平台，供设计人员和开发人员创建跨平台移动应用程序。这只是您可以使用Xamarin Forms创建的内容，以及您是现有的移动应用程序开发人员开发iOS / Android应用程序，还是网页设计人员/开发人员调查如何进入移动应用程序开发我建议您看看在XamarinForms。为所有平台创建一个代码库和构建应用程序的能力不仅可以节省您的时间和金钱，还可以让您跨所有平台和设备提供客户/企业应用程序的可访问性。相关文章推荐live2d wallpaper使用教程（转载）  1.运行launcher.exe 桌面会出现一个小图标 2.打开主界面 模型→LPK→点击+号添加lpk文件→ […]...电子邮箱格式怎么写？3种正式邮件的撰写方式  电子邮箱格式怎么写？编写正式的电子邮件似乎是一项艰巨的任务，因为电子邮件经常用于个人和非正式目的。如果您需要向 […]...live2d：22娘丨33娘模型配布下载  BILI姐妹——22娘与33娘是娱乐向弹幕视频站点bilibili的吉祥物。22娘为姐姐，33娘为妹妹。 li […]...标题，标题党：抓住读者的注意力  在过去的十五年中，普通用户的注意力范围大幅下降。为了以任何有意义的方式与您的博客读者互动，您必须立即抓住他们的 […]...增强现实（AR）是什么？  增强现实（AR）是一种技术概念，涉及“增强”你周围的世界，帮助人类以更愉快的方式完成任务。如果您曾经在智能手机 […]...