详细介绍Android用户界面布局规划及设计步骤

发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：

前面我们通过《使用Android Studio创建Android项目详细步骤及注意事项》介绍了创APP基本流程和步骤，显而易见通过Android Studio创建项目是比较轻松的，接下来由南昌APP开发公司工程师接着介绍如何规划和设计界面布局。
一、用户界面设计
? ? ? ?当前，activity_quiz.xml文件定义了默认的activity布局。应用默认的XML布局文件内容经常 改变，但总是与代码如下所示文件相似。
? ? ? ?代码清单1-1 默认的activity布局（activity_quiz.xml）
? ? ? ? ? ? ? ?xmlns:tools="http://schemas.android.com/tools"
? ? ? ?android:layout_width="match_parent"
? ? ? ?android:layout_height="match_parent"
? ? ? ?android:paddingLeft="@dimen/activity_horizontal_margin"
? ? ? ?android:paddingRight="@dimen/activity_horizontal_margin"
? ? ? ?android:paddingTop="@dimen/activity_vertical_margin"
? ? ? ?android:paddingBottom="@dimen/activity_vertical_margin"
? ? ? ?tools:context=".QuizActivity">

? ? ? ? android:text="@string/hello_world"
? ? ? ?android:layout_width="wrap_content"
? ? ? ?android:layout_height="wrap_content" />

? ? ? ?应用activity的默认布局定义了两个组件（widget）：RelativeLayout和TextView。
? ? ? ?组件是用户界面的构造模块。组件可以显示文字或图像，与用户交互，甚至布置屏幕上的其 他组件。按钮、文本输入控件和选择框等都是组件。
? ? ? ?Android SDK内置了多种组件，通过配置各种组件可获得所需的用户界面及行为。每一个组 件都是View类或其子类（如TextView或Button）的一个具体实例。 图1-
? ? ? ?9展示了代码清单1-1中定义的RelativeLayout和TextView是如何在屏幕上显示的。
? ? ? ?不过，图1-9所示的默认组件并不是我们需要的，QuizActivity的用户界面需要下列五个组件：
? ? ? ?一个垂直LinearLayout组件；
? ? ? ?一个TextView组件；
? ? ? ?一个水平LinearLayout组件；
? ? ? ?两个Button组件。 图1-10展示了以上组件是如何构成QuizActivity用户界面的。

? ? ? ?下面我们在activity_quiz.xml文件中定义这些组件。
? ? ? ?如代码清单1-2所示，修改activity_quiz.xml文件。注意，需删除的XML已打上删除线，需添 加的XML以粗体显示。我们统一使用这样的版式约定。 代码清单1-2 在XML文件（activity_quiz.xml）中定义组件
? ? ? ? ?xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
? ? ? ?android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
? ? ? ?android:paddingRight="@dimen/activity_horizontal_margin"
? ? ? ?android:paddingTop="@dimen/activity_vertical_margin"
? ? ? ?android:paddingBottom="@dimen/activity_vertical_margin"
? ? ? ?tools:context=".QuizActivity">

? ? ? ?android:text="@string/hello_world"
? ? ? ?android:layout_width="wrap_content"
? ? ? ?android:layout_height="wrap_content" />



? ? ? ?android:layout_width="match_parent"
? ? ? ?android:layout_height="match_parent"
? ? ? ?android:gravity="center"
? ? ? ?android:orientation="vertical" >

? ? ? ?android:layout_width="wrap_content"
? ? ? ?android:layout_height="wrap_content"
? ? ? ?android:padding="24dp"
? ? ? ?android:text="@string/question_text" />

? ? ? ?android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ?android:orientation="horizontal" >

? ? ? ?android:layout_width="wrap_content"
? ? ? ?android:layout_height="wrap_content"
? ? ? ?android:text="@string/true_button" />

? ? ? ?android:layout_width="wrap_content"
? ? ? ?android:layout_height="wrap_content"
? ? ? ?android:text="@string/false_button" />



? ? ? ?参照代码清单直接输入代码，就算不理解这些代码也没关系，你会在后续的学习中弄明白的。 需要特别注意的是，开发工具无法校验布局XML内容，请尽量避免输入或拼写错误。
? ? ? ?根据所使用的工具版本不同，有三行以android:text开头的代码可能会产生错误信息。暂 时忽略它们，稍后会处理。
? ? ? ?将XML文件与图1-10所示的用户界面进行对照，可以看出组件与XML元素一一对应。元素 的名称就是组件的类型。
? ? ? ?各元素均有一组XML属性。属性可以看作是如何配置组件的指令。
? ? ? ?为便于理解元素与属性的工作原理，接下来我们将以层次等级视角来研究布局。

? ? ? ?图1-11 布局中组件及属性的层级结构
? ? ? ?从布局的视图层级结构可以看到，其根元素是一个LinearLayout组件。作为根元素， LinearLayout组件必须指定Android XML资源文件的命名空间属性为http://schemas.android.com/ apk/res/android。
? ? ? ?LinearLayout组件继承自View子类的ViewGroup组件。ViewGroup组件是个包含并配置其 他组件的特殊组件。如需以一列或一排的样式布置组件，使用LinearLayout组件就可以了。其他ViewGroup子类还包括FrameLayout、TableLayout和RelativeLayout。
? ? ? ?若某个组件包含在一个ViewGroup中，该组件与ViewGroup即构成父子关系。根 LinearLayout有两个子组件：TextView和LinearLayout。作为子组件的LinearLayout本身还 有两个Button子组件。
? ? ? ?
二、组件属性
下面我们一起来看看配置组件的一些常用属性。
? ? ? ? 1. android:layout_width和android:layout_height属性
? ? ? ?几乎每类组件都需要android:layout_width和android:layout_height属性。以下是它 们的两个常见属性值（二选一）。 ?
? ? ? ? match_parent：视图与其父视图大小相同。 ?
? ? ? ? wrap_content：视图将根据其展示的内容自动调整大小。 （以前还有个fill_parent属性值，等同于match_parent，目前已废弃不用。） 根
? ? ? ?LinearLayout组件的高度与宽度属性值均为match_parent。LinearLayout虽然是根元 素，但它也有父视图（View）——Android提供该父视图来容纳应用的整个视图层级结构。
? ? ? ?其他包含在界面布局中的组件，其高度与宽度属性值均被设置为wrap_content。请参照图 1-10理解该属性值定义尺寸大小的作用。
? ? ? ?TextView组件比其包含的文字内容区域稍大一些，这主要是android:padding="24dp"属性 的作用。该属性告诉组件在决定大小时，除内容本身外，还需增加额外指定量的空间。这样屏幕 上显示的问题与按钮之间便会留有一定的空间，使整体显得更为美观。（不理解dp的意思？dp即 density-independent pixel，指与密度无关像素，后面的文章将介绍有关它的概念。）
? ? ? ? 2. android:orientation属性
? ? ? ?android:orientation属性是两个LinearLayout组件都具有的属性，它决定两者的子组件 是水平放置还是垂直放置。根LinearLayout是垂直的，子LinearLayout是水平的。
? ? ? ?LinearLayout子组件的定义顺序决定其在屏幕上显示的顺序。在竖直的LinearLayout中， 第一个定义的子组件出现在屏幕的最上端；而在水平的LinearLayout中，第一个定义的子组件 出现在屏幕的最左端。（如果设备文字从右至左显示，如Arabic或者Hebrew，第一个定义的子组 件则出现在屏幕的最右端。）
? ? ? ? 3. android:text属性
? ? ? ?TextView与Button组件具有android:text属性。该属性指定组件要显示的文字内容。
? ? ? ? 请注意，android:text属性值不是字符串值，而是对字符串资源（string resources）的引用。
? ? ? ?字符串资源包含在一个独立的名为strings的XML文件中，虽然可以硬编码设置组件的文本属性 值，如android:text="True"，但这通常不是个好主意。比较好的做法是：将文字内容放置在独 立的字符串资源XML文件中，然后引用它们。这样也便于对应用进行本地化。
? ? ? ?需要在activity_quiz.xml文件中引用的字符串资源目前还不存在。现在我们来添加这些资源。
三、创建字符串资源
? ? ? ?每个项目都包含一个名为strings.xml的默认字符串文件。
? ? ? ?在项目工具窗口中，找到app/res/values目录，显示目录内容，然后打开strings.xml文件。
? ? ? ?可以看到，项目模版已经添加了一些字符串资源。删除不需要的hello_world部分，添加应 用布局需要的三个新的字符串，如代码清单1-3所示。
? ? ? ?代码清单1-3 添加字符串资源（strings.xml）
? ? ? ?
? ? ?? ? ? ? ?GeoQuiz
? ? ? ? ? ? ??
? ? ? ?? ? ? ? ? ?? ? Constantinople is the largest city in Turkey.
? ? ? ? ? ? ??
? ? ?? ? ? ? ?TRUE
? ? ? ? ? ? ?? FALSE
? ? ? ?
? ? ? ?（项目已默认配置好应用菜单，请勿删除action_settings字符串设置，否则将导致与应用 菜单相关的其他文件发生版式错误。）
? ? ? ?现在，在GeoQuiz项目的任何XML文件中，只要引用到@string/false_button，应用运行 时，就会得到文本“FALSE”。
? ? ? ? 保存strings.xml文件。这时，activity_quiz.xml布局曾经提示缺少字符串资源的信息应该不会 再出现了。（如仍有错误信息，那么检查一下这两个文件，确认是否存在输入或拼写错误。）
? ? ? ?默认的字符串文件名为strings.xml，当然也可以按个人喜好任意取名。一个项目也可以有多 个字符串文件。只要这些文件都放置在res/values/目录下，并且含有一个resources根元素，以及 多个string子元素，应用就能找到并正确使用它们。
? ? ? ?
四、预览界面布局
? ? ? ?
? ? ? ?至此，应用的界面布局已经完成，现在我们使用图形布局工具来进行实时预览。首先，确认 保存了所有相关文件并且无错误发生，然后回到activity_quiz.xml文件，点击编辑区右边的Tab页 打开预览工具窗口（如果还没打开的话），如图1-12所示。

图1-12 在图形布局工具中预览界面布局（activity_quiz.xml）
? ?本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌APP开发公司-网络 http://www.huicuiwang.cn/app/index.html 如转载请注明出处!