Android学习笔记（七） 布局

　　说起这布局其实开发界面总会涉及到的，在winForm开发有用到布局，但对于拖拽控件组织的窗体来说有相对布局，里面也有布局控件，Java的窗体本身是基于布局控件的，但并非默认以某种布局作容器。winPhone的记得默认是网格布局的，这点跟WPF类似。那么到Android里面就有以下布局类型

  • FrameLayout:系统的默认布局
  • LinearLayout:让里面所有的控件都以线性方式排列，要么垂直要么水平
  • AbsoluteLayout:用(x,y)坐标来确定控件位置的布局方式
  • RelativeLayout:通过控件通过停靠或者与其他控件的位置来定位的布局方式
  • TableLayout:通过行和列来确定位置的布局方式

其实对于每个控件而言，还有layout_width和layout_height这两个属性影响着布局

  • fill_parent则是占满了父容器的空间
  • wrap_content则是只适应内容的大小而调整大小

 

FrameLayout框架布局

　　这种布局比较奇怪，位于这种布局里面的所有控件都没有位置可言，所以控件都会对方在布局的左上角，但是有层次而言，最新加入的控件则位于最低端，最后加入则位于最顶层。如下面的布局文件

复制代码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent" >
 5 
 6     <Button
 7         android:id="@+id/button1"
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:text="Button" />
11 
12     <TextView
13         android:id="@+id/textView1"
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:text="Large Text1"
17         android:textColor="#ff0000"
18         android:textAppearance="?android:attr/textAppearanceLarge" />
19     
20         <TextView
21             android:id="@+id/textView2"
22             android:layout_width="wrap_content"
23             android:layout_height="wrap_content"
24             android:text="Large Text2"
25             android:textColor="#00ff00"
26             android:textAppearance="?android:attr/textAppearanceLarge" />
27 
28     
29 </FrameLayout>
复制代码

预览效果如图所示

按钮位于最底层，接着到红色字体的TextView，最顶层的是绿色字体的TextView。

 

LinearLayou线性布局

　　这种布局模式对本人来说最熟悉不过了，到现时来说写了那么多布局文件几乎都是用这种布局形式，控件中的orientation属性决定了里面的控件是垂直排布还是水平排布vertical是垂直；Horizontal的是水平

如下面这个布局文件的

复制代码
 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 
 6     <Button
 7         android:id="@+id/button1"
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:text="Button1" />
11 
12     <Button
13         android:id="@+id/button2"
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:text="Button2" />
17 
18     <Button
19         android:id="@+id/button3"
20         android:layout_width="wrap_content"
21         android:layout_height="wrap_content"
22         android:text="Button3" />
23 
24 </LinearLayout>
复制代码

 

对应的是这样显示

如果把上述代码中的android:orientation="vertical"换成android:orientation="horizontal"则会变成这样

 

RelativeLayout绝对布局

　　绝对布局与winForm窗体中的布局一样，也是以容器左上角作为坐标原点（0，0），水平往右是x轴正方向，垂直往下是y轴正方向。已控件的左上角的坐标来给控件定位。通过layout_x和layout_y属性设置控件的x坐标和y坐标。下面则是一例子

复制代码
 1 <AbsoluteLayout 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="76dp"
 8         android:layout_height="60dp"
 9         android:layout_x="31dp"
10         android:layout_y="36dp"
11         android:background="#ff0000"
12         android:text="Red"
13         android:textAppearance="?android:attr/textAppearanceLarge" />
14 
15     <TextView
16         android:id="@+id/textView3"
17         android:layout_width="75dp"
18         android:layout_height="44dp"
19         android:layout_x="74dp"
20         android:layout_y="73dp"
21         android:background="#00ff00"
22         android:text="Green"
23         android:textAppearance="?android:attr/textAppearanceLarge" />
24 
25     <TextView
26         android:id="@+id/textView2"
27         android:layout_width="63dp"
28         android:layout_height="53dp"
29         android:layout_x="134dp"
30         android:layout_y="94dp"
31         android:background="#0000ff"
32         android:text="Blue"
33         android:textAppearance="?android:attr/textAppearanceLarge" />
34 
35 </AbsoluteLayout>
复制代码

 

显示结果如下

放置的位置故意有重叠，可以看出同样有层次之分，放在最顶端的的是布局控件里最后一个子节点的控件就是排在最顶端的，在布局控件里面第一个子节点的空间是排在最底段的。

 

AbsoluteLayout相对布局

　　这个绝对布局是通过让控件内各个子控件相对于父容器的位置或者是各个子控件之间的相对位置实现的定位。这里先列举一部分用于相对于父容器定位的属性，然后贴出的代码则是以前在winPhone中遇到的九宫格定位例子

  • 　　 android:layout_alignParentLeft ： 该组件是否对齐父组件的左端
  • 　　 android:layout_alignParentRight ： 该组件是否齐其父组件的右端
  • 　　 android:layout_alignParentTop ： 该组件是否对齐父组件的顶部
  • 　　 android:layout_alignParentBottom ： 该组件是否对齐父组件的底部
  • 　　android:layout_centerInParent ： 该组件是否相对于父组件居中
  • 　　android:layout_centerHorizontal ： 该组件是否横向居中
  • 　　android:layout_centerVertical ： 该组件是否垂直居中
复制代码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
 3 
 4 <TextView
 5     android:layout_width="wrap_content"
 6     android:layout_height="wrap_content"
 7     android:layout_alignParentLeft="true"
 8     android:layout_alignParentTop="true"
 9     android:text="top,left"
10     />
11 
12 <TextView
13     android:layout_width="wrap_content"
14     android:layout_height="wrap_content"
15     android:layout_centerHorizontal="true"
16     android:text="top,middle"
17     />
18 
19 <TextView
20     android:layout_width="wrap_content"
21     android:layout_height="wrap_content"
22     android:layout_alignParentTop="true"
23     android:layout_alignParentRight="true"
24     android:text="top,right"
25     />
26 <TextView
27     android:layout_width="wrap_content"
28     android:layout_height="wrap_content"
29     android:layout_centerVertical="true"
30     android:text="middle,left"
31     />
32 
33 <TextView
34     android:layout_width="wrap_content"
35     android:layout_height="wrap_content"
36     android:layout_centerInParent="true"
37     android:text="Middle"
38     />
39 
40 <TextView
41     android:layout_width="wrap_content"
42     android:layout_height="wrap_content"
43     android:layout_centerVertical="true"
44     android:layout_alignParentRight="true"
45     android:text="middle,right"
46     />
47 <TextView
48     android:layout_width="wrap_content"
49     android:layout_height="wrap_content"
50     android:layout_alignParentLeft="true"
51     android:layout_alignParentBottom="true"
52     android:text="buttom,left"
53     />
54 
55 <TextView
56     android:layout_width="wrap_content"
57     android:layout_height="wrap_content"
58     android:layout_centerHorizontal="true"
59     android:layout_alignParentBottom="true"
60     android:text="buttom,middle"
61     />
62 
63 <TextView
64     android:layout_width="wrap_content"
65     android:layout_height="wrap_content"
66     android:layout_alignParentBottom="true"
67     android:layout_alignParentRight="true"
68     android:text="buttom,right"
69     />
70 
71 </RelativeLayout>
复制代码

 

上面有部分TextView的layout_alignParentLeft和layout_alignParentTop属性都没有设置，可见默认是对父容器的左上角对齐的。

还有另一部分属性是设置对各个子控件的相对位置

  • 　　　　android:layout_toLeftOf ： 该组件位于引用组件的左方
  • 　　　　android:layout_toRightOf ： 该组件位于引用组件的右方
  • 　　　　android:layout_above ： 该组件位于引用组件的上方
  • 　　　　android:layout_below ： 该组件位于引用组件的下方

这里抄袭了别人的例子

复制代码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
 3 <TextView android:id="@+id/text_01"
 4      android:layout_width="50dp" 
 5      android:layout_height="50dp" 
 6      android:background="#ff0000" 
 7      android:gravity="center" 
 8     android:layout_alignParentBottom="true" 
 9     android:text="Red"/>
10 
11 <TextView 
12     android:id="@+id/text_02" 
13     android:layout_width="50dp" 
14     android:layout_height="50dp" 
15     android:background="#00ff00" 
16     android:gravity="center" 
17     android:layout_above="@id/text_01" 
18     android:layout_centerHorizontal="true" 
19     android:text="Green"/>
20 
21 <TextView
22     android:id="@+id/text_03"
23     android:layout_width="50dp"
24     android:layout_height="50dp"
25     android:layout_above="@+id/text_01"
26     android:layout_toLeftOf="@+id/text_02"
27     android:background="#0000ff"
28     android:gravity="center"
29     android:text="Blue" />
30 
31 </RelativeLayout>
复制代码

 

　　其实对于相对布局还有几个属性，layout_marginLeft，layout_marginRight，layout_marginTop，layout_marginBottom，这几个属性可以设置与对齐边的距离，但是要分清楚当前控件的哪条边与对齐边作参照，这里我所描述的对齐边就是比如靠父容器左边的，对其边则是父容器的左边线，还有就是上图的Blue框是位于Red框上方的，则对齐边是Red的上边线，此时如果要让Blue上移的话，应该用marginBottom，因为Blue框用的是下边线。

 

TableLayout表单布局

　　表单布局最近在winForm里一直在用，但是Android的表单布局并非与winForm的一样。不过压根的还是分行和列去排布控件。若是要把winForm的TableLayoutPanel比作一个二维数组的话，那我觉得Android的TableLayout则是一个交错数组。在TableLayout中有若干个行——TableRow，然后控件都塞在每个TableRow里面，不限个数，没一个控件就归一列，并且自动填充整个单元格，但是单元格的在这里是无形的，这里没有明显列的概念，控件有多宽，纯粹取决于那一列中最宽的控件的宽度，下面则弄个我最喜欢用来做demo的登陆界面

复制代码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <TableLayout 
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4      
 5      android:layout_width="fill_parent"
 6       android:layout_height="fill_parent">
 7 <TableRow 
 8     android:layout_width="fill_parent">
 9        <TextView 
10            android:layout_width="wrap_content"
11            android:layout_height="wrap_content"
12            android:text="ID:"/>
13        <EditText/>
14        
15 </TableRow>
16 <TableRow 
17     android:layout_width="fill_parent">
18        <TextView 
19            android:layout_width="wrap_content"
20            android:layout_height="wrap_content"
21            android:text="Password:"/>
22        <EditText
23            android:layout_width="70dp"/>
24     
25 </TableRow>
26 </TableLayout>
复制代码

 

posted @   猴健居士  阅读(297)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示
AI IDE Trae