【Android线性布局知识点总结】

线性布局知识点总结

作者: Q 曲 胖

文章目录:

1. 线性布局的概念

   1. 线性布局
   2. 其的基本格式
   3. 其的排列顺序

2. 线性布局的几种属性

3. 1. 线性布局的方向——orientation
   2. 线性布局对齐方向——layout_gravity
   3. 定义指定控件大小，权重——layout_weight
   4. 线性布局内边距——android:layout_margin以及android:padding

1.线性布局概念

1.1线性布局:

正如它的名字一样，线性布局会将其所包含的控件在线性方向上依次排列。我们来它的看基本示例图：

​ 图1：线性方向如图所示（ 本图片取自https://blog.csdn.net/huweiliyi/article/details/122909530）

1.2其的基本格式：

我们在XML界面写线性布局的格式：

 <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   
  //中间写我们接下来界面设计的语句......
        
</LinearLayout>

分析语句：xmlns:android 是必须的，因为它的作用是允许访问Android框架的基本属性，

比如下面的两个 android:layout_width 和 android:layout_height(这两个基本用于指定视图宽高的属性)。

1.3其的基本布局顺序：

简单的一句概括线性布局各个控件的基本布局顺序，在线性布局内，控件的排列顺序会按照它们在XML文件中出现的顺序排列。

2.线性布局的几种基本属性

2.1线性布局的方向—— orientation

既然是线性布局，就不只有一个方向，就像上面的图片有两种线性的方向，它们分别就是vertical（垂直方向）和horizontal（水平方向），下面我们写代码结合现象，来体会一下两种方向的效果。

先指定一下垂直方向vertical

代码如下：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"/>
    </LinearLayout>

效果如图：

​ 图2： vertical方向布局的效果图

现在，那我们修改一下android:orientation的方向，改为horizontal再来结合代码看效果：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"/>
    </LinearLayout>

效果如图：

​ 图3： horizontal方向布局效果如图

但是我们会发现，上面的1.2里基本格式里好像没有写我们这么最基本排列的方向，为什么会出现这种基本问题呢，那这是因为，如果我们不指定android:orientation的方向，那么在线性布局里，会默认成为horizontal方向。

下面加一个关于其可能遇见的问题：

这里写一个我编程里偶然遇到的问题，就是这个关于布局以及这个默认布局方向的

我写了一段代码，然后出现了一段爆红，如下：

Wrong orientation? No orientation specified, and the default is horizontal, yet this layout has multiple children where at least one has `layout_width="match_parent"
<LinearLayout//下面划红线

对其进行一个分析：没有指定方向（orientation），刚才讲默认情况下它们是水平（horizontal）的。

但是问题在于，这个错误信息表明您在使用 LinearLayout 时遇到了布局问题。错误的核心在于 LinearLayout 的默认布局方向是水平的（horizontal），但是我们在布局中至少有一个子视图设置了 layout_width=“match_parent”。当子视图的宽度设置为 match_parent 时，它会尝试占据整个父视图的宽度，这在水平布局中会导致问题，因为 LinearLayout 无法在水平方向上容纳宽度为 match_parent 的多个子视图。

问题如下：

​ 图4：报错图片

我的代码：

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Button1" />

        <TextView

            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"/>

效果如图：

​ 图5：错误效果图

那么我解决的方法是写成垂直方向：

android:orientation="vertical"

2.2线性布局对齐方向——layout_ gravity

下面来看 android:layout_gravity 属性，它和我们学到的android:gravity属性看起来有些相似，这两个属性有什么区别呢?其实从名字就可以看出，android:gravity用于指定文字在控件中的对齐方式，而android:layout_gravity用于指定控件在布局中的对齐方式。 android: layout_gravity的可选值和android:gravity差不多，但是需要注意，当Linearlayout的排列方向是horizontal时，只有垂直 向上的对齐方式才会生效。因为此时水平方向上的长度是不固定的，每添加一个控件，水平方向上的长度都会改变，因而无法指定该方向上的对齐方式。同样的道理，当LinearLayout的排列方向是vertical时，只有水平方向上的对齐方式才会生效。

现在，我们来写代码：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:text="Button1"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="Button2"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:text="Button3"/>
    </LinearLayout>

由于目前LinearLayou 的排列方向是horizontal，因此我们只能指定垂直方向上的排列方
向，将第一个Button的对齐方式指定为top,第二个Button的对齐方式指定为center_vertical,
第三个Button的对齐方式指定为bottom。重新运行程序:

效果如图：

​ 图6： layout_ gravity基本运行效果图

那现在我列举一下基本的layout_ gravity有什么：

top： 将对象放在其容器的顶部，不改变其大小.
bottom: 将对象放在其容器的底部，不改变其大小.
left: 将对象放在其容器的左侧，不改变其大小.
right: 将对象放在其容器的右侧，不改变其大小.
center_vertical: 将对象纵向居中，不改变其大小.垂直对齐方式：垂直方向上居中对齐。
fill_vertical: 必要的时候增加对象的纵向大小，以完全充满其容器.垂直方向填充
center_horizontal: 将对象横向居中，不改变其大小.水平对齐方式：水平方向上居中对齐
fill_horizontal: 必要的时候增加对象的横向大小，以完全充满其容器.水平方向填充
center: 将对象横纵居中，不改变其大小.
fill: 必要的时候增加对象的横纵向大小，以完全充满其容器.
clip_vertical: 附加选项，用于按照容器的边来剪切对象的顶部和/或底部的内容. 剪切基于其纵向对齐设置：顶部对齐时，剪切底部；底部对齐时剪切顶部；除此之外剪切顶部和底部.垂直方向裁剪
clip_horizontal: 附加选项，用于按照容器的边来剪切对象的左侧和/或右侧的内容. 剪切基于其横向对齐设置：左侧对齐时，剪切右侧；右侧对齐时剪切左侧；除此之外剪切左侧和右侧.水平方向裁剪

根据上面的介绍，我们得知当LinearLayout的排列方向是vertical时，只有水平方向上的对齐方式才会生效，horizontal同理。

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

2.3定义指定控件大小——layout_weight

接下来我们学习LinearLayout中的另一个重要属性–android:layout_weight。这个属
性允许我们使用比例的方式来指定控件的大小，它在手机屏幕的适配性方面可以起到非常重要的
作用。比如，我们正在编写一个消息发送界面，需要一个文本编辑框和一个发送按钮，修改
activity_main.xml中的代码。

现在，我们来写代码：

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:ignore="Suspicious0dp"
        android:layout_weight="1"
        android:hint="Type something">
    </EditText>


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Send"
            android:id="@+id/send">
        </Button>
    </LinearLayout>

效果如图：

​ 图7： layout_weight基本运行效果图

为什么将android:Layout _weight属性的值同时指定为1就会平分屏幕宽度呢?其实原理很简单，系统会先把LinearLayout 下所有控件指定的layout_weigh 值相加，得到一个总值，然后每个控件所占大小的比例就是用该控件的layout_weight值除以刚才算出的总值。因此如果想让EditText占据屏幕宽度的3/5，Button占据屏幕宽度的2/5，只需要将EditText的Layout_weight改成3，Button的 layout_weight改成2就可以了。

改写一下代码，再看效果：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:ignore="Suspicious0dp"
        android:layout_weight="3"
        android:hint="Type something">
    </EditText>
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:text="Send"
            android:id="@+id/send">
        </Button>
    </LinearLayout>

效果如图：

​ 图8： layout_weight修改比例图

我们还可以通过指定部分控件的layout_weight值来实现更好的效果。

改写一下代码，再看效果：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:ignore="Suspicious0dp"
        android:layout_weight="1"
        android:hint="Type something">
    </EditText>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Send"
            android:id="@+id/send">
        </Button>
    </LinearLayout>

效果如图：

​ 图9： layout_weight优化效果图2

这里我们仅指定了EditText的android:Layout_weight 属性，并将Button的宽度改回了wrap_content。这表示Button 的宽度仍然按照wrap-_content来计算，而EditText则会占满屏幕所有的剩余空间。使用这种方式编写的界面，不仅可以适配各种屏幕，而且看起来也更加舒服。

2.4线性布局内的边距——android:layout_margin以及android:padding

基础解释：android:padding是内边距，控件本身的内容与控件边缘的距离，而android:layout_margin是外边距，控件与其他控件之间的距离。

现在，我们把这两个代码带进实例来看图讲解：

现在，我们来写代码：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        tools:ignore="MissingConstraints">

    <Button
        android:layout_width="match_parent"
        android:layout_height="300px"
        android:text="1"
        android:layout_weight="0.5"
        android:background="#2F2F2F"
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="300px"
        android:text="2"
        android:layout_weight="0.5"
        android:background="DB0037FF"
        />
</LinearLayout>

先写一个基本的两个按钮的代码

效果如图：

​ 图10：未写padding的基本视图

现在，我们来修改代码看区别：

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        tools:ignore="MissingConstraints"
        android:padding="20dp">

效果如图：

​ 图11：写了padding的视图效果

现在，我们继续来修改代码看区别：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        tools:ignore="MissingConstraints"
        android:layout_margin="80dp">

效果如图：

​ 图12：写了android:layout_margin的视图效果

两个一起写：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        tools:ignore="MissingConstraints"
        android:layout_margin="80dp"
        android:padding="20dp">

效果如图：

​ 图13：写了两个的视图效果

外边距
android:layout_margin 整体距离
android:layout_marginTop 顶部距离
android:layout_marginLeft / android:layout_marginStart 左部距离
android:layout_marginRight / android:layout_marginEnd 右部距离
android:layout_marginBottom 底部距离

内边距

android:paddingTop 顶部距离
android:paddingLeft / android:paddingStart 左部距离
android:paddingRight / android:paddingEnd 右部距离
android:paddingBottom 底部距离
android:padding 整体距离