[转帖]Android之六大布局_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3528 | 回复: 0   主题: [转帖]Android之六大布局        下一篇 
jie.liang
注册用户
等级:少校
经验:1003
发帖:77
精华:0
注册:2013-10-11
状态:离线
发送短消息息给jie.liang 加好友    发送短消息息给jie.liang 发消息
发表于: IP:您无权察看 2013-10-18 14:21:14 | [全部帖] [楼主帖] 楼主

Android有常见的五大布局FrameLayout、TableLayout、LinearLayout、AbsoluteLayout、RelativeLayout,Android4.0之后新增了一个GridLayout布局。下面就针对每一种布局做详细解释。

1、帧布局(FrameLayout)

帧布局就是简单的一层一层的往上叠加。

[html]

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.     <TextView  
  6.         android:layout_width="200dp"  
  7.         android:layout_height="200dp"  
  8.         android:background="#0000ff"/>  
  9.      <TextView  
  10.         android:layout_width="150dp"  
  11.         android:layout_height="150dp"  
  12.         android:background="#00ff00"/>  
  13. </FrameLayout>  


2、表格布局(TableLayout)
顾名思义,表格布局就如同表格一样,有行有列。

[html]

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:collapseColumns="2"      //隐藏某列,(从0开始)  
  6.     android:shrinkColumns="1"        //伸缩某列  
  7.     android:stretchColumns="1" >     //延长列至填充剩余空间  
  8.     <TableRow>                       //定义一行  
  9.         <TextView                     //有几个组件就自动生成几列  
  10.             android:layout_width="wrap_content"  
  11.             android:layout_height="wrap_content"  
  12.             android:text="@string/username" />  
  13.         <EditText  
  14.             android:layout_width="wrap_content"  
  15.             android:layout_height="wrap_content"  
  16.             android:hint="@string/username"  
  17.             android:text="@string/username" />  
  18.         <TextView  
  19.             android:layout_width="match_parent"  
  20.             android:layout_height="match_parent"  
  21.             android:text="@string/username" />  
  22.     </TableRow>  
  23.     <TableRow>  
  24.         <TextView  
  25.             android:layout_width="wrap_content"  
  26.             android:layout_height="wrap_content"  
  27.             android:text="@string/password" />  
  28.         <EditText  
  29.             android:layout_width="wrap_content"  
  30.             android:layout_height="wrap_content"  
  31.             android:hint="@string/username"  
  32.             android:text="@string/username" />  
  33.     </TableRow>  
  34. </TableLayout>  

3、线性布局(LinearLayout)

[html]

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.     <LinearLayout  
  7.         android:layout_width="match_parent"  
  8.         android:layout_height="wrap_content"  
  9.         android:orientation="horizontal"   
  10.         android:layout_weight="1">                 //设置权重,如果其他控件没有设置,那么此控件将占据剩余的空间  
  11.         <TextView  
  12.             android:layout_width="wrap_content"  
  13.             android:layout_height="wrap_content"  
  14.             android:text="@string/username" />  
  15.         <EditText  
  16.             android:layout_width="match_parent"  
  17.             android:layout_height="match_parent"  
  18.              android:hint="@string/username" />  
  19.     </LinearLayout>  
  20.     <LinearLayout  
  21.         android:layout_width="match_parent"  
  22.         android:layout_height="wrap_content"  
  23.         android:orientation="horizontal"   
  24.         android:layout_weight="1">  
  25.         <TextView  
  26.             android:layout_width="wrap_content"  
  27.             android:layout_height="wrap_content"  
  28.             android:text="@string/password" />  
  29.         <EditText  
  30.             android:layout_width="match_parent"  
  31.             android:layout_height="match_parent"   
  32.              android:hint="@string/username"/>  
  33.     </LinearLayout>  
  34.     <Button  
  35.         android:layout_width="wrap_content"  
  36.         android:layout_height="wrap_content"  
  37.         android:layout_gravity="right"  
  38.         android:layout_weight="1"  
  39.         android:text="@string/login" />  
  40. <!-- layout_gravity:设置布局方向,相对于父控件    gravity:设置布局方向,相对于子控件 -->  
  41. </LinearLayout>  

4、绝对布局(AbsoluteLayout)
通过确定与源点的横纵距离确定组件的位置。Android的坐标源点是左上角,右为X的正方向,下为Y的正方向。

[html]

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.     <TextView   
  6.         android:layout_width="wrap_content"  
  7.         android:layout_height="wrap_content"  
  8.         android:text="@string/username"  
  9.         android:layout_x="20dp"  
  10.         android:layout_y="20dp"/>  
  11.     <EditText   
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="wrap_content"  
  14.         android:text="@string/username"  
  15.         android:layout_x="150dp"  
  16.         android:layout_y="10dp"/>  
  17. </AbsoluteLayout>  


5、相对布局(RelativeLayout)
主要是通过id来定位同一布局文件中不同组件的位置

[html]

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:paddingBottom="@dimen/activity_vertical_margin"  
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  7.     android:paddingRight="@dimen/activity_horizontal_margin"  
  8.     android:paddingTop="@dimen/activity_vertical_margin"  
  9.     tools:context=".MainActivity" >  
  10.     <TextView  
  11.         android:id="@+id/textBase"  
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="wrap_content"  
  14.         android:layout_centerInParent="true"  
  15.         android:background="@drawable/ic_launcher" />  
  16.     <TextView  
  17.         android:id="@+id/textleft"  
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content"  
  20.         android:layout_alignBottom="@id/textBase"  
  21.         android:layout_toLeftOf="@id/textBase"     //在textBase左边  
  22.         android:background="@drawable/ic_launcher" />  
  23.     <TextView  
  24.         android:id="@+id/textright"  
  25.         android:layout_width="wrap_content"  
  26.         android:layout_height="wrap_content"  
  27.         android:layout_alignBottom="@id/textBase"  //与textBase下边对齐  
  28.         android:layout_toRightOf="@id/textBase"    //在textBase右边  
  29.         android:background="@drawable/ic_launcher" />  
  30.     <TextView  
  31.         android:id="@+id/texttop"  
  32.         android:layout_width="wrap_content"  
  33.         android:layout_height="wrap_content"  
  34.         android:layout_above="@id/textBase"  
  35.         android:layout_alignLeft="@id/textBase"  
  36.         android:background="@drawable/ic_launcher" />  
  37.     <TextView  
  38.         android:id="@+id/textbelow"  
  39.         android:layout_width="wrap_content"  
  40.         android:layout_height="wrap_content"  
  41.         android:layout_alignLeft="@id/textBase"  
  42.         android:layout_below="@id/textBase"  
  43.         android:background="@drawable/ic_launcher" />  
  44.     <TextView  
  45.         android:id="@+id/textlefttop"  
  46.         android:layout_width="wrap_content"  
  47.         android:layout_height="wrap_content"  
  48.         android:layout_alignBottom="@id/texttop"  
  49.         android:layout_toLeftOf="@id/texttop"  
  50.         android:background="@drawable/ic_launcher" />  
  51.     <TextView  
  52.         android:id="@+id/textrighttop"  
  53.         android:layout_width="wrap_content"  
  54.         android:layout_height="wrap_content"  
  55.         android:layout_alignBottom="@id/texttop"  
  56.         android:layout_toRightOf="@id/texttop"  
  57.         android:background="@drawable/ic_launcher" />  
  58.     <TextView  
  59.         android:id="@+id/textleftbelow"  
  60.         android:layout_width="wrap_content"  
  61.         android:layout_height="wrap_content"  
  62.         android:layout_alignBottom="@id/textbelow"  
  63.         android:layout_toLeftOf="@id/textbelow"  
  64.         android:background="@drawable/ic_launcher" />  
  65.     <TextView  
  66.         android:id="@+id/textrightbelow"  
  67.         android:layout_width="wrap_content"  
  68.         android:layout_height="wrap_content"  
  69.         android:layout_alignBottom="@id/textbelow"  
  70.         android:layout_toRightOf="@id/textbelow"  
  71.         android:background="@drawable/ic_launcher" />  
  72. </RelativeLayout>  

6、网格布局(GridLayout)

[html]

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:columnCount="5"         //定义网格的列数  
  6.     android:rowCount="5" >          //定义网格的行数  
  7.     <TextView  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:layout_columnSpan="5"    //占据5列  
  11.         android:layout_row="0"           //从第0列开始  
  12.         android:background="#ff0000"  
  13.         android:gravity="right"  
  14.         android:text="0"  
  15.         android:textSize="40dp" />  
  16.     <Button  
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_column="0"       //在第0列  
  20.         android:layout_row="1"          //在第1行  
  21.         android:text="7" />  
  22.     <Button  
  23.         android:layout_width="wrap_content"  
  24.         android:layout_height="wrap_content"  
  25.         android:layout_column="1"  
  26.         android:layout_row="1"  
  27.         android:text="8" />  
  28.     <Button  
  29.         android:layout_width="wrap_content"  
  30.         android:layout_height="wrap_content"  
  31.         android:layout_column="2"  
  32.         android:layout_row="1"  
  33.         android:text="9" />  
  34.     <Button  
  35.         android:layout_width="wrap_content"  
  36.         android:layout_height="wrap_content"  
  37.         android:layout_column="3"  
  38.         android:layout_row="1"  
  39.         android:text="/" />  
  40.     <Button  
  41.         android:layout_width="wrap_content"  
  42.         android:layout_height="wrap_content"  
  43.         android:layout_column="4"  
  44.         android:layout_row="1"  
  45.         android:text="%" />  
  46.     <Button  
  47.         android:layout_width="wrap_content"  
  48.         android:layout_height="wrap_content"  
  49.         android:layout_column="0"  
  50.         android:layout_row="2"  
  51.         android:text="4" />  
  52.     <Button  
  53.         android:layout_width="wrap_content"  
  54.         android:layout_height="wrap_content"  
  55.         android:layout_column="1"  
  56.         android:layout_row="2"  
  57.         android:text="5" />  
  58.     <Button  
  59.         android:layout_width="wrap_content"  
  60.         android:layout_height="wrap_content"  
  61.         android:layout_column="2"  
  62.         android:layout_row="2"  
  63.         android:text="6" />  
  64.     <Button  
  65.         android:layout_width="wrap_content"  
  66.         android:layout_height="wrap_content"  
  67.         android:layout_column="3"  
  68.         android:layout_row="2"  
  69.         android:text="*" />  
  70.     <Button  
  71.         android:layout_width="wrap_content"  
  72.         android:layout_height="wrap_content"  
  73.         android:layout_column="4"  
  74.         android:layout_row="2"  
  75.         android:text="1/x" />  
  76.     <Button  
  77.         android:layout_width="wrap_content"  
  78.         android:layout_height="wrap_content"  
  79.         android:layout_column="0"  
  80.         android:layout_row="3"  
  81.         android:text="1" />  
  82.     <Button  
  83.         android:layout_width="wrap_content"  
  84.         android:layout_height="wrap_content"  
  85.         android:layout_column="1"  
  86.         android:layout_row="3"  
  87.         android:text="2" />  
  88.     <Button  
  89.         android:layout_width="wrap_content"  
  90.         android:layout_height="wrap_content"  
  91.         android:layout_column="2"  
  92.         android:layout_row="3"  
  93.         android:text="3" />  
  94.     <Button  
  95.         android:layout_width="wrap_content"  
  96.         android:layout_height="wrap_content"  
  97.         android:layout_column="3"  
  98.         android:layout_row="3"  
  99.         android:text="-" />  
  100.     <Button  
  101.         android:layout_width="wrap_content"  
  102.         android:layout_height="wrap_content"  
  103.         android:layout_column="4"  
  104.         android:layout_row="3"  
  105.         android:layout_rowSpan="2"  
  106.         android:layout_gravity="fill_vertical"   //在垂直方向上填充2行  
  107.         android:text="=" />  
  108.     <Button  
  109.         android:layout_width="wrap_content"  
  110.         android:layout_height="wrap_content"  
  111.         android:layout_column="0"  
  112.         android:layout_row="4"  
  113.         android:layout_columnSpan="2"  
  114.         android:layout_gravity="fill_horizontal"  //在水平方向上填充2列  
  115.         android:text="0" />  
  116.     <Button  
  117.         android:layout_width="wrap_content"  
  118.         android:layout_height="wrap_content"  
  119.         android:layout_column="2"  
  120.         android:layout_row="4"  
  121.         android:text="." />  
  122.     <Button  
  123.         android:layout_width="wrap_content"  
  124.         android:layout_height="wrap_content"  
  125.         android:layout_column="3"  
  126.         android:layout_row="4"  
  127.         android:text="+" />  
  128. </GridLayout>  

总结:6种布局如上所示,一般都可以根据名称理解其作用。写布局问件时关键要细心,弄清楚组件具体摆放的位置,根据实际需求选择布局。而且,布局可以嵌套使用,使得组件的展现形式更加灵活多变!




赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论