Android5种布局类型

为了适应不同界面的风格,android为开发人员提供了5种常用布局,分别是LinearLayout(线性布局)、RelativeLayout(相对布局)、FrameLayout(帧布局)、TableLayout(表格布局)/AbsoluteLayout(绝对布局)。

1.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="horizontal"
    >
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
       />
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        />
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        />

</LinearLayout>

首先是layout_width和layout_height这两个控件属性,这两个值可以设置为wrap_content(控件大小由控件内容大小变化而变化)和match_parent(填满父窗体由父容器决定控件大小),也可以自定义大小。

改变btn3的layout_width的值使他变成match_parent:
在这里插入图片描述
改变三个按钮的layout_width的值,自定义为100dp、200dp、300dp:
在这里插入图片描述
同理layout_height也是可以一样根据自己的需求自己定义自己需要的高度大小。
在这里插入图片描述
之后是orientation一个关键的属性,用于控制控件的排列方向,它有两个值 vertical表示线性布局垂直显示,horizontal表示线性布局水平显示。

将orientation的值变为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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
       />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B"
            />
        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            />
    </LinearLayout>

</LinearLayout>

在这里插入图片描述

2.相对布局

相对布局是通过相对定位的方式指定控件位置,即以其它控件或父容器为参照物,摆放控件位置。

				表1 设置控件间距的属性
控件属性 功能描述
android:layout_marginTop 设置当前控件上边界与某控件的距离
android:layout_marginBottom 设置当前控件底边界与某控件的距离
android:layout_marginLeft 设置当前控件左边界与某控件的距离
android:layout_marginRight 设置当前控件右边界与某控件的距离
			表2 设置控件位置的属性
控件属性 功能描述
android:layout_centerInparent 设置当前控件位置位于父布局的中央位置
android:layout_centerVertical 设置当前控件位置位于父布局的垂直居中位置
android:layout_centerHrizontal 设置当前控件位置位于父布局的水平居中位置
android:layout_above 设置当前控件位于某控件上方
android:layout_below 设置当前控件位于某控件下方
android:layout_toLeftOf 设置当前控件位于某控件左侧
android:layout_toRightOf 设置当前控件位于某控件右侧
android:layout_alignParentTop 设置当前控件是否与父控件顶端对齐
android:layout_alignParentLeft 设置当前控件是否与父控件左对齐
android:layout_alignParentRight 设置当前控件是否与父控件右对齐
android:layout_alignParentBottom 设置当前控件是否与父控件底端对齐
android:layout_alignTop 设置当前控件的上边界与某控件的上边界对齐
android:layout_alignBottom 设置当前控件的下边界与某控件的下边界对齐
android:layout_alignLeft 设置当前控件的左边界与某控件的左边界对齐
android:layout_alignRight 设置当前控件的右边界与某控件的右边界对齐
			表3 设置布局内边距的属性
布局属性 功能描述
android:paddingTop 设置布局顶部内边距的距离
android:paddingBottom 设置布局底部内边距的距离
android:paddingLeft 设置布局左边内边距的距离
android:paddingRight 设置布局右边内边距的距离
android:padding 设置布局四周内边距的距离

熟练的掌握以上的表,就能很好的运用相对布局了。下面通过示例来使用以上表中的内容。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="100dp"
    >
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_alignParentTop="true"
       />
        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B"
            android:layout_centerInParent="true"
            />
        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            android:layout_alignLeft="@+id/btn2"
            android:layout_marginLeft="50dp"
            android:layout_above="@id/btn2"
            />
</RelativeLayout>

父布局与顶部边距为100dp,A与父控件顶端对齐,B位置位于父布局的中央位置,C的左边界与B控件的左边界对齐,C左边界与B控件的距离为50dp,C位于B控件的上方。
在这里插入图片描述

3.帧布局

帧布局是Android中最简单的一种布局,该布局为每个加入其中的控件创建一个空白区域(称为一帧,每个控件占据一帧。

			表4 FrameLayout 属性
布局属性 功能描述
android:foreground 设置帧布局容器的前景图像(始终在所有子控件之上)
android:foregroundGravity 设置前景图像显示位置

通过一个例子来熟悉一下帧布局:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@drawable/b"
    android:foregroundGravity="center"
    >
   <Button
        android:id="@+id/btn1"
        android:layout_width="300dp"
        android:layout_height="450dp"
        android:text="A"
       />
        <Button
            android:id="@+id/btn2"
            android:layout_width="150dp"
            android:layout_height="100dp"
            android:text="B"
            />
        <Button
            android:id="@+id/btn3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="C"
            />
</FrameLayout>

从运行结果可以看出,按钮都被前景图片给挡住了,所以要注意在使用帧布局的时候,一定要记住前景图片会始终保持在最上层。
在这里插入图片描述
当我们把前景图删除后:按钮就可以显示了。
在这里插入图片描述

4.表格布局

表格布局是以表格的形式排列空间的,通过行和列将界面划分为多个单元格,每个单元格都可以添加控件。

			表5 TableLayout 布局属性
布局属性 功能描述
android:stretchColumns 拉伸列
android:shrinkColumns 收缩列
android:collapseColumns 隐藏列
		表6 TableLayout 控件属性
控件属性 功能描述
android:layout_column 设置单元格显示位置
android:layout_span 设置单元格占据几行
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1"
    >
    <TableRow>
        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="A"
            />
        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="B"
            />
    </TableRow>
    <TableRow>

        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="D"
            />
        <Button
            android:id="@+id/btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="E"
            />
        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            />
    </TableRow>
</TableLayout>

上述定义了一个2行3列的表格布局,第1列被拉伸。
通过TableRow来布局每一行。
在这里插入图片描述
设置collapseColumns可以使第一列隐藏

   android:collapseColumns="1"

在这里插入图片描述
通过是设置layout_span可以设置控件占据大小。

    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:layout_span="2"
        android:text="E"
        />

在这里插入图片描述

5.绝对布局

绝对布局是通过设定X,Y的值来控制控件的位置。

			表7 AbsoluteLayout 属性		
布局属性 功能描述
android:layout_x 设置X坐标
android:layout_y 设置Y坐标

设置控件ABC的位置分别位于<100,100>,<100,200>,<300,300>处。

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="100dp"
        android:layout_y="100dp"
        android:text="A"
        />
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="100dp"
        android:layout_y="200dp"
        android:text="B"
        />
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="300dp"
        android:layout_y="300dp"
        android:text="C"
        />
</AbsoluteLayout>

在这里插入图片描述
通过上述例子可以发现绝对布局就2个属性,想要掌握一很容易但是想要和好的设置控件在自己想要的位置就要自己一点一点的去慢慢的调整了。

总结

通过上述5种布局的了解,可以发现布局其实不难,只要记住每种布局所含有的属性,然后根据自己的需求设置自己想要的值,就可以通过布局设置出让自己满意的界面了,但是想要做出比较好的布局效果还是要善于使用嵌套布局。

参考文献:Android移动开发基础案例教程

作者:罗庆辉,原文网址

发布了1 篇原创文章 · 获赞 0 · 访问量 314
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览