4.2 控制UI界面
用户界面设计是Android应用开发的一项重要内容。在进行用户界面设计时，需要先了解界面中的UI元素如何呈现给用户，也就是采用何种控制UI界面的方法呈现给用户。
4.2.1 使用XML布局文件控制UI界面
Android提供了一种非常简单、方便的方法用于控制UI界面。该方法采用XML文件来进行界面布局，从而将布局界面的代码和逻辑控制的Java代码分离开来，使程序的结构更加清晰、明了。
使用XML布局文件控制UI界面可以分为以下两个关键步骤。
（1）在Android应用的res\layout目录下创建XML布局文件，该布局文件的名称可以采用任何符合Java命名规则的文件名。
（2）在Activity中使用以下Java代码显示XML文件中布局的内容。
setContentView(R.layout.activity_main);
在上面的代码中，activity_main是XML布局文件的文件名。
通过上面的步骤就可以轻松实现布局并显示UI界面的功能。下面通过一个例子来演示如何使用XML布局文件控制UI界面。
【例4.01】 游戏的开始界面（实例位置：资源包\源码\04\4.01）
（1）在Android Studio中打开一个已经存在的项目，然后在主菜单中选择File → New → New Module命令，将打开新建模块对话框，如图4.4所示。在该对话框中选择Phone & Tablet Module选项，创建针对手机或平板电脑的应用。
（2）单击Next按钮，将进入配置新模块对话框，在该对话框中指定应用名称、模块名称、包名和最小SDK版本等信息，如图4.5所示。
图4.4 新建模块对话框
图4.5 配置新的Module
（3）单击Next按钮，将进入选择创建Activity类型对话框，在该对话框中，将列出一些用于创建Activity的模板，这里我们选择创建一个空白的Activity，即Empty Activity。然后单击Next按钮，在弹出的自定义Activity对话框中，设置自动创建的Activity的类名和布局文件名称，这里采用默认设置，单击Finish按钮完成Module的创建。
（4）把名称为bg.png的背景图片复制到mipmap-xhdpi目录中。
说明
每个实例中使用的图片资源文件都放在相应实例源码的mipmap或drawable目录下。以第4章例4.01为例，图片资源文件位置为资源包\源码\04\4.01\XML Layout Game Start Interface\src\main\res\mipmap-xhdpi\bg.png。
（5）修改res\values节点下的strings.xml文件，并且在该文件中添加一个用于定义开始按钮内容的常量，名称为start，内容为“开始游戏”，修改后的代码如下。
说明
strings.xml文件用于定义程序中应用的字符串常量。其中，每一个<string>子元素都可以定义一个字符串常量，常量名称由name属性指定，常量内容写在起始标记<string>和结束标记</string>之间。
（6）修改新建Module的res\layout节点下的布局文件activity_main.xml，将默认创建的布局管理器修改为帧布局管理器FrameLayout，并且为其设置背景，然后修改默认添加的TextView组件，用于实现在窗体的正中间位置显示“开始游戏”按钮，修改后的代码如下。
说明
在布局文件activity_main中，通过设置布局管理器的android:background属性，可以为窗体设置背景图片；使用android:layout_gravity="center"可以让该组件在帧布局中居中显示；android:textSize属性用于设置字体大小；android:textColor属性用于设置文字的颜色。
（7）在主活动中，也就是MainActivity中，应用setContentView()方法指定活动应用的布局文件。不过，在应用Android Studio创建Android应用时，Android Studio会自动在主活动的onCreate()方法中添加以下代码指定使用的布局文件，不需要我们手动添加。
setContentView(R.layout.activity_main);
说明
由于目前还没有学习Android中的UI组件，所以这里的“开始游戏”按钮先使用文本框组件代替。在实际应用开发时，通常采用按钮组件实现。
（8）启动模拟器，在工具栏中找到
下拉列表框，选择要运行的应用（这里为XML Layout Game Start Interface），再单击右侧的
按钮，在选择设备对话框中选择已经启动的模拟器，然后单击OK按钮。启动完毕后，在模拟器中将显示刚刚创建的应用，运行效果如图4.6所示。
图4.6 实现游戏的开始界面
4.2.2 开发自定义的View
一般情况下，开发Android应用程序的UI界面都不直接使用View类和ViewGroup类，而是使用这两个类的子类。例如，要显示一个图片，就可以使用View类的子类ImageView。虽然Android提供了很多继承了View类的UI组件，但是在实际开发时，还会出现不足以满足程序需要的情况。这时，我们就可以通过继承View类来开发自已的组件。开发自定义的View组件大致分为以下3个步骤。
（1）创建一个继承android.view.View类的Java类，并且重写构造方法。
注意
在自定义的View类中，至少需要重写一个构造方法。
（2）根据需要重写其他的方法。被重写的方法可以通过下面的方法找到。
在代码中右击，在弹出的快捷菜单中选择Generate命令，将打开如图4.7所示的快捷菜单，在该菜单中选择Override Methods...命令，将打开如图4.8所示的覆盖或实现的方法对话框，在该对话框的列表中显示了可以被重写的方法。我们只需要选中要重写的方法，并单击OK按钮，Android Studio将自动重写指定的方法。通常情况下，不需要重写全部的方法。
（3）在项目的活动中，创建并实例化自定义View类，然后将其添加到布局管理器中。
下面通过一个实例演示如何开发自定义的View。
【例4.02】 跟随手指的小兔子（实例位置：资源包\源码\04\4.02）
在Android Studio中创建Module，名称为Follow Finger Bunny。在该Module中实现本实例，具体步骤如下。
图4.7 生成快捷菜单
图4.8 覆盖或实现的方法对话框
（1）修改新建Module的res\layout节点下的布局文件activity_main.xml，将默认创建的布局管理器修改为帧布局管理器FrameLayout，并且设置其背景和id属性，然后将TextView组件删除。修改后的代码如下。
（2）在com.mingrisoft包上右击，在弹出的快捷菜单中选择View→Java Class命令，新建一个名称为RabbitView的Java类，该类继承自android.view.View类，重写带一个参数Context的构造方法和onDraw()方法。其中，在构造方法中设置兔子的默认显示位置，在onDraw()方法中根据图片绘制小兔子。RabbitView类的关键代码如下。
（3）在MainActivity的onCreate()方法中，首先获取帧布局管理器，并实例化小兔子对象rabbit，然后为rabbit添加触摸事件监听器，在重写的触摸事件中设置rabbit的显示位置，并重绘rabbit组件，最后将rabbit添加到布局管理器中，关键代码如下。
（4）在工具栏中找到
下拉列表框，选择要运行的应用（这里为Follow Finger Bunny），再单击右侧的
按钮，将显示如图4.9所示的运行结果。当用手指在屏幕上拖曳时，小兔子将跟随手指的拖曳轨迹移动。
图4.9 跟随手指的小兔子
说明
单击模拟器右侧菜单栏中的旋转按钮，可以将模拟器屏幕切换为横屏状态。