（三）android界面布局

三、android界面布局

1.Android视图层次结构

Android中视图按照树形结构进行设计（视图树）；而视图树由View或ViewGroup构成。

View：视图控件，界面可操作的最小可视化元素。

ViewGroup：由View或ViewGroup组成的元素组。

 

2.常见布局

LinearLayout：线性布局

RelativeLayout：相对布局

TableLayout：表格布局

AbsoluteLayout：绝对布局

FrameLayout：框架布局

ListView列表布局       

GridView网格布局

 

用java代码创建一个线性布局

 

// 1.创建布局对象

LinearLayout layout = new LinearLayout(this);

layout.setOrientation(LinearLayout.VERTICAL);

 // 2.设置布局属性

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT);

 // 3.创建视图控件

TextView tv = new TextView(this);

tv.setLayoutParams(params);

// 把视图控件添加到layout布局对象中

layout.addView(tv);

// 4.为当前Activity显示界面视图

setContentView(layout);

 

XML创建布局的优点

界面与逻辑控制代码相分离，同一个布局文件可适用于多个Activity

缺点：在程序运行前缺点界面的布局形式，运行中不易更改

Java代码创建布局

优点：在程序运行过程中确定界面的布局形式，界面可伴随程序运行过程中修改

缺点：界面与逻辑控制代码在一起，同一个布局文件仅能用于当前Activity

 

3 绝对布局

绝对布局能通过指定界面元素的坐标位置，来确定用户界面的整体布局

绝对布局降低了界面布局对不同类型和尺寸屏幕的适应能力

每一个界面控件都必须指定坐标（X，Y），坐标原点在屏幕左上角

AbsoluteLayout元素的XML属性

layout_x 控件的x值

layout_y 控件的y值

 

<?xml version="1.0" encoding="utf-8"?>

<AbsoluteLayout android:id="@+id/AbsoluteLayout01" 

android:layout_width="fill_parent" 

android:layout_height="fill_parent" 

xmlns:android="http://schemas.android.com/apk/res/android">

<TextView android:id="@+id/label"

android:layout_x="40dip" 

android:layout_y="40dip" 

android:layout_height="wrap_content" 

android:layout_width="wrap_content" 

android:text="用户名：">

</TextView>

<EditText android:id="@+id/entry" 

android:layout_x="40dip" 

android:layout_y="60dip"

android:layout_height="wrap_content" 

android:layout_width="150dip">

</EditText>

<Button android:id="@+id/ok"

android:layout_width="70dip"

android:layout_height="wrap_content" 

android:layout_x="40dip" 

android:layout_y="120dip"  

android:text="确认">

</Button>

<Button android:id="@+id/cancel" 

android:layout_width="70dip"

android:layout_height="wrap_content" 

android:layout_x="120dip" 

android:layout_y="120dip" 

android:text="取消">

</Button>

</AbsoluteLayout>

 

安卓中的单位：

px  像素：不同设备显示效果相同

dip 设备独立像素

Pt 磅 1pt = 1/72 英寸

in 英寸

sp 放大像素：主要用于字体显示

 

 

4. 相对布局 

RelativeLayout

Layout_toLeftOf 当前控件位于给定ID元素的左边

Layout_alignLeft 当前控件与给定ID元素控件的左边对齐

Layout_alignParentLeft 当前控件是否1与父元素的左侧对齐

Layout_below 当前控件位于给定ID元素控件的下方

Layout_alignTop 当前控件位于给定ID元素控件的上边对齐

Layout_alignParentTop 当前控件是否与父元素的上侧对齐

 

 

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout android:id="@+id/RelativeLayout01" 

android:layout_width="fill_parent" 

android:layout_height="fill_parent" 

xmlns:android="http://schemas.android.com/apk/res/android">

<TextView android:id="@+id/label" 

android:layout_height="wrap_content" 

android:layout_width="match_parent" 

android:text="用户名：">

</TextView>

<EditText android:id="@+id/entry" 

android:layout_height="wrap_content" 

android:layout_width="match_parent" 

android:layout_below="@id/label">

</EditText>

  <Button android:id="@+id/cancel" 

  android:layout_height="wrap_content" 

android:layout_width="wrap_content" 

android:layout_alignParentRight="true" 

android:layout_marginLeft="10dip" 

android:layout_below="@id/entry" 

android:text="取消" >

</Button>

<Button android:id="@+id/ok" 

android:layout_height="wrap_content" 

android:layout_width="wrap_content" 

android:layout_toLeftOf="@id/cancel" 

android:layout_alignTop="@id/cancel"

android:text="确认">

</Button>

</RelativeLayout>

5. 表格布局（TableLayout）

它将屏幕划分网格，通过指定行和列将界面元素添加的网格中

网格的边界对用户是不可见的

表格布局还支持嵌套，可以将另一个表格布局放置在前一个表格布局的网格中，也可以在表格布局中添加其他界面布局，例如线性布局、相对布局等等

 

stretchColumns 设置自动伸展哪些列，列ID从0开始，多格列的话用“，”分隔

shrinkColumns 设置自动收缩哪些列，列ID从0开始，多个列的话用“，”分隔

collapseColunms 设置隐藏哪些列，列ID从0开始，多个列的话用“，”分隔

layout_column 设置当前控件在哪一列

layout_span 设置当前控件占据几列

<TableLayout android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:stretchColumns="0,1,2">

    <Button android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="我占据一行"/>

    <TableRow>

        <Button android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="第0列"/>

        <Button android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="第1列"/>

    </TableRow>

<TableRow>

        <Button android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="第0列"/>

        <Button android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_span="2"

            android:text="我占据两列"/>

    </TableRow>

    <TableRow>

        <Button android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_column="2"

            android:text="我在第2列"/>

    </TableRow>

</TableLayout>

6. 框架布局

6.1 框架布局（FrameLayout）又称为帧布局，是最简单的界面布局，所有放在布局内的控件，都按照层次堆叠在屏幕左上角。

6.2 如果有多个控件，后放置的子元素将遮挡先放置的控件，即默认情况下FrameLayout里的控件是左上角对齐。

6.3 FrameLayout 就像画布，固定从屏幕的左上角开始填充图片，文字等。

6.4 以下属性均使用在FrameLayout元素中

foreground 图片 设置前景图像的图片

foregroundGravity 位置 设置前景图像的位置

 

<FrameLayout android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:foreground="@drawable/logo"

    android:foregroundGravity="top|left">

    <Button android:layout_width="150dp"

        android:layout_height="150dp"

        android:background="#0000FF"/>

    <Button android:layout_width="120dp"

        android:layout_height="120dp"

        android:background="#00FF00"/>

    <Button android:layout_width="90dp"

        android:layout_height="90dp"

        android:background="#FF0000"/>

</FrameLayout>