Android布局

最新推荐文章于 2022-02-27 02:54:41 发布

原创最新推荐文章于 2022-02-27 02:54:41 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android布局

Android基础专栏收录该内容

16 篇文章

订阅专栏

1、LinearLayout（线性布局）

1.1 orientation

布局中控件的排列方式。

horizontal : 水平排列
vertical : 竖直排列

1.2 weight

简单来说，就是权重，比例。

效果：

这里写图片描述

屏幕被平均分成了1：2。

这里需要注意的一点是，在设置weight的时候，看情况把width(或height)设置为0dp。

有一点需要特别注意：就是当控件的尺寸设置为wrap_content时，需要特别注意content的长度。

这里写图片描述

这里第一个TextView的文本长度比第二个要多的多，虽然weight都是1，但是显示出来的效果，并不是1:1分配空间。

这里写图片描述

文本内容长度越多的，分配到的空间也就越多。

这里就涉及到了计算分配空间的公式：

T1：第一个TextView
T2：第二个TextView

T1宽度与T2宽度都是为:wrap_content的宽度

剩余空间 = （总宽度 - （T1宽度 + T2宽度））/2

T1最终宽度 = T1宽度 + 剩余空间
T2最终宽度 = T2宽度 + 剩余空间

1.3 gravity与layout_gravity

gravity : 布局的属性。假如属性为center，则该布局内的所有控件都将居中。

这里写图片描述

layout_gravity : 控件的属性。假如属性为bottom，则控件靠底部对其。

这里写图片描述

这里有一个问题，如果遇到该问题，考虑更换布局。

当 android:orientation=”vertical” 时，只有水平方向的设置才起作用，垂直方向的设置不起作用。即：left，right，center_horizontal 是生效的。
当android:orientation=”horizontal” 时，只有垂直方向的设置才起作用，水平方向的设置不起作用。即：top，bottom，center_vertical 是生效的。

此时我们的orientation是horizontal,当我们改变layout_gravity为right时。
这里写图片描述

紫色背景的TextView并没有像我们预期想象的那样，平行移动到最右，而是移动到最上边。

1.4 margin与padding

margin：控件属性，为控件距离布局边界的距离。

margin所有属性：这里写图片描述

margin属性测试：

这里写图片描述

padding：控件属性，控件中的内容距离控件边界的距离。

padding所有属性：这里写图片描述

padding属性测试：

注意观察文本TextView的位置！

这里写图片描述

2、RelativeLayout（相对布局）

2.1 gravity与ignoreGravity

gravity:设置布局内组件的对其方式。

这里写图片描述

与LinearLayout的gravity不同的是，在RelativeLayout中两个控件会重合，而LinearLayout的控件会依次排列出来。

ignoreGravity：被该属性选中的组件，将不受gravity的控制。

这里写图片描述

2.2 layout_alignParent

layout_alignParent：根据父容器来定位。

layout_alignParent所有属性：这里写图片描述

layout_alignParent属性测试：

这里写图片描述

2.3 layout_align

layout_align：根据兄弟组件定位

layout_align所有属性：这里写图片描述

layout_align属性测试：

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

    <TextView
        android:id="@+id/text1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#3ac656"
        android:layout_centerInParent="true"
        />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#2358d4"
        android:layout_toLeftOf="@id/text1"
        android:layout_centerInParent="true"
    />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#de3210"
        android:layout_toRightOf="@id/text1"
        android:layout_centerVertical="true"
        />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#c60d4a"
        android:layout_below="@id/text1"
        android:layout_centerHorizontal="true"
        />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#fd3bf4c9"
        android:layout_above="@id/text1"
        android:layout_centerHorizontal="true"
        />

</RelativeLayout>

这里写图片描述

这里在做一个align_left与align_toLeftOf 的区别。

align_left：将该控件的左边缘与给定ID控件的左边缘对齐（该控件默认位于父布局的上边）。

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

    <TextView
        android:id="@+id/text1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#3ac656"
        android:layout_centerInParent="true"
        />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#2358d4"
        android:layout_alignLeft="@id/text1"
    />


</RelativeLayout>

这里写图片描述

align_toLeftOf ：将该控件的右边缘和给定ID的控件的左边缘对齐（默认是位于父布局的顶部）。

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

    <TextView
        android:id="@+id/text1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#3ac656"
        android:layout_centerInParent="true"
        />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#2358d4"
        android:layout_toLeftOf="@id/text1"
    />


</RelativeLayout>

这里写图片描述

3、 GridLayout（网格布局）

3.1 rowCount与columnCount

rowCount : 设置行数
columnCount ：设置列数

如果只设置这个属性，实践发现并没有什么用。如果想要组件平均分配空间的话，还需要加上layout_rowWeight与layout_columnWeight属性。

有一点值得注意的地方是，如果想变大一整行的比例，则只需要改变该行第一个组件中的rowWeight即可，但是如果想变小一整行的比例饿，则需要改变该行所有组件中的rowWeight。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="2"
    android:columnCount="3"
    >

    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="Button"
        />


</GridLayout>

这里写图片描述

3.2 layout_row与layout_column

layout_row ：设置行（从0开始计算，意思为0为第1行）

layout_column ：设置列（同理）

3.3 layout_rowSpan与layout_columnSpan

layout_rowSpan ：横跨几行
layout_columnSpan：横跨几列

需要注意的是，如果想要组件占满横跨的行列，需要加上属性layout_gravity:”fill”。不过有时候又不需要设置emmm，不清楚。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="2"
    android:columnCount="3"
    >

    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="Button"
        />


</GridLayout>