我的Android进阶之旅------>关于android:layout_weight属性的详细解析

简介: 关于androidlayout_weight属性的详细解析效果一效果二图3的布局代码图4的布局代码效果三图7代码图8代码效果四效果五 版权声明:本文为【欧阳鹏】原创文章,欢迎转载,转载请注明出处! 【http://blog.

版权声明:本文为【欧阳鹏】原创文章,欢迎转载,转载请注明出处!

http://blog.csdn.net/ouyang_peng/article/details/50757149

关于android:layout_weight属性的详细解析

效果一

图1
这里写图片描述

上面的效果图中三个文本框的宽度比为 1:2:3

图2
这里写图片描述
代码如下所示:

<?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">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

三个TextView的layout_width都设置为0dp,layout_weight的值分别为1:2:3,所以展示的比例也为1:2:3


效果二

图3
不对齐

图4
对齐

看到上面两个图片可以发现:
图3中的第一个文本框与第二、第三个文本框是不对齐的
图4中的第一个文本框与第二、第三个文本框是对齐的

图3的布局代码

下面来看图3的布局代码,如下所示

图5
这里写图片描述

<?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">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

图4的布局代码

下面来看图4的布局代码,如下所示

图6
这里写图片描述

<?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:baselineAligned="false">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

可以发现图3和图4的布局文件的差别是在父布局LinearLayout中设置了android:baselineAligned=”false”


效果三

图7
这里写图片描述

图7代码

<?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:baselineAligned="false">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

图8
这里写图片描述

图8代码

<?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:baselineAligned="false">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

图7和图8看起来好像效果一样。

  • 图7的代码只是设置textView1的layout_width为“wrap_content”,textView2、textView3的layout_width都为“0dp”
  • 图8的代码只是设置textView1、textView2、textView3的layout_width都为“wrap_content”

效果四

图9
这里写图片描述

图9代码如下:

<?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:baselineAligned="false">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

图10
这里写图片描述

图10代码如下:

<?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:baselineAligned="false">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

图9和图10的区别是:
图9中没有展示出TextView3,而图10中展示出TextView3

而图9和图10的代码区别只是TextView3的 android:layout_weight在图9中为3,在图10中为2

下面我们来弄清楚一下到底为什么会这样:

图11
这里写图片描述

如图11所示:假设外层的父布局LinearLayout的width为480dp,

参考:布局首先按照控件声明的尺寸进行分配,然后再将剩下的尺寸按weight进行分配。

按上面的参考来计算一下三个TextView的具体width。

第一步:计算剩余的尺寸
由于三个TextView的width都设置为match_parent,即都是480dp,那么剩余的尺寸为
restWidth=480-480*3=-480*2

第二步:计算TextView1的尺寸

参考:控件的最终宽度=控件声明的宽度+父控件剩余的宽度*所占的比例

分析 如图9:
按上面的参考来计算一下三个TextView的具体width。
即:TextView1的width1如下所示:
width1=480+(-480*2)(1/6)=480(4/6)
即:TextView2的width2如下所示:
width2=480+(-480*2)(2/6)=480(2/6)
即:TextView3的width3如下所示:
width3=480+(-480*2)(3/6)=480(0/6)
所以width1:width2:width3=2:1:0 如图9所示

分析 如图10:
按上面的参考来计算一下三个TextView的具体width。
即:TextView1的width1如下所示:
width1=480+(-480*2)(1/5)=480(3/5)
即:TextView2的width2如下所示:
width2=480+(-480*2)(2/5)=480(1/5)
即:TextView3的width3如下所示:
width3=480+(-480*2)(2/5)=480(1/5)
所以width1:width2:width3=3:1:1 如图10所示

效果五

图12
这里写图片描述

有时候需要展示如图12所示的效果:子控件占据父布局宽度的1/2或者1/3等要求的时候,就需要设置父布局android:weightSum参数

图12的代码如下所示:
这里写图片描述

<?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="horizontal"
    android:weightSum="2">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />
</LinearLayout>

图12
这里写图片描述
当父布局不设置android:weightSum参数的时候如下图所示:

<?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="horizontal"
    android:weightSum="3">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />
</LinearLayout>

分析一下图12:
假设外层的父布局LinearLayout的width为480dp,

参考:布局首先按照控件声明的尺寸进行分配,然后再将剩下的尺寸按weight进行分配。

按上面的参考来计算一下三个TextView的具体width。

第一步:计算剩余的尺寸
由于三个TextView的width都设置为match_parent,即都是480dp,那么剩余的尺寸为
restWidth=480-0=480

第二步:计算TextView1的尺寸

参考:控件的最终宽度=控件声明的宽度+父控件剩余的宽度*(weight/weightSum)

TextView的width=0+480*(1/3)=160

所以TextView的宽度为父布局控件LinearLayout的1/3

图13
这里写图片描述
图13的代码如下:

<?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="horizontal"
    >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />
</LinearLayout>

版权声明:本文为【欧阳鹏】原创文章,欢迎转载,转载请注明出处!

http://blog.csdn.net/ouyang_peng/article/details/50757149


关于android:layout_weight的更多介绍可以参考一下资源:

作者:欧阳鹏 欢迎转载,与人分享是进步的源泉!
转载请保留原文地址:http://blog.csdn.net/ouyang_peng

这里写图片描述

相关文章
|
3天前
|
设计模式 前端开发 Android开发
Android应用开发中的MVP架构模式解析
【5月更文挑战第25天】本文深入探讨了在Android应用开发中广泛采用的一种设计模式——Model-View-Presenter (MVP)。文章首先概述了MVP架构的基本概念和组件,接着分析了它与传统MVC模式的区别,并详细阐述了如何在实际开发中实现MVP架构。最后,通过一个具体案例,展示了MVP架构如何提高代码的可维护性和可测试性,以及它给开发者带来的其他潜在好处。
|
3天前
|
缓存 Java Android开发
构建高效的Android应用:内存优化策略解析
【5月更文挑战第25天】在移动开发领域,性能优化一直是一个不断探讨和精进的课题。特别是对于资源受限的Android设备来说,合理的内存管理直接关系到应用的流畅度和用户体验。本文深入分析了Android内存管理的机制,并提出了几种实用的内存优化技巧。通过代码示例和实践案例,我们旨在帮助开发者识别和解决内存瓶颈,从而提升应用性能。
|
4天前
|
移动开发 iOS开发
非标准h5字符串的WKWebView展示前的解析与插入属性或标题头与解决WKWebView无法加载视频首帧问题
非标准h5字符串的WKWebView展示前的解析与插入属性或标题头与解决WKWebView无法加载视频首帧问题
9 1
|
7天前
|
移动开发 Java Android开发
构建高效的Android应用:内存优化策略解析
【5月更文挑战第21天】在移动开发领域,尤其是面向资源受限的Android设备,内存管理与优化是提升应用性能和用户体验的关键因素。本文深入探讨了Android内存优化的多个方面,包括内存泄漏的预防、合理的内存分配策略、以及有效的内存回收机制。通过分析内存管理的原理和提供实用的编码实践,开发者可以显著减少其应用的内存占用,从而避免常见的性能瓶颈和应用程序崩溃问题。
|
8天前
|
算法 C语言
C语言进阶⑫(指针下)(指针和数组笔试题解析)(杨氏矩阵)(下)
C语言进阶⑫(指针下)(指针和数组笔试题解析)(杨氏矩阵)
9 0
|
8天前
|
C语言
C语言进阶⑫(指针下)(指针和数组笔试题解析)(杨氏矩阵)(中)
C语言进阶⑫(指针下)(指针和数组笔试题解析)(杨氏矩阵)
19 0
|
8天前
|
C语言
C语言进阶⑫(指针下)(指针和数组笔试题解析)(杨氏矩阵)(上)
C语言进阶⑫(指针下)(指针和数组笔试题解析)(杨氏矩阵)
20 0
|
11天前
|
JSON Android开发 数据格式
Android框架-Google官方Gson解析,android开发实验报告总结
Android框架-Google官方Gson解析,android开发实验报告总结
|
11天前
|
Android开发
Android高级开发面试题以及笞案整理,实战解析
Android高级开发面试题以及笞案整理,实战解析
|
11天前
|
Android开发
71,字节跳动历年校招Android面试真题解析
71,字节跳动历年校招Android面试真题解析