Android开发学习笔记(五)Android五大布局

Android的五大布局:

  1. LinearLayout(线性布局)
  2. FrameLayout(单帧布局)
  3. RelativeLayout(相对布局)
  4. AbsoluteLayout(绝对布局)
  5. TableLayout(表格布局)

Android的每种布局都很简单,但不断的嵌套和混合使用就会创造出许多复杂的布局形式。

下面我来依此实现。


LinearLayout(线性布局)

这种LinearLayout布局按照垂直或者水平排列各个元素。

android:orientation="vertical"  垂直

android:orientation="horizontal" 水平

另外,顺带一提,android:layout_weight是这个元素所占的比重,遵循数值越小,重要度越高的原则。

效果图:

Android开发学习笔记(五)Android五大布局_第1张图片


布局源文件,很简单的线性布局嵌套。

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="10pt"
        android:textColor="#cccccc"
        android:background="#000000"
        android:text="@string/hello_world" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="10pt"
        android:background="#aaaaaa"
        android:text="@string/hello_world" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="10pt"
        android:textColor="#cccccc"
        android:background="#000000"
        android:text="@string/hello_world" />
    
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
    	
        <TextView
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:layout_weight="1"
        	android:textSize="10pt"
        	android:background="#aaaaaa"
        	android:text="@string/hello_world" />
    	<TextView
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:layout_weight="1"
        	android:textSize="10pt"
        	android:textColor="#ff0000"
        	android:background="#ffff00"
        	android:text="@string/hello_world" />
    </LinearLayout>>

</LinearLayout>


FrameLayout(单帧布局)

这种布局模式,会将整个界面当成一块空白区域看待,所有的子元素必须放在整块屏幕的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分或者全部遮挡。


效果图:

Android开发学习笔记(五)Android五大布局_第2张图片


源代码:

<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:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="280dp"
        android:layout_height="280dp"
        android:background="#aaaaaa"
        android:textColor="#f0ffff"
        android:layout_gravity="center"
        android:gravity="center_horizontal"
        android:text="Bottom" />

    <TextView
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:background="#555555" 
        android:textColor="#f0ffff"
        android:layout_gravity="center"
        android:gravity="center_horizontal"
        android:text="Middle"/>
    <TextView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:textColor="#f0ffff"
        android:layout_gravity="center"
        android:gravity="center"
        android:background="#000000"
        android:text="Top" />

</FrameLayout>

上面的代码活用了android:layout_gravity以及android:gravity。


RelativeLayout(相对布局)

RelativeLayout是Android布局中最灵活的一种,当然也是最复杂的一种。

所有的XML Attrbute,来自Android开发文档

XML Attributes
Attribute Name Related Method Description
android:layout_above   Positions the bottom edge of this view above the given anchor view ID. 
android:layout_alignBaseline   Positions the baseline of this view on the baseline of the given anchor view ID. 
android:layout_alignBottom   Makes the bottom edge of this view match the bottom edge of the given anchor view ID. 
android:layout_alignEnd   Makes the end edge of this view match the end edge of the given anchor view ID. 
android:layout_alignLeft   Makes the left edge of this view match the left edge of the given anchor view ID. 
android:layout_alignParentBottom   If true, makes the bottom edge of this view match the bottom edge of the parent. 
android:layout_alignParentEnd   If true, makes the end edge of this view match the end edge of the parent. 
android:layout_alignParentLeft   If true, makes the left edge of this view match the left edge of the parent. 
android:layout_alignParentRight   If true, makes the right edge of this view match the right edge of the parent. 
android:layout_alignParentStart   If true, makes the start edge of this view match the start edge of the parent. 
android:layout_alignParentTop   If true, makes the top edge of this view match the top edge of the parent. 
android:layout_alignRight   Makes the right edge of this view match the right edge of the given anchor view ID. 
android:layout_alignStart   Makes the start edge of this view match the start edge of the given anchor view ID. 
android:layout_alignTop   Makes the top edge of this view match the top edge of the given anchor view ID. 
android:layout_alignWithParentIfMissing   If set to true, the parent will be used as the anchor when the anchor cannot be be found for layout_toLeftOf, layout_toRightOf, etc. 
android:layout_below   Positions the top edge of this view below the given anchor view ID. 
android:layout_centerHorizontal   If true, centers this child horizontally within its parent. 
android:layout_centerInParent   If true, centers this child horizontally and vertically within its parent. 
android:layout_centerVertical   If true, centers this child vertically within its parent. 
android:layout_toEndOf   Positions the start edge of this view to the end of the given anchor view ID. 
android:layout_toLeftOf   Positions the right edge of this view to the left of the given anchor view ID. 
android:layout_toRightOf   Positions the left edge of this view to the right of the given anchor view ID. 
android:layout_toStartOf   Positions the end edge of this view to the start of the given anchor view ID. 

简单实例:

Android开发学习笔记(五)Android五大布局_第3张图片


源代码:

<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:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/txt1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#cccccc"
        android:text="Hello" />
    <Button
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"         
        android:layout_below="@id/txt1"
        android:layout_centerHorizontal="true"/>
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/txt2"
        android:text="Button" 
        android:layout_below="@id/txt1"
        />

</RelativeLayout>

AbsoluteLayout(绝对布局)

这个布局方式必须程序员自己确定所有元素的x轴和y轴坐标。援引自开发者社区的话:“通常不推荐使用 AbsoluteLayout ,除非你有正当理由要使用它,因为它使界面代码太过刚性,以至于在不同的设备上可能不能很好地工作。 

实例:

Android开发学习笔记(五)Android五大布局_第4张图片


源代码:

<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:orientation="vertical" >

    <EditText
        android:layout_x="20dip"
        android:layout_y="20dip"
        android:layout_height="wrap_content"
        android:layout_width="200dip"
        android:text="Hello" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="230dp"
        android:layout_y="20dp"
        android:text="Button" />

</AbsoluteLayout>

TableLayout(表格布局)

采用行列的方式,与HTML中的table很相似。

XML Attributes
Attribute Name Related Method Description
android:collapseColumns setColumnCollapsed(int,boolean) The zero-based index of the columns to collapse. 
android:shrinkColumns setShrinkAllColumns(boolean) The zero-based index of the columns to shrink. 
android:stretchColumns setStretchAllColumns(boolean) The zero-based index of the columns to stretch. 

效果图:

Android开发学习笔记(五)Android五大布局_第5张图片


源文件

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="0">
 	<Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Hello" />
    <TableRow>
        <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="拉伸" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
        
    </TableRow>
</TableLayout>


你可能感兴趣的:(Android开发学习笔记(五)Android五大布局)