android基础入门布局讲解

一.LinearLayout(线性布局):


      LinearLayout是一行或列只能放置一个控件的先行布局,现在看一个实例:

      activity_main.xml :

[html]  view plain copy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical" >  
  5.         <TextView  
  6.         android:layout_width="wrap_content"  
  7.         android:layout_height="wrap_content"  
  8.         android:text="@string/hello_world"  
  9.         />  
  10.         <TextView  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:text="@string/hello_world"  
  14.         />  
  15.         <TextView  
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content"  
  18.         android:text="@string/hello_world"  
  19.         />  
  20. </LinearLayout>  
运行图片:



  从上图可以看出控件是垂直排列的,我们通过android:orientation="vertical"来设定LinearLayout是垂直排列的。

  讲解常用的公共属性:

  android:layout_width   指定控件或视图组的宽度     

  android:layout_height   指定控件或视图组的高度

  android:layout_marginTop 指定控件或视图组顶边额外的空间

  android:layout_marginBottom 指定控件或视图组底边额外的空间

  android:layout_marginLeft  指定控件或视图组左边的额外空间

  android:layout_marginRight 指定控件或视图组右边额外空间


其中为讲解下layout_width和layout_height中设置属性的意思:

1).fill_parent:

       设置一个构件的布局为fill_parent将强制性地使构件扩展,以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fill_parent将强制性让它布满整个屏幕。

2).match_parent:

        Android2.2中match_parent和fill_parent是一个意思 .两个参数意思一样,match_parent更贴切,于是从2.2开始两个词都可以用。那么如果考虑低版本的使用情况你就需要用fill_parent了

3).wrap_content:

        设置一个视图的尺寸为wrap_content将强制性地使视图扩展以显示全部内容,布局元素将根据内容更改大小。设置一个视图的尺寸为wrap_content大体等同于设置Windows控件的Autosize属性为True。


   

当把上面布局中的android:orientation="vertical"改成android:orientation="horizontal",这就是水平布局:

例子(修改上面的布局文件):

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="horizontal"  
  5.      >  
  6.         <TextView  
  7.         android:layout_width="100dp"  
  8.         android:layout_height="wrap_content"  
  9.         android:text="@string/hello_world"  
  10.         android:background="#ffffff"  
  11.         />  
  12.         <TextView  
  13.         android:layout_width="160dp"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="@string/hello_world"  
  16.         android:background="#ffd700"  
  17.         />  
  18.         <TextView  
  19.         android:layout_width="wrap_content"  
  20.         android:layout_height="wrap_content"  
  21.         android:text="@string/hello_world"  
  22.         android:background="#ffff00"  
  23.         />  
  24. </LinearLayout>  

运行图片:

我们从图可以看出当使用水平布局时,控件占据的是一列,

  android:background   该属性是设置背景颜色。

  android:layout_width 在设置该属性的时候我没有在使用给的三个属性值,而是自己定义的,这时候我们就需要了解下android的度量单位:

   1).dp  -- 与密度无关的像素,1dp相当于160dpi的屏幕上的1像素,在布局中当对控件指定尺寸时,推荐将dp作为度量单位。

   2).sp  -- 与比例无关的像素,与dp类似,推荐指定字体大小。

   3).pt   -- 磅,1磅等于1/72英寸(基于屏幕的物理尺寸)。

   4).px  -- 像素,对应屏幕上的实际尺寸,不建议使用此单位,因为您的应用程序会在不同屏幕尺寸的设备上可能不能正确显示。


二.RelativeLayout(相对布局):


    在很多时候线性布局不能满足我们的要求,例如我们需要在一行显示多个控件,这时我们就需要RelativeLayout来进行相对布局,RelativeLayout允许子元素指定他们相对于其他元素或父元素的位置(通过ID指定)。

   常用的属性:

android:layout_above     将该控件的底部至于给定ID的控件之上

android:layout_below     将该控件的顶部至于给定ID的控件之下

android:layout_toLeftOf    将该控件的右边缘和给定的ID的控件的左边缘对齐

android:layout_toRightOf    将该控件的左边缘和给定ID的控件的右边缘对齐

android:layout_alignRaseline     该控件的baseline和给定ID的控件的baseline对齐

android:layout_alignBottom    将该控件的底部边缘与给定ID控件的底部边缘

android:layout_alignLeft    将该控件的左边缘与给定的ID控件的左边缘对齐

android:layout_alignRight    将该控件的右边缘与给定ID控件的右边缘对齐

android:layout_alignTop    将给定控件的顶部边缘与给定ID控件的顶部对齐

android:layout_alignParentBottom    如果该值为true,则将该控件的底部和父控件的底部对齐

android:layout_alignParentLeft    如果该值为true,则将该控件的左边与父控件的左边对齐

android:layout_alignParentRight    如果该值为true,则将该控件的右边与父控件的右边对齐

android:layout_alignParentTop     如果该值为true,则将控件的顶部与父控件的顶部对齐
  
android:layout_centerHorizontal    如果值为真,该控件将被置于水平方向的中央。

android:layout_centerInParent     如果值为真,该控件将被置于父控件的水平方向和垂直方向的中央

android:layout_centerVertical     如果值为真,该控件被置于垂直方向的中央

android:layout_marginLeft    这是外边距。

android:layout_marginTop      上偏移的值;(相对于上边沿移动的值 xxdp)

android:layout_marginBottom       下偏移的值;

android:layout_marginLeft     左偏移的值;

android:layout_marginRight     右偏移的值;
      
实例演示:

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent" >  
  4.   
  5.     <TextView  
  6.         android:id="@+id/textView1"  
  7.         android:layout_width="wrap_content"  
  8.         android:layout_height="wrap_content"  
  9.         android:layout_alignParentLeft="true"  
  10.         android:layout_alignParentTop="true"  
  11.         android:text="请输入内容" />  
  12.   
  13.     <EditText  
  14.         android:id="@+id/editText1"  
  15.         android:layout_width="fill_parent"  
  16.         android:layout_height="wrap_content"  
  17.         android:layout_alignParentLeft="true"  
  18.         android:layout_below="@+id/textView1"  
  19.          >  
  20.     </EditText>  
  21.   
  22.     <Button  
  23.         android:id="@+id/button1"  
  24.         android:layout_width="wrap_content"  
  25.         android:layout_height="wrap_content"  
  26.         android:layout_alignParentRight="true"  
  27.         android:layout_below="@+id/editText1"  
  28.         android:text="确定" />  
  29.   
  30.     <Button  
  31.         android:id="@+id/button2"  
  32.         android:layout_width="wrap_content"  
  33.         android:layout_height="wrap_content"  
  34.         android:layout_alignBaseline="@+id/button1"  
  35.         android:layout_alignBottom="@+id/button1"  
  36.         android:layout_toLeftOf="@+id/button1"  
  37.         android:text="取消" />  
  38.    
  39. </RelativeLayout>  

运行图片:


   

对于上面这个例子线性布局就是无法实现的,而使用相对布局则轻松实现。


三.TableLayout(表单布局):


       TableLayout将子元素的位置分配到行或列。TableLayout是由许多个TableRow组成,其中放着0个或多个控件。

 实例:

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent" >  
  4.     <TableRow  
  5.         android:id="@+id/tableRow1"  
  6.         android:layout_width="fill_parent"  
  7.         android:layout_height="wrap_content" >  
  8.         <TextView  
  9.             android:id="@+id/textView1"  
  10.             android:layout_width="100dp"  
  11.             android:layout_height="wrap_content"  
  12.             android:text="User Name:" />  
  13.         <EditText  
  14.             android:id="@+id/editText1"  
  15.             android:layout_width="220dp"  
  16.             android:layout_height="wrap_content"  
  17.              />  
  18.     </TableRow>  
  19.     <TableRow  
  20.         android:id="@+id/tableRow2"  
  21.         android:layout_width="fill_parent"  
  22.         android:layout_height="wrap_content" >  
  23.         <TextView  
  24.             android:id="@+id/textView2"  
  25.             android:layout_width="100dp"  
  26.             android:layout_height="wrap_content"  
  27.             android:text="Password:" />  
  28.   
  29.         <EditText  
  30.             android:id="@+id/editText2"  
  31.             android:layout_width="220dp"  
  32.             android:layout_height="wrap_content"  
  33.             android:password="true"  
  34.              />  
  35.     </TableRow>  
  36.     <TableRow   
  37.         android:id="@+id/tableRow2"  
  38.         android:layout_width="fill_parent"  
  39.         android:layout_height="wrap_content" >  
  40.         <TextView />  
  41.         <Button   
  42.             android:id="@+id/button1"  
  43.             android:text="登陆"             
  44.             />  
  45.     </TableRow>  
  46. </TableLayout>  


运行图片:


  

在位于Password TextView之下的单元格用<TextView />填充,当如果不这样做时,则登陆按钮将显示在Password TextView之下。

       


四. FrameLayout布局:


        FrameLayout是最简单的一个布局,在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡。

实例演示:

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  2.     android:orientation="vertical"   
  3.     android:layout_width="fill_parent"  
  4.      android:layout_height="fill_parent">  
  5. <TextView   
  6.     android:layout_width="fill_parent"   
  7.     android:layout_height="fill_parent"   
  8.     android:background="#ffdab9"  
  9.      android:gravity="center"  
  10.       android:text="1"/>  
  11. <TextView   
  12.     android:layout_width="260dp"  
  13.      android:layout_height="300dp"  
  14.       android:background="#ffd700"  
  15.        android:gravity="center"  
  16.         android:text="2"/>  
  17. <TextView   
  18.     android:layout_width="50dp"   
  19.     android:layout_height="50dp"   
  20.     android:background="#deb887"   
  21.     android:gravity="center"  
  22.      android:text="3"/>  
  23. </FrameLayout>  

运行图片:

 

FrameLayout布局是把控件不断堆叠在前一个上面。

五.AbsoluteLayout(绝对位置布局):
  
   AbsoluteLayout可用于指定其子元素的确切位置(android:layout_x和android:layout_y),不过这种布局不推荐使用,因为不同分辨率的屏幕上显示的位置会不相同。这种布局不过多介绍了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值