Android布局重量分布

时间:2016-12-26 16:11:26

标签: android android-layout user-interface

我在做following course at udacity。它是关于Android用户界面的。

作为课程的一部分,我使用了XML可视化工具。

http://labs.udacity.com/android-visualizer/#/android/linear-layout-weight

现在在试验时我输入了以下代码

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:src="@drawable/ocean"
        android:layout_width="wrap_content"
        android:layout_height="400dp"
        android:scaleType="centerCrop"
        android:layout_weight = "1"/>

    <TextView
        android:text="You're invited!"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:textColor="@android:color/white"
        android:textSize="54sp"
        android:layout_weight = "1"
        android:background="#009688" />

    <TextView
        android:text="Bonfire at the beach"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="34sp"

        android:background="#009688" />

</LinearLayout>

根据我的理解,通过使用android:layout_weight,整个父布局按优先级划分并相应地分配,如果是这样,在图像之间分配后的空间和&#34;你被邀请了!&#34 ;应该只剩下足够的空间,以填补海滩上的篝火&#34;。

那么为什么下面有一个空的空间&#34;海滩上的篝火&#34; ?

(如果可能的话,任何人都可以解释控制如何在XML代码之间流动)。

UPDATE
当我添加android:layout_weight =&#34; 0&#34;在&#34;海滩上的篝火&#34;那下面没有空的空间。任何人都可以解释为什么会发生这种情况以及为什么以前的情况会有空间这是使用的代码。

enter image description here

之后

enter image description here

甚至尝试将高度设置为0dp

enter image description here

1 个答案:

答案 0 :(得分:1)

使用以下示例了解它

权重定义视图与LinearLayout中的其他视图相比消耗的空间。

当您想要为一个组件提供特定屏幕空间时,使用权重。

关键属性

  • weightSum是所有子视图的权重总和。如果您未指定weightSum,系统将自行计算所有权重的总和。

  • layout_weight指定总重量总和中的空间量 小部件将占用。

<强>代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="4">

    <EditText
        android:layout_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Type Your Text Here" />

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text1" />

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text1" />

</LinearLayout>

输出结果为:

enter image description here

现在,即使设备的尺寸较大,EditText也会占据屏幕空间的2/4。因此,您的应用程序的外观在所有屏幕上都是一致的。

[如果您在编辑问题之前,这可能与此无关[/ p>]

现在你的 海滩上的篝火 没有重量及其wrap_content所以没有受让人会占用余下的空间!并且添加后该空间可以保留,这将与设备的屏幕尺寸不同

注意: 这里layout_width保持0dp,因为窗口小部件空间是水平划分的。如果小部件要垂直对齐,layout_height将设置为0dp

这样做是为了提高代码的效率,因为在运行时系统不会分别尝试计算宽度或高度,因为这是由权重管理的。如果您改为使用wrap_content,系统将在应用权重属性之前首先尝试计算宽度/高度,这会导致另一个计算周期。

让我们移动到您的XML 看我如何使用它们

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:weightSum="3"   //<-------------------
    android:layout_height="match_parent">

    <ImageView
        android:src="@drawable/mc"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:layout_weight = "1"/> //<-------------------

    <TextView
        android:text="You're invited!"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:textColor="@android:color/white"
        android:textSize="54sp"
        android:layout_weight = "1" //<-------------------
        android:background="#009688" />

    <TextView
        android:layout_weight = "1" //<------------------- if you remove this , this text view will be gone cuz its 0 by default
        android:text="Bonfire at the beach"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:textColor="@android:color/white"
        android:textSize="34sp"
        android:background="#009688" />

</LinearLayout>

现在你问如果你没有给出android:layout_weight,默认权重是。零表示视图不会显示,空白空间将保留在那里

因为你不相信你可以阅读documentation enter image description here

编辑:2

既然你说过,我经历了你使用的android-visualizer 你有没有注意到这一点...

  

“第6行:此处不支持属性android:weight_sum。”

最底层的事情。

意味着他们没有提供调整布局边界的功能。它只是一个简单的在线工具。我 不是说不建议使用,但我个人的想法是,你 如果你使用它,就无法触及android的深度。

现在,如果你想要确认实际发生了什么,请看看android studio / eclipse以及哪些是读取IDE

这是android studio

enter image description here

你能看到任何包含你的文字的视图“海滩上的篝火”吗?没有 相反,a.studio在XML中显示一条红线。

  

可疑大小:这会使视图不可见

因为没有给出layout_weight,我们增加了0个高度

现在你可以接受答案:)