Android开发-5界面装修，五大布局你选谁

Posted 2020-09-18 lxjshuju

前言：假设要开一家店，门店装修是非常重要的事情。有钱都请专门的建筑设计公司来设计装修，没钱的仅仅能自己瞎折腾。好不好看全凭自己的感觉。像android开发。在移动端大家看到的界面视觉不咋滴，一般连打开的动力都没了。所以Android开发就有了专门的UI设计人员，既然有了UI设计图，那怎么布局就须要靠自己去选择了，五大布局中能够任意选，仅仅要能达到你的UI设计图的效果。

设计图给你了，你选哪位装修工给你装修，就看效率了；不用说。我们都选择效率高的来装修。

Android的五大布局：

1.线性布局（LinearLayout）

2.相对布局（RelativeLayout）

3.帧布局（FrameLayout）

4.表格布局（TableLayout）

5.绝对布局（AbsoluteLayout）

一、线性布局

首先直接看效果图：

接着看界面布局文件里的代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#aa0000" 
        android:text="线性布局实战--垂直效果"
        android:layout_gravity="center"
         />
      <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#00ff00" 
        android:text="线性布局实战--垂直效果"
        android:gravity="center"
         />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal">
       <TextView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:background="#FFC0CB" 
        android:text="线性布局实战--垂直效果"
        android:layout_gravity="center"
        android:layout_weight="1"
         />
         <TextView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:background="#b0e0e6"
        android:text="线性布局实战--垂直效果"
        android:layout_gravity="center"
        android:layout_weight="1"
         />
    </LinearLayout>

</LinearLayout>

感性分析理解下：

LinearLayout中的android:orientation是线性布局中非常重要的一个属性，通过设置两个属性值：vertical和horizontal,它能够让包括在LinearLayout中的子控件依照垂直或者水平方向来布局。

上面还实用到布局中经常使用的属性。我们也先感性的认识下：

android:layout_width -- 设置布局宽度

android:layout_height -- 设置布局高度（这两个属性。它的值能够设置有match_parent、wrap_content、fill_parent，分别代表匹配父控件高度或宽度。包裹内容的高度或宽度、充满父控件，效果图中能够看到对应效果）

android:layout_gravity -- 设置控件的位置，它的属性值有center/right/left等

android:gravity -- 设置控件中内容位置，它的属性值有center/right/left等

android:background -- 设置背景色

android:layout_weight -- 设置控件在LinearLayout中的所占的相对大小比例或者说权重值，这个要大家实践多个控件各种比例，才干更好理解

android:text -- 设置控件的文本值

注：对于线性布局。当然还能够嵌套各种布局，上面就线性布局嵌套了线性布局。事实上各种布局能够互相嵌套，仅仅要没出错即可。实践出真理。

二、相对布局

效果图：

界面布局文件里的代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="#E9967A"
        android:text="相对布局实战--控件居中" />

    <TextView
        android:id="@+id/second"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/first"
        android:background="#FFC0CB"
        android:gravity="center"
        android:text="相对布局实战--内容居中" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/second" >

        <EditText
            android:id="@+id/third"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:hint="相对布局嵌套实战" />

        <Button
            android:id="@+id/fouth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@id/third"
            android:text="相对父控件右对齐" />

        <Button
            android:id="@+id/fifth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/third"
            android:layout_toLeftOf="@id/fouth"
            android:text="兄弟控件的左边" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/fifth" >

            <View
                android:id="@+id/strut"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_centerHorizontal="true" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignRight="@id/strut"
                android:text="控件水平居中" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@id/strut"
                android:layout_alignParentRight="true"
                android:text="控件水平居中" />
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

感性分析理解下：

相对布局简单理解就是有个參照物让你參考，比方你相对于參照物1在左边，可是相对于參照物2却在右边。

所以你选择的參照物不同，取得的结果也就不一样。

相对布局中，有接触到新属性例如以下：

android:id -- 设置控件的id,这里设置的id,编译器会自己主动把它生成在前面介绍过的R.java中

android:layout_centerHorizontal -- 布局中控件水平居中。属性值true/false

android:layout_below -- 相对XX控件的下方。属性值需设置相对XX控件的id

android:layout_toLeftOf -- 设置XX控件的左边。属性值需设置对于XX控件的id

android:layout_alignParentRight -- 相对父控件的右边，属性值true/false

相对布局的控件属性还有非常多。可是基本上都是上面的。仅仅是相对位置不同，这个翻翻手冊就能够了解。还有从上面能够看出线性布局有时候能做的。相对布局也能做。

所以实践中，谁方便就用谁。没强求。

三.帧布局

效果图：

界面布局文件里的代码：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#00BFFF"
        android:gravity="right"
        android:text="一层" />

    <TextView
        android:layout_width="260dp"
        android:layout_height="260dp"
        android:background="#FFC0CB"
        android:gravity="right"
        android:text="二层" />

    <TextView
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="#F7EED6"
        android:gravity="right"
        android:text="三层" />

    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="四层" />

</FrameLayout>

感性分析理解下：

帧布局能够简单理解成一个洋葱。一层层的堆叠，你拨开一层，就能够看见里面的一层。每一个控件在它里面都是相当于一层。

假设里面嵌套个线性布局，也相当于一层。不信大家能够实践。

帧布局非常重要的就是：它的位置都是从屏幕左上角（0。0）開始布局，然后覆盖的顺序是按你写的控件顺序，最先写的在最以下层。相当于洋葱的最里层。

四、表格布局

效果图：

界面布局文件里的代码：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:shrinkColumns="0"
    android:stretchColumns="0,1,2" >

    <TableRow>

        <Button
            android:layout_column="0"
            android:text="第一行" />

        <Button
            android:layout_column="1"
            android:text="第一行" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_column="0"
            android:text="第二行" />

        <Button
            android:layout_column="2"
            android:text="第二行" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_column="1"
            android:text="第三行" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_column="1"
            android:layout_span="2"
            android:text="第四行" />
    </TableRow>

</TableLayout>

感性分析理解下：

表格这个顾名思义，就非常easy理解。

不就是一张表格嘛。表格主要就是行和列，所以表格布局，懂得怎么设置行和列，基本搞定。

表格布局中。属性例如以下：

android:shrinkColumns -- 查shrink英文单词，是收缩的意思。所以它就是列里面内容非常多时。它就收缩，属性值设置指定列

android:stretchColumns -- 伸缩行，尽量占满界面，属性值设置指定列。比方1，2。3

android:layout_column -- 设置指定列，比方是0，还是1，还是2

android:layout_span -- 设置一个霸占总数的几列。你设置2，总数为3。就是当前列独享2列的宽度

TableRow -- 设置行

五、绝对布局

效果图：

界面布局文件里的代码：

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="20dip"
        android:layout_y="20dip"
        android:text="帐号：" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="80dip"
        android:layout_y="15dip"
        android:width="210px" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="20dip"
        android:layout_y="80dip"
        android:text="密  码：" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="80dip"
        android:layout_y="75dip"
        android:password="true"
        android:width="210px" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="130dip"
        android:layout_y="135dip"
        android:text="登   录" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="220dip"
        android:layout_y="135dip"
        android:text="重  置" />

</AbsoluteLayout>

感性分析理解下：

绝对布局能够这样简单理解，你拥有绝对的权利，你想在界面哪个位置放控件，就能够在哪个位置放控件。

绝对布局最重要的助手：

android:layout_x="xxdip"

android:layout_y="xxdip"

通过这两个助手。你就能够命令界面中的控件在哪个位置呆着，就在哪个位置呆着。

最终五大布局，弄完了。自己通过实践也进一步加深理解，总的说有收获！