第二章 第一个游戏

2.6 开发一个游戏

2.6.2 界面设计

• 前言
• 界面设计
• 后记

前言

    上一节，我们简单地分析了一下猜数字游戏的开发。在本节，我们会快速地完成游戏界面的设计（不涉及写代码，只需要点点点就好了）。本节中会涉及很多之前讲过的操作，如果忘记了的话可以点击复习。

    话不多说，我们直接打开AIDE吧！

界面设计

    我们首先打开main.xml文件。（它在res/layout文件夹下）清除里面的无关内容，如下：

    接下来，我把我心里面想要实现的界面展示在下面：

    里面涉及到的控件有三个：文本框，输入框和按钮。这些控件都需要放在一个“容器”里面，以便于控制其位置。这里我们使用的“容器”是比较简单的线性布局（LinearLayout）。线性布局里面的控件都会按照左右顺序或者上下顺序依次排成一条直线。而在我们的这个界面里面，却是输入框和按钮水平排列在屏幕底部，然后两者作为一个整体和上面的文本框上下排列在一起。

    很明显，我们使用了不止一个线性布局。首先，底部的输入框和按钮都放在一个水平的线性布局里面。文本框也是放在了一个线性布局里面（因为只有一个控件，所以不需要在意线性布局是水平还是竖直）。然后，这两个线性布局都被放在一个竖直的线性布局里面。

    main.xml文件里面已经有了一个竖直的线性布局，里面添加的控件都会按照竖直方向从上到下依次排列。我们只需要在里面添加两个线性布局来分别存放文本框，输入框和按钮。具体的操作如下图所示：

    首先是点击中间的大虚线框，然后选择里面添加，然后会弹出这样的提示框：

    点击下面的布局一项。

    然后点击线性布局（水平），我们就成功得添加了一个线性布局（也就是图中的小正方形虚线框）。接下来，我们再往里面添加一个同样的线性布局（步骤和刚才完全一样）。

    然后我们把两个小线性布局的宽度调成屏幕的宽度。点击小正方形虚线框，找到Layout Width = Wrap Content这一项，点击之后弹出如下的窗口：

    选择第二项Match Parent。可以看到刚才的虚线小正方形框的宽度已经填满了整个大虚线框，另一个线性布局也是一样的操作。效果如下：

    接下来调整线性布局的高度。注意到下面的那个线性布局的高度其实就是输入框或者按钮的高度，不需要很大。然后屏幕剩下的高度就完全由上面的那个线性布局来填满。为了实现这一个操作，我们采用如下的办法：

    点击上面的线性布局，找到Layout Weight一项，并设置为1.0。这个属性比较复杂，所以此处不再细讲。完成之后效果如下：

    可以看到，上面的线性布局已经填满了所有的空白高度。接下来，我们往两个线性布局里面添加控件。首先点击上面的线性布局，然后选择里面添加，在视图一项里找到文本，点击即可。

    我们把文本框填满这个线性布局。点击左上角的虚线框（里面有汉字文本），然后找到这两个属性，均设置为Match Parent。

    这样我们就把文本框填满了整个线性布局。接下来，我们把里面的默认文本给删掉。点击文本框，找到Text = “文本”一项，并点击左下角的NONE。

    这样我们就把文本框里面的文本给清除掉了。接下来我们往下面的线性布局里面添加输入框和按钮。首先添加输入框。点击下面的很扁的那个小虚线框，选择里面添加。在编辑框一项里点击编辑框，即可在下面的线性布局里面添加一个编辑框。

    然后我们点击输入框（也就是下图中有一条黑色实线的那个矩形小框），选择后面添加。在部件一项里面选择按钮

    接下来，我们来设置输入框的高度和宽度。和刚才设置文本框一样，我们点击输入框，然后找到Layout Height一项：

    我们把Layout Height一项修改为Match Parent。然后再一次点击编辑框，找到Layout Weight一项，设置为1.0即可。

    为了美观，我习惯把按钮上面的提示文本删去。点击按钮，然后找到Text = “按钮”一项，然后点击左下角的NONE，就可以去掉按钮的上面的提示文本了。（当然，我们也可以通过这个属性，把提示文本改成别的文字）最终的效果如下：

    界面的设计基本上就结束了。点击返回，我们就可以退回到main.xml文件。看！AIDE已经为我们自动写好了所有的代码，多么神奇啊！

    点击右上角的三角形按钮，然后安装应用，并打开，效果如下：

    至此，猜数字小游戏的界面已经开发完成。

后记

    相信通过本节，你会进一步感受到AIDE的强大之处。设想一下要是你自己来写上面的代码，不知道要花费多少时间！

    现在，我们已经把小游戏的界面给开发出来了，下一节，我们会在游戏的Java文件中获取到各个控件的对象，并实现产生一个函数，来产生数位不重复的四位随机数。

    本节所涉及的代码全部都在res/layout/main.xml文件中，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:gravity="center"
	android:orientation="vertical">
	
	<LinearLayout
		android:orientation="horizontal"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_weight="1.0">
		<TextView
			android:layout_width="match_parent"
			android:layout_height="match_parent"/>
	</LinearLayout>
	
	<LinearLayout
		android:orientation="horizontal"
		android:layout_width="match_parent"
		android:layout_height="wrap_content">
		<EditText
			android:layout_width="wrap_content"
			android:ems="10"
			android:layout_height="match_parent"
			android:layout_weight="1.0"/>
		<Button
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"/>
	</LinearLayout>
	
</LinearLayout>

感谢你的阅读！本教程会长期不定时更新。本人不是大神，也会犯错，如果有建议或者提问的话，欢迎评论留言！

系列教程导航