关于androidlayout_weight属性的详细解析

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

【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

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

我的Android进阶之旅------>关于android:layout_weight属性的一个面试题
最近碰到一个面试题,按照下图,由Button和EditText组成的界面下厨布局代码,解决这题目需要使用android:layout_weight的知识. 首先分析上图所示的界面可以看成一下3个部分. ...
我的Android进阶之旅------> Android在TextView中显示图片方法
面试题:请说出Android SDK支持哪些方式显示富文本信息(不同颜色.大小.并包括图像的文本信息).并简要说明实现方法. 答案:Android SDK支持例如以下显示富文本信息的方式. 1.使用T ...
我的Android进阶之旅------>Android字符串资源中的单引號问题error: Apostrophe not preceded by 的解决的方法
刚刚在string字符串资源文件里,写了一个单引號.报错了,错误代码例如以下 error: Apostrophe not preceded by \ (in OuyangPeng's blog ) 资 ...
我的Android进阶之旅------> Android为TextView组件中显示的文本加入背景色
通过上一篇文章我的Android进阶之旅------> Android在TextView中显示图片方法 (地址:http://blog.csdn.net/ouyang_peng/article ...
我的Android进阶之旅------>Android系统设置默认来电铃声、闹钟铃声、通知铃声
首先了解Android系统本身提供的默认铃声文件,这些文件都放在 /system/media/audio 文件夹下. /system/media/audio/ringtones 系统来电铃声 ...
【我的Android进阶之旅】Android 混淆文件资源分类整理
之前将所有的混淆都配置在一个 proguard-rules.pro 这个Android Studio新建项目时自动生成的文件里面,而随着项目功能迭代越来越多,代码量越来越多,引用的第二方库.第三方库都 ...
我的Android进阶之旅------>Android实现音乐示波器、均衡器、重低音和音场功能
本实例来自于<疯狂Android讲义>.要实现详细的功能,须要了解下面API: MediaPlayer 媒体播放器 Visualizer 频谱 Equalizer 均衡器 BassBoo ...
我的Android进阶之旅------>Android关于Activity管理的一个简单封装
怎样管理当前的执行Activity栈,怎样彻底退出程序.本文封装了一个Activity管理类,能够方便随时退出程序. import java.util.Stack; import android.ap ...
【我的Android进阶之旅】Android使用getIdentifier()方法根据资源名来获取资源id
有时候我们想动态的根据一个资源名获得到对应的资源id,就可以使用getResources().getIdentifier()方法来获取该id.然后再使用该id进行相关的操作. 1.Demo示例下面用 ...

随机推荐

gcc，一个神奇的编译器
gcc是“GNU Compiler Collection”的缩写,从字面意思可以知道它是一个编译器集.gcc不止可以编译器c语言,还能用于c++,java,object-C等语言程序.但是在这里,我们 ...
linux学习笔记命令篇1---命令ls
前言: linux中接触最多的就是命令和文件. 命令命令是有其格式的, 一般格式是command [option] parameter1 parameter2 [paramete3 ...]: 注 ...
DHCP中继器
DHCP客户机和服务器在不同的子网内,客户机向服务器申请IP地址,这就要用到DHCP中继代理.DHCP中继代理实际上是一种软件技术,安装了DHCP中继代理的计算机称为DHCP中继代理服务器,它承担不同 ...
atn 编译java提示资源不足
今天用ant编译项目出现 [javac] 系统资源不足.的错误,如下 Buildfile: build.xml -compile: [javac] Compiling 919 source fi ...
作为一个Linux/Unix程序员有哪些要求
C程序开发: 熟悉数据库sql语言: 熟练掌握C语言(面向过程的),掌握C++(面向对象的) 工程管理工具:make,会写Makefile 熟悉IBM DB2.Informix.Sysbase.SQL ...
JVM Specification 9th Edition (3) Chapter 2. The Structure of the Java Virtual Machine
Chapter 2. The Structure of the Java Virtual Machine 内容列表 2.1. The class File Format (class文件的格式) 2. ...
traceroute/tracert--获取网络路由路径
traceroute 是用来检测发出数据包的主机到目标主机之间所经过的网关数量的工具.traceroute 的原理是试图以最小的TTL发出探测包来跟踪数据包到达目标主机所经过的网关,然后监听一个来自网 ...
Java中模拟POST上传文件
/** * * @param url 请求URL * @param filePath 本地文件地址 * @return */ public static String upload(String ur ...
CSS3自定义滚动条样式 -webkit-scrollbar (一)
Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...
C语言函数指针三（反向调用）
动态库代码 //简单的动态库开发----报文发送 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib. ...

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