我的Android学习之旅[6]——以示例程序来展示Android的几种布局方式

我的Android学习之旅[6]——以示例程序来展示Android的几种布局方式

      ——不积跬步，无以至千里;不积小流，无以成江海   

      通常我们开发的应用程序都是需要具有友好的用户界面，那么Android中提供了哪些布局方式呢?当我们构思好了所需要的各种控件的时候，怎样才能将它们放到Android设备屏幕上正确的位置呢?在Android中，Layout是负责管理控件在屏幕的位置的类，并且提供了几个简单的布局模型，开发人员通过将这几种布局模型的组合可以构建出我们想要的复杂的用户界面。本文中，将会对其一一做简单的介绍，笔者主要写了一个简单的程序，以一个ListView显示五种布局，读者可以点击相应的布局选项查看布局效果。（注：由于内容比较多，加上笔者最近复习考试，所以内容不全，后面慢慢补上）

       

       （主界面程序列出五种基本的布局方式，选择各种布局可以查看效果）

        

    1、 线性布局

    线性布局方式是我们应用程序中最常用的布局方式，主要提供控件水平或者垂直排列的模型，在主界面中点击LinearLayout选项，将会进入线性布局效果显示界面，如下图：

      

     

     查看该布局界面文件，如下所示：      

线性界面布局内容

      从上述我们可以看出，通过灵活的组合LinearLayout布局方式，可以很容易的设计出复杂的一些界面。如下图所示：

     

     

     2、 坐标布局

     坐标布局对于有过.Net Winform开发经验的人员来说应该比较熟悉了，即控件的在父容器上所处的位置主要是有其横纵坐标决定的~在坐标布局中，坐标系如下所示：

    

       对于该布局的示例效果，笔者主要是通过按左右键来控制小人左右移动来讲解的，如下图：

              

    

                      

       

       界面布局内容如下： 

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas./apk/res/android" 
   android:id="@+id/AbsoluteLayout01" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent" 
   >
   <TextView android:id="@+id/txtIntro"
     android:text="按左右键控制小人运动"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_x="20dip"
     android:layout_y="20dip">
   </TextView>
   <ImageView android:id="@+id/imgMan"            
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_x="100dip"
      android:layout_y="100dip">
   </ImageView>     
</AbsoluteLayout>

    

      实现控制小人左右走动的动画代码在AbsoluteLayoutActivity.java文件中，内容如下： 

控制人物运动代码

      从这个例子可以看出，实现帧动画的一种方式就是通过不断的改变ImageView控件的横纵坐标，同时更换背景图片即可。     

 

   3、 表格布局        

        表格布局主要以行列的形式来管理子控件，其中每一行即一个TableRow对象，每个TableRow对象可以添加子控件，并且每加入一个空间即相当于添加了一列。本文中的示例效果如下所示： 

        

        表格界面布局文件内容如下：    

表格布局内容

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas./apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content">
  <!-- 隐藏第2,3,4列 -->
  <TableLayout 
      android:id="@+id/table1"      
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:collapseColumns="1,2,3"
  >
  <TextView
      android:id="@+id/txt1"
      android:gravity="center"
      android:text="Table1"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
  />
  <TableRow>
     <TextView android:text="col0"></TextView>
     <TextView android:text="col1"></TextView>
     <TextView android:text="col2"></TextView>
     <TextView android:text="col3"></TextView>
  </TableRow>   
  </TableLayout>
  
  <!-- 设置第二列可伸展,过长可将后面的列挤出可使区 -->
  <TableLayout
      android:id="@+id/table2"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:stretchColumns="1"
  >
  <TextView
      android:id="@+id/txt2"
      android:gravity="center"
      android:text="Table2"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
  >
  </TextView>
  <TableRow>
     <TextView android:text="col0"></TextView>
     <TextView android:text="col1"></TextView>
     <TextView android:text="col2"></TextView>
     <TextView android:text="col3"></TextView>
  </TableRow>
  </TableLayout>
  
   <!-- 设置第一列可以收缩 -->
  <TableLayout
      android:id="@+id/table3"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:shrinkColumns="0"
  >
  <TextView
      android:id="@+id/txt3"
      android:gravity="center"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Table3"
  >
  </TextView>
  <TableRow>
     <TextView android:text="welcome to world of android"></TextView>
     <TextView android:text="col1"></TextView>
     <TextView android:text="col2"></TextView>
     <TextView android:text="col3"></TextView>
  </TableRow>
  </TableLayout>
  
  <!-- 对各列未作设置,即不可伸缩 -->
  <TableLayout
      android:id="@+id/table4"
      android:gravity="center"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
  >
   <TextView
      android:id="@+id/txt3"
      android:gravity="center"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Table4"
  >
  </TextView>
  <TableRow>
     <TextView android:text="col0"></TextView>
     <TextView android:text="this column will be very long"></TextView>
     <TextView android:text="col2"></TextView>
     <TextView android:text="col3"></TextView>
  </TableRow>
  </TableLayout> 
</LinearLayout>

        展开上述布局内容，最外层是一个垂直布局的LinearLayout的，在其中有四个TableLayout布局，分别展示了四种不同类型的TableLayout布局方式。

         

       4、 相对布局

             

       5、 帧布局

           点击FrameLayout选项，将会进入帧布局效果显示界面，如下图：

           

           上图看上去是不是有点不自然，这是因为上图是通过两个ImageView图片显示控件将两张图片叠在一起显示的。先看下布局界面是怎么编写的：            

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas./apk/res/android"
   android:id="@+id/FrameLayout01" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent" 
   >   
   <ImageView
     android:id="@+id/img1"
     android:src="@drawable/shirt"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">
   </ImageView>
     
   <ImageView 
     android:id="@+id/img2"
     android:paddingLeft="100dip"
     android:paddingTop="18dip"
     android:src="@drawable/head1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">   
   </ImageView> 
</FrameLayout>

 

       可见第一个ImageView控件显示的是T-shirt图片，而第二个ImageView控件则是显示我爱罗的头像。需要注意的是，在帧布局中，先添加的图片会被后添加的图片覆盖。