Android UI Design 01 : 基本布局 Layout

分类： Android UI Design 2011-09-23 11:52 119人阅读 评论(0) 收藏 举报

原文地址：http://mobile.tutsplus.com/tutorials/android/android-layout/

理解布局对于Android程序设计是非常重要的。在这个教程中，我们将提供一个概述，关于Android应用程序的架构中都有怎样的布局。我们也进一步探索使用一些可用于组织应用程序屏幕内容的特殊布局控件，并且用各种有趣的方式来呈现一下。

什么是布局?

Android开发者可以用两种方式来使用布局。两个方式在本教程都有涉及。这两种布局的定义方式是:

• 一种是以资源的形式定义了在屏幕上绘制些什么。布局文件是用XML文件储存在应用程序的/res/layout目录下。布局文件简单来说是一个用户界面的模板，或者说是包含在屏幕之内一部分。
• 另一种是使用View类的形式，其主要目的是放置其他控件。这些布局类(LinearLayout，RelativeLayout，TableLayout等等)都用来显示子控件，如屏幕上的文本、按钮或图像等控件。

Android用户界面可以在XML布局文件中定义或者在程序中创建。

使用Eclipse来设计布局文件

在Eclipse中的Android开发插件中包含了一个布局设计器，用它可以方便的设计和预览布局文件。这个工具包括两个标签：布局视图允许您预览控件是如何出现在各种各样的屏幕上的，XML视图显示您的XML源文件。布局设计器如下图所示：

对于在Eclipse中使用布局设计器这里有一些小提示：

• 使用左边的窗格来添加和删除布局中的控件。
• 选择一个特定的控件(在预览或代码大纲中)并且使用属性面板来调整具体控件的属性。
• 使用XML标签来直接编辑XML文件。

重要的是要记住Eclipse布局设计器的预览并不能够准确的显示出用户所看到的布局。为此，你必须测试你的应用程序在一个正确配置的模拟器中，更重要的是在你的目标设备上进行测试。同时，某些“复杂”的控件，包括tab或video view，都不能在Eclipse里预览。

定义一个XML布局文件

最方便的和可维护的方式来设计应用程序的用户界面是通过创建XML布局文件。这种方法大大简化了用户界面设计的过程，更多的使用静态方式创建布局和控件并且定义控件的属性，使用XML可以避免你的代码混乱不堪。它在UI设计师（他们更关心布局）和开发人员（了解Java并实现应用的功能）之间有潜在的区别。开发人员在必要的时候可以通过程序改变屏幕的内容。一些复杂的控件，像ListView或GridView，通常是在程序中实现并且与数据相关联。

XML布局本件必须储存在项目目录的/res/layout文件夹下(或者，在相同作用并可替换的情况下，可以放在一个特别命名的子目录下)[译者注：例如横竖屏切换的不同布局文件等]。一种习惯的做法是在你的应用程序中为每一个界面创建一个XML布局资源文件(与一个特定的Activity相关联)，但这并不是必需的。在理论上你可以只创建一个XML布局文件，但是在不同的Activity中使用，并且在屏幕上显示不同的内容。

下面是一个简单的XML布局文件例子，一个LinearLayout中包含一个TextView和一个ImageView，在XML中的定义是：

[java] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>    
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
3.     android:orientation="vertical"    
4.     android:layout_width="fill_parent"    
5.     android:layout_height="fill_parent"    
6.     android:gravity="center">    
7.     <TextView    
8.         android:layout_width="fill_parent"    
9.         android:id="@+id/PhotoLabel"    
10.         android:layout_height="wrap_content"    
11.         android:text="@string/my_text_label"    
12.         android:gravity="center_horizontal"    
13.         android:textSize="20dp" />    
14.     <ImageView    
15.         android:layout_width="wrap_content"    
16.         android:layout_height="wrap_content"    
17.         android:src="@drawable/matterhorn"    
18.         android:adjustViewBounds="true"    
19.         android:scaleType="fitXY"    
20.         android:maxHeight="250dp"    
21.         android:maxWidth="250dp"    
22.         android:id="@+id/Photo" />    
23. </LinearLayout>    

这个代码呈现了一个简单的包含两个控件的布局：先是一些文本，然后在它的下面是一个图像。这些控件放在一个垂直方向的LinearLayout里面。下面的两张图片显示了在设备中的纵向和横向的两种显示模式：

在Activity中，在屏幕上读取和显示布局只需要在onCreate()方法中写一行代码。如果布局文件存储在/res/layout/main.xml，可以这样写：

[java] view plaincopyprint?

1. setContentView(R.layout.main);   

通过程序定义布局Layout

你也可以通过程序代码来创建用户界面组件。为了程序的可组织性和可维护性，这是比传统方法更好的途径。与通过直接使用setContentView()方法加载布局文件不同，你必须提供一个父布局对象包含所有子控件的视图，并且调用setContentView()方法。

例如，下面的代码演示了如何在一个程序的Activity中创建LinearLayout实例并且在它里面放置两个TextView对象。同时却没有使用任何资源文件。

[java] view plaincopyprint?

1. public void onCreate(Bundle savedInstanceState) {    
2.     super.onCreate(savedInstanceState);    
3.     // setContentView(R.layout.main);    
4.     
5.     TextView label = new TextView(this);    
6.     label.setText(R.string.my_text_label);    
7.     label.setTextSize(20);    
8.     label.setGravity(Gravity.CENTER_HORIZONTAL);    
9.     
10.     ImageView pic = new ImageView(this);    
11.     pic.setImageResource(R.drawable.matterhorn);    
12.     pic.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));    
13.     pic.setAdjustViewBounds(true);    
14.     pic.setScaleType(ScaleType.FIT_XY);    
15.     pic.setMaxHeight(250);    
16.     pic.setMaxWidth(250);    
17.     LinearLayout ll = new LinearLayout(this);    
18.     ll.setOrientation(LinearLayout.VERTICAL);    
19.     ll.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));    
20.     ll.setGravity(Gravity.CENTER);    
21.     ll.addView(label);    
22.     ll.addView(pic);    
23.     setContentView(ll);    
24. }    

正如你所看到的，当更多控件添加到屏幕中时代码将会成倍的增长，使得屏幕的内容更难以维护或重用。

探索各种布局类型

现在让我们来看一看其他组织控件的布局方式。常用的布局方式有：

• FrameLayout – 用来显示一堆子视图控件。多视图控件可以被添加到此布局。这个布局可以在同一个屏幕空间显示多个控件。
• LinearLayout – 用来在一个单行或单列显示子视图控件。这是一个非常方便的创建表单的布局方法。
• RelativeLayout – 用来显示子视图控件彼此间的关系。例如，你可以创建一个控件，然后通过另一个控件的ID摆放在它的“上”、“下”、“左”、“右”边的位置上。你也可以相对于父控件的边缘对齐子控件。
• TableLayout – 为了布置子视图控件到行和列。在表格的每行添加单独的控件可以使用TableRow布局（是一个基本的水平方向的LinearLayout）。

多种布局方式相结合

布局(LinearLayout，TableLayout，RelativeLayout等)跟其他控件一样也是个控件。 这就意味着布局可以被嵌套使用。例如，你可以在LinearLayout内使用一个RelativeLayout，或者反过来用。下图表示了一个LinearLayout布局(父控件)中，包含一个TableLayout(上端子控件)和一个FrameLayout(下端子控件)。

不过，要注意的是！！尽可能保持你的屏幕布局相对简单，因为复杂布局加载起来会更慢并且会导致性能下降。

提供可替代的布局文件

设计你的应用程序布局时要考虑到设备间的差异。通常设计出可以在各种不同的设备上横屏和竖屏都能显示得很好且很灵活的布局。必要时，你可以选择替代的布局资源处理特殊的情况。例如，你可以提供不同的布局去根据设备的方向或屏幕的尺寸(例如平板电脑)来加载不同的布局。

对于如何使用可替代布局文件的更多信息，请查看Android SDK documentation on Android Resources。

布局工具和优化布局

Android SDK中包含了一些可以帮助设计、调试和优化布局资源的工具。除了集成在Eclipse的Android插件中的布局设计器外，你也可以使用Hierarchy Viewer和Android SDK中的layoutopt工具。这些工具都可以在你的Android SDK的/tools目录下获得。

你可以在程序运行时使用Hierarchy Viewer去检查你的布局细节信息。更多信息可以查看Hierarchy Viewer on the Android Developer website。

你也可以用layoutopt命令行工具来优化你的布局文件。优化布局是非常重要的，因为复杂的布局文件会使加载变慢。layoutopt工具通过简单的扫描你的XML布局文件就可以指出你的布局文件中哪些控件是不必要的。更多信息可以查看layoutopt tool on the Android Developer website。

结语

Android应用程序的用户界面是使用布局来定义的。Android有许多不同的布局方式在屏幕上组织控件。布局可以使用XML文件定义，或者在程序运行时用Java代码定义。可替代的布局可以在特殊的条件下被加载，例如纵向与横向模式使用不同的布局文件。最后，设计一个好的布局对应用程序的性能很重要；使用Android SDK工具，如Hierarchy Viewer，layoutopt调试和优化你的应用程序的布局。

关于译者

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