Android UI Design 04 : 相对布局 Relative Layouts

原文地址：http://mobile.tutsplus.com/tutorials/android/android-ui-fundamentals-challenge-relativelayout/

理解布局对于设计好的Android应用程序是非常重要的。在本教程中，你能学到关于相对布局（Relative Layout）的一切知识，其中包括在屏幕上相对另一个控件或父布局去布置用户界面控件或者Widget的位置。使用得当的话，通过相对布局（Relative Layout）你可以设计出许多有趣的Android程序，并且具有强大和灵活等特点。

什么是相对布局（Relative Layout）?

同在一行（列）上显示控件的线性布局（Linear Layout）相比，相对布局（Relative Layout）是在Android用户界面设计中更常用到的布局类型。就像其他布局一样，相对布局（Relative Layout）可以通过XML布局资源文件或者在程序中用Java代码来定义。相对布局（Relative Layout）的作用就像它的名字所描述的那样：它相对于另一控件或者它本身的父控件来布置控件。

这是什么意思呢？它意味着子控件，像ImageView，TextView和Button这些控件，能够摆放在其他控件的上、下、左或右方。子控件同样也能相对于父控件（相对布局的容器）去摆放，例如对齐在父布局的上、下、左或右边缘上。

相对布局（Relative Layout）摆放子控件的是由一系列的原则定义的。这些原则定义了在相对布局（Relative Layout）内的控件如何显示。对于相对布局（Relative Layout）原则的完整列表，请参阅AndroidSDK文档中的RelativeLayout类。在文档中也定义了使用在XML资源文件中的相关的XML属性。

注：原则规定每个子控件都需要正确设置ID属性。

一个简单的相对布局（Relative Layout）

对于完全理解相对布局（Relative Layout），最好的方法是用一个例子。下面我们将讨论设计一个带有EditText控件和Button控件的界面。我们想要Button控件显示在EditText控件的右边。因此，我们定义一个相对布局（Relative Layout），其中包含两个子控件：EditText和Button。EditText控件可能按照这样的原则：它在父控件（布局）的左边对齐，并且这个控件在第二个控件Button控件的左边。同时，Button控件按照这样的原则：它在父控件（布局）的右边对齐。

下面的图片在横屏和竖屏模式显示了这样的相对布局（Relative Layout）。相对布局（Relative Layout）中有两个子控件：一个EditText控件和一个Button控件。

用XML布局资源文件来定义一个相对布局（Relative Layout）

最方便和可维护的方式来设计应用程序用户界面是通过创建XML布局资源文件。这种方法极大的简化了UI设计的过程，与乱糟糟的代码相比，XML更多使用的是静态创建用户接口控件的布局和控件属性的定义。

XML布局资源文件必须被储存在项目目录的/res/layout文件夹下。让我们看看在上一节中介绍的相对布局（Relative 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);  

这种相对布局（Relative Layout），其宽度和高度设置为填充整个屏幕，并且其子控件的设置按照如下三个原则：

• EditText01：在布局的左边对齐
  EditText01：在Button01的左边显示
  Button01：在布局的右边对齐

用程序来定义一个相对布局（Relative Layout）

您还可以用程序来创建和配置相对布局（Relative Layout）。这里使用RelativeLayout类（android.widget.Relative）来实现。你会发现在RelativeLayout.LayoutParams类中有许多子控件的特定参数。此外，典型的布局参数（android.view.ViewGroup.LayoutParams）如layout_height和layout_width，以及边距参数（ViewGroup.MarginLayoutParams），仍然适用于RelativeLayout对象。
同之前的直接使用setContentView()方法加载布局资源文件相比，你必须在Java代码中创建屏幕的内容，并且提供一个父布局对象来包含所有的作为子视图显示的控件的内容，并将此父布局对象提供给setContentView()方法。在本例中，你的父布局对象是相对布局（Relative Layout）。
例如，下面的代码演示了如何用程序来实现在一个Activity的onCreate()方法中实例化一个相对布局（Relative Layout）并在其中放置一个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控件。我们给它一些相对布局（Relative Layout）的参数，并且设置它的原则。在本例中，我们为这个EditText控件创建了两个原则。

接下来，我们创建了一个Button控件并且设置它的原则（父布局的右边缘对齐）。最后，我们创建了一个相对布局（Relative Layout）对象，设置它的参数，使用addView()方法添加两个子控件并使用setContentView()方法加载相对布局（Relative Layout）来显示。

正如你所看到的那样，代码可以在屏幕上快速的添加更多的控件。对于组织性和可维护性，与传统的方法相比，用程序定义和使用布局是最好的方式。

探索相对布局（Relatvie Layout）中的重要特性和属性

现在让我们来聊聊关于有助于配置相对布局（Relative Layout）和它的子控件的属性。一些特定的属性适用于相对布局（Relative Layout）的子控件原则，其中包括：

• 在父布局中子控件居中的原则，包括：水平居中，垂直居中，或者二者同时。
• 在父布局中子控件对齐的原则，包括：根据另一个控件上、下、左或右边缘对齐。
• 子控件相对其他子控件对齐的原则，包括：根据上、下、左或右边缘对齐。
• 子控件相对于其他子控件摆放位置的原则，包括：摆放在指定控件的左边、右边，或者另一个控件上面和下面。

同样，ViewGroup样式的一般属性也适用于相对布局（Relative Layout）。他们包括：

• 通用布局参数，如layout_height和layout_width（必需）（class: ViewGroup.LayoutParams）
• 边距布局参数，如margin_top，margin_left，margin_right和margin_bottom（class: ViewGroup. MarginLayoutParams）
• 布局参数，如layout_height和layout_width（class: ViewGroup.LayoutParams）

现在让我们在程序中应用这些原则！

使用布局原则

让我们看一个更复杂的屏幕设计。为了练习的目的，我们将先看一下最后的屏幕设计结果，然后再从头设计，讨论用来实现这一最后结果的相对布局（Relative Layout）的特点和原则。

比方说我们想要设计这样的一个屏幕：

为了使用相对布局（Relative Layout）设计这个屏幕，我们将完成下列的步骤：

Step 1: 在你的XML布局资源文件中定义一个相对布局（Relative Layout）

首先，在你的XML资源文件中定义一个相对布局（Relative Layout）。因为你想使用这个布局来控制整个屏幕的内容，设置它的高度和宽度属性为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>  

Step 2: 确定子控件

下一步，我们确定我们需要哪些子控件。在本例中，我们需要七个TextView控件（每个控件一种颜色）。正常配置它们，用字符串设置文本属性，背景颜色，字体大小等。并把这些控件放在你的相对布局（Relative Layout）中。

Step 3: 定义相对布局（Relative Layout）原则

接下来，为了让每个控件画在合适的位置上，我们为每个控件定义原则：

• 红色的TextView控件没有配置的具体设置。默认情况下，这个控件将被绘制在父布局的左上角。
• 橙色的TextView控件在父布局中水平居中。由于所有控件默认在屏幕的左上角，这有效地标记了父布局顶部边缘的中间位置。
• 黄色的TextView控件的父布局的右边缘对齐。由于所有控件默认在屏幕的左上角，这有效地标记了父布局右上角的位置。
• 绿色的TextView控件在父布局中垂直居中，并且使它显示在蓝色TextView控件的左侧。
• 蓝色的TextView控件对齐在父控件的中心（水平和垂直）。它显示在屏幕正中间。
• 靛蓝色的TextView控件在父布局中垂直居中，并且使它显示在蓝色TextView控件右边。
• 紫色的TextView控件的父布局的底边对齐。它的宽度被设置为填满父控件，使得它横跨屏幕的底边。

如果你在你的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>  

相对布局（Relative Layout）用法提示

这有一些关于相对布局（Relative Layout）的用法提示。

• 为了正确的应用规则，相对布局（Relative layout）的子控件必须有唯一的ID属性。
• 注意那些循环原则。当两个控件都通过原则指向另外一个的时候，循环原则就产生了。如果在你的布局设计中包含一个循环原则集，你将会遇到下面这样的错误：

IllegalStateException: Circular dependencies cannot exist in a RelativeLayout  

• 它可以帮助你熟记相对布局（Relative Layout）的规则。
  
  保持你的相对布局（Relative Layout）原则到最小程度。这将有助于减少循环原则的机会，并且可以使你的布局更易于管理和灵活。
  
  像往常一样，要记住在纵向和横向模式和不同的屏幕尺寸和分辨率去测试你的布局是否获得期望的设计效果。
  
  使用相对布局（Relative Layout）来代替嵌套的线性布局可以提高应用程序性能和响应时间。

结论

Android应用程序的用户界面使用布局来定义，相对布局（Relative Layout）是用于使应用程序的屏幕更灵活和强大的布局类型的一种。相对的布局允许子控件相对于另一个子控件或相对于父对象来摆放位置（在边缘和中心上垂直和水平对齐）。一旦你掌握了相对布局（Relative Layout）如何使用的原则，你会发现它们几乎是无所不能的，你可以创建复杂的布局，却没有使用嵌套不同的布局的额外开销，从而能提高布局的性能。

关于译者

本人现在正就读于沈阳工业大学计算机应用技术专业的研究生，热爱Android平台的开发，对于英文系列教程的翻译，本人也是第一次尝试，所以如果本系列教程的翻译如果令您感到不适或厌恶，请不要抛砖头，可以通过下面的方式告知，本人将不胜感激。

Author Jimmy
Email mingjun.su[at]gmail.com
Blog http://blog.csdn.net/sumingjun