Android 常用布局 -- Android 学习之路

Android 常用布局 有四种：

• FrameLayout 帧布局
• LinearLayout 线性布局
• RelativeLayout 相对布局
• GridLayout 网格布局

FrameLayout

最简单的布局 界面绘制快 效率高

显示特点：

1. 所有控件默认显示在左上角，会重叠在一起
2. 九个位置排版，可以通过盒子模型排版 例如 控制内外边距

常用属性：

layout_gravity： 设置给子控件 在父容器的重心 例如 在父容器的右边还是左下角 ,可取值的话使用快捷键 Ctrl+Alt +空格

九个位置的取值：

---

LinearLayout

所有子控件都按照横向或者竖向排列

常用属性

orientation ：指定子控件的排布方向，可取值：vertical(竖向),horizontal(横向)

gravity : 控制容器内的重心位置

layout_grabity:设置给子控件，在父容器的重心位置

weightSum :权重总和 默认 是所有子控件的和

layout_weight : 设置给子控件 权重值 （按比例分配）

小例子：




布局文件：

<!--线性布局-->
    <!--
        layout_width    ：宽度
        layout_height   ：高度
        宽度和高度的取值
            match_parent    :  充满父容器的剩余空间; 匹配父容器(match_parent)
            wrap_content    ： 包裹自己里面的内容的大小; 跟随内容 内容多少尺寸 就是多少尺寸，
            固定值 如 50dp   ：自已定义 固定尺寸

        orientation     :方向 ； 必须设置的属性
            取值：
                horizontal  ：横向排布；
                vertical    ：竖向排布；
        weightSum           ： 权重总和  ；所有子项的，默认 是自动相加的和
        layout_gravity      : 重心，设置在父容器内的重心位置 如 左上，右上，中间 ， 可以组合使用
            取值：
        clickable           ：是否能被点击
            取值            ：true,false
    事件：
        onClick     :点击事件
   特有属性可供子空间使用
    -->


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:layout_gravity="bottom|center_horizontal"
        android:gravity="right"
        >


        <!--图片控件-->
        <!--
            layout_weight       :LinearLayout特有属性  在宽度为0dp时  按照比例分配父容器的宽度
                取值  ：浮点数   ；比例
            src                 ：指定引用的图片资源
            id                  :唯一标识  @+id  标识增加一个id 在当前文件是不能重复，但是在不在一个文件的话就能重复
        -->
        <ImageView
            android:id="@+id/cymbal"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@mipmap/cymbal"
            android:onClick="click"
            android:clickable="true"/>

        <ImageView
            android:id="@+id/scratch"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@mipmap/scratch"
            android:onClick="click"
            android:clickable="true"/>

        <ImageView
            android:id="@+id/pie"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@mipmap/pie"
            android:onClick="click"
            android:clickable="true"/>

        <ImageView
            android:id="@+id/fart"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@mipmap/fart"
            android:onClick="click"
            android:clickable="true"/>

        <ImageView
            android:id="@+id/drink"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@mipmap/drink"
            android:onClick="click"
            android:clickable="true"/>

        <ImageView
            android:id="@+id/eat"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@mipmap/eat"
            android:onClick="click"
            android:clickable="true"/>

    </LinearLayout>

---

RelativeLayout

所有子控件都默认显示在左上角，可以通过属性调整相对位置

常用属性

子控件相对位置关系，这些属性的值是另一个同级控件的id

layout_toRightOf 在指定控件的右边

layout_toLeftOf 在指定控件的左边

layout_above 在指定控件的上边

layout_below 在指定控件的下边

子控件对齐关系，这些属性的值也是另一个同级控件的id

layout_alignRight 与指定控件右对齐

layout_alignLeft 与指定控件左对齐

layout_alignTop 与指定控件上对齐

layout_alignBottom 与指定控件下对齐

子控件与父容器间对齐关系，这些属性的值为true或false

layout_centerInParent 与父容器中间对齐

layout_centerVertical 与父容器竖向中心对齐

layout_centerHorizontal 与父容器横向中心对齐

layout_alignParentLeft 与父容器左边对齐

layout_alignParentTop 与父容器上边对齐

layout_alignParentRight 与父容器右边对齐

layout_alignParentBottom 与父容器下边对齐

小例子:

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

    <!--A  在父容器center-->
    <TextView
        android:id="@+id/a"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#0ff"
        android:text="A"
        android:textSize="25sp"
        android:gravity="center"
        android:layout_centerInParent="true"/>

    <!-- B 在A的左上角-->
    <TextView
        android:id="@+id/b"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@+id/a"
        android:layout_toLeftOf="@+id/a"
        android:background="#ff0"
        android:text="B"
        android:textSize="25sp"
        android:gravity="center" />

    <!--C 在B上  在A右-->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@+id/b"
        android:layout_toRightOf="@+id/a"
        android:background="@color/colorAccent"
        android:text="C"
        android:textSize="25sp"
        android:gravity="center" />

    <!-- D 在A右下 上边距 50dp-->
    <TextView
        android:id="@+id/d"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@+id/a"
        android:layout_toRightOf="@+id/a"
        android:layout_marginTop="50dp"
        android:background="@color/colorRed"
        android:text="D"
        android:textSize="25sp"
        android:gravity="center" />

</RelativeLayout>

---

GridLayout

所有子控件默认在GridLayout中横向依次排列，当设置好每行的列数时，到达指定列数会自动换行显示，以网格状排列

常用属性：

layout_column 设置给子控件 在网格的第几列

layout_row 设置给子控件 在网格的第几行

layout_columnSpan 设置给子控件 跨列

layout_rowSpan 设置给子控件 跨行

layout_gravity 设置给子控件 在一个网格中的重心位置

columnCount 每行列总数

小例子：

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

    <!--first 第一行第一列跨两列-->
   <TextView
       android:text="喜"
       android:textSize="25sp"
       android:textColor="#fff"
       android:layout_width="200dp"
       android:layout_height="60dp"
       android:layout_columnSpan="2"
       android:background="@color/colorPrimary"
       android:gravity="center"/>
    <TextView
        android:text="怒"
        android:textSize="25sp"
        android:textColor="#fff"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorRed"
        android:gravity="center"/>
    <TextView
        android:text="唉"
        android:textSize="25sp"
        android:textColor="#fff"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorAccent"
        android:gravity="center"/>

    <!--第二行 第三列跨两行-->
    <TextView
        android:text="乐"
        android:textSize="25sp"
        android:textColor="#fff"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorAccent"
        android:gravity="center"/>

    <TextView
        android:text="昙"
        android:textSize="25sp"
        android:textColor="#000"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="#fff0"
        android:gravity="center"/>

    <TextView
        android:text="痴"
        android:textSize="25sp"
        android:textColor="#000"
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:layout_rowSpan="2"
        android:background="#00ff"
        android:gravity="center"/>

    <TextView
        android:text="畏"
        android:textSize="25sp"
        android:textColor="#000"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"/>

    <!-- 第三行-->
    <TextView
        android:text="句"
        android:textSize="25sp"
        android:textColor="#000"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"/>

    <TextView
        android:text="生"
        android:textSize="25sp"
        android:textColor="#000"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/colorAccent"
        android:gravity="center"/>
    <TextView
        android:text="死"
        android:textSize="25sp"
        android:textColor="#000"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="#00ffff"
        android:gravity="center"/>
</GridLayout>

---

暂时先总结到这里吧。