安卓布局简单归纳

安卓布局

1.线性布局LinearLayout
2.表格布局TableLayout以及网格布局GridLayout
3.帧布局FrameLayout
4.相对布局RelativeLayout
5.Android2.0已经过时的绝对布局AbsoluteLayout
这里仅谈xml的实现、不涉及java实现
布局管理器及组件的常用共有属性:

属性作用
android:id="@+id/XXX"为当前的组件指定id,在JAVA中用该属性引用该空间
android:layout_width=“XXX”设置组件的宽度
android:layout_height =“XXX”设置组件的长度
android:background =“XXX”设置组件的背景
android:padding =“XXX”设置组件与文字之间的距离
layout_margin=“XXX”设置组件之间的距离

margin与padding都有方位词:

方位
Top顶部
Bottom底部
Left
Right

每个空间的必有属性:

android:layout_width="XXX"  //设置组件的宽度 
android:layout_height ="XXX" //设置组件的长度

线性布局LinearLayout

将开发者放入布局管理器中的组件进行水平或者竖直的排列,针对每行或每列只能放置一个空间且不会换行(意思是当组件排到页面边缘之外的时候也不会换行)。
在这里插入图片描述
线性布局管理器支持的属性值有两个:

属性作用
android:orientation=“XXX”设置排列方式horizontal、vertical
android:gravity="XXX设置对齐方式top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、center_vertical、center、fill、clip_vertical、clip_horizontal

其中android:gravity设置布局管理器内部组件对齐方式中的值可以用“|”拼接起来使用(Linux中称其为管道符号)
android:layout_gravity设置子元素在父布局中的位置子元素中无法设置gravity(浅谈与之区别)

方位
center_vertical垂直居中
fill_vertical纵向充满
center_horizontal横向居中
fill_horizontal横向充满
center居中
fill充满
clip_vertical超出部分纵向裁剪
clip_horizontal超出部分横向裁剪
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout"
	android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom|right"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >


	<TextView
	    android:id="@+id/textView1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="底部向右" />

</LinearLayout>

在这里插入图片描述
当即有LinearLayout且设置了orientation:horizontal又有子控件里设置了layout_gravity则左右方位词会失效
当即有LinearLayout且设置了orientation:vertical又有子控件里设置了layout_gravity则上下方位词会失效
不过应该可以通过代码的方式实现、此处之后在说。

	<TextView
	    android:id="@+id/textView1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_gravity="bottom|right"
	    android:text="底部向右" />

</LinearLayout>

在这里插入图片描述

表格布局TableLayout

表格布局就类似于表格,有行于列来放入组件。

  • TableLayout为布局管理器,直接在其中添加组件则该组件独占一行
  • TabRow为行,一个TabRow代表一行,也是一个容器
  • 在表格布局里无列的标签,但在行中每添加一个组件便多一行,列数以组件最多的行数来确定
  • 列可以隐藏也可以设为拉伸的状态用来填补空挡的位置,也可以收缩来适应表格匹配屏幕大小

TableLayout继承了LinearLayout,所有LinearLayout的XML属性TableLayout都支持
TableLayout布局管理器独有属性:

属性作用
android:collapseColumns设置被隐藏列的序列号,从0开始,多个序号之间用逗号隔开
android:shrinkColumns设置被收缩的列的序列号,从0开始,多个序号之间用逗号隔开,多余的文字会自动换行
android:stretchColumns设置被拉伸列的序列号,从0开始,多个序列号之间用逗号隔开

xml:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

	<TableRow 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    >
	    <Button
	    android:id="@+id/button1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="1" />
	     <Button
	    android:id="@+id/button2"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="2" />
	      <Button
	    android:id="@+id/button3"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="3" />
	</TableRow>

	<TableRow 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    >
	    <Button
	    android:id="@+id/button4"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="4" />
	     <Button
	    android:id="@+id/button5"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="5" />
	      
	</TableRow>

</TableLayout>

在这里插入图片描述
设置隐藏列0,1

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:collapseColumns="0,1"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

	<TableRow 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    >
	    <Button
	    android:id="@+id/button1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="1" />
	     <Button
	    android:id="@+id/button2"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="2" />
	      <Button
	    android:id="@+id/button3"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="3" />
	</TableRow>

	<TableRow 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    >
	    <Button
	    android:id="@+id/button4"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="4" />
	     <Button
	    android:id="@+id/button5"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="5" />
	      
	</TableRow>

</TableLayout>

在这里插入图片描述
设置拉伸列2

<TableRow 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
    <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="1" />
     <Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="2" />
      <Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="3" />
</TableRow>

<TableRow 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
    <Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="4" />
     <Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="5" />
      
</TableRow>

在这里插入图片描述
设置收缩列2,其会自动换行

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="2"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

	<TableRow 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    >
	    <Button
	    android:id="@+id/button1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="1" />
	     <Button
	    android:id="@+id/button2"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="2" />
	      <Button
	    android:id="@+id/button3"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="3" />
	</TableRow>

	<TableRow 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    >
	    <Button
	    android:id="@+id/button4"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="4" />
	     <Button
	    android:id="@+id/button5"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="5" />
	      <Button
	    android:id="@+id/button6"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="6666666666666666666666666" />
	      
	</TableRow>

</TableLayout>

在这里插入图片描述
子控件可用的属性:

属性作用
android:layout_span跨列(指定所跨列数,被跨的位置不可以有控件,若有控件则另一个控件会被挤到另一列而不是覆盖)
android:layout_column设置控件占第几列(序号列从0开始

跨列:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

	<TableRow 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    >
	    <Button
	    android:id="@+id/button1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="1" />
	     <Button
	    android:id="@+id/button2"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="2" />
	      <Button
	    android:id="@+id/button3"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="3" />
	</TableRow>

	<TableRow 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    >
	    <Button
	    android:id="@+id/button4"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="4" />
	     <Button
	    android:id="@+id/button5"
	    android:layout_span="2"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="5" />
	     <Button
	    android:id="@+id/button6"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="6" />
	     
	      
	</TableRow>

</TableLayout>

在这里插入图片描述
控件占第2列:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

	<TableRow 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    >
	    <Button
	    android:id="@+id/button1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="1" />
	     <Button
	    android:id="@+id/button2"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="2" />
	      <Button
	    android:id="@+id/button3"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="3" />
	</TableRow>

	<TableRow 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    >
	    <Button
	    android:id="@+id/button4"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_column="2"
	    android:text="4" />
	   
	</TableRow>

</TableLayout>

在这里插入图片描述

网格布局GridLayout

网格布局类似于表格布局(sdk最低为14),其最大的好处是可以在子控件中指定控件本身所在的行与列,设置模式类似于直角坐标系,行列号从0开始。行可以想成X列可以想成Y

子控件属性

属性作用
android:rowCount=""指定行号
android:columnCount=""指定的列号
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_row="0"
        android:layout_column="0"
        android:text="(0,0)" />
     <Button
        android:id="@+id/button2"
        android:layout_row="0"
        android:layout_column="1"
        android:text="(0,1)" />
     <Button
        android:id="@+id/button3"
        android:layout_row="1"
        android:layout_column="0"
        android:text="(1,0)" />
      <Button
        android:id="@+id/button4"
        android:layout_row="1"
        android:layout_column="1"
        android:text="(1,1)" />

</GridLayout>

在这里插入图片描述
GridLayout可以不指定控件的宽高,因为在GridLayout中可以指定布局管理器中有多少行与多少列(也可以不指定,用子控件的属性决定,如android:layout_row与android:layout_column上例所示)
布局管理器中属性:

属性作用
android:rowCount=""设置行数
android:columnCount=""设置列数

此外还可以指定控件占得列数与行数(此处若不在布局管理器中设置行数与列数,则控件会排成一行):

属性作用
android:layout_columnSpan=""设置所占列数
android:layout_rowSpan=""设置所占行数

搭配android:layout_gravity可以铺满所在行与列(此处行与列可能有些冲突,慎用

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="2"  
	android:columnCount="2"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"
        android:text="(0,0)" />
     <Button
        android:id="@+id/button2"

        android:text="(0,1)" />
     <Button
        android:id="@+id/button3"

        android:text="(1,0)" />
      <Button
        android:id="@+id/button4"

        android:text="(1,1)" />

</GridLayout>

在这里插入图片描述

帧布局FrameLayout

每加入一个组件,都将创建一个空白区域称之为一帧,显示的对象都会被固定在左上角,我们不能够指定其显示的位置值能指定大概方位,控件与控件之间相互重叠、覆盖部分或全部覆盖(与控件的透明度有关)

FrameLayout布局管理器属性:

属性作用
android:foreground=""设置前景图片
android:foregroundGravity=""设置前景的位置

前景是不会被覆盖的

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:foreground="@drawable/ic_launcher"
    android:foregroundGravity="center"
    tools:context=".MainActivity" >
    
    <TextView 
    android:layout_width="240dp"
    android:layout_height="240dp"
    android:background="#f00"
    android:layout_gravity="center"
        />
    <TextView 
    android:layout_width="140dp"
    android:layout_height="140dp"
    android:background="#0f0"
    android:layout_gravity="center"
        />
	<TextView 
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:background="#00f"
    android:layout_gravity="center"
        />
	<TextView 
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:background="#f00"
    android:layout_gravity="center"
        />
</FrameLayout>

在这里插入图片描述

相对布局RelativeLayout

相对布局就是按照组件的相对位置来进行布局,例如在某个组件的上边、下边、左边、或者右边。相对布局以id来确定控件,每个控件都建议都id
RelativeLayout布局管理器支持的属性:

属性作用
android:gravity=""设置子控件的对齐方式
android:ignoreGravity=""设置哪个组件不受gravity的影响

xml:

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="bottom"
    android:ignoreGravity="@+id/e"
    tools:context=".MainActivity" >
	<TextView
	android:id="@+id/q"
	android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView1"
	    />
	<TextView
	android:id="@+id/w"
	android:layout_toRightOf="@+id/q"
	android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView2"
	    />
	<TextView
	android:id="@+id/e"
	android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView3"
	    />
</RelativeLayout>

在这里插入图片描述

子控件的属性:

属性作用
android:layout_below=""某组件的下方id
android:layout_above=""某组件的上方id
android:layout_toLeftOf=""某组件的左边id
android:layout_toRightOf=""某组件的右边id
android:layout_centerHorizontal=""水平居中boolean
android:layout_centerVertical=""垂直居中boolean
android:layout_centerInParent=""位于父布局正中间boolean

边界对齐:

属性作用
android:layout_alignBottom=""某组件的下边界id
android:layout_alignTop=""某组件的上边界id
android:layout_alignLeft=""某组件的左边界id
android:layout_alignRight=""某组件的右边界id
android:layout_alignParentBottom=""父布局地段对齐boolean
android:layout_alignParentTop=""父布局顶端对齐boolean
android:layout_alignParentLeft=""父布局左端对齐boolean
android:layout_alignParentRight=""父布局右端对齐boolean

父布局顶部对齐与父布局左边界对齐重叠
xml:

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
	<TextView
	android:id="@+id/q"
	android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="父布局顶部对齐"
    android:layout_alignParentTop="true"
	    />
	<TextView
	android:id="@+id/w"
	android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="父布局底部对齐"
    android:layout_alignParentBottom="true"
	    />
	<TextView
	android:id="@+id/e"
	android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="父布局右边界对齐"
    android:layout_alignParentRight="true"
	    />
	<TextView
	android:id="@+id/r"
	android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="父布局左边界对齐"
    android:layout_alignParentLeft="true"
    	/>
</RelativeLayout>

在这里插入图片描述

绝对布局AbsoluteLayout

绝对控制控件的位置,很单一
子控件支持的属性

属性作用单位
android:layout_x=""某组件x坐标dp
android:layout_y=""某组件y坐标dp

xml:

    <AbsoluteLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".MainActivity" >
    	<TextView
    	android:id="@+id/q"
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="45dp" 
        android:layout_y="35dp"
        android:text="TextView"
        	/>
    </AbsoluteLayout>

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值