使用Xamarin开发跨平台移动应用

在本文中,将探讨如何利用Xamarin Forms快速构建一个可以控制LED灯并显示来自Raspberry Pi的天气信息的移动应用。Xamarin是一个移动开发平台,允许.NET开发者使用C#语言为iOS、Android和Windows移动设备开发原生应用。

在开始之前,请确保已经阅读了,以了解这个移动应用的目的。假设读者已经具备一些C#和WPF的基础知识。假设开发环境是在Windows系统上(典型的.NET开发者),并且目标是为Android开发。iOS移动设备和Windows移动设备也可以作为目标平台。

Visual Studio与Xamarin

如果还没有安装Xamarin,请按照进行安装。Xamarin包含在所有版本的Visual Studio中。在安装过程中,需要进行自定义安装,并在安装过程中选择Xamarin组件。在开发过程中,使用了Microsoft Visual Studio Community 2015。

Android模拟器设置

请确保已经安装了以下Android SDK工具:

  • Android SDK Tools
  • Android SDK Platform-tools
  • Android SDK Build-tools
  • Android 6.0或7.0 SDK Platform
  • Intel x86 Atom System Image

已经附上了SDK管理器的供参考。

如果使用的是Intel图形芯片,可以通过安装Intel HAXM来提高性能,然后使用AVD管理器设置Android虚拟设备(通常安装在C:\Program Files (x86)\Android\android-sdk)。添加了一个名为Nexus 5的设备,配置如下:

iOS模拟器设置

如果打算在Android上运行移动应用,可以跳过这一步。首先,需要一台Mac来测试和部署Xamarin应用到iOS。安装过程中有几个步骤。需要在Mac上安装Xamarin Studio、Xamarin.iOS SDK和Apple Xcode。这里有,所以不打算详细说明。

使用代码

首先,由于只想展示构建设备远程控制器的最快方式,没有在这个应用中使用MVVM设计模式,这是构建WPF应用的首选设计模式。如果有兴趣学习在Xamarin中使用MVVM,请阅读。

这是屏幕的布局,可以看到所有的按钮、标签和输入框都使用Grid布局排列。

<Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="CenterAndExpand" FontAttributes="Bold" TextColor="Blue"> The Joses' Traffic Light </Label> <Button x:Name="RedOn" Text="Red ON" TextColor="White" BackgroundColor="Red" Grid.Row="1" Grid.Column="0" Clicked="RedOn_OnClicked"> </Button> <Button x:Name="RedOff" Text="Red OFF" TextColor="Red" Grid.Row="1" Grid.Column="1" Clicked="Redoff_OnClicked"> </Button>

按钮的点击动作链接到代码后台(MainPage.xaml.cs)中的方法。

private void RedOn_OnClicked(object sender, EventArgs e) { RunCommand(RedOn, "redon"); } public async void RunCommand(Button b, string command) { try { b.IsEnabled = false; HttpSender httpsender = new HttpSender("http://" + HostEntry.Text.Trim() + ":5000/"); string ok = await httpsender.MakeRequest(command); if (ok.Contains("OK")) { b.IsEnabled = true; // Save IP settings if it has been changed if (_originalIP != HostEntry.Text) { Settings.StationIP = HostEntry.Text; } } } catch (Exception ex) { b.IsEnabled = true; await DisplayAlert("Cannot find the station", "Please specify the correct host/IP at the bottom.", "Cancel"); } }

为了确保响应性,使用了async/await。如果出现异常(通常是主机地址错误),将显示弹出窗口。Raspberry Pi的IP地址会自动保存,并在下次打开应用时加载。使用了这个来帮助实现这一点。

在Android模拟器上运行

按照上述说明设置AVD,并通过VS以典型方式启动:

在iOS模拟器上运行

确保Mac已经设置好。要在iOS模拟器上运行,请确保Mac正在运行,并按照以下步骤操作:

  • 打开XamarinMac代理弹出窗口
  • 找到Mac并点击连接
  • 连接图标一旦连接就会显示
  • 在VS中以典型方式启动应用程序,选择模拟器:
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485