备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2016-02-27 1001
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 关于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

这里写图片描述

文章标签：
云解析DNS
Android开发
数据格式
XML
关键词：
云解析DNS android
Android解析
云解析DNS属性
属性云解析DNS
Android属性
字节卷动
目录
相关文章
是阿超
|
21天前
|
XML Java Android开发
Android实现自定义进度条(源码+解析)
Android实现自定义进度条(源码+解析)
是阿超
50 1
小小娥子
|
1月前
|
C语言
【进阶C语言】数组笔试题解析
【进阶C语言】数组笔试题解析
小小娥子
17 0
Hcoco_me
|
3月前
|
存储 算法 安全
AVB数据解析：Android verified boot 2.0 vbmeta 数据结构解析
AVB数据解析：Android verified boot 2.0 vbmeta 数据结构解析
Hcoco_me
130 0
东北赵四
|
1天前
|
Java Spring
Javaweb之SpringBootWeb案例之事务进阶的详细解析
Javaweb之SpringBootWeb案例之事务进阶的详细解析
东北赵四
7 0
泡沫o0
|
1月前
|
存储 安全 程序员
【C++ 包装器类 智能指针】完全教程：std::unique_ptr、std::shared_ptr、std::weak_ptr的用法解析与优化 — 初学者至进阶指南
【C++ 包装器类 智能指针】完全教程：std::unique_ptr、std::shared_ptr、std::weak_ptr的用法解析与优化 — 初学者至进阶指南
泡沫o0
68 0
图灵重生我名苏泽
|
1月前
|
安全 Java 数据安全/隐私保护
【Spring底层原理高级进阶】【SpringCloud整合Spring Security OAuth2】深入了解 Spring Security OAuth2：底层解析＋使用方法+实战
【Spring底层原理高级进阶】【SpringCloud整合Spring Security OAuth2】深入了解 Spring Security OAuth2：底层解析＋使用方法+实战
图灵重生我名苏泽
80 0
请看我回答~
|
1月前
|
编译器 开发工具 Android开发
Android 12 新特性深度解析
【2月更文挑战第15天】 随着移动操作系统的不断进化，Android 12带来了一系列创新功能与性能提升。本文将深入剖析Android 12的核心新特性，包括隐私仪表盘、通知管理、设备控制以及性能优化等方面，为开发者和用户提供全面的更新指南。
请看我回答~
20 1
阿珊和她的猫
|
1月前
|
缓存 JavaScript 网络架构
Vue.js 进阶技巧：keep-alive 缓存组件解析
Vue.js 进阶技巧：keep-alive 缓存组件解析
阿珊和她的猫
42 0
一只牛博
|
2月前
|
SQL 监控 关系型数据库
MySQL Binlog深度解析：进阶应用与实战技巧【进阶应用】
MySQL Binlog深度解析：进阶应用与实战技巧【进阶应用】
一只牛博
44 0
众所周知
|
3月前
|
JSON Java Android开发
Android网络和数据交互： 请解释Android中的JSON解析库，如Gson。
Android网络和数据交互： 请解释Android中的JSON解析库，如Gson。
众所周知
24 0

热门文章

最新文章

  • 1
    我的Android之路(持续更新总结~)
  • 2
    Android实现自定义进度条(源码+解析)
  • 3
    安卓适配性策略：确保应用在不同设备上的兼容性
  • 4
    构建高效Android应用：探究Kotlin与Java的性能差异
  • 5
    安卓安全性指南：保护用户数据免受恶意攻击
  • 6
    安卓多线程和并发处理：提高应用效率
  • 7
    Android为什么不能在子线程更新UI
  • 8
    构建高效Android应用：从优化用户体验到提升性能
  • 9
    RocketMQ 流数据库解析：如何实现一体化流处理？
  • 10
    Android反编译查看源码
  • 1
    一文解析 ODPS SQL 任务优化方法原理
    14
  • 2
    并发编程之线程池的底层原理的详细解析
    8
  • 3
    并发编程之线程池的详细解析
    5
  • 4
    并发编程之读写锁ReadWriteLock的详细解析(带小案例)
    5
  • 5
    并发编程之的HashSet和HashMap的详细解析
    5
  • 6
    Redis 实现延迟任务的深度解析
    10
  • 7
    并发编程之的ArrayList安全性的详细解析
    6
  • 8
    并发编程之的虚假唤醒和精准唤醒的详细解析
    10
  • 9
    并发编程之synchronized的详细解析
    10
  • 10
    并发编程之线程池的应用以及一些小细节的详细解析
    11

    • 相关课程

    更多
  • 云计算工程师解析与实战-网络专家篇（体验版）
  • 深入解析Docker容器化技术
  • 开源Android容器化框架Atlas开发者指南
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline

    • 相关实验场景

    更多
  • 通过云拨测对指定服务器进行Ping/DNS监测

    • 推荐镜像

    更多
  • DNS
  • DNS
  • DNS
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）