`
ydbc
  • 浏览: 718834 次
  • 性别: Icon_minigender_1
  • 来自: 大连
文章分类
社区版块
存档分类
最新评论

日积月累:LinearLayout的andrid:layout_weight属性的使用详解

 
阅读更多

在开发的过程中,为了布局更好的适配各种各样的屏幕,会经常使用android:layout_weight属性,按比例分配屏幕的空间。在很多资料和书籍中解释说,系统根据layout_weight比例分配占据空间的大小。但是这个解释在实际开发过程中,往往给我们带来许多困惑。

现在我们来看看具体场景如下:我们需要将三个TextView按照1:2:3的横向的比例显示。于是就有了如下代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="horizontal" > 
 
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:background="#FF4500" 
        android:gravity="center" 
        android:text="第一个" /> 
 
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="2" 
        android:background="#D15FEE" 
        android:gravity="center" 
        android:text="第二个" /> 
 
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="3" 
        android:background="#CAFF70" 
        android:gravity="center" 
        android:text="第三个" /> 
</LinearLayout> 
观察结果显示如下(我们分别修改三个TextView的laytou_width属性):

1.layout_width:wrap_content


2.layout_width:fill_parent


3.layout_width:"0dp"


观察可知,在三种情况下,同样的layout_weight比例1:2:3,0dp的比例正确外,其它两种产生了错误的不同结果,这就让我们非常疑惑。


在查阅官方文档:Childviews can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declaredweight。意思是,子视图可以指定一个权重值,然后在这个视图组中的所有剩余空间根据它们声明的权重比例分配

查阅相关的各方面资料,综合总结,layout_weight比例分配的原则如下

第一步,根据layout_width/layout_height(根据方向而定)的属性分配视图的空间

第二步,计算视图组剩余的空间大小,并按照layout_weight比例分配给子视图

第三步,子视图实际空间=layout_width/layout_height分配空间+layout_weight比例分配空间

根据如上步骤我们分别解释上面三种情况结果的原因

为了更好的解释,这里我们声明两个常量content_width(内容所需占据的空间大小)和screen_width(屏幕的宽度空间大小)。

1.layout_width:wrap_content

第一步,根据layot_width:wrap_content分配三个TextView内容填充的空间,三个TextView的layout_width空间分别为:

layout_width1=content_width

layout_width2=content_width

layout_width3=content_width

第二步,视图组线性布局剩余的空间大小=screen_width- 3 *content_width;那么三个TextView的layout_weight比例分配空间分别为

layout_weight1=(screen_width-3*content_width)/6

layout_weight2=(screen_width-3*content_width)/3

layout_weight3=(screen_width-3*content_width)/2

第三步,根据计算公式,子视图实际空间=layout_width/layout_height分配空间+layout_weight比例分配空间三个TextView的空间分别为

textview1=content_width+(screen_width-3*content_width)/6

textview2=content_width+(screen_width-3*content_width)/3

textview3=content_width+(screen_width-3*content_width)/2

那么textview1:textview2:textview3=(screen_width-2*content_width):2*(screen_width-2*content_width):3*screen_width。显然,该比率是随着content_width和screen_width而变化的,不能满足我们的需求

2.layout_width:fill_parent

第一步,三个TextView的layout_width空间分别为

layout_width1=screen_width

layout_width2=screen_width

layout_width3=screen_width

第二步,三个TextView的layout_weight比例分配空间分别为

layout_weight1=(screen_width-3*screen_width)/6=-screen_width/3

layout_weight2=(screen_width-3*screen_width)/3=-2*screen_width/3

layout_weight3=(screen_width-3*screen_width)/2=-screen_width

第三步,根据计算公式,子视图实际空间=layout_width/layout_height分配空间+layout_weight比例分配空间三个TextView的空间分别为

textview1=screen_width-screen_width/3 = 2 *screen_width/3

textview2=screen_width- 2 *screen_width/3 = screen _width/3

textview3=screen_width-screen_width= 0

那么textview1:textview2:textview3=2:1:0,符合我们观察到的现象!但不满足需求。

3.layout_width:"0dp"

第一步,三个TextView的layout_width空间分别为

layout_width1=0dp

layout_width2=0dp

layout_width3=0dp

第二步,三个TextView的layout_weight比例分配空间分别为

layout_weight1=(screen_width-0dp)/6=screen_width/6

layout_weight2=(screen_width-0dp)/3=screen_width/3

layout_weight3=(screen_width-0dp)/2=screen_width/2

第三步,根据计算公式,子视图实际空间=layout_width/layout_height分配空间+layout_weight比例分配空间三个TextView的空间分别为

textview1= 0dp+screen_width/6=screen_width/6

textview2=0dp+screen_width/3=screen_width/3

textview3=0dp+screen_width/2=screen_width/2

那么textview1:textview2:textview3=1:2:3,符合我们观察到的结果,完全满足我们的需求!!!


综上的分析和总结,建议在开发的过程当中,如果想根据自己的意愿,按照比例分配子视图占据的空间,将你分配的方向的layout_width或layout_height属性设置为”0dp"。

分享到:
评论

相关推荐

    androidlayout-marginBottom的值为负数.docx

    为什么有时候像android:layout_marginBottom等变量的赋值为负数? 例如如下代码: &lt;LinearLayout  android:orientation="vertical"  android:id="@id/Widget_2X4_frame"  android:layout_width="fill_parent" ...

    Android实训购物车页面

    -&lt;LinearLayout android:background="@drawable/aaa" android:weightSum="1" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical" xmlns:android=...

    Android购物车代码

    -&lt;LinearLayout android:background="@drawable/aaa" android:weightSum="1" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical" xmlns:android=...

    android_QQ_例子

    用Eclipse加载项目工程 &lt;LinearLayout xmlns:android=... android:layout_weight="0.66" android:background="@drawable/blue_bg" android:orientation="vertical" &gt; android:layout

    WeChatSample

    android:layout_weight="1" android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="0dp"&gt;&lt;/android.support.v4.view.ViewPager&gt; &lt;LinearLayout android:paddingTop="10dp" ...

    Android App中的多个LinearLayout嵌套布局实例解析

    如果LinearLayout是最外面的一层,它是不会弹出layout_weight属性的, 换句话说最外层不能用layout_weight xml布局如下 &lt;LinearLayout xmlns:android=http://schemas.android.com/apk/res/android android:...

    Android控件大全以及各布局空间的使用方式

    android:layout_weight="1" android:layout_height="wrap_content" android:text="行1列2" /&gt; &lt;TextView android:layout_width="wrap_content" android:layout_weight="1" android:layout_height="wrap_content...

    android水平导航条的实现

    我用的是HorizontalScrollView来实现水平条的滚动,按钮的背景宽度和图片的一致,以免被拉伸,main.xml的配置如下: &lt;LinearLayout xmlns:android=... android:layout_weight="1" &gt;

    Get清风android实验2界面设计:基本组件.doc

    编写布局代码,如下 &lt;LinearLayout xmlns:android = android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical"&gt; &lt;!-- 主布局中添加文本框和输入框 --&gt; ...

    android自定义弹出框

    &lt;LinearLayout android:layout_width="fill_parent" android:gravity="center_horizontal" android:id="@+id/buttons" android:layout_below="@id/msg" android:padding="5dip" android:layout_height="wrap_...

    ANDROID实验报告组件布局.pdf

    Android 开发 (实验五) 实验题目:Android 组件布局试验 指导老师: 班 级:计算机科学与技术系班 姓 名: 一、实验目的 1、掌握 Android 组件布局的使用方法 2、学会组件布局的重要属性与应用 3、能够根据需求,...

    android中ratingbar的简单使用

    android控件的展示 &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_...

    Android应用中通过Layout_weight属性用ListView实现表格

    今天主要说的是对Layout_weight属性的完全解析,以及利用Layout_weight这个属性使用ListView来实现表格的效果,我们都知道Android里面专门有一个TableLayout来实现表格的,说实话,我平常开发中用TableLayout还是...

    Android中gravity与layout_gravity的使用区别分析

    android:layout_gravity:设置控件本身相对于父控件的显示位置。 看下如下代码段 代码如下:&lt;?xml version=”1.0″ encoding=”utf-8″?&gt;&lt;!– android:gravity设置了按钮上面的文字的显示位置,而android:...

    SendSms.zip

    android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="fill_horizontal" &gt; android:id="@+id/address" android:layout_width="fill_parent" android:layout_height=...

    android基础

    LinearLayout:线性布局,从左到右 第一种方法实现界面布局:手动写布局 第二种方法实现界面布局:布局文件(layout中的activty_main.xml) 其实就是标签的嵌套,注意单标签、双标签 拨打电话的实现: 布局activity_...

    Android 使用mediaplayer播放res/raw文件夹中的音乐的实例

    Android 使用mediaplayer播放res/raw文件夹中的音乐的实例 (1)在res文件夹中新建一个文件夹重命名为raw,并且将要播放的音乐放到raw文件夹里面 (2)修改layout目录下的xml布局文件,添加3个按钮空间和一个文本...

    android实验2界面设计:基本组件.doc

    -- 在主布局添加文本框和密码框 --&gt; &lt;TextView android:text = "@string/password" android:layout_width="match_parent" android:layout_height="wrap_content"/&gt; &lt;EditText android:id="@+id/password" android:...

    九宫格牌翻转游戏demo

    android:layout_weight="1" android:src="@drawable/pbg" android:scaleType="centerCrop"/&gt; android:id="@+id/m3" android:layout_margin= "2dp" android:layout_width="60dp" android:layout_height=...

    WebViewDownloadTest.zip

    android:layout_weight="10" android:text="http://www.imust.cn/info/1062/5273.htm" /&gt; android:id="@+id/bt_go" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_...

Global site tag (gtag.js) - Google Analytics