Android LinearLayout线性布局详解

　　为了更好地管理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
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="true"
        android:orientation="horizontal">

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

        </TextView>
        <TextView
            android:layout_width="wrap_content"
            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" 使用
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:baselineAligned="false"
        android:orientation="horizontal">

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

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

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

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

    </TextView>
    <TextView
        android:layout_width="wrap_content"
        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 中

　　??代码

<ListView
        android:layout_width="match_parent"
        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);

　　??关键代码 ：

 <LinearLayout
        android:layout_width="match_parent"
        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 xmlns:android="http://schemas.android.com/apk/res/android">

    <size android:width="5dp" android:width="5dp"/> <solid android:color="@android:color/holo_purple" /> </shape>

　　??这里要使用 size 来定义 线的一个宽度 width 作为横向的分割线，如果是纵向的就要定义一个 高度 height

        android:divider="@drawable/linear_line"
        android:showDividers="middle|beginning"

　　??效果：三种可以相互组合

　　

　　

　　

【搭配属性四】dividerPadding 分割线的padding

　　XML： android:dividerPadding="10dp"

　　JAVA：linearLayout.setDividerPadding(10);

　　??代码：

<LinearLayout
        android:layout_width="match_parent"
        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 及其重要的一个属性，根据权重来设置子组件的在整个屏幕的占比，能够达到很好的适配屏幕的效果

代码：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@drawable/linear_line"
        android:baselineAligned="false">

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

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

        </TextView>
        <TextView
            android:layout_width="wrap_content"
            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
 

原文地址：https://www.cnblogs.com/xqz0618/p/linearlayout.html

时间： 2024-07-29 02:01:10

Android LinearLayout线性布局详解的相关文章

New UI-布局之LinearLayout(线性布局)详解

New UI-布局之LinearLayout(线性布局)详解  --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http://

Android系统五大布局详解Layout

我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前, 视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit等等.那么我们平时看到的Android手机中那些漂亮的界面是怎么显示 出来的呢?这就要用到Android的布局管理器了,网上有人比喻的很好:布局好比是建筑里的框架,组件按照布局的要求依次排列,就组成了用于看见的漂亮界面了. 在分析布局之前,我们首先看看控件:Android中任何可视化的控件都是从an

android：TableLayout 布局详解

这篇博文包括的内容: 1.TableLayout简介 2.TableLayout行列数的确定 3.TableLayout可设置的属性详解 4.一个包含4个TableLayout布局的实例及效果图 一.Tablelayout简介 Tablelayout类以行和列的形式对控件进行管理,每一行为一个TableRow对象,或一个View控件. 当为TableRow对象时,可在TableRow下添加子控件,默认情况下,每个子控件占据一列. 当为View时,该View将独占一行. 二.TableLayout

Android基础入门教程——2.2.1 LinearLayout(线性布局)

Android基础入门教程--2.2.1 LinearLayout(线性布局) 标签(空格分隔): Android基础入门教程 本节引言: 本节开始讲Android中的布局,Android中有六大布局,分别是: LinearLayout(线性布局),RelativeLayout(相对布局),TableLayout(表格布局) FrameLayout(帧布局),AbsoluteLayout(绝对布局),GridLayout(网格布局) 而今天我们要讲解的就是第一个布局,LinearLayout(线

Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

[Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.Android 布局学习之——LinearLayout的layout_weight属性   4.Android 布局学习之——LinearLayout属性baselineAligned的作用及baseline    Layout Parameters(布局参数): 在XML文件中,我们经常看到类似与lay

Android 布局详解

Android 布局详解 1.重用布局 当一个布局文件被多处使用时,最好<include>标签来重用布局. 例如:workspace_screen.xml的布局文件,在另一个布局文件中被重复使用三次,那么可使用如下的布局代码: <LinearLayout androd:layout_width=”fill_parent” androd:layout_height=”fill_parent” > <!-- 引用三次workspace_screen --> <incl

android布局详解

http://blog.163.com/zhangzheming_282/blog/static/117920962013072502787/ AbsoluteLayout——绝对布局   必须设置   android:layout_x="30px"  android:layout_y="50px"一般不推荐用 FrameLayout———— 已层叠的方式显示,第一个添加的组件放在最底层,最后添加到框架中得试图显示的最顶层,上一层会覆盖下一层的控件. <Scr

android 59 LinearLayout 线性布局

##常见的布局* LinearLayout 线性布局线性布局往左右拉是拉不动的,> 线性布局的朝向 vertical|horizontal> 线性布局的权重 weight 和 0dip一起使用 <?xml version="1.0" encoding="utf-8"?> <!-- 线性布局控件自上而下整齐的排列 --> <LinearLayout xmlns:android="http://schemas.andr

android学习——LinearLayout线性布局

LinearLayout线性布局 LinearLayout是一种线型的布局方式.LinearLayout布局容器内的组件一个挨着一个地排列起来:不仅可以控制个组件横向排列,也可控制各组件纵向排列.通过orientation属性设置线性排列的方向是垂直(vertical)还是纵向(horizontal). 我们下面通过XML布局和Java代码布局两种方式分别举例: 一.XML方式布局 1.创建一个空白Activity 2.打开“res/layout/activity_main.xml”文件,修改成