在安卓开发中！经常要设计页面，所以在安卓开发中提供了LinearLayout（线性布局），RelativeLayout（相对布局），FrameLayout（ 重叠布局），TableLayout （表格布局 ）GridLayout （网格布局），AbsoluteLayout（绝对布局）这六大布局，其中LinearLayout线性布局也是常用于布局页面的！
 
 
 
LinearLayout概念：
 
指子控件以水平或垂直方式排列，其中排列方式是指这个布局中的所有控件在线性方向上依次排列。
 
 
 
1．width和height属性：
 
作用：设置布局的宽高大小来确定布局空间大小！
 
android:layout_width：布局的宽度，用wrap_content表示组件的实际宽度，match_parent表示填充父容器
 
android:layout_height：布局的长度，用wrap_content表示组件的实际长度，match_parent表示填充父容器
 
 
 
2．orientation属性:
 
作用：设置线性布局的布局方向，可以在一个方向垂直或者水平分布所有子项！
 
android:orientation：布局中的排列方式：
 
有两种方式：horizontal水平，vertical竖直，如果不设置则默认水平显示
 
 
 
当 android:orientation="vertical" 时,只有水平方向的设置才起作用,垂直方向的设置不起作用.即:left,right,center_horizontal 是生效的.
 
 
 
当 android:orientation="horizontal" 时, 只有垂直方向的设置才起作用,水平方向的设置不起作用.即:top,bottom,center_vertical 是生效的
 
 
 
例子：
 
 
 
 
 
 
3.id属性：
 
作用：设置id属性可方便找到该控件！
 
android:id：为该组件添加一个资源id，即标识符，可以通过id来找到该布局或者控件。
 
例子：
 
 
 
 
4．gravity属性:
 
作用：设置布局中的多个布局或控件之间的对齐！
 
android:layout_gravity是本(子)元素相对于父元素的对齐方式设置在子元素上. 
 
android:gravity="bottom|right"是本(父)元素所有子元素的对齐方式，设置在父元素上,多个值用 | 隔开.
 
其属性值分别为：
 
center（整体居中）、center_vertical（垂直居中）、center_horizontal（水平居中）、
 
right（居右）、left（居左）、bottom（底部）、top（顶部）等一些属性值；
 
 
例子：
 
 
 
 
5．background属性：
 
作用：设置布局中的为背景图片或者背景颜色，甚至自定义样式！
 
android:background：为该组件添加一个背景图片或者背景颜色，颜色常以六位的十六进制表示
 
例子：
 
 
 
 
6．padding 和 margin属性：
 
作用：设置布局的内外边距！
 
android:layout_margin ：外边距，布局或控件距离外部元素的边距
 
android:layout_padding ：内边距，布局或控件距离内部元素的边距
 
例子:
 
 
 
 
7．weight属性:
 
作用：设置布局的空闲空间的占据权重来决定布局显示的大小！
 
android:layout_weight：权重，除了被显示占据的空间以外的的空间，然后根据权重的大小来分配空间，使用权重通常会把分配该权重方向的宽度设置为0dp，如果未设置0dp，则该控件会占据指定的宽度，然后再加上根据权重来分配的空间，
 
 
 
设置weiget属性的前提：
 
子元素设置了android:layout_width = "match_parent" 属性 ( 水平方向 )
 
或子元素设置了 android:layout_height = "match_parent"属性( 垂直方向).
 
 
 
如果某个子元素的android:layout_width = "0dp"或android:layout_height="0dp" ,
 
则 android:layout_weight的设置值 对该方向上空间的分配则刚好相反。
 
 
 
Weight是分割闲置空间，主要分为以下两种：
 
水平布局 分割宽度
 
垂直布局 分割的高度
 
注意：分割的时候 指定的高度或者宽度时不能用fill_parent/match_parent
 
例子：
 

 
为了更好地管理Android应用的用户界面里的各组件，Android提供了布局管理器。通过使用布局管理器，Android应用图形用户界面具有良好的平台无关性。推荐使用布局管理器来管理组件的分布、大小，而不是直接设置组件的位置和大小。可以使用布局管理器嵌套布局管理器，即也可作为一个UI组件来使用。
 
LinearLayout可以控制组件横向排列或者纵向排列，内容不会换行，超出屏幕部分将不会显示出来。
 
学习图解
 

 
LinearLayout 常用XML属性及方法
 
【属性一】orientation 设置子组件的排列方式(单选)
 
XML: android:orientation="horizontal"
 

 
horizontal：横向排列
 
vertical：纵向排列
 
JAVA ：linearLayout.setOrientation(LinearLayout.VERTICAL);
 
LinearLayout.HORIZONTAL 横向排列
 

 
LinearLayout.VERTICAL 纵向排列
 

 
【属性二】gravity 设置子组件的对齐方式(多选)
 
XML: android:gravity="center"
 

 
JAVA ：linearLayout.setGravity(Gravity.CENTER);
 

 
【属性三】baselineAligned 设置子元素基准线对弃,默认为true
 
基准线：
 
打开的英语练习本，那条红线就是基准线
 

 

 
XML: android:baselineAligned="false"
 

 
JAVA： linearLayout.setBaselineAligned(true);代码：true
 
android:layout_height="wrap_content"
 
android:baselineAligned="true"
 
android:orientation="horizontal">
 

 
android:layout_height="wrap_content"
 
android:background="@android:color/holo_red_light"
 
android:padding="20dp"
 
android:text="text1"
 
android:textSize="30sp">
 
TextView>
 

 
android:layout_height="wrap_content"
 
android:background="@android:color/holo_blue_light"
 
android:padding="10dp"
 
android:text="text2"
 
android:textSize="16sp">
 
TextView>
 
LinearLayout>效果:
 

 

 
【搭配属性三】baselineAlignedChildIndex LinearLayout的基准线以他的第几个子元素为准，下标从0开始
 
一个LinearLayout 里面有很多 textview ，每一个 textview 都有自己的基准线，那么LinearLayout可能也是另一个LinearLayout的子元素，作为子元素 baselineAlignedChildIndex 就决定这他的一个基准线XML：android:baselineAlignedChildIndex="0"JAVA：linearLayout.setBaselineAlignedChildIndex(0);代码：⭐注意内部的LinearLayout，后面将在 第二个LinearLayout上添加 baselineAlignedChildIndex ，搭配  baselineAligned="false" 使用
 
android:layout_width="match_parent"
 
android:layout_height="match_parent"
 
android:orientation="horizontal">
 

 
android:layout_height="wrap_content"
 
android:baselineAligned="false"
 
android:orientation="horizontal">
 

 
android:layout_height="wrap_content"
 
android:background="@android:color/holo_blue_light"
 
android:text="这是text2"
 
android:textSize="20sp">
 
TextView>
 

 
android:layout_height="wrap_content"
 
android:background="@android:color/holo_red_light"
 
android:text="这是text1"
 
android:textSize="30sp">
 
TextView>
 

 
android:layout_height="wrap_content"
 
android:background="@android:color/holo_green_dark"
 
android:text="这是text2"
 
android:textSize="15sp">
 
TextView>
 
LinearLayout>
 

 
android:layout_height="wrap_content"
 
android:text="这是text4"
 
android:textSize="25sp"
 
android:background="@android:color/holo_orange_light"
 
>
 
TextView>
 

 
android:layout_height="wrap_content"
 
android:background="@android:color/black"
 
android:text="text"
 
android:textColor="@android:color/white"
 
android:textSize="15sp">
 
TextView>LinearLayout>效果：
 

 

 

 
⭐ 总结默认LinearLayout是没有基准线的，从图一和图三的对比可知。
 
下标从0开始三个子组件，最大index为2，超过2时布局将不显示
 
这个属性是用来决定当前LinearLayout的基准线时以哪个子组件为准的
 
????思考1：如果搭配 baselineAligned="true" 是什么样的效果？
 
代码：(修改上方代码)
 

 
效果：
 

 

 

 

 
⭐总结
 
好像已经把上方的总结都打乱了，但是对比 baselineAligned="false" 的效果，可以发现，其实LinearLayout 的基准线其实还是在  baselineAligned="false" 时对应子组件的基准线位置为准的，可以参考 text4 和text5 的位置，他们所对弃的基准线，不是 前三个 text 变化后位置的基准线，而是变化之前的基准线位置。
 
????思考2：基准线时平行的，如果设置 LinearLayout 子组件为纵向排列那还有效果吗？
 
答：没有效果没有变化
 

 
【属性四】divider 分割线
 
我第一次遇到这个divider 是在 ListView 中
 
????代码
 
android:layout_height="match_parent"
 
android:divider="@color/colorPrimary"
 
android:dividerHeight="3dp">        ListView>
 
????效果
 

 
⭐注意这里  divider 必须和 dividerHeight 才能显示出效果。于是凭借经验，你以为在LinearLayout也能如此，那就入坑了
 
XML: android:divider="@mipmap/ic_launcher"
 
????必须使用图片或者是shape文件，不能直接和ListView一样直接使用颜色(会导致没效果)
 
????需要搭配 showDividers 使用才有效果
 
JAVA: linearLayout.setDividerDrawable(getResources().getDrawable(R.mipmap.ic_launcher));
 
【关键属性四】 showDividers 分割线显示的位置(可多选)
 

 
XML： android:showDividers="middle|beginning"
 
JAVA：linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
 
????关键代码 ：
 
android:layout_height="wrap_content"
 
android:divider="@mipmap/ic_launcher"
 
android:showDividers="middle|beginning"
 
android:orientation="horizontal">LinearLayout>
 
????效果：
 

 
使用shape 分割
 
创建 linear_line.xml
 

 
将  selector 修改成shape，如下<?xml  version="1.0" encoding="utf-8"?>
 
  shape>
 
????这里要使用 size 来定义 线的一个宽度 width 作为横向的分割线，如果是纵向的就要定义一个 高度 heightandroid:divider="@drawable/linear_line"
 
android:showDividers="middle|beginning"
 
????效果：三种可以相互组合
 

 

 

 
【搭配属性四】dividerPadding 分割线的padding
 
XML： android:dividerPadding="10dp"
 
JAVA：linearLayout.setDividerPadding(10);
 
????代码：
 
android:layout_height="wrap_content"
 
android:divider="@drawable/linear_line"
 
android:showDividers="middle"
 
android:dividerPadding="10dp"
 
android:orientation="horizontal">LinearLayout>
 
????效果：
 

 

 
⭐总结默认分割线的高度或宽度是和LinearLayout 布局管理器大小一致
 
如果是横向布局，shape 中设置的 height 对显示没有影响
 
可以发现如果是横向排列只影响纵向的padding，纵向则影响横向的padding
 
LinearLayout 子组件的特殊属性
 
所有子组件都受 LinearLayout.LayoutParams 控制
 
【属性一】 layout_gravity 设置自身在布局管理器中的位置
 
????上方讲解到了gravity，其gravity不是LinearLayout 的特有属性,但layout_gravity 是其子组件的特殊属性。具体区别请参考我的博客 layout_gravity和gravity的区别：https://www.cnblogs.com/xqz0618/p/gravity.html，这里不再详细说明
 

 
【属性二】layout_weight 权重 ????(重要属性)
 
这是LinearLayout 及其重要的一个属性，根据权重来设置子组件的在整个屏幕的占比，能够达到很好的适配屏幕的效果
 
代码：
 
android:layout_height="wrap_content"
 
android:divider="@drawable/linear_line"
 
android:baselineAligned="false">
 

 
android:layout_height="wrap_content"
 
android:layout_weight="1"
 
android:background="@android:color/holo_blue_light"
 
android:text="text1"
 
android:textSize="20sp">
 
TextView>
 

 
android:layout_height="wrap_content"
 
android:layout_weight="2"
 
android:background="@android:color/holo_red_light"
 
android:text="text2"
 
android:textSize="30sp">
 
TextView>
 

 
android:layout_height="wrap_content"
 
android:layout_weight="3"
 
android:background="@android:color/holo_green_dark"
 
android:text="text3"
 
android:textSize="15sp">
 
TextView>
 
LinearLayout>
 
????这里是横向布局，将对 layout_width 进行修改得到不同的结果
 
情况一：将 layout_width 全部设置成 0dp，权重分别是1：2：3，设置0dp后必须使用权重才不报错
 

 
⭐可以看出来 三个text 的宽度在误差范围内是和weight权重相同的 1：2：3，所以单个text 的宽度计算就为：假设屏幕的宽度为P，单个子组件的大小为W，子组件的权重之和为G，该组件设置的权重为H
 
则 W = H/G*P
 
即当前 1：2：3
 
W = H/G*P = 1/(1+2+3)*P = 1/6P
 
text1占比为屏幕的 1/6
 
情况二：将 layout_width 全部设置成 wrapcontent
 

 
????情况二并没有像情况一一样，根据权重的比例 1：2：3，按照情况1的公式就不成立
 
⭐实际上权重是根据总屏幕的大小 P减去所有子组件的 layout_width 然后再根据权重进行分配的大小再加上 layout_width。这里说有点乱了，看分析。
 

 
????用控件的大小减去文本的大小得到的宽度，考虑误差范围内，其实是 1：2：3的假设屏幕的宽度为P，单个子组件的大小为W，子组件的权重之和为G，该组件设置的权重为H，子组件的layout_width为L
 
则 W = H/G*(P-3L)+L
 
即当前 1：2：3
 
text1的屏幕占比 W =H/G*(P-3L)+L = 1/(1+2+3)*(P-3L)+L
 
这里使用 wrap_content不好计算
 
反过来思考 当 L=0dp 时
 
W = 1/(1+2+3)*(P-0)+0= 1/6P
 
与上方结果一致
 
情况三：将 layout_width 全部设置成 match_parent
 
从上图可以看出 text1和text2 比例分别为 2：1，text3不见了，用上方的式子验证：假设屏幕的宽度为P，单个子组件的大小为W，子组件的权重之和为G，该组件设置的权重为H，子组件的layout_width为L
 
则 W = H/G*(P-3L)+L
 
即当前 1：2：3
 
由于此时 layout_width是match_parent,则 L= P
 
text1的屏幕占比 W =H/G*(P-3L)+L = 1/(1+2+3)*(P-3L)+L=1/(1+2+3)*(P-3P)+P = 1/6*(-2P)+P= 2/3P
 
由此
 
text2的 W = 1/3P
 
text3的 W = 3/(1+2+3)*(-2P)+P = 0dp那也就是说text3并不是超出屏幕没显示，而是他的宽度就是为0 //可以添加一个滚动控件来验证一下
 
⭐总结
 
我们得到的统一公式，来计算这个屏幕占比问题(其实话说回来，你整这么麻烦干嘛，直接使用0dp不爽吗，当然一些场景可能需要 warpcontent)假设屏幕的宽度为P，单个子组件的大小为W，子组件的权重之和为G，该组件设置的权重为H，子组件的layout_width为L
 
则 W = H/G*(P-3L)+L

LinearLayout线性布局：
 
线性布局即横向线性或竖向线性的布局各个组件
 
下图为竖向线性：
 
 
必要属性(attribute)：
 
1.android:layout_width——宽度
 
取值(value):wrap_content:自适配  match_parent:与上级适配
 
 
 
2.android:layout_height——高度
 
取值:wrap_content:自适配  match_parent:与上级适配
 
 
 
3.android:orientation——布局方式
 
取值：horizontal:横向线性布局  vertical:竖向线性布局
 
 
 
常用属性(attribute):
 
1.android:id——设置id
 
取值(value):自设
 
 
 
2.android:background——背景
 
取值:取values文件夹下定义好的值，如(@color/colorBlack)或者自设颜色，如(#000000)
 
 
 
3.android:layout_margin——设置外边距
 
取值:例如(20dp)
 
 
 
4.android:layout_padding——设置内边距
 
取值:例如(10dp)
 
 
 
5.android:gravity——设置内部视图的位置
 
取值:bottom底部显示 center中间显示 top顶部显示 right右部显示 left左部显示
 
 
 
6.android:layout_gravity——设置相对上级视图的位置
 
取值:bottom底部显示 center中间显示 top顶部显示 right右部显示 left左部显示
 
 
 
特有属性(attribute):
 
1.android:layout_weight——设置权重
 
取值:例如(1)
 
 

计算器布局的实现有好多方法，先用LinearLayout实现一次吧，以后可能还会用其他布局
 
先上最终结果
 
 
实现方式是利用LinearLayout的layout_weight属性，实现按钮的均匀分布
 
由于layout_weight属性的特殊性，
 
当外层LinearLayout为垂直排布的时候，内部控件的layout_height要设为0dp,layout_width设为match_parent
 
当外层LinearLayout为水平排布的时候，内部控件的layout_width要设为0dp,layout_height设为match_parent
 
否则，最后的结果可能并不会像你想象得那样
 
 
 
这是一个简单到不能再简单的计算器了，只有加减乘除，
 
布局可以分为
 
第一行EditText    layout_weight="1"
 
第二行，第三行，第四行分别有四个按钮    layout_weight="1"
 
第五行和第六行因为最后有一个占两行的等号
 
所以再嵌套一层
 
 
最外层的LinearLayout    layout_weight=2
 
里边嵌套四个垂直排列的LinearLayout
 
 
 
最外层当然是一个
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



</LinearLayout>
 
第一个控件是一个EditText
 
设置从右到左编辑，点击不会唤醒键盘
 
<EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="end|bottom"
        android:editable="false"/>
 
剩下的就是LinearLayout里套Button 或者LinearLayout里套LinearLayout里再套Button了
 
全部代码如下，id起的不是很规范，英语渣（的不能再渣）
 
<?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:orientation="vertical">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="end|bottom"
        android:editable="false"/>

    <!--第一行按钮c，÷，×，del-->
    <LinearLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/bt_clear"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="C"/>

        <Button
            android:id="@+id/bt_divide"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="÷"/>

        <Button
            android:id="@+id/bt_multiply"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="×"/>

        <Button
            android:id="@+id/bt_delete"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="del"/>

    </LinearLayout>

    <!--第二行按钮7,8,9，- -->
    <LinearLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/num7"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="7"/>

        <Button
        android:id="@+id/num8"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:text="8"/>

        <Button
            android:id="@+id/num9"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="9"/>
        <Button
            android:id="@+id/sub"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="-"/>

    </LinearLayout>

    <!-- 第三行按钮 4,5,6，+ -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <Button
            android:id="@+id/num4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="4" />

        <Button
            android:id="@+id/num5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="5" />

        <Button
            android:id="@+id/num6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="6" />

        <Button
            android:id="@+id/plus"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="+" />

    </LinearLayout>

    <!-- 第四，五行按钮 -->
    <LinearLayout
        android:layout_weight="2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal">

        <!-- 第一列按钮 1，% -->
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:id="@+id/num1"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="1"/>

            <Button
                android:id="@+id/bt010"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="%"/>

        </LinearLayout>

        <!-- 第二列按钮 2 ， 0 -->
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:id="@+id/num2"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="2"/>

            <Button
                android:id="@+id/num0"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="0"/>

        </LinearLayout>

        <!-- 第三列按钮 3，. -->
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:id="@+id/num3"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="3"/>

            <Button
                android:id="@+id/btpdot"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="."/>

        </LinearLayout>


        <!-- 第四列按钮 = -->
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:id="@+id/bted"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="="/>


        </LinearLayout>

    </LinearLayout>



</LinearLayout>