Question

我正在尝试制作一个非常简单的布局：

占据屏幕宽度的图像，以及一个占据屏幕宽度的按钮，它旁边没有任何空间。

这是我的代码，它是琐碎的

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:orientation="vertical"
    tools:context="com.andrew.question.InitialActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:src="@drawable/bg" />
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:text="Hello, I am a Button" />
</LinearLayout>

问题是，按钮没有显示，它显示有一些空间的图像模拟器运行时屏幕尺寸为1080 x 1920，图像大小为720 x 990，如果我们将其缩放，它应该是1080 x 1485，为按钮留下了大量空间，但图像占据了中间位置屏幕不知怎的，我不明白。

这就是仿真器上的屏幕截图：

接下来，我试图交换按钮和图像的顺序（仅仅是为了试验），我看到这样的事情：

我明白了：

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:orientation="vertical"
    tools:context="com.andrew.question.InitialActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:text="Hello, I am a Button" />
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:src="@drawable/bg" />
</LinearLayout>

现在我想到发生了什么，似乎按钮和图像之间有很多空格，因此按钮没有空间。但那些空间来自哪里？我希望他们能够团结在一起。

可以在

中找到此实验的完整源代码

https://github.com/cshung/MiscLab/tree/master/Question

Answer 1

您的drawable / bg正在缩放以适合id / imageView。您获得的空间只是窗口的背景未被图像覆盖。将ImageView的ScaleType更改为FIT_XY，CENTER_CROP或其他并观察结果。请参阅：http://developer.android.com/reference/android/widget/ImageView.ScaleType.html

Answer 2

您最简单的选择可能是使用RelativeLayout而不是LinearLayout。我认为这是Android最近的发展方向。一切似乎都是以RelativeLayout为基础的。例如，当您在Android Studio中创建新布局时，我认为它默认为RelativeLayout。它曾经是eclipse扩展中的LinearLayout。

相对布局

使用相对布局，您应该具有以下内容：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.andrew.question.InitialActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:src="@drawable/bg" />
    <Button
        android:id="@+id/button"
        android:layout_below="@id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:text="Hello, I am a Button" />
</RelativeLayout >

请注意，我只是将LinearLayout更改为RelativeLayout，删除了setOrientation，然后将以下行添加到按钮中。

android:layout_below="@id/imageView"

Answer 3

此处出现问题，因为LinearLayout容器的高度为wrap_content，系统会将ImageView扩展到最大值，然后在其下方显示TextView（因此低于屏幕高度。）

要获得正确的布局，您必须在子视图中使用layout_weight，如下所示：

<!-- fill the entire height -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    ...>

    <!-- take 90% of container -->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.9"
        ... />

    <!-- take 10% of container -->
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.1"
        ... />
</LinearLayout>

然后，为了让图片“无空间”，您必须使用属性scaleType（请参阅this example），如下所示：

强制图像适合widht / height：

<ImageView
     ...
     android:scaleType="fitXY"/>

或显示中心并填写w / h：

<ImageView
     ...
     android:scaleType="centerCrop"/>

Answer 4

首先你的图像太大，所以它基本上占用了所有的屏幕空间，然后按下可视区域的按钮。没有必要修改LinearLayout中的填充或边距并且它将所有子视图一个接一个地放置。

为图像视图设置所需的高度，并设置比例类型以获得您期望的效果。

<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="wrap_content"
          android:orientation="vertical"
          tools:context="com.andrew.question.InitialActivity">

  <ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:scaleType="centerCrop"
    android:layout_height="300dp"
    android:src="@drawable/bg" />
 <Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Hello, I am a Button" />
</LinearLayout>

屏幕截图

消除Android布局中的空间

4 个答案:

相对布局