安卓初级之六种布局方式

最新推荐文章于 2024-07-25 01:18:27 发布

下半夜的雨

最新推荐文章于 2024-07-25 01:18:27 发布

阅读量664

点赞数 2

分类专栏： android初级文章标签： android 布局 android 4.0

本文链接：https://blog.csdn.net/fancheng614/article/details/74389038

版权

android初级专栏收录该内容

4 篇文章 0 订阅

订阅专栏

类似于java中的swing中的布局，android中也定义了几种布局方式，这里所有的布局管理器都是ViewGroup的子类。

android中布局方式有六种：

LinearLayout（线性布局）

FrameLayout（帧布局）

AbsoluteLayout（绝对布局）

RelativeLayout（相对布局）

TableLayout（表格布局）

GridLayout（网格布局）android4.0新出的布局

下面来一一介绍一下这六种布局：

一、LinearLayout（线性布局）：

线性布局是按照垂直或者水平的顺序依次排列子元素，每一个子元素都位于前一个元素之后。

代码：

<?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="vertical" >
    
    <!-- 水平布局 -->
    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮一"
            />
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮二"
            />
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮三"
            />
    </LinearLayout>
    
    <!-- 垂直布局 -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮三"
            />
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮四"
            />
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮五"
            />
    </LinearLayout>

</LinearLayout>

效果图：

二、FrameLayout（帧布局）：

帧布局就是画面堆叠，帧布局是五大布局（五大布局里面没有GridLayout）中最简单的一个，在这个布局中，整个界面被当成一个空白区域，所有元素都在左上角，并且后面的元素覆盖在前面的元素之上。

代码：

<?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="vertical" >
    <FrameLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        >
        <TextView 
            android:layout_width="300dp"
            android:layout_height="500dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_blue_bright"
            />
        <TextView 
            android:layout_width="200dp"
            android:layout_height="400dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_green_dark"
            />
        <TextView 
            android:layout_width="100dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_purple"
            />
    </FrameLayout>

</LinearLayout>

效果图：

三、AbsoluteLayout（绝对布局）

绝对布局是绝对位置的布局，在此布局中的子元素的 android:layout_x 和 android:layout_x 属性将生效，用于描述该子元素的坐标位置。屏幕左上角为坐标原点（0,0），本布局不建议使用，因为代码过于刚性，不能很好的适配各种终端。

代码：

<?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="vertical" >
    
    <AbsoluteLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <TextView 
            android:layout_x="20dp"
            android:layout_y="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户名："
            />
        <EditText 
            android:layout_x="80dp"
            android:layout_y="15dp"
            android:layout_width="wrap_content"
            android:width="200dp"
            android:layout_height="wrap_content"
            />
        <TextView 
            android:layout_x="20dp"
            android:layout_y="80dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码："
            />
        <EditText 
            android:layout_x="80dp"
            android:layout_y="75dp"
            android:layout_width="wrap_content"
            android:width="200dp"
            android:layout_height="wrap_content"
            />
        <Button 
            android:layout_x="130dp"
            android:layout_y="135dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登录"
            />
    </AbsoluteLayout>

</LinearLayout>

效果图：

四、RelativeLayout（相对布局）

相对布局是按照各个子元素之间的位置关系完成布局。在此布局中的子元素里与位置相关的属性将生效，在指定位置关系时，必须设置id属性，各个元素之间的关系都是通过id来判定的。

      android:layout_toLeftOf=""——该组件位于引用组件的左方
            android:layout_toRightOf=""——该组件位于引用组件的右方
            android:layout_above=""——该组件位于引用组件的上方
            android:layout_below=""——该组件位于引用组件的下方
            android:layout_alignParentLeft=""——该组件是否对其父组件的左端
            android:layout_alignParentRight=""——该组件是否对其父组件的右端
            android:layout_alignParentTop=""——该组件是否对其父组件的顶部
            android:layout_alignParentBottom=""——该组件是否对其父组件的底部
            android:layout_centerInParent=""——该组件是否相对于父组件居中
            android:layout_centerHorizontal=""——该组件是否横向居中
            android:layout_centerVertical=""——该组件是否垂直居中

代码：

<?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="vertical" >
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        
        >
        <Button 
            android:id="@+id/button1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="1"
            android:layout_alignParentBottom="true"
            android:gravity="center"
            />
        <Button 
            android:id="@+id/button2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:gravity="center"
            android:text="2"
            android:layout_above="@+id/button1"
            android:layout_toRightOf="@+id/button1"
            />
        <Button 
            android:id="@+id/button3"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:gravity="center"
            android:text="3"
            android:layout_above="@+id/button1"
            android:layout_toRightOf="@+id/button2"
            />
    </RelativeLayout>

</LinearLayout>

效果图：

五、TableLayout（表格布局）：

表格布局适用于N行N列的布局格式，一个TableLayout由很多TableRow组成，一个TableRow就是TableLayout中的一行。表格布局只有行没有列。

代码：

<?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="vertical" >
    
    <TableLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <TableRow >
            <Button 
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="1"
                android:gravity="center"
                />
            <Button 
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="2"
                android:gravity="center"
                />
            <Button 
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="3"
                android:gravity="center"
                />
        </TableRow>
        <TableRow >
            <Button 
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="4"
                android:gravity="center"
                />
            <Button 
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="5"
                android:gravity="center"
                />
        </TableRow>
        <TableRow >
            <Button 
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="6"
                android:gravity="center"
                />
            <Button 
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="7"
                android:gravity="center"
                />
            <Button 
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="8"
                android:gravity="center"
                />
        </TableRow>
    </TableLayout>

</LinearLayout>

效果图：

六、GridLayout（网格布局）android4.0新出的布局：

只能在android4.0之后的版本才能使用这个布局管理器，GridLayout相当于HTML里面的table标签，整个容器划分为rows*columns个网格，网格放一个组件，也可以跨行或者跨列。

代码：

<?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="vertical" >

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        android:columnCount="4"
        android:rowCount="6" >

        <!-- 练习使用网格布局 -->

        <TextView
            android:id="@+id/textView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_columnSpan="4"
            android:background="@android:color/white"
            android:text="0"
            android:textSize="50dp" />

        <Button
            android:id="@+id/clear"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_columnSpan="4"
            android:text="清除"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/seven"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="7"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/eight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="8"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/nine"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="9"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/multiply"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="*"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/four"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="4"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/five"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="5"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/six"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="6"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/sub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="-"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="1"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="2"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="3"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="+"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/spot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="."
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/zero"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="0"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/divide"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="/"
            android:textColor="@android:color/white"
            android:textSize="50dp" />

        <Button
            android:id="@+id/eq"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="="
            android:textColor="@android:color/white"
            android:textSize="50dp" />
    </GridLayout>

</LinearLayout>

效果图：