Android的UI布局
Android的布局分为6种(教材有点老,迟点会更新),分别是相对布局、线性布局、表格布局、网格布局、帧布局、绝对布局。Visio画图如下:
相对布局(RelativeLayout)
相对布局通常有两种形式,一种是相对于容器而言,一种是相对于控件而言。部分常用的属性如下:
属性声明 |
功能描述 |
android:layout_alignParentLeft |
是否跟父布局左对齐 |
android:layout_alignParentRight |
是否跟父布局右对齐 |
android:layout_alignParentTop |
是否跟父布局顶部对齐 |
android:layout_alignParentBottom |
是否跟父布局底部对齐 |
android:layout_toRightOf |
在指定控件的右边 |
android:layout_toLeftOf |
在指定控件的左边 |
android:layout_above |
在指定控件的上边 |
android:layout_below |
在指定控件的下边 |
android:layout_alignBaseline |
与指定控件水平对齐 |
android:layout_alignLeft |
与指定控件左对齐 |
android:layout_alignRight |
与指定控件右对齐 |
android:layout_alignTop |
与指定控件顶部对齐 |
android:layout_alignBottom |
与指定控件底部对齐 |
示例:
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 xmlns:tools="http://schemas.android.com/tools" 5 android:layout_width="match_parent" 6 android:layout_height="match_parent" 7 tools:context=".MainActivity"> 8 9 <Button 10 android:id="@+id/btn1" 11 android:text="Button1" 12 android:layout_width="wrap_content" 13 android:layout_height="wrap_content" 14 android:layout_centerVertical="true" 15 android:layout_centerHorizontal="true"/> 16 17 <Button 18 android:id="@+id/btn2" 19 android:text="Button2" 20 android:layout_width="wrap_content" 21 android:layout_height="wrap_content" 22 android:layout_toRightOf="@id/btn1" 23 android:layout_above="@id/btn1"/> 24 25 <Button 26 android:id="@+id/btn3" 27 android:text="Button3" 28 android:layout_width="wrap_content" 29 android:layout_height="wrap_content" 30 android:layout_below="@id/btn1" 31 android:layout_toLeftOf="@id/btn1"/> 32 33 <Button 34 android:id="@+id/btn4" 35 android:text="Button4" 36 android:layout_width="wrap_content" 37 android:layout_height="wrap_content" 38 android:layout_toRightOf="@id/btn3" 39 android:layout_alignBaseline="@id/btn3"/> 40 41 </RelativeLayout>
效果图
线性布局(LinearLayout)
线性布局是Android中较为常见的布局方式,使用的是<LinearLayout>标签。线性布局主要有两种形式,由属性android:orientation指定,分别为水平线性布局(horizontal)、垂直线性布局(vertical)。
示例:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/btn1" android:text="button1" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:id="@+id/btn2" android:text="button2" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:id="@+id/btn3" android:text="button3" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>
水平线性布局
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 7 <Button 8 android:id="@+id/btn1" 9 android:text="button1" 10 android:layout_width="wrap_content" 11 android:layout_height="wrap_content"/> 12 <Button 13 android:id="@+id/btn2" 14 android:text="button2" 15 android:layout_width="wrap_content" 16 android:layout_height="wrap_content"/> 17 <Button 18 android:id="@+id/btn3" 19 android:text="button3" 20 android:layout_width="wrap_content" 21 android:layout_height="wrap_content"/> 22 23 </LinearLayout>
垂直线性布局
表格布局(TableLayout)
表格布局就是让控件以表格的形式来排列,只要将控件放在单元格中,控件就可以整齐地排列。其中,行数由TableRow对象控制,即布局中有多少个TableRow对象,就有多少行。而每个TableRow对象中又可以放置多个控件。整个布局的列数则由最宽的单元格(TableRow)决定。
未完待续.......