Adroid布局
有人形象地比喻,Android开发中的布局就相当于一栋建筑的外观架构。布局用得好,这栋建筑的外观才美观高大上。
Android布局管理器
Android布局管理器本身是一个界面控件,所有的布局管理器都是ViewGroup类的子类,都是可以当做容器类来使用的。因此一个布局管理器中可以嵌套其他的布局管理器。
这是谷歌上找的一张布局管理器层级图
每一个ViewGroup都可以嵌套其他的ViewGroup和View(视图)。一个ViewGroup的大小是相对的,它即可以是其他ViewGroup的父容器,也可以是其他ViewGroup的子容器。在Android中,ViewGroup指代的是布局管理器,也就是下面要讲的布局样式,View指代的是布局管理器中的一个个控件。在Android中,控件可以在XML文件中定义,也可以程序员根据自己的需要去定义一个类。本文重点先不讨论视图中的控件,还是回归到布局。
Android六大基本布局管理器分别是:
线性布局(LinearLayout)、表格布局(TableLayout)、网格布局(GridLayout)、相对布局(RelativeLayout)、绝对布局(AbsoluteLayout)、层布局(FrameLayout)
其中,表格布局是线性布局的子类。网格布局是android 4.0后新增的布局。
(1)线性布局
线性布局会将容器内的所有控件一个挨着一个地排列。
属性:
1. 排列方向
android:orienation = “ horizontal/vertical”
水平排列和垂直排列,Android中默认为垂直排列vertical
注意:默认情况下水平和垂直方向的排列只占一行,如果用android:layout_width来设定控件的宽度,如果控件宽度太大,超出屏幕的显示范围,屏幕是不会显示超出的范围的。
2. 对齐方式
用于控制元素(例如文字)在该控件里的显示位置。
属性值:
可选的值有:top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical
也可以同时使用两个属性值,中间用 | 竖线隔开
例如:
android:gravity = “buttom|center_horizontal”
如果定义在控件中的底部,垂直居中
举一个简单例子,我用LinearLayout线性布局来实现常用的计算器
前面四行都很容易理解,用一个Linearout来包裹4个button控件,并且设定排列方向为水平方向。这里只列出其中一行的布局代码,其他三行的代码与第一行几乎相同。
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="mc" android:layout_weight="1"> //layout_weight设定水平布局中控件的占比 </Button> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="m+" android:layout_weight="1"> </Button> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="m-" android:layout_weight="1"> </Button> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="mr" android:layout_weight="1"> </Button></LinearLayout>
最关键的是下面两行,即用绿色框框住的那一部分控件如何布局。这里我使用布局控制器内部嵌套布局控制器的方法。首先将绿色框内部的控件分成三个层级(我分别用不同颜色标注出来了)。第一个层级是绿色框,包含两个两列,即两个红色框。第二个层级是红色框,每个红色框看成一个整体的列,第一个列是左边的红色框,其内部包含两个行;第二个列是右边的红色框,即“=”号,包含一个垂直布局的列,占位两行。再对左边的红色框进行第三层级的拆分。可以拆分成两行,每一行占3个位。
于是就有下面的代码:
<!--绿色框--><LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <!--红色框--> <LinearLayout android:orientation="vertical" android:layout_weight="3" android:layout_width="wrap_content" android:layout_height="wrap_content"> <!--蓝色框--> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="1"></Button> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="2"></Button> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="3"></Button> </LinearLayout> <!--蓝色框 --> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="2" android:text="0"> </Button> <Button android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:text="."> </Button> </LinearLayout> </LinearLayout> <!--红色框,=号--> <LinearLayout android:orientation="vertical" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="match_parent"> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="="> </Button> </LinearLayout></LinearLayout>
(2)相对布局
相对布局是最灵活的一种布局方式,可以相对父容器和相对与其他控件进行布局。
主要参数有:
1. 是否对齐父容器的语法格式为true/false:
例如:android:layout_alignParentLeft = “true”
2. 为于给定ID控件不同方位的语法格式:
例如:android:layout_above="@id/btn1"
@id/btn1 控件的ID必须是事前已经定义好的
android:layout_alignParentLeft 该控件是否对齐父容器的左端
android:layout_alignParentRight 该控件是否齐其父容器的右端
android:layout_alignParentTop 该控件是否对齐父容器的顶部
android:layout_alignParentBottom 该控件是否对齐父容器的底部
android:layout_centerInParent 该控件是否相对于父容器居中
android:layout_toLeftOf 该控件位于给定ID控件的左方
android:layout_toRightOf 该控件位于给定ID控件的右方
android:layout_above 该控件位于给定ID控件的上方
android:layout_below 该控件位于给定ID控件的下方
android:layout_centerHorizontal 该控件是否横向居中
android:layout_centerVertical 该控件是否垂直居中
实例代码:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/darkslategray" > <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_centerHorizontal="true" android:text="下"> </Button> <Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/btn1" android:layout_above="@id/btn1" android:text="左"> </Button> <Button android:id="@+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/btn1" android:layout_above="@id/btn1" android:text="右"> </Button> <Button android:id="@+id/btn4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/btn2" android:layout_above="@id/btn2" android:background="@color/white" android:text="上"> </Button></RelativeLayout>
效果图
(3)表格布局
表格布局是最规整的一种布局方式。想象一下EXCEL表格规整的行和列,android布局管理器中的TableLayout与EXCEL中的单元格有不少相似之处。如果学过HTML,用过tbale,tr,td标签,应该也会对下面的用法有更好的理解。
表格布局由一个TableLayout包裹起来,内部是一行行的控件,每一行用一个TableRow来包裹,每一行的元素个数(即列数)都是可以不同的。默认情况下,一行中的所有控件是等宽的。
控件属性,在TableLayout中定义,对所有行起作用:
1. android:collapseColumns=”” #指定被隐藏的列的序号
2. android:shrinkColumns=”” #指定被收缩的列的列序号
3. android:stretchColumns=”” #指定被拉伸的列的列序号
4. android:layout_column="3": #表示跳过第三个控件,直接显示下一个控件,注意:这个属性从1开始计数
5. android:layout_span="3" #表示合并3个单元格,也就说这个组件占3个单元格
注意:上面属性的使用场合,是在TableLayout还是在TableRow中使用;如果是在TableRow中使用,需要在TableRow的子控件中添加属性。前四个属性都是添加在TableLayout中的,最是添加在TableRow的子控件中。
实例:
就以我们平常用的日历为案例(由于屏幕太小,放不下最后一列星期六的日期)
实例代码:
由于以下代码有很多相似之处,我只截取了比较重要的一部分
1. 总体框架
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/TableLayout2" android:layout_width="fill_parent" android:layout_height="wrap_content" > <TableRow> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="周日" android:background="#00000000"/> #去除button控件的样式 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="周一" android:background="#00000000"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="周二" android:background="#00000000"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="周三" android:background="#00000000" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="周四" android:background="#00000000"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="周五" android:background="#00000000" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="周六" android:background="#00000000" /> </TableRow> <TableRow> ... ... </TableRow>... ... ... ...</TableLayout>
2. 最后一行“不显示日期”的合并单元格样式
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="30" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_span="2" android:background="#ffffff" android:text="不显示日期" />
(4)绝对布局
绝对布局指定每个控件在手机上的具体坐标,每个控件的位置和大小是固定的。由于不同手机屏幕大小可能不同,所以绝对布局只适用于固定的手机屏幕。平常用得比较少,这里就不做详细介绍了。
(5)层布局
层布局也叫帧布局。每个控件占据一层,后面添加的层会覆盖前面的层。如果后面的层的大小大于或者等于前面的层,那么前面的层就会被完全覆盖。后面层中的控件就看不到了。实际应用中如果想要得到一个空间浮现在另一个控件的上方,可以在控件内部嵌套层布局。
下面是层布局的原理图:
实例代码:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/FrameLayout1" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:foregroundGravity="right|bottom"> <TextView android:layout_width="200dp" android:layout_height="200dp" android:background="#FF6143" /> //橙色 <TextView android:layout_width="150dp" android:layout_height="150dp" android:background="#7BFE00" /> //绿色 <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#FFFF00" /> //黄色</FrameLayout>
效果图,每一个textview都会被前一个textview覆盖:
实际应用:
在手机程序设计中,绝对布局基本上不用,用得相对较多的是线性布局和相对布局。
作者:四两逻辑
原文地址:https://www.cnblogs.com/thomson-fred/p/10117352.html