相对布局管理器

其实不管是什么布局,要想学好它,必须要知道它里面包含的方法,如果连里面的方法都不知道,不会用,怎么能够写出好的代码来呢?

布局的方法很简单,下面我主要写一下布局的属性方法和实例。

1.线性布局

线性布局由LinearLayout类来代表,它可以将容器里的组件一个一个的排列起来,但需要注意的是,当一行或一列排满后,线性布局不会自动换行,后面的东西讲不会显示出来。

xml属性:

android:gravity:设置布局管理器内组件的对齐方式。该属性支持top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical、clip_horizontal、start、end几个属性值。也可以同时指定多种对齐方式的组合,例如left|center_vertica代表出现在屏幕左边而且是垂直居中

android:orientation:设置布局管理器内组件的排列方式,可以设置为horizontal也可以设置为vertical两个值中的一个。

下面演示一种线性布局方式:


你能想象一下这是什么布局方式吗?

[html]  view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:gravity="right" >  
  11.   
  12.         <TextView  
  13.             android:layout_width="wrap_content"  
  14.             android:layout_height="wrap_content"  
  15.             android:text="@string/name_text" />  
  16.   
  17.         <EditText  
  18.             android:id="@+id/nameText"  
  19.             android:layout_width="fill_parent"  
  20.             android:layout_height="wrap_content" />  
  21.     </LinearLayout>  
  22.   
  23.     <LinearLayout  
  24.         android:layout_width="fill_parent"  
  25.         android:layout_height="wrap_content"  
  26.         android:gravity="right" >  
  27.   
  28.         <Button  
  29.             android:id="@+id/ok_btn"  
  30.             android:layout_width="wrap_content"  
  31.             android:layout_height="wrap_content"  
  32.             android:text="@string/ok_text" />  
  33.   
  34.         <Button  
  35.             android:id="@+id/cancel_btn"  
  36.             android:layout_width="wrap_content"  
  37.             android:layout_height="wrap_content"  
  38.             android:text="@string/cancel_text" />  
  39.     </LinearLayout>  
  40.   
  41. </LinearLayout>  
上面使用的是线性布局,通过使线性布局嵌套,组合出这种新的效果。

2.表格布局

xml属性:

andriod:collapseColumns:设置需要被隐藏的列的列序号

andriod:shrinkColumns:设置需要被收缩的列的列序号

andriod:stretchColumns:设置需要被拉伸的列的列序号


下面演示一种表格布局的例子:

xml布局代码如下:

[html]  view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"   
  5.     android:stretchColumns="0">  
  6.       
  7.     <TableRow >  
  8.   
  9.         <TableLayout  
  10.             android:layout_width="fill_parent"  
  11.             android:layout_height="fill_parent"  
  12.             android:stretchColumns="1" >  
  13.   
  14.             <TableRow >  
  15.   
  16.                 <TextView  
  17.                     android:layout_width="fill_parent"  
  18.                     android:layout_height="wrap_content"  
  19.                     android:text="@string/app_name" />  
  20.             </TableRow>  
  21.         </TableLayout>  
  22.     </TableRow>  
  23.   
  24.     <TableRow >  
  25.   
  26.         <TableLayout  
  27.             android:layout_width="fill_parent"  
  28.             android:layout_height="fill_parent"  
  29.             android:stretchColumns="0,1,2,3" >  
  30.   
  31.             <TableRow >  
  32.   
  33.                 <TextView  
  34.                     android:layout_width="fill_parent"  
  35.                     android:layout_height="wrap_content"  
  36.                     android:text="@string/text1" />  
  37.   
  38.                 <TextView  
  39.                     android:layout_width="fill_parent"  
  40.                     android:layout_height="wrap_content"  
  41.                     android:text="@string/text2"  />  
  42.   
  43.                 <TextView  
  44.                     android:layout_width="fill_parent"  
  45.                     android:layout_height="wrap_content"  
  46.                     android:text="@string/text3"  />  
  47.   
  48.                 <TextView  
  49.                     android:layout_width="fill_parent"  
  50.                     android:layout_height="wrap_content"  
  51.                     android:text="@string/text4"  />  
  52.             </TableRow>  
  53.         </TableLayout>  
  54.     </TableRow>  
  55.     <TableRow >  
  56.   
  57.         <TableLayout  
  58.             android:layout_width="fill_parent"  
  59.             android:layout_height="fill_parent"  
  60.             android:stretchColumns="0,1,2,3" >  
  61.   
  62.             <TableRow >  
  63.   
  64.                 <EditText  
  65.                     android:layout_width="fill_parent"  
  66.                     android:layout_height="wrap_content"  
  67.                       />  
  68.   
  69.                 <EditText  
  70.                     android:layout_width="fill_parent"  
  71.                     android:layout_height="wrap_content"  
  72.                       />  
  73.   
  74.                 <EditText  
  75.                     android:layout_width="fill_parent"  
  76.                     android:layout_height="wrap_content"  
  77.                       />  
  78.   
  79.                 <EditText  
  80.                     android:layout_width="fill_parent"  
  81.                     android:layout_height="wrap_content"  
  82.                       />  
  83.             </TableRow>  
  84.         </TableLayout>  
  85.     </TableRow>  
  86.     <TableRow >  
  87.   
  88.         <TableLayout  
  89.             android:layout_width="fill_parent"  
  90.             android:layout_height="fill_parent"  
  91.             android:stretchColumns="0,1,2,3" >  
  92.   
  93.             <TableRow >  
  94.   
  95.                 <EditText  
  96.                     android:layout_width="fill_parent"  
  97.                     android:layout_height="wrap_content"  
  98.                       />  
  99.   
  100.                 <EditText  
  101.                     android:layout_width="fill_parent"  
  102.                     android:layout_height="wrap_content"  
  103.                       />  
  104.   
  105.                 <EditText  
  106.                     android:layout_width="fill_parent"  
  107.                     android:layout_height="wrap_content"  
  108.                       />  
  109.   
  110.                 <EditText  
  111.                     android:layout_width="fill_parent"  
  112.                     android:layout_height="wrap_content"  
  113.                       />  
  114.             </TableRow>  
  115.         </TableLayout>  
  116.     </TableRow>  
  117.     <TableRow >  
  118.   
  119.         <TableLayout  
  120.             android:layout_width="fill_parent"  
  121.             android:layout_height="fill_parent"  
  122.             android:stretchColumns="0,1,2,3" >  
  123.   
  124.             <TableRow >  
  125.   
  126.                 <EditText  
  127.                     android:layout_width="fill_parent"  
  128.                     android:layout_height="wrap_content"  
  129.                       />  
  130.   
  131.                 <EditText  
  132.                     android:layout_width="fill_parent"  
  133.                     android:layout_height="wrap_content"  
  134.                       />  
  135.   
  136.                 <EditText  
  137.                     android:layout_width="fill_parent"  
  138.                     android:layout_height="wrap_content"  
  139.                       />  
  140.   
  141.                 <EditText  
  142.                     android:layout_width="fill_parent"  
  143.                     android:layout_height="wrap_content"  
  144.                       />  
  145.             </TableRow>  
  146.         </TableLayout>  
  147.     </TableRow>  
  148.   
  149. </TableLayout>  
上面的代码写的很复杂,就是因为没有使用xml的相关属性方法,那如果使用方法,效果会怎么样呢?在这里就不做演示了。代码非常简便。

3.相对布局

RelativeLayout的XML属性:

android:gravity:设置该布局容器内部各子组建的对齐方式

android:ignoreGravity:设置哪个组件不受gravity组件的影响

为了控制该布局容器内个组件的布局分析,RelativeLayout提供了一个内部类:RelativeLayout.LayoutParams,该类提供了大量的XML属性来控制Rel布局容器子组件的布局分布。

RelativeLayout.LayoutParams里只能设为true、false的XML属性(boolean)

下面的方法翻译是本人自己翻译的,翻译的不对的地方,请留言指出,本人感激不尽。
android:layout_above控制该子组件位于给出ID组件的上方
android:layout_alignBaseline  控制该子组件位于给出ID组件的基准线位置

android:layout_alignBottom  控制该子组件位于给出ID组件的下边界对齐

android:layout_alignLeft  控制该子组件位于给出ID组件的左边界对齐

android:layout_alignParentBottom如果是真的,控制给子组件与父组件的下边界对齐

android:layout_alignParentLeft如果是真的,控制给子组件与父组件的左边界对齐

android:layout_alignParentRight如果是真的,控制给子组件与父组件的右边界对齐

android:layout_alignParentTopt如果是真的,控制给子组件与父组件的上边界对齐

android:layout_alignRight  控制该子组件位于给出ID组件的右边界对齐

android:layout_alignTop  控制该子组件位于给出ID组件的上边界对齐

android:layout_alignWithParentIfMissing如果设置成true,则可以被用来当作找不到给出的其他组件可以对应的ID方法时的一个锚

android:layout_below  控制该子组件位于给出ID组件的下边界对齐

android:layout_centerHorizontal  如果真,使该组件在父组件中水平居中

android:layout_centerInParent  如果真,在其父组件中横向,纵向都居中

android:layout_centerVertical  如果真,使该子组件垂直居中于父组件

android:layout_toLeftOf 控制该子组件位于给出ID组件的左侧

android:layout_toRightOf 控制该子组件位于给出ID组件的右侧 


下面演示一种相对布局的例子:

梅花效果:

我做的图片不好,所以出来不太好看,大家凑合着看吧,嘿嘿

xml源代码如下:

[html]  view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TextView  
  8.         android:id="@+id/view1"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:background="@drawable/meihua"  
  12.         android:layout_centerInParent="true"/>  
  13.     <TextView  
  14.         android:id="@+id/view2"  
  15.         android:layout_width="wrap_content"  
  16.         android:layout_height="wrap_content"  
  17.         android:background="@drawable/meihua"  
  18.         android:layout_above="@id/view1"  
  19.         android:layout_alignLeft="@id/view1"/>  
  20.     <TextView  
  21.         android:id="@+id/view3"  
  22.         android:layout_width="wrap_content"  
  23.         android:layout_height="wrap_content"  
  24.         android:background="@drawable/meihua"  
  25.         android:layout_below="@id/view1"  
  26.         android:layout_alignLeft="@id/view1"/>  
  27.     <TextView  
  28.         android:id="@+id/view4"  
  29.         android:layout_width="wrap_content"  
  30.         android:layout_height="wrap_content"  
  31.         android:background="@drawable/meihua"  
  32.         android:layout_toLeftOf="@id/view1"  
  33.         android:layout_alignTop="@id/view1"/>  
  34.     <TextView  
  35.         android:id="@+id/view5"  
  36.         android:layout_width="wrap_content"  
  37.         android:layout_height="wrap_content"  
  38.         android:background="@drawable/meihua"  
  39.         android:layout_toRightOf="@id/view1"  
  40.         android:layout_alignBottom="@id/view1"/>  
  41.   
  42. </RelativeLayout>  

4.帧布局

帧布局由FrameLayout所代表,FrameLayout直接继承了ViewGroup组件。

帧布局容器为每个加入其中的组件创建一个空白的区域(成为一帧),所有每个子组件占据一帧,这些帧都会根据gravity属性执行自动对齐。

XML属性:

android:foreground 设置该帧布局容器的前景图像

android:foregroundGravity 定义绘制前景图像的gravity属性

下面演示一个帧布局的应用:

霓虹灯效果:



写这个代码我们要做的第一步就是:添加7个大小高度完全相同,宽度递减30的TextView,保证最先添加的TextView不会被完全遮挡。(layout中的xml)

[html]  view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TextView  
  8.         android:id="@+id/view01"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:background="#ff0000"  
  12.         android:width="210px"  
  13.         android:height="50px"/>  
  14.     <TextView  
  15.         android:id="@+id/view02"  
  16.         android:layout_width="fill_parent"  
  17.         android:layout_height="wrap_content"  
  18.         android:background="#dd0000"  
  19.         android:width="180px"  
  20.         android:height="50px"/>  
  21.     <TextView  
  22.         android:id="@+id/view03"  
  23.         android:layout_width="fill_parent"  
  24.         android:layout_height="wrap_content"  
  25.         android:background="#bb0000"  
  26.         android:width="150px"  
  27.         android:height="50px"/>  
  28.     <TextView  
  29.         android:id="@+id/view04"  
  30.         android:layout_width="fill_parent"  
  31.         android:layout_height="wrap_content"  
  32.         android:background="#990000"  
  33.         android:width="12px"  
  34.         android:height="50px"/>  
  35.     <TextView  
  36.         android:id="@+id/view05"  
  37.         android:layout_width="fill_parent"  
  38.         android:layout_height="wrap_content"  
  39.         android:background="#770000"  
  40.         android:width="90px"  
  41.         android:height="50px"/>  
  42.     <TextView  
  43.         android:id="@+id/view06"  
  44.         android:layout_width="fill_parent"  
  45.         android:layout_height="wrap_content"  
  46.         android:background="#550000"  
  47.         android:width="60px"  
  48.         android:height="50px"/>  
  49.     <TextView  
  50.         android:id="@+id/view07"  
  51.         android:layout_width="fill_parent"  
  52.         android:layout_height="wrap_content"  
  53.         android:background="#330000"  
  54.         android:width="30px"  
  55.         android:height="50px"/>  
  56.   
  57. </LinearLayout>  

另外我们再在values中添加一个colors.xml在其中添加7中变化的颜色(要与背景颜色中的颜色相对应,以保证效果不变

[html]  view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <color name="color1">#330000</color>  
  4.     <color name="color2">#550000</color>  
  5.     <color name="color3">#770000</color>  
  6.     <color name="color4">#990000</color>  
  7.     <color name="color5">#bb0000</color>  
  8.     <color name="color6">#dd0000</color>  
  9.     <color name="color7">#ff0000</color>  
  10. </resources>  

好了,基本的布局写完了,那么现在开始实现颜色渐变吧,开始写Java代码吧

[java]  view plain copy print ?
  1. package song.activity;  
  2.   
  3. import java.util.Timer;  
  4. import java.util.TimerTask;  
  5.   
  6. import android.app.Activity;  
  7. import android.os.Bundle;  
  8. import android.os.Handler;  
  9. import android.os.Message;  
  10. import android.widget.TextView;  
  11.   
  12. public class FrameLayoutActivity extends Activity {  
  13.       
  14.     private int currentColor = 0;  
  15.     //定义一个颜色数组  
  16.     final int[] colors = new int[]  
  17.     {  
  18.         R.color.color7,  
  19.         R.color.color6,  
  20.         R.color.color5,  
  21.         R.color.color4,   
  22.         R.color.color3,  
  23.         R.color.color2,  
  24.         R.color.color1,   
  25.     };  
  26.     final int[] names = new int[]  
  27.     {  
  28.         R.id.view01,  
  29.         R.id.view02,  
  30.         R.id.view03,  
  31.         R.id.view04,  
  32.         R.id.view05,  
  33.         R.id.view06,  
  34.         R.id.view07  
  35.     };  
  36.     TextView[] views = new TextView[7];  
  37.     @Override  
  38.     public void onCreate(Bundle savedInstanceState)  
  39.     {  
  40.         super.onCreate(savedInstanceState);  
  41.         setContentView(R.layout.main);    
  42.         for (int i = 0 ; i < 7 ; i++)  
  43.         {  
  44.             views[i] = (TextView)findViewById(names[i]);  
  45.         }  
  46.         final Handler handler = new Handler()  
  47.         {  
  48.             @Override  
  49.             public void handleMessage(Message msg)  
  50.             {  
  51.                 //表明消息来自本程序所发送  
  52.                 if(msg.what == 0x1122)  
  53.                 {  
  54.                     //依次改变7个TextView的背景色  
  55.                     for(int i = 0 ; i < 7 - currentColor ; i++)    
  56.                     {  
  57.                         views[i].setBackgroundResource(colors[i + currentColor]);  
  58.                     }  
  59.                     for(int i = 7 - currentColor , j = 0 ; i < 7 ; i++ ,j++)  
  60.                     {  
  61.                         views[i].setBackgroundResource(colors[j]);  
  62.                     }  
  63.                 }  
  64.                 super.handleMessage(msg);  
  65.             }  
  66.         };  
  67.         //定义一个线程周期性的改变currentColor变量值  
  68.         new Timer().schedule(new TimerTask()  
  69.         {  
  70.             @Override  
  71.             public void run()  
  72.             {  
  73.                 currentColor++;  
  74.                 if(currentColor >= 6)  
  75.                 {  
  76.                     currentColor = 0;  
  77.                 }  
  78.                 //发送一条消息通知系统改变7个TextView组件的背景色  
  79.                 Message m = new Message();  
  80.                 //给该消息定义一个标识  
  81.                 m.what = 0x1122;  
  82.                 handler.sendMessage(m);   
  83.             }         
  84.         }, 0 , 100);   
  85.     }  
  86. }  
相关文章
相关标签/搜索