在本文中,将探讨如何利用Xamarin Forms快速构建一个可以控制LED灯并显示来自Raspberry Pi的天气信息的移动应用。Xamarin是一个移动开发平台,允许.NET开发者使用C#语言为iOS、Android和Windows移动设备开发原生应用。
在开始之前,请确保已经阅读了,以了解这个移动应用的目的。假设读者已经具备一些C#和WPF的基础知识。假设开发环境是在Windows系统上(典型的.NET开发者),并且目标是为Android开发。iOS移动设备和Windows移动设备也可以作为目标平台。
如果还没有安装Xamarin,请按照进行安装。Xamarin包含在所有版本的Visual Studio中。在安装过程中,需要进行自定义安装,并在安装过程中选择Xamarin组件。在开发过程中,使用了Microsoft Visual Studio Community 2015。
请确保已经安装了以下Android SDK工具:
已经附上了SDK管理器的供参考。
如果使用的是Intel图形芯片,可以通过安装Intel HAXM来提高性能,然后使用AVD管理器设置Android虚拟设备(通常安装在C:\Program Files (x86)\Android\android-sdk)。添加了一个名为Nexus 5的设备,配置如下:
如果打算在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地址会自动保存,并在下次打开应用时加载。使用了这个来帮助实现这一点。
按照上述说明设置AVD,并通过VS以典型方式启动:
确保Mac已经设置好。要在iOS模拟器上运行,请确保Mac正在运行,并按照以下步骤操作: