如何使一个ImageView浮在一个LinearLayout的上方？

Question

请查看下面的图片链接。由于声誉低，我无法发布图片。

http://i.stack.imgur.com/nupZo.png

我的目标是获得左侧的布局，但实际上我得到了右侧的布局。这是我的布局xml代码。

<?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:background="@color/metalDark"
android:orientation="vertical"
>
<LinearLayout
    android:id="@+id/topPanel"
    android:layout_width="fill_parent"
    android:layout_height="65dp"
    android:background="@color/metalList"
    android:elevation="6dp"
    android:layout_marginBottom="5dp"
    android:orientation="horizontal">

    <TextView
        .../>


</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/topPanel"
    android:layout_margin="10dp"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/albumheader"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@color/metalList"
        android:elevation="6dp">
        <LinearLayout
            android:id="@+id/underlay"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="25dp"
            android:layout_marginBottom="25dp"
            android:background="@drawable/canvas2">
        <ImageView
            android:id="@+id/al_art"
            android:layout_width="135dp"
            android:layout_height="135dp"
            android:layout_toLeftOf="@+id/al_details"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="-17dp"
            android:elevation="4dp"/>
        <LinearLayout
            android:id="@+id/al_details"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="right|center"
            android:orientation="vertical">

            <TextView
                .../>
            <TextView
                .../>
            <TextView
                .../>

        </LinearLayout>
            </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:background="@color/metalList"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="15dp"
        android:elevation="6dp"
        >
        <ListView
            ..../>
    </LinearLayout>

</LinearLayout>

- Aritra Bhattacharyya

Answer 1

LinearLayout 不太适合将 Views 叠放在一起。

如果需要更多信息，可以参考这篇文章： http://android-developers.blogspot.com/2009/02/android-layout-tricks-1.html

以下是我的建议：

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

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_marginBottom="12dp"
        android:layout_height="?listPreferredItemHeight"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp"
        android:layout_marginBottom="12dp"
        android:layout_height="wrap_content">


        <ImageView
            android:id="@+id/img_orange_rectangle"
            android:background="#ff6600"
            android:layout_centerVertical="true"
            android:layout_width="match_parent"
            android:layout_height="128dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_centerVertical="true"
            android:text="hi I'm some text"
            android:gravity="end|top"
            android:padding="6dp"
            android:layout_alignStart="@id/img_orange_rectangle"
            android:layout_alignEnd="@id/img_orange_rectangle"
            android:layout_alignBottom="@id/img_orange_rectangle"
            android:layout_alignTop="@id/img_orange_rectangle"
            android:layout_height="0dp"/>


        <ImageView
            android:id="@+id/img_blue_square"
            android:background="#2541ba"
            android:layout_marginStart="24dp"
            android:layout_centerVertical="true"
            android:layout_width="156dp"
            android:layout_height="156dp"/>
    </RelativeLayout>


    <ListView
        android:id="@+id/listview"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp"
        android:layout_marginBottom="12dp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

根据下面的评论于2015年8月15日更新：

但是请告诉我为什么RelativeLayout的layout_height被保留为0？

我在RelativeLayout上使用了0的高度，因为布局的高度基于layout_weight。

橙色矩形的高度是否会根据设备和屏幕大小而改变？

不会。虽然我已经更新了布局以实现此功能。我建议阅读此文档以支持多个屏幕尺寸。在这篇StackOverflow文章的第二部分中，它谈到了来自Google IO pdf的每个屏幕尺寸的维度xml。

如果我想把文字放在橙色矩形内，如何确保它仍然在其中？

我添加了另一个布局。有多种方法可以解决这个问题。我选择的方法是制作一个TextView，使其与上面的ImageView属性对齐。

- Sherlock

---

谢谢您。它起作用了。但是请告诉我为什么将RelativeLayout的layout_height保持为0？橙色矩形的高度会根据设备和屏幕尺寸而改变吗？ - Aritra Bhattacharyya

另外，如果我想把文本放在橙色矩形里面，如何确保它不会超出矩形的范围？ - Aritra Bhattacharyya

Answer 2

为什么不在您的albumheader布局上设置android:gravity="center"？现在，您的ImageViews高度已硬编码为135dp，那么为什么不将albumheader中的每个其他布局都设置为固定高度，例如100dp，而不是match_parent。现在，因为albumheader重力设置为居中，您应该会得到ImageView浮在其上方的效果。

我认为这应该可以解决问题，但如果不行，请告诉我。

- Dom

Answer 3

这是因为你的底层linearLayout有100dp的上下边距。

它的父级高度为150dp，已经有100dp被边距占用，只剩下50dp，不足以显示高度为135dp的imageView。

如果你在某些视图中使用RelativeLayout，实现这个视图会更容易，特别是定位imageView和橙色框（使用center vertical属性）。

- EC84B4