设计优雅的登录界面：从App模块目录结构到可视化编辑器

1.实验目的

（1）通过用户界面的基本练习初步掌握Android开发的目录结构和各个文件的作用。

（2）熟悉界面组件Activity。Activity是Android中的四大组件之一，是用户和应用程序之间进行交互的接口。Activity是一个类，最新版本优化为AppCompat Activity，而App Compat Activity属于sdk\platforms\android-*\android.jar中的一个类，在以后的实验中所使用的Android开发相关的类大部分都在这个jar文件中。

（3）掌握Android代码编写模式。最新版本中如果要实现一个界面，Java代码中必须继承父类AppCompat Activity，并且必须覆盖onCreate（）方法，该方法在初始化Activity界面时调用。

（4）掌握界面设计基本方法。Android中界面外观一般由XML文件表示，该文件可通过可视化界面编辑器添加与用户进行交互的控件，用户可配合文本编辑器对该文件进行修改，最后通过代码获取控件，并通过代码对界面控件做各种控制。

2.Android模块目录结构

在Android Studio中新建工程后，即可看到工程目录，对工程目录的掌握是Android开发入门必须具备的基础知识，经常使用的目录或文件的功能如下所述。

（1）Android Manifest.xml文件：整个项目的配置文件。该文件主要用于Activity和Service等组件的注册、权限登记，以及设置App图标和名称、启动类等重要信息。

（2）drawable和mipmap目录：存放工程中所使用的不同分辨率的图片。两个文件夹都可以用于存放工程中用到的图片资源，但是mipmap目录下存放的图片资源具有更高的访问效率，另外drawable目录下可以存放样式文件，如动画的样式文件、控件的selector文件等。如果mipmap目录下有张图片pic.png，则Java代码中访问该图片资源的方式为R.mipmap.pic，资源配置文件（即XML文件）中访问该资源的方式为@mipmap/pic。

（3）layout目录：存放布局文件的目录。例如，layout目录下有一个activity_main.xml文件，则Java代码中访问该文件的方式为R.layout.activity_main。

（4）strings.xml文件：存放常量字符串键值对的文件。如果该文件中有键值对：

则Java代码中获取字符串“Android开发实验教程”的方式为R.string.book_name，资源配置文件中获取该字符串的方式为@string/book_name。原则上所有常量字符串都应该在该文件中定义。

（5）colors.xml文件：用于存放常量颜色键值对。如color name="color Primary"#3F51B5/color，颜色的访问方式和strings.xml文件中的访问方式相同。

（6）styles.xml文件：定义应用程序或控件中使用的各种样式。

（7）R.java文件：资源映射文件，该类是Android自动生成的类，不能删除、修改。res目录下的很多资源会在该文件中生成一个内部类，如图2.1所示，各种资源会以内部类常量的形式自动生成。代码中资源引用的方式为R.资源类型.资源名称，例如，mipmap目录下有一个pic.png文件，代码中的访问方式为R.mipmap.pic；资源配置文件中的访问方式为@资源类型/资源名称，即mipmap目录下的pic.png文件在资源配置文件中的访问方式为@mipmap/pic。

（8）src目录：源代码存放路径，App的主要逻辑功能在该目录下的Java代码中实现。

3.实验界面与功能

本实验模拟经常在App中使用的登录界面，没有逻辑功能的实现，最终界面如图2.2所示。

图2.1　R.java文件结构

图2.2　实验界面

4.实验步骤

步骤1：打开第1章实验3创建的项目，新建一个Android模块App01，依次选择“File”|“New”|“New Module”，会出现图2.3（a）所示的界面，选择“Phone& Tablet Module”（手机和平板电脑模块），单击“Next”按钮，出现图2.3（b）所示的界面，在模块名中输入“App01”后，单击“Next”按钮。

图2.3　新建模块

步骤2：在图2.4所示的界面中选择“Empty Activity”，即空的Activity，单击“Next”，随后出现的图2.5所示的界面显示了该App的Java文件名称Main Activity.java和布局文件的名称activity_main.xml，这里保持默认，单击“Finish”结束创建一个模块的过程。

图2.4　为新应用添加一个Activity

图2.5　Activity和布局文件命名

步骤3：模块创建完成后，该模块目录结构如图2.6所示，其中主要的文件有：项目配置文件Android Manifest.xml、界面Activity对应的代码文件Main Activity.java和布局文件activity_main.xml等。

图2.6　App01模块目录结构

步骤4：双击activity_main.xml布局文件，即可打开界面可视化编辑器，如图2.7所示。“Palette”面板中会显示各种控件，控件可以通过拖拽的方式放到手机界面中，左下角的“Component Tree”用于显示布局文件中的层级结构，控件也可以直接拖到“Component Tree”中，“Properties”面板用于设置、查看控件的各种属性，单击底部的“Text”标签页会出现图2.8所示的界面XML编辑器，界面控件内部的存放形式是XML文件，可以对该文件直接进行编辑，从图2.8显示的内容中可以看到该布局中有一个控件“Text View”，和界面可视化编辑器中显示的内容一致。

图2.7　界面可视化编辑器

图2.8　界面XML编辑器

步骤5：由图2.8可知，界面可以通过“Design”界面编辑器或“Text”文本编辑器进行编辑，一般先在界面编辑器中完成初步的界面设计，再到文本编辑器中细化控件的设计。所以先单击界面编辑器中的按钮自动创建约束，单击后界面编辑器会自动建立控件之间的约束关系。

步骤6：在界面编辑器中通过按钮放大界面，会出现图2.9所示的界面，下面介绍界面编辑器常用的按钮。图2.9中的正方形点是用于调整控件大小的手柄；圆形点用于调整该控件和其他控件的关系，这种手柄有4个，4个圆点如果是实心的圆点，则该控件的位置基本确定，否则需要调整直到4个圆点变成实心的为止。单击按钮可以删除界面中建立的所有约束，如图2.10所示，此时需要分别拖拽空心圆点到手机边框或其他位置固定的空间来设置约束。

(www.xing528.com)

图2.9　界面编辑器常用的按钮

图2.10　未创建约束的控件

步骤7：回到“Design”选项，删除界面的“Hello World！”Text View控件，向该布局文件中添加“Plain Text”控件，如图2.11所示，用于输入手机号码，调整该控件上下左右的约束，并在属性面板（Properties）中设置宽度layout_width为“match_parent”，使该控件和手机屏幕同宽，设置高度layout_height为“wrap_content”，使该控件的高度能够容纳当前控件内容，删除文本“text”中的默认内容，如图2.12所示。

图2.11　控件基础练习使用的控件

图2.12　Edit Text设计草图

步骤8：按步骤7继续添加用于输入验证码的“Edit Text”控件和两个“Button”控件，并适当地调整约束和属性，所有控件的效果如图2.13所示。

步骤9：打开strings.xml文件为该应用程序添加四个常量字符串键值对，供应用程序调用，添加完成后如下所示。其中，“&#160；”表示界面中的空格，该文件中name属性的取值为“键”，而string标签的取值为“值”，可以根据键获取对应的值。

图2.13　控件部署完成后草图

步骤10：打开界面XML编辑器，在第一个文本框（Edit Text控件）中的任意位置加入一个hint属性，这个属性是界面提示信息，这里输入取值“@string/phoneNo Hint”，即步骤9中在strings.xml文件中定义的键值对，设置完成后该控件将显示提示信息“请输入手机号码”。同样地，在第二个文本框加入相同的属性，输入取值“@string/get VerifyCode”，修改完成后界面如图2.14所示。

图2.14　界面草图

步骤11：下面通过代码更改两个按钮显示的文字。首先打开activity_main.xml文件，从文本编辑器中设置两个按钮的ID，分别为“button1”和“button2”，其他属性值不变，例如：

然后打开代码目录下的Main Activity.java文件，在onCreate（）方法中增加如下代码。

在编写代码过程中如果出现错误，请用“Alt+Enter”键并根据提示排除错误。

步骤12：代码编写完成后，单击工具栏上的运行按钮，启动模拟器就可以得到图2.2所示的界面。

知识拓展：常见问题

（1）模拟器启动一次可以多次用于调试，因此运行完一次App后如果后面还需要使用，无须关闭模拟器，等到不再需要调试时再关闭。

（2）由于Gradle在构建版本时需要访问网络，导致Android Studio在未连接网络状态下编译应用程序较慢，因此未连接网络时，需要将“File”|“Settings”|“Build，Execution，Deployment”|“Gradle”中的“Offline work”选中，将Gradle设置为离线工作，如图2.15所示。但是，选中该选项后，Gradle将不能访问JCenter等仓库下载需要的各种jar和arr包等。

图2.15　设置Gradle离线工作

（3）在Android Studio下方有Build窗口，用于显示在编译、同步、打包过程中的信息，如图2.16所示，如果出现错误可以根据错误提示信息进行排错，这里提示的错误一般是编译文件、项目执行环境、包引入等方面的问题。在App运行过程中出现的错误将在Logcat窗口中显示，如图2.17所示，这里的错误一般为代码方面的错误，代码运行出错后会显示代码执行的堆栈信息、代码出错行号和出错原因，这是排除代码错误的重要依据。

（4）初次使用该应用程序时可能会出现不能解决的异常，表2.1所示为刚接触Android Studio开发环境的读者常见的问题及其解决方案。

图2.16　Build窗口

图2.17　Logcat窗口

表2.1　Android开发入门常见的问题及其解决方案

（5）在使用模拟器调试程序的过程中，遇到模拟器不能启动、模拟器变慢、模拟器失去响应等情况可以在工具栏单击模拟器按钮，出现模拟器管理界面后，单击图2.18中框选的三角形图标，在弹出的菜单中选择“Wipe Data”删除模拟器中的内部存储器数据。如果模拟器还有异常，单击“Delete”删除模拟器，重新创建模拟器进行调试。

图2.18　模拟器管理界面

思考

（1）步骤11中如果不用代码设置控件显示的文本，应该如何实现？

（2）请尝试：修改当前模块的名称为App001；新建一个模块，运行后彻底删除该模块，并将模拟器中运行过的App删除。