android开发中的UI控制(六)

android开发中的UI控制(六)

 

转载自 ： http://www.android777.com/index.php/tutorial/androids-ui-control-f.html

      之前介绍了Android中的文本控制 、按钮控制 、列表控制 和其他一些有趣的控件 。大家应该对这些基本的控制控件有一些了解了，但是如何把这些控制控件合成在一个界面中，控制整体布局呢？这时候就需要了解Android中的布局管理控件。

在Android中几个常见的布局控制对象：LinearLayout、TableLayout、RelativeLayout、 FrameLayout和AbsoluteLayout(Deprecated)，他们都继承了ViewGroup，作为各种不同布局管理模型的容器，它 们都提供了各自独到的功能。

FrameLayout：

FrameLayout是一个最简单的布局文件，它将子视图放在它的左上方，然后整个容器只能显示一个子视图，如果有多个子视图则他们会像卡片一样重叠在一起只有最上面的能被看到，不过如果你设置它的背景是透明的，则可以透过上面的卡片看到下面的内容。

下面代码：res\layout\layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >  
<ImageView  
    android:id="@+id/layout_imageview_01"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/js1"
    />
<ImageView  
    android:id="@+id/layout_imageview_02"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/js2"
    />
</FrameLayout>

 

（上面xml代码中的js1和js2对应于附件中的图片js1.jpg,js2.jpg）

 

上面代码将两个ImageView放到FrameLayout中，因为FrameLayout只能显示一个子视图，所以你只能看到前面第一个ImageView。

 

LinearLayout：

 

LinearLayout是一个最常用的基础布局对象。它通过设置orientation将内部的所有子视图以横向或纵向进行排列。你将多个横向的 LinearLayout以当成子视图放进一个纵向的LinearLayout中，这样就形成一个类似Table的布局，不过如果是这种情况，最好是用 TableLayout比较合适。

下面布局文件就是一个纵向布局的例子：

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >  
  <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="姓名:"
  />
 
  <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="周杰伦"
  />
 
  <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="照片:"
  />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/js1"
  />
</LinearLayout>

 

视图效果如下：

 

       在LinearLayout中还可以设置内部子视图的方位(gravity)。 Gravity是一个排列属性，你可以通过设置它的值为left、center或right而达到将视图放在父视图的左边、中间或右边的地方。

 

 

 

 

TableLayout：

 

TableLayout布局管理对象会将容器内部的子节点按照行列进行排序，它就像是html中的<table>节点。在 TableLayout节点内部中声明<TableRow>将为table添加一行，<TableRow>中的子视图将排成N 列，如果<TableRow>内有N个子视图就将该行划分为N列。整个表的列是是根据表格每行中最多有多少列来决定的，假设整个表格中有2行 是3列，1行是4列则表格将分为4列。

 

还有一个需要注意的特性是：TableLayout默认会将所有的子节点当成它的一行数据，而且你可以放任意的View到TableLayout 中，默认它会将它的直接子节点当成一行，所以你可以定义任意View对象在TableLayout中，它们默认会各自占用一行，而且你对于 TableLayout的直接子节点设置 layout_width=”wrap_content”属性将不会生效，因为默认它会重写成fill_parent。

 

TableLayout还有一个特殊的属性：stretchColumns用来设置需要拉宽的列，因为有的列可能不会填满区域，为了布局的美观你可 以定义哪个列将进行拉宽。用逗号隔开的列值来指定哪些列需要拉宽，列值是从0开始的，如果你需要拉升第2和第3列你可以设置 stretchColumns=”1,2″。同样的道理，如果你需要紧缩一个列你可以使用：shrinkColumns来指定， 如果你要让某些列不可见，可以通过设置collapseColumns属性，这些的用法都跟stretchColumns一样。

 

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1"
    >  
    <TableRow>
	    <TextView
	    	android:text="Open..."
	    />
	    <TextView
	    	android:text="Ctrl-O"
	    	android:gravity="right"
	    />
    </TableRow>
    <TableRow>
	    <TextView
	    	android:text="Save As..."
	    />
	    <TextView
	    	android:text="Ctrl-Shift-S"
	    	android:gravity="right"
	    />
    </TableRow>    
</TableLayout>

 

 

 

 

RelativeLayout：

 

RelativeLayout是一个比较复杂、难用的布局管理对象，它是用定义各个视图相对的位置来管理布局。它一个好用的地方是嵌套的布局层次 少，假设你要做一个Table布局，使用LinearLayout来做的话内部使用多个LinearLayout来协作完成，这样整个视图对象的嵌套层次 就变多了，而手机因为处理器性能不高、内存也不多，所以当嵌套层次多时手机响应的速度就会变慢。而RelativeLayout就是用来弥补这个不足，它 不需要嵌套多个布局对象就可以完成复杂的布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#008000"
    >  
    <TextView
    	android:id="@+id/label"
    	android:text="Type here:"
    	android:layout_width="match_parent"
    	android:layout_height="wrap_content"
    	/>
    <EditText
    	android:id="@+id/entry"
    	android:layout_width="match_parent"
    	android:layout_height="wrap_content"
    	android:layout_below="@id/label"
    	/>	
    <Button
    	android:id="@+id/ok"
    	android:text="OK"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_below="@id/entry"
    	android:layout_alignParentRight="true"
    	/>
    <Button
    	android:id="@+id/cancel"
    	android:text="Cancel"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_toLeftOf="@id/ok"
    	android:layout_alignTop="@id/ok"
    	/>
</RelativeLayout>