.Net程序员玩转Android开发---(7)相对布局RelativeLayout

    相对布局RelativeLayout 是Android布局中一个比较常用的控件，使用该控件可以布局出适合各种屏幕分辨率的布局，RelativeLayout采用相对位置进行控件属性设置.

可以设置控件与父控件的位置，控件与控件之间的位置。

               1. 控件与父容器位置属性

                                 android:layout_alignParentLeft="true"   子控件相对于父容器靠左边
                                 android:layout_alignParentTop="true"    子控件相对于父容器靠 上边
                                 android:layout_marginTop="50dp"          子控件与父容器上边距距离
                                android:layout_marginBottom="50dp"    子控件与父容器下边距距离
                                android:layout_marginRight="50dp"      子控件与父容器右边距距离
                                 android:layout_marginLeft="50dp"      子控件与父容器左边距距离

                                      android:layout_centerInParent="true"//子控件在父容器中居中显示
                                    android:layout_centerHorizontal="true" //子控件在父容器中水平居中
                                     android:layout_centerVertical="true"  子控件在父容器中垂直居中

                           下面的示例展示下相对于父容器的布局

                             

                       

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <TextView  
7.         android:id="@+id/textView1"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"  
10.         android:text="相对父容易布局"   
11.         android:background="#97FFFF"  
12.           
13.           android:layout_alignParentLeft="true"  
14.         android:layout_alignParentTop="true"  
15.         android:layout_marginTop="50dp"  
16.         android:layout_marginBottom="50dp"  
17.         android:layout_marginRight="50dp"  
18.       
19.   
20.         />  
21.   
22. </RelativeLayout>  

               2.控件与控件间位置属性

                     控件与控件之间的位置属性，是指控件与相邻控件的位置设置，主要有以下属性

                       android:layout_below="@+id/textView1"    该控件位于指定控件的下方
                      android:layout_toLeftOf="@+id/textView1"    控件位于指定控件的左侧
                      android:layout_toRightOf="@+id/textView1"    控件位于指定控件的右侧
                     android:layout_above="@+id/textView1"           控件位于指定控件的上面
                     android:layout_alignBaseline="" 该控件的内容与指定控件的内容在同一直线上

                    android:layout_alignBottom=""该控件的底部与指定控件的底部对齐

                    android:layout_alignLeft="" 该控件与指定控件左侧对齐

                    android:layout_alignRight="" 该控件与指定控件右侧对齐

                    android:layout_alignTop="" 该控件与指定控件的顶部对齐

                        

                       

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:gravity="center" >  
6.   
7.     <RelativeLayout  
8.         android:layout_width="match_parent"  
9.         android:layout_height="110dp"   
10.         android:id="@+id/layone"  
11.         >  
12.           
13.         <TextView  
14.             android:id="@+id/textView1"  
15.             android:layout_width="wrap_content"  
16.             android:layout_height="wrap_content"  
17.             android:background="#FFD700"  
18.             android:text="标签1" />  
19.   
20.         <TextView  
21.             android:id="@+id/textView2"  
22.             android:layout_width="wrap_content"  
23.             android:layout_height="wrap_content"  
24.             android:layout_below="@+id/textView1"  
25.             android:background="#FF0000"  
26.             android:text="标签2" />  
27.     </RelativeLayout>  
28.   
29.     <RelativeLayout  
30.         android:layout_width="match_parent"  
31.         android:layout_height="120dp"  
32.         android:layout_below="@+id/layone"  
33.         >  
34.   
35.         <TextView  
36.             android:id="@+id/textView3"  
37.             android:layout_width="wrap_content"  
38.             android:layout_height="wrap_content"  
39.             android:background="#EE9572"  
40.             android:text="标签3" />  
41.   
42.         <TextView  
43.             android:id="@+id/textView4"  
44.             android:layout_width="wrap_content"  
45.             android:layout_height="60dp"  
46.             android:layout_toRightOf="@+id/textView3"  
47.             android:background="#CDAA7D"  
48.             
49.             android:text="标签4" />  
50.     </RelativeLayout>  
51.   
52. </RelativeLayout>  

               3.商品列表示例

                         下面我们展示一个商品列表，使用RelativeLayout来展示，效果图如下

                     

                          

                     代码

                     

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.       
6.     <RelativeLayout  
7.          android:layout_width="match_parent"  
8.           android:layout_height="120dp"  
9.           android:id="@+id/layout1"  
10.         >  
11.   
12.         <ImageView  
13.             android:id="@+id/imageView1"  
14.             android:layout_width="100dp"  
15.             android:layout_height="wrap_content"  
16.             android:layout_alignParentLeft="true"  
17.             android:layout_alignParentTop="true"  
18.             android:layout_marginLeft="10dp"  
19.             android:layout_marginTop="10dp"  
20.             android:src="@raw/pad" />  
21.   
22.         <TextView  
23.             android:id="@+id/textView1"  
24.             android:layout_width="fill_parent"  
25.             android:layout_height="wrap_content"  
26.             android:layout_alignTop="@+id/imageView1"  
27.             android:layout_marginTop="10dp"  
28.             android:layout_toRightOf="@+id/imageView1"  
29.             android:text="商品名称:IPAD AIR" />  
30.           
31.            <TextView  
32.             android:id="@+id/textView2"  
33.             android:layout_width="fill_parent"  
34.             android:layout_height="wrap_content"  
35.             android:layout_marginTop="10dp"  
36.             android:layout_toRightOf="@+id/imageView1"  
37.             android:layout_below="@+id/textView1"  
38.             android:text="商品价格:$19" />  
39.           
40.             <TextView  
41.             android:id="@+id/textView3"  
42.             android:layout_width="fill_parent"  
43.             android:layout_height="wrap_content"  
44.             android:layout_marginTop="10dp"  
45.             android:layout_toRightOf="@+id/imageView1"  
46.             android:layout_below="@+id/textView2"  
47.             android:text="商品颜色:白色" />  
48.               
49.         </RelativeLayout>  
50.   
51.      <RelativeLayout  
52.          android:layout_width="match_parent"  
53.           android:layout_height="3dp"  
54.           android:background="#CDAA7D"  
55.           android:layout_below="@+id/layout1"  
56.            android:id="@+id/layout2"  
57.         >  
58.             </RelativeLayout>  
59.               
60.          <RelativeLayout  
61.          android:layout_width="match_parent"  
62.           android:layout_height="120dp"  
63.            android:layout_below="@+id/layout2"  
64.              android:id="@+id/layout3"  
65.         >  
66.   
67.         <ImageView  
68.             android:id="@+id/imageView2"  
69.             android:layout_width="100dp"  
70.             android:layout_height="wrap_content"  
71.             android:layout_alignParentLeft="true"  
72.             android:layout_alignParentTop="true"  
73.             android:layout_marginLeft="10dp"  
74.             android:layout_marginTop="10dp"  
75.             android:src="@raw/pad" />  
76.   
77.         <TextView  
78.             android:id="@+id/textView4"  
79.             android:layout_width="fill_parent"  
80.             android:layout_height="wrap_content"  
81.             android:layout_alignTop="@+id/imageView2"  
82.             android:layout_marginTop="10dp"  
83.             android:layout_toRightOf="@+id/imageView2"  
84.             android:text="商品名称:IPAD AIR" />  
85.           
86.            <TextView  
87.             android:id="@+id/textView5"  
88.             android:layout_width="fill_parent"  
89.             android:layout_height="wrap_content"  
90.             android:layout_marginTop="10dp"  
91.             android:layout_toRightOf="@+id/imageView2"  
92.             android:layout_below="@+id/textView4"  
93.             android:text="商品价格:$19" />  
94.           
95.             <TextView  
96.             android:id="@+id/textView6"  
97.             android:layout_width="fill_parent"  
98.             android:layout_height="wrap_content"  
99.             android:layout_marginTop="10dp"  
100.             android:layout_toRightOf="@+id/imageView2"  
101.             android:layout_below="@+id/textView5"  
102.             android:text="商品颜色:白色" />  
103.               
104.         </RelativeLayout>  
105.           
106.           <RelativeLayout  
107.          android:layout_width="match_parent"  
108.           android:layout_height="3dp"  
109.           android:background="#CDAA7D"  
110.           android:layout_below="@+id/layout3"  
111.         >  
112.             </RelativeLayout>  
113.            
114.            
115.              
116. </RelativeLayout>