Xamarin.Android开发入门——Hello,Android快速上手
ylxbsoftware
7年前
<h2><strong>Hello, Android Quickstart</strong></h2> <p>在指南的第一部分，我们创建一个打电话的应用，基础功能为：将输入含有字母和数字的电话号码转化为纯数字号码，然后拨打此号码。最终界面如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ec739b45bf8e680297446db2e823e179.png"></p> <p>下面开始练习。</p> <h2><strong>系统及环境要求</strong></h2> <p>Xamarin.Android需要以下任一环境</p> <ul> <li> <p>系统：OS X Yosemite及以上；最新版Xamarin Studio</p> </li> <li> <p>系统：Windows 7及以上；最新版Xamarin Studio</p> </li> <li> <p>系统：Windows 7及以上；Visual Studio专业版或更高版本</p> </li> </ul> <p>本教程假定您已安装最新版Xamarin.Android。</p> <h2><strong>模拟器配置</strong></h2> <p>如果你使用Google的Android SDK模拟器，建议配置硬件加速。</p> <p>如果你使用Visual Studio的Android模拟器，则Hyper-V必须启用。</p> <h2><strong>操作演练</strong></h2> <ol> <li> <p>启动Visual Studio</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/906776a6a2dea54f1792be097141e90c.png"></p> <ol start="2"> <li> <p>点击开始界面里的 开始-新建项目 来创建项目</p> </li> </ol> <p><img src="https://simg.open-open.com/show/aadd86767320ff494f9d5f34477c06cd.png"></p> <ol start="3"> <li> <p>在 新建项目 对话框中，点击 <em>C#-Android</em> ，然后选择 Blank App（Android） 模板。将项目命名为 Phoneword 。点击 <em>确定</em> 创建新项目</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/1d0437873c4d9f48f7da42e574cb578d.png"></p> <ol start="4"> <li> <p>项目创建成功后，在解决方案管理器中展开 Resources 文件夹里的 <em>layout</em> 文件夹。双击 <strong>Main.axml</strong> 文件打开Android界面设计器，如下图所示：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/f0789de2a3c14f7ea5b6964e46345625.png"></p> <ol start="5"> <li> <p>选中设计界面中的 <strong>Hello World，Click Me！</strong> 按钮，并按 Delete 键删除它。 在工具箱（左侧区域）的搜索框中输入 text ，然后拖动控件 <em>Text(Large)</em> 到设计界面（中间区域）中：</p> </li> </ol> <p>注：新版模板里已没有按钮，可略过删除</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2851bc5f114e8f5729ead546c04dd05a.png"></p> <ol start="6"> <li> <p>选中 Text(Large) 控件，然后在属性面板中修改 text 属性值为 Enter a Phoneword ，如图所示:</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/6b8fcbb26d659845724e9df3ce03a3d7.png"></p> <ol start="7"> <li> <p>下一步，在工具箱中拖动一个 Plain Text 控件到设计界面中，将它放置在 Text(Large) 控件下面。</p> </li> </ol> <p>注：可以通过搜索框帮助我们快速定位到具体的控件。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f723be74024e49feb2f5e25203a69a5b.png"></p> <ol start="8"> <li> <p>选中 Plain Text 控件，在属性面板中修改 id 属性值为 @+id/PhoneNumberText ，同时修改 text 属性值为 1-855-XAMARIN ：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/7caba2922f8a35a70d2ebf64312a3244.png"></p> <ol start="9"> <li> <p>在工具箱中拖动一个 Button 到设计界面，并将其放置在 Plain Text 控件下面：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/bc1333474829b733f1e74b45ac16554a.png"></p> <ol start="10"> <li> <p>选中 <em>Button</em> ，在属性面板中修改 id 属性值为 @+id/TranslateButton ，同时修改 text 属性值为 Translate：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/92b50fa15e704824b5b9670c00f6c2be.png"></p> <ol> <li> <p>下一步，再从工具箱中拖动第二个 Button 到设计界面，并将其放置于 Translate 按钮下面：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/eef589affeec1c618f5bb320284a162c.png"></p> <ol start="12"> <li> <p>选中新添加的 Button 控件，在属性面板中修改 id 属性值为 @+id/CallButton ，并将 text 属性值改为 Call ：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/8ebf1847052cb356d0a633404ccfa9ed.png"></p> <p>按下 CTRL+S 键保存上述操作。</p> <ol start="13"> <li> <p>现在，我们添加转换电话号码的代码（从数字字母组合的号码到纯数字号码）。首先，我们添加一个新的文件：在解决方案管理器中，右击 Phoneword 项目，然后选择 添加—新建项...</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/c1addd4e76530e8ed3e19dee83b53a1b.png"></p> <ol start="14"> <li> <p>在 添加新项 对话框中，选择 Visual C# > Code 中的 <em>Code File</em> ，并将其命名为 <strong>PhoneTranslator.cs</strong> ：</p> </li> </ol> <p>注：最新中文版开发环境中， <em>添加新项</em> 下结构中，可以选择 Visual C#-代码 里的 代码文件 ，也可以选择 Visual C#-Android 里的 Class 。—— 都是建立.cs文件</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/4a61ac972c1a425da89d4ad7d152fc4c.png"></p> <ol start="15"> <li> <p>移除掉模板代码，并用以下代码替换：</p> </li> </ol> <p>新版模板文件本身就是个空文件</p> <pre> <code class="language-cs">using System.Text; using System; namespace Core { public static class PhonewordTranslator { public static string ToNumber(string raw) { if (string.IsNullOrWhiteSpace(raw)) return ""; else raw = raw.ToUpperInvariant(); var newNumber = new StringBuilder(); foreach (var c in raw) { if (" -0123456789".Contains(c)) newNumber.Append(c); else { var result = TranslateToNumber(c); if (result != null) newNumber.Append(result); } // otherwise we've skipped a non-numeric char } return newNumber.ToString(); } static bool Contains (this string keyString, char c) { return keyString.IndexOf(c) >= 0; } static int? TranslateToNumber(char c) { if ("ABC".Contains(c)) return 2; else if ("DEF".Contains(c)) return 3; else if ("GHI".Contains(c)) return 4; else if ("JKL".Contains(c)) return 5; else if ("MNO".Contains(c)) return 6; else if ("PQRS".Contains(c)) return 7; else if ("TUV".Contains(c)) return 8; else if ("WXYZ".Contains(c)) return 9; return null; } } }</code></pre> <p>然后点击 文件-保存 （或按 CTRL+S 键）来保存 <strong>PhoneTranslator.cs</strong> 文件。 重新生成解决方案，以保证没有编译错误。</p> <ol start="16"> <li> <p>接下来，我们添加代码与UI界面连接起来。 双击解决方案管理器中的 <strong>MainActivity.cs</strong> 文件，打开后在 MainActivity 类中添加后台代码：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/a620adf05b15df108a41d8f24c61f0e9.png"></p> <ol start="17"> <li> <p>首先配置 <em>Translate</em> 按钮。在 MainActivity 类中找到 OnCreate 方法。我们将会在 OnCreate 方法中的 base.OnCreate(bundle) 和 SetContentView(Resource.Layout.Main) 之后添加代码。移除模板按钮处理代码（ 没有就不用管 ），最后代码类似于下面示例：</p> <pre> <code class="language-cs">using System; using Android.App; using Android.Content; using Android.Runtime; using Android.Views; using Android.Widget; using Android.OS; namespace Phoneword { [Activity (Label = "Phoneword", MainLauncher = true)] public class MainActivity : Activity { protected override void OnCreate (Bundle bundle) { base.OnCreate (bundle); // Set our view from the "main" layout resource SetContentView (Resource.Layout.Main); // Our code will go here } } }</code></pre> </li> <li> <p>下一步，我们需要为 <em>layout</em> 文件中的控件（之前界面设计器中拖的控件）添加对应的引用。在 OnCreate 方法中添加如下代码：（添加在 SetContentView 之后）</p> <pre> <code class="language-cs">// Get our UI controls from the loaded layout: EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText); Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton); Button callButton = FindViewById<Button>(Resource.Id.CallButton);</code></pre> </li> <li> <p>首先，为 <em>Translate</em> 按钮添加点击事件处理。将如下代码添加至 OnCreate 方法中（在上一步的代码之后）：</p> <pre> <code class="language-cs">// Disable the "Call" button callButton.Enabled = false; // Add code to translate number string translatedNumber = string.Empty; translateButton.Click += (object sender, EventArgs e) => { // Translate user's alphanumeric phone number to numeric translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text); if (String.IsNullOrWhiteSpace(translatedNumber)) { callButton.Text = "Call"; callButton.Enabled = false; } else { callButton.Text = "Call " + translatedNumber; callButton.Enabled = true; } };</code></pre> </li> <li> <p>其次，为 <em>Call</em> 按钮添加点击事件处理。在之前的 <em>Translate</em> 按钮事件代码之后添加如下代码：</p> <pre> <code class="language-cs">callButton.Click += (object sender, EventArgs e) => { // On "Call" button click, try to dial phone number. var callDialog = new AlertDialog.Builder(this); callDialog.SetMessage("Call " + translatedNumber + "?"); callDialog.SetNeutralButton("Call", delegate { // Create intent to dial phone var callIntent = new Intent(Intent.ActionCall); callIntent.SetData(Android.Net.Uri.Parse("tel:" + translatedNumber)); StartActivity(callIntent); }); callDialog.SetNegativeButton("Cancel", delegate { }); // Show the alert dialog to the user and wait for response. callDialog.Show(); };</code></pre> </li> <li> <p>最后，我们需要给应用分配拨打电话的权限。我们可以通过Android Manifest来编辑应用的权限。双击解决方案管理器中 Phoneword 项目下的 Properties 项，然后选择 Android Manifest 打开界面：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/8ff5180e32c7f2774798c7639f13e9ab.png"></p> <p>在 Required Permissions 中，勾选 CALL_PHONE 权限</p> <ol start="22"> <li> <p>点击 文件-全部保存 （或者按 CTRL+SHIFT+S 键）来保存所有操作，然后点击 <em>生成-重新生成解决方案</em> （或者按 CTRL+SHIFT+B 键）来编译应用程序。当程序编译完成后，Visual Studio会在其左下角显示编译成功的消息：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/a4508c0071bb3c7bb54bda96ce0c657b.png"></p> <p>如果有错误，请检查是否按照以上步骤操作，修正至可以生成成功。如果遇到生成错误，例如： <em>Resource does not exist in the current context</em> ，请校验 <strong>MainActivity.cs</strong> 中的命名空间与项目名称（ Phoneword ）是否一致，然后重新生成解决方案。如果仍然有生成错误，请确认你已安装的最新版的Xamarin.Android的更新。</p> <ol start="23"> <li> <p>现在我们已经建立的可用的应用程序，接下来我们完善应用程序的内容。首先，编辑 MainActivity 的 Label 值。此 Label 值显示在Android系统的页面顶部，表示用户正在使用哪个应用程序。在 MainActivity 类的顶部，将 Label 值修改为 Phone Word ，如下所示：</p> <pre> <code class="language-cs">namespace Phoneword { [Activity (Label = "Phone Word", MainLauncher = true)] public class MainActivity : Activity { ... } }</code></pre> </li> <li> <p>然后，设置应用的图标。首先从 Xamarin App Icons set 下载并解压，展开 <em>Resources</em> 下的 <em>drawable</em> 文件夹，并将现有的 <strong>Icon.png</strong> 删除（右键-删除）：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/e29a91ec7309f166c9860a4fca72e7be.png"></p> <p>在以下弹出确认框中点击 OK :</p> <p><img src="https://simg.open-open.com/show/d9746e6d59af46262e4003e1cfd89b16.png"></p> <ol start="25"> <li> <p>然后，右击 drawable 文件夹，选择 添加-现有项... ：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/1224fe52e97ff0a1225241a35446976e.png"></p> <ol start="26"> <li> <p>在文件选择对话框中，浏览解压后的Xamarin App Icons目录，打开 <em>drawable</em> 文件夹，选择 <strong>Icon.png</strong> 并点击 添加 ：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/0d13a97eeb78d61de0a02da81a86903f.png"></p> <ol start="27"> <li> <p>下一步，添加Xamarin App Icons中剩余的 <em>drawable-*</em> 的文件夹到项目中。那些文件夹为不同设备，不同分辨率提供不同的图标以便更好的显示。打开文件浏览窗口，定位到Xamarin App Icons的解压目录，然后选中 <em>drawable-*</em> 目录。</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/005976dafe430bb489dad71ad0507385.png"></p> <p>拖动这些文件夹至Visual Studio的 <em>解决方案管理器</em> 面板中的 <em>Resources</em> 文件夹上。至此，可以在右侧 <em>解决方案管理器</em> 中可以看到项目已经包含那些文件夹：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/53af6422c660c9b4ba18d30bda4a83f0.png"></p> <ol start="28"> <li> <p>接下来，在Android Manifest界面中的 Application Icon 下拉框中选择 @drawable/Icon 作为应用的图标：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/6abcc7e2a501282e6242077fa685ad07.png"></p> <ol start="29"> <li> <p>最后，我们可以通过将应用部署到模拟器上进行测试。在本文中，我们使用Android AVD Manager配置的虚拟设备（名称为 Nexus 5(KitKat) ）——关于如何配置见：同样，你也可以使用预置配置下拉框中的任意一个。</p> </li> </ol> <p>在将应用部署到模拟器之前，我们先配置下应用所支持的最低Android版本，以此保证可以在我们选择的虚拟设备上运行。在Visual Studio中，双击 Properties 打开 Application 页面。在 Minimun Android to target 配置中，选择匹配你虚拟设备的API Level。在本文示例中，我们选择API Level 19，所以应用将运行在 Nexus 5(KitKat) 虚拟设备上。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f4799e1b721e905d199ed4c3187febfc.png"></p> <ol start="30"> <li> <p>下一步，点击工具栏中下拉菜单将应用部署到 <em>Nexus 5(KitKat)</em> ，如下图所示：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/a11dfed1872f2969a34dafe1f4de9771.png"></p> <p>Visual Studio会在安装和启动应用之前将文档拷贝到模拟器。</p> <ol start="31"> <li> <p>下图展示了 <strong>Phoneword</strong> 应用在Android SDK模拟器上的运行效果。点击 <em>Translate</em> 按钮会更新 <em>Call</em> 按钮的text值，然后点击 <em>Call</em> 按钮会调用一个拨打电话确认框，如下面右图所示：</p> </li> </ol> <p style="text-align:center"><img src="https://simg.open-open.com/show/d849bb6a3c94093882ab2f74dfce1130.png"></p> <p>至此，第一个Xamarin.Android应用程序创建完成。</p> <p> </p> <p>来自：http://www.shisujie.com/blog/Hello-Android-Quickstart</p> <p> </p>