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

时间:2022-04-02 06:45:26

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

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

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

效果一

图1

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

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

图2

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

代码如下所示:

<?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

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

图4

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

看到上面两个图片可以发现:

图3中的第一个文本框与第二、第三个文本框是不对齐的

图4中的第一个文本框与第二、第三个文本框是对齐的

图3的布局代码

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

图5

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

<?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

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

<?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

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

图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

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

图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

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

图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

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

图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

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

如图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

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

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

图12的代码如下所示:

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

<?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进阶之旅------>关于android:layout_weight属性的详细解析

当父布局不设置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

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

图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属性的详细解析的更多相关文章

  1. 我的Android进阶之旅------>关于android&colon;layout&lowbar;weight属性的一个面试题

    最近碰到一个面试题,按照下图,由Button和EditText组成的界面下厨布局代码,解决这题目需要使用android:layout_weight的知识. 首先分析上图所示的界面可以看成一下3个部分. ...

  2. 我的Android进阶之旅------&amp&semi;gt&semi; Android在TextView中显示图片方法

    面试题:请说出Android SDK支持哪些方式显示富文本信息(不同颜色.大小.并包括图像的文本信息).并简要说明实现方法. 答案:Android SDK支持例如以下显示富文本信息的方式. 1.使用T ...

  3. 我的Android进阶之旅------&amp&semi;gt&semi;Android字符串资源中的单引號问题error&colon; Apostrophe not preceded by 的解决的方法

    刚刚在string字符串资源文件里,写了一个单引號.报错了,错误代码例如以下 error: Apostrophe not preceded by \ (in OuyangPeng's blog ) 资 ...

  4. 我的Android进阶之旅------&amp&semi;gt&semi; Android为TextView组件中显示的文本加入背景色

    通过上一篇文章 我的Android进阶之旅------> Android在TextView中显示图片方法 (地址:http://blog.csdn.net/ouyang_peng/article ...

  5. 我的Android进阶之旅------&amp&semi;gt&semi;Android系统设置默认来电铃声、闹钟铃声、通知铃声

    首先了解Android系统本身提供的默认铃声文件,这些文件都放在  /system/media/audio  文件夹下. /system/media/audio/ringtones   系统来电铃声 ...

  6. 【我的Android进阶之旅】Android 混淆文件资源分类整理

    之前将所有的混淆都配置在一个 proguard-rules.pro 这个Android Studio新建项目时自动生成的文件里面,而随着项目功能迭代越来越多,代码量越来越多,引用的第二方库.第三方库都 ...

  7. 我的Android进阶之旅------&amp&semi;gt&semi;Android实现音乐示波器、均衡器、重低音和音场功能

    本实例来自于<疯狂Android讲义>.要实现详细的功能,须要了解下面API: MediaPlayer  媒体播放器 Visualizer 频谱 Equalizer 均衡器 BassBoo ...

  8. 我的Android进阶之旅------&amp&semi;gt&semi;Android关于Activity管理的一个简单封装

    怎样管理当前的执行Activity栈,怎样彻底退出程序.本文封装了一个Activity管理类,能够方便随时退出程序. import java.util.Stack; import android.ap ...

  9. 【我的Android进阶之旅】Android使用getIdentifier&lpar;&rpar;方法根据资源名来获取资源id

    有时候我们想动态的根据一个资源名获得到对应的资源id,就可以使用getResources().getIdentifier()方法来获取该id.然后再使用该id进行相关的操作. 1.Demo示例 下面用 ...

随机推荐

  1. WCF学习之旅—WCF服务的批量寄宿(十三)

    上接    WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) WCF学习之旅—WCF服务的Windows 服务程序寄宿(十一) WCF学习之旅—WCF ...

  2. LayaAir引擎——(三)

    LyaAir引擎(JavaScript)实现图片的翻转一半 图片4.png位于bin/开场过渡 文件夹下,图片大小150*30(根据实际情况做调整) var button; var scale1 = ...

  3. page文件

    题目:主页面引用 page 文件 ./configs/style.conf ./templates/main.html <body> <{config_load file=&quot ...

  4. &lt&semi;&lt&semi; CocoaPods安装和使用教程 &gt&semi;&gt&semi;github code4app以及cocoachina 苹果官方文档

    developer.apple.com 英文搜索各个技术的官方介绍文档, 前提是英文过关 cocoachina ios最新新闻, 信息 code4app上有许多组件 http://www.code4a ...

  5. SecureCRT的背景和文字颜色的修改

    options->;session options->;emulation->;terminal选择linux(相应的服务器系统)ansi color 打上钩options-> ...

  6. 位图引起的内存溢出OutOfMemory解决方案

    一.问题描述:Android下的相机在独自使用时,拍照没有问题,通过我们的代码调用时,也正常,但是更换了不同厂商的平板,ROM由Android4.0变成了Android4.1后,拍照出现了OutOfM ...

  7. jquery垂直公告滚动实现代码

    公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过 复制代码代码如下: <!DOCTYPE html PUBLIC " ...

  8. java 产生的固体物的基础上 增删改的SQL声明

    经过多次修改.最后版本. package com.power.sql; import java.lang.reflect.Field; import java.lang.reflect.Modifie ...

  9. C&num;中&OpenCurlyDoubleQuote;类似GridView等控件”的前台显示与后台数据变化之间的关系

    最近用dev的treelist,gridcontrol等控件,这些控件显示数据都需要进行DataTable等数据源的绑定,而经理又要求可以随时更改其中的内容,刚开始总是不断的刷新控件.更新控件的数据源 ...

  10. 如何快速的理解JavaScript闭包?

    先看问题 1. 在js中的作用域是什么? 作用域就是作用范围,作用空间.作用域分为全局作用域和局部作用域.(这个东西大家都明白) 如果把局部作用域比作一个国家,那么全局作用域就是地球,地球上除了那个国 ...