2025-04-21
挪动应用程序已有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中，如标记，并且在每个标记中都有可以设置值的属性。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中的标记，它生成了这个例子。绝对布局如果您正在寻找对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像网站上的标签一样，此控件用于显示文本。通常，在登录表单文本框之类的元素之上使用标签来指示用户他们应该在该控件中输入什么。DATEPICKER Datepickers在UI中用于捕捉某人的出生日期或日历样式应用程序，以抉择创建条目的日期。在下面的标记中，您将看到属性“x：name”，此属性用于为您的控件提供一个ID，您可以在代码隐蔽文件中引用该ID以执行更多动态任务。PICKER选择器控件是挪动应用程序，相当于Web上的下拉列表。与网站一样，这可以是硬编码值，也可以是数据驱动的。你可以看到你声明了Picker控件然后有一个子标签Picker.Items，你可以在这里添加你渴望在Picker中显示的值。在我的示例中，我显示了一个字符串列表，这可以是您渴望显示的任何数据类型的列表。Credit CardDebit CardCashPROGRESS BAR一个志愿的可视指示器控件，用于显示用户在填写具有多个页面的表单时可能正在使用应用程序的进度。您将在HeightRequest下方的标记中看到一个新属性，此值设置为显示进度条线的粗细。您可以使用进度条控件的X：Name引用在代码隐蔽文件中设置此值来治理进度条“进度”值。您可以设置的值是0到1之间的小数，它指定着色条的分数。因此，例如要设置该值，您可以通过将以下内容添加到代码隐蔽文件ApplicationProgress.Progress = 0.2f来声明该值。滑块此控制不应与您经常在网站上看到的滑块旋转木马混淆。此控件通常用于设置页面，例如智能手机屏幕上的亮度指示器。注意标记最小值和最大值中的2个属性。您可以将这些值设置为所需的值，默认情况下，如果不设置这些属性，则最小值从0开始，最大值为1。列表显示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控件的所有方面。活动指示器ActivityIndicator控件通常用于向用户显示挪动应用程序中发生的事情。一个很好的例子是，如果用户在表单中输入了邮政编码并单击按钮以查找完整地址，则可能需要几秒钟才干返回数据，因此这是一个很好的控件，用于向用户显示应用程序正在研究一些东西并且不仅仅是崩溃了。活动指示器的外观和样式将在应用程序的目标平台上有所不同。 条目此控件基本上是Web设计者所称的文本框。输入文本的简陋元素。通常用于表格。在下面的标记中，您可以看到可以在Entry控件中设置的几个属性。另外两个要注意的是占位符，您可以在Entry控件中设置占位符文本，以便为用户提供应输入内容的一些指示。第二个是键盘，这是一个很好的属性，您可以在其中指定用户输入文本时要显示的设备上的键盘类型，例如，如果用户输入的电话号码，您可以抉择“电话“这将强制设备显示数字键盘，就像打电话时的电话键盘一样。通过正确使用键盘属性，这使您的UI更易于用户使用。按钮Button控件是另一个控件，Button控件主要用于在按下Button时触发事件。在下面的标记中，您可以设置许多属性来设置按钮和文本的样式，但要特殊注意的一个属性是“单击”。这是单击按钮时触发的单击事件，您可以处理在页面的代码隐蔽文件中单击按钮时要执行的操作。在用户输入用户名和密码后，按钮点击的示例将在登录页面上，然后事件将用户导航到欢迎屏幕或外表板。有关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引用。
