Android快速入门之基础布局

线性布局LinearLayout

线性布局是一种常用的界面是布局，在线性布局中，所有的子元素都按照垂直或水平的顺序在界面上排列，每一个元素都位于上一个元素后面，当超过边界时，将部分显示或者不显示。

先认识一个属性：

• 垂直布局：android:orientation=“vertical” 每行仅包含一个界面元素
• 水平布局：android:orientation=“horizontal” 每列仅包含一个界面元素

常用的基本属性：

• android:layout_gravity 指定子元素在LinearLayout中的对齐方式
• android:layout_weight 指定子元素在LinearLayout中所占的权重
• android:gravity 设定Layout中元素的对其方式
• android:layout_height\android:layout_width，设置元素的大小，有三个属性
  • fill_parent 宽度或高度与父容器相同
  • match_parent 与fill_parent完全相同，从Android2.2以后推荐使用此属性
  • wrap_content 组件的大小刚好包裹它的内容即可

案例：

<?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:layout_margin="30dp"
    android:orientation="vertical">
    
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="线性布局">
    </Button>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#00ff00"
            android:text="垂直布局1">

        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#ff0000"
            android:text="垂直布局2">

        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#0000ff"
            android:text="垂直布局3">

        </Button>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffff00"
            android:text="水平布局1">

        </Button>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ff00ff"
            android:text="水平布局2">

        </Button>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00ffff"
            android:text="水平布局3">

        </Button>

    </LinearLayout>

</LinearLayout>

运行效果图：

相对布局RelativeLayout

利用控件之间的相对位置关系来进行布局，控件与父容器、控件与其他控件之间的相对关系

基本属性：

第一类：属性值为true或false

• android:layout_centerHorizontal 如果为true,将该控件的置于水平居中;
• android:layout_centerVertical 如果为true,将该控件的置于垂直居中;
• android:layout_centerInParent 如果为true,将该控件的置于父控件的中央;
• android:layout_alignParentTop 如果为true,将该控件的顶部与其父控件的顶部对齐;
• android:layout_alignParentBottom 如果为true,将该控件的底部与其父控件的底部对齐;
• android:layout_alignParentLeft 如果为true,将该控件的左部与其父控件的左部对齐;
• android:layout_alignParentRight 如果为true,将该控件的右部与其父控件的右部对齐;

第二类：相对于给定ID控件（@id/id_name）

• android:layout_below 将该控件的底部置于给定ID的控件之下;
• android:layout_above 将该控件的底部置于给定ID的控件之上;
• android:layout_toLeftOf 将该控件的右边缘与给定ID的控件左边缘对齐;
• android:layout_toRightOf 将该控件的左边缘与给定ID的控件右边缘对齐;
• android:layout_alignBaseline 将该控件的baseline与给定ID的baseline对齐;
• android:layout_alignTop 将该控件的顶部边缘与给定ID的顶部边缘对齐;
• android:layout_alignBottom 将该控件的底部边缘与给定ID的底部边缘对齐;
• android:layout_alignLeft 将该控件的左边缘与给定ID的左边缘对齐;
• android:layout_alignRight 将该控件的右边缘与给定ID的右边缘对齐;

第三类：属性值为具体的像素值

• android:layout_marginTop 离某元素上边缘的距离
• android:layout_marginBottom 离某元素下边缘的距离
• android:layout_marginLeft 　　离某元素左边缘的距离
• android:layout_marginRight 　 离某元素右边缘的距离

<?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:layout_margin="30dp">

    <Button
        android:text="按钮1"
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="50dp"
        android:background="#00ff00">

    </Button>
    <Button
        android:text="按钮2"
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button1"
        android:layout_below="@+id/button1"
        android:background="#ff0000">

    </Button>
    <Button
        android:text="按钮3"
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button2"
        android:layout_below="@+id/button2"
        android:background="#0000ff">

    </Button>
    <Button
        android:text="按钮4"
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button3"
        android:layout_below="@+id/button3"
        android:background="#ffff00">

    </Button>
    <Button
        android:text="按钮5"
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button4"
        android:layout_below="@+id/button4"
        android:background="#ff00ff">

    </Button>
    <Button
        android:text="按钮6"
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button2"
        android:layout_below="@+id/button2"
        android:background="#00ffff">

    </Button>

</RelativeLayout>

运行效果：

帧布局FrameLayout

帧布局（FrameLayout），又叫框架布局，是最简单的界面布局，是用来存放一个元素的空白空间，且子元素的位置是不能够指定的，只能够放置在空白空间的左上角，如果有多个子元素，后放置的子元素将遮挡先放置的子元素，使用Android SDK中提供的层级观察器（Hierarchy Viewer）进一步分析界面布局。

层级观察器能够对用户界面进行分析和调试，并以图形化的方式展示树形结构的界面布局

基本的属性：

• android:gravity属性：对该view 内容的限定. 以button为例，android:gravity=“right”则button上面的文字靠右。
• android:layout_gravity ：用来设置该view相对与父view 的位置。比如一个button 在linearlayout里，你想把该button放在靠左、靠右等位置就可以通过该属性设置。

案例代码：

<?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">

    <TextView
        android:id="@+id/tv_frame1"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#FF6143"
        android:text="第一个TextView" />

    <TextView
        android:id="@+id/tv_frame2"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_gravity="center"
        android:background="#7BFE00"
        android:text="第二个TextView" />

    <TextView
        android:id="@+id/tv_frame3"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:background="#FFFF00"
        android:text="第三个TextView" />

    <TextView
        android:id="@+id/tv_frame4"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:background="#0000FF"
        android:text="第四个TextView" />
</FrameLayout>

运行结果：

绝对布局AbsoluteLayout

绝对布局能通过指定界面元素的坐标位置，来确定用户界面的整体布局，它是一种不推荐使用的界面布局，因为通过X轴和Y轴确定界面元素位置后，Android系统不能够根据不同屏幕对界面元素的位置进行调整，降低了界面布局对不同类型和尺寸屏幕的适应能力。

两个属性：

• android:layout_x 控制组件X坐标
• android:layout_y 控制组件y坐标

案例代码：

<?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/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="149dp"
        android:layout_y="197dp"
        android:background="#00ff00"
        android:text="按钮1">

    </Button>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="261dp"
        android:layout_y="240dp"
        android:background="#ff0000"
        android:text="按钮2">

    </Button>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="108dp"
        android:layout_y="383dp"
        android:background="#0000ff"
        android:text="按钮3">

    </Button>

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="188dp"
        android:layout_y="469dp"
        android:background="#ffff00"
        android:text="按钮4">

    </Button>

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="238dp"
        android:layout_y="350dp"
        android:background="#ff00ff"
        android:text="按钮5">

    </Button>

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="43dp"
        android:layout_y="265dp"
        android:background="#00ffff"
        android:text="按钮6">

    </Button>
</AbsoluteLayout>

运行结果：

表格布局TableLayout

配合TableRow使用，表示表格的一行，TableRow内有N个控件，表示有N列，TableRow继承自LinearLayout，故每一行都是水平放置。

全局属性：

• android:stretchColumns 设置可伸展的列（设置某列可拉伸）。该列可以向行方向伸展，最多可占据一整行。
• android:shrinkColumns 设置可收缩的列。当该列子控件的内容太多，已经挤满所在行，该子控件的内容将往列方向显示。
• android:collapseColumns 设置要隐藏的列。

单元格属性：

• android:layout_column 指定该单元格在第几列显示
• android:layout_span 指定该单元格占据的列数（未指定时，为1）

案例代码：

<?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:layout_margin="30dp">

    <TableRow>
        <TextView
            android:id="@+id/info"
            android:layout_height="wrap_content"
            android:layout_span="4"
            android:gravity="right"
            android:text="0"
            android:textSize="40dp" />
        </TableRow>
    <TableRow>

        <Button android:text="AC"/>

        <Button android:text="B-X"/>

        <Button android:text="%" />

        <Button android:text="/" />
    </TableRow>

    <TableRow>
        <Button android:text="7" />

        <Button android:text="8" />

        <Button android:text="9" />

        <Button android:text="X" />
    </TableRow>

    <TableRow>
        <Button android:text="4" />

        <Button android:text="5" />

        <Button android:text="6" />

        <Button android:text="-" />
    </TableRow>

    <TableRow>
        <Button android:text="1" />

        <Button android:text="2" />

        <Button android:text="3" />

        <Button android:text="+" />
    </TableRow>

    <TableRow>
        <Button android:text="E" />

        <Button android:text="0" />

        <Button android:text="."/>

        <Button android:text="="/>
    </TableRow>

</TableLayout>

运行结果：

网格布局GridLayout

类似于表格布局，是Android 4.0及以上版本新增加的布局，使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。

网格布局分为水平和垂直两种方式，默认是水平布局，一个控件挨着一个控件从左到右依次排列

• 指定android:columnCount设置列数的属性后，控件会自动换行进行排列，指定某控件显示在固定的行或列，只需设置该子控件的android:layout_row和android:layout_column属性即可，计数从0开始

设置某控件跨越多行或多列： 将子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值，再设置其layout_gravity属性为fill即可，前一个设置表明该控件跨越的行数或列数，后一个设置表明该控件填满所跨越的整行或整列。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="30dp"
    android:columnCount="4"
    android:rowCount="6">

    <TextView
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:textSize="25sp"
        android:text="0"/>

    <Button android:text="C"/>

    <Button
        android:layout_column="3"
        android:text="/"/>
    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="*"/>
    <Button android:text="4"/>
    <Button android:text="5"/>
    <Button android:text="6"/>
    <Button android:text="-"/>
    <Button android:text="7"/>
    <Button android:text="8"/>
    <Button android:text="9"/>
    <Button
        android:layout_gravity="fill"
        android:layout_rowSpan="3"
        android:text="+" />
    <Button android:text="0"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnSpan="2"
        android:text="00"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnSpan="3"
        android:text="="/>
</GridLayout>

运行结果：

约束性布局ConstraintLayout

约束性布局是Google在2016年的I/O大会上推出来的一个新的布局，根据布局中其他元素或视图，确定View在屏幕中的位置，受到其他视图、父容器和基准线三类约束。

ConstraintLayout 是一个新的 Support 库，支持 Android 2.3 (API level 9) 以及以后的版本。使用ConstraintLayout需要确保在Android Stuido 2.2及以后版本，并且在 Android Studio 中使用 ConstraintLayout 之前需要先下载最新的 ConstraintLayout 库。
ConstraintLayout有五十几个布局属性，可以分为ConstraintLayout本身使用的属性、Guideline使用的属性、相对定位属性、Margin属性、居中和偏移属性、子View的尺寸控制属性、UI编辑器使用的属性

常用属性：

• layout_constraintTop_toTopOf  ： View顶部与另一View顶部对齐
• layout_constraintTop_toBottomOf  ：View顶部另一View底部对齐
• layout_constraintBottom_toTopOf  ： View底部与另一View顶部对齐
• layout_constraintBottom_toBottomOf  ：View与另一View底部对齐
• layout_constraintLeft_toLeftOf ：View左边与另一View左对齐
• layout_constraintRight_toLeftOf  ：  View右边与另一View左边对齐。

案例代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btnSubmit"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        
        android:layout_marginStart="84dp"
        android:layout_marginTop="64dp"
        android:text="Submit"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText5"
        tools:ignore="MissingConstraints"
        android:layout_marginLeft="84dp" />

    <EditText
        android:id="@+id/editText4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="36dp"
        android:ems="10"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.503"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText4" />

    <Button
        android:id="@+id/btnCancle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="64dp"
        android:text="Cancle"
        app:layout_constraintBottom_toBottomOf="@+id/btnSubmit"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.37"
        app:layout_constraintStart_toEndOf="@+id/btnSubmit"
        app:layout_constraintTop_toBottomOf="@+id/editText5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="192dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

运行结果：