Android的UI布局

Android的布局分为6种(教材有点老,迟点会更新),分别是相对布局、线性布局、表格布局、网格布局、帧布局、绝对布局。Visio画图以下:android

绘图1

相对布局(RelativeLayout)

相对布局一般有两种形式,一种是相对于容器而言,一种是相对于控件而言。部分经常使用的属性以下:app

 

属性声明布局

功能描述spa

android:layout_alignParentLeft3d

是否跟父布局左对齐code

android:layout_alignParentRightxml

是否跟父布局右对齐对象

android:layout_alignParentTopblog

是否跟父布局顶部对齐utf-8

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>

image

效果图

 

线性布局(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)决定。

未完待续.......

相关文章
相关标签/搜索