APP开发的Android用户界面设计
2016年01月14日 
90 
分类：Android APP开发方案
相对布局用于将用户界面控件或小工具相对于其它控件或它们的父级布局组织在屏幕上。当使用正确的时候，相对布局可以是很强大和灵活布局，很多有趣的Android程序用户界面都可以基于它来设计。 什么是相对布局 除了将控件显示在一行或一列的线性布局，相对布局也是Android用户界面设计使用得很普遍的布局类型。和其它布局很相似，相对布局可以通过XML布局资源来定义也可以用Java程序来定义。相对布局的功能就像它的名字表达的一样：它相对其它控件或父控件本身来组织控件。 这是什么意思呢？意思是子控件，比如ImageView，TextView，和Button控件，可以放在另外一个控件的上面，下面，或是左边或者右边。子控件可以相对于父控件（相对布局容器）放置，包括放置在布局的顶部，底部，左部或右部边缘。 相对布局子控件位置使用规则来定义。这些规则定义了相对布局内的控件如何显示。相对布局的完整规则列表请参见RelativeLayout类的Android SDK文档。相关的用于XML资源的XML属性也可以在文档中找到。 注意：规则要求每个子控件恰当地设置了它的id属性。 一个简单的相对布局 相对布局最好使用例子来解释。假设我们要设计一个屏幕，包含一个EditText控件和一个Button控件。我们希望Button显示在EditText控件的右边。因此，我们可以定义一个包含两个子控件的相对布局：子控件分别是EditText和Button。EditText控件可能有一个规则说：将这个控件放置在父控件（布局）的左手边并且在第二个控件（Button）的左边。同时，Button控件可能有一个规则：将这个控件放置在父控件（布局）的右手边。 下面的图片就展示了这样一个相对布局，分别是竖屏和横屏模式。这个相对布局有两个子控件：一个EditText控件和一个Button控件。
定义带有相对布局的XML资源文件
设计程序用户界面最方便和可维护的方法是创建XML布局资源。这个方法极大地简化了UI设计过程，将很多静态创建和用户界面控件的布局以及控件属性的定义移到XML中去，取代了写代码。
XML布局资源必须存储在/res/layout项目目录下。让我们看看前一节介绍的相对布局。这个布局资源文件，恰当地命名为/res/layout/relative.xml，在XML中如下定义：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent"> <EditText android:id="@+id/EditText01" android:hint="Enter some text..." android:layout_alignParentLeft="true" android:layout_width="fill_parent" android:layout_toLeftOf="@+id/Button01" android:layout_height="wrap_content"></EditText> <Button android:id="@+id/Button01" android:text="Press Here!" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:layout_height="wrap_content"></Button> </RelativeLayout>
回忆一下，在Activity中，只需要在onCreate()方法中添加一行代码来在屏幕上加载和显示布局资源。如果布局资源存放在/res/layout/relative.xml文件中，这行代码应该是：
setContentView(R.layout.relative);
这个相对布局设置了宽和高填充整个屏幕，并且它的子控件配置了三个规则：
EditText01：对齐到布局的左手边
EditText01：显示在Button01的左边
Button01：对齐到布局的右手边
用程序定义相对布局
你也可以用程序创建和配置相对布局。这通过使用RelativeLayout类（android.widget.Relative）来实现。你会在RelativeLayout.LayoutParams类中找到具体的参数。同样地，典型的布局参数（android.view.ViewGroup.LayoutParams），比如layout_height和layout_width，以及边距参数（ViewGroup.MarginLayoutParams），也能用在RelativeLayout对象上。
你必须用Java创建屏幕内容，然后向setContentView()方法提供一个包含所有要作为子视图显示的控件内容的父布局对象，而不是像前面所示直接使用setContentView()方法来加载布局资源。在这里，你的父布局就是相对布局。例如，下面的代码示例了如何用程序在活动中实例化一个RelativeLayout并且在它的onCreate()方法中向它添加一个TextView和一个Button控件，就像前面一节展示的布局一样：
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.relative);
EditText ed = new EditText(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
// use same id as defined when adding the button
params.addRule(RelativeLayout.LEFT_OF, 1001);
ed.setLayoutParams(params);
ed.setHint("Enter some text....");
Button but1 = new Button(this);
RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
params2.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
but1.setLayoutParams(params2);
but1.setText("Press Here!");
// give the button an id that we know
but1.setId(1001);
RelativeLayout layout1 = new RelativeLayout(this);
layout1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
layout1.addView(ed);
layout1.addView(but1);
setContentView(layout1);
}让我们仔细看一下上面的Java代码。首先我们像平常一样创建一个EditText控件。我们给它一些RelativeLayout参数，然后设置它的规则。在这里，我们为EditText控件创建2个规则。
接下来，我们创建一个Button控件并且设置它的规则（对齐到父布局右边缘）。最后，我们创建一个RelativeLayout对象，设置它的参数，使用addView()方法添加两个控件并且使用setContentView()方法加载显示相对布局。
如你所见，当越来越多的控件要添加到屏幕时，代码量会很快地增长。为了易组织和可维护性，用程序定义并使用布局最好是用在特殊情况而不是一般情况。
探讨相对布局的重要特性和属性
现在让我们来讨论一些帮助配置相对布局和它的子控件的属性。一些特定的属性用于相对布局，也就是子规则，包括：
用于子控件在父布局中居中的规则，包括：水平居中，垂直居中，或者两者皆居中。
用于子控件在父布局中排布的规则，包括：在顶部，底部，左，右边缘放置。
用于子控件相对于其它子控件排布的规则，包括：在另一个控件顶，底，左，右边缘放置。
用于子控件相对于其它子控件放置的规则，包括：在另一个控件上面，底下，左边或右边放置。
同样的，通用的 ViewGroup-style属性也可以应用于相对布局。这些属性包括：
通用布局参数比如layout_height（必须）和layout_width（必须）（类：ViewGroup.LayoutParams）
边距布局参数比如margin_top, margin_left, margin_right和margin_bottom (类：ViewGroup. MarginLayoutParams)
布局参数比如layout_height和layout_width (类：ViewGroup.LayoutParams)
现在让我们来实践这些规则吧！
使用布局规则
让我们看一个更复杂的屏幕设计。为了这个练习，我们从查看最终屏幕效果开始，然后再倒回来工作，并讨论这个相对布局的特性和为了达到最终结果所使用的规则。
我们希望设计一个如下所示的屏幕：
为了使用相对布局来设计这个屏幕，参考以下步骤。
步骤1：在你的XML资源文件中定义一个相对布局
首先，在你的XML资源文件中定义一个相对布局。因为你想这个布局控制整个屏幕的内容，所以设置它的高和宽属性为fill_parent。你的XML资源文件应该看起来像这样：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent"> </RelativeLayout>
步骤2：确定子控件
接下来，我们确定需要什么样的子控件。在这里，我们需要7个TextView控件（第个一种颜色）。像平常一样配置它们，设置文本属性为字符串，背景色，字号等等。将这些控件都放到相对布局中。
步骤3：定义相对布局规则
接下来，我们为每个子控件定义规则，以使它们被绘制到合适的位置：
RED TextView控件没有特别的设置。默认地，这个控件将会被绘制到父布局的左上角。
ORANGE TextView控件在父布局中水平居中。因为所有控件默认都会靠向屏幕的左上角，这有效地将控件定位到父布局的边缘顶部中间。
YELLOW TextView控件定位到父布局的右边缘。因为所有控件默认都会靠向屏幕的左上角，这有效的定位控件到父布局的右上角。
GREEN TextView控件在父布局中垂直居中，并且设置为显示在BLUE TextView控件的左边。
BLUE TextView控件被定位在父控件的中心（水平和垂直）。这将它显示在屏幕的中心位置。
INDIGO TextView控件在父局中垂直居中，并且设置为显示在BLUE TextView控件的右边。
VIOLET TextView控件被定位到父布局的底部边缘。它的宽度也被设置为填满父容器，允许它延伸到屏幕的底部边缘。
如果你在你的XML资源文件中定义这些规则，XML文件代码将看起如下：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent"> <TextView android:text="RED" android:id="@+id/TextView01" android:layout_height="wrap_content" android:background="#f00" android:gravity="center" android:textColor="#000" android:layout_width="wrap_content" android:padding="25dp"></TextView> <TextView android:text="ORANGE" android:layout_height="wrap_content" android:background="#ffa500" android:gravity="center" android:textColor="#000" android:id="@+id/TextView02" android:layout_width="wrap_content" android:layout_centerHorizontal="true" android:padding="25dp"></TextView> <TextView android:text="YELLOW" android:layout_height="wrap_content" android:background="#ffff00" android:gravity="center" android:textColor="#000" android:id="@+id/TextView03" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:padding="25dp"></TextView> <TextView android:text="GREEN" android:layout_height="wrap_content" android:background="#0f0" android:gravity="center" android:textColor="#000" android:id="@+id/TextView04" android:layout_width="wrap_content" android:layout_toLeftOf="@+id/TextView05" android:padding="25dp" android:layout_centerVertical="true"></TextView> <TextView android:text="BLUE" android:layout_height="wrap_content" android:background="#00f" android:gravity="center" android:textColor="#fff" android:id="@+id/TextView05" android:layout_width="wrap_content" android:layout_centerInParent="true" android:layout_margin="10dp" android:padding="25dp"></TextView> <TextView android:text="INDIGO" android:layout_height="wrap_content" android:gravity="center" android:textColor="#fff" android:id="@+id/TextView06" android:layout_width="wrap_content" android:layout_toRightOf="@+id/TextView05" android:background="#4b0082" android:padding="25dp" android:layout_centerVertical="true"></TextView> <TextView android:text="VIOLET" android:layout_height="wrap_content" android:background="#ee82ee" android:gravity="center" android:textColor="#000" android:id="@+id/TextView07" android:layout_alignParentBottom="true" android:layout_width="fill_parent" android:padding="25dp"></TextView> </RelativeLayout>
相对布局使用技巧
这里是一些使用相对布局的技巧。
相对布局的子控件必须有唯一的id属性以使规则正确应用。
当心循环规则。循环规则发生在两个控件具有互相指向的规则时。如果你在布局设计中使用了循环规则，你将会得到以下错误信息：
IllegalStateException: Circular dependencies cannot exist in a RelativeLayout（相对布局中不允许存在循环依赖）
回忆一下相对布局规则的应用被一次处理是很有用的
保持你的相对布局规则最小化。这减小了循环规则的机率并且使得你的布局更加可维护和灵活。
一般地，记住测试一下你的布局设计在横屏和竖屏模式下，以及在不同的屏幕大小和解决方案下是不是符合预期的。
使用相对布局代替嵌套线性布局以改进程序性能和响应能力。
总结
Android程序用户界面使用布局来定义，相对布局是用于使得程序屏幕更加灵活和强大的布局类型之一。相对布局允许子控件相对于其它子控件和相对于父控件（边缘以及水平和垂直居中）来组织。一旦你掌握了如何使用相对布局的规则，它们可以有非常多的用处，使你能够创建复杂布局，而不需要过多嵌套不同的布局，因此也改进了性能。[English]
作者：RockUX–WEB前端
