消除Android布局中的空间

时间:2015-12-22 18:45:38

标签: android

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

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

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

<?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,为按钮留下了大量空间,但图像占据了中间位置屏幕不知怎的,我不明白。

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

Where is my button?

接下来,我试图交换按钮和图像的顺序(仅仅是为了试验),我看到这样的事情:

我明白了:

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

There are spaces between button and image

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您最简单的选择可能是使用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"

答案 2 :(得分:0)

此处出现问题,因为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"/>

答案 3 :(得分:0)

首先你的图像太大,所以它基本上占用了所有的屏幕空间,然后按下可视区域的按钮。没有必要修改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>

屏幕截图

Screenshot