如何使 ImageView 浮动在 LinearLayout 之上？

Question

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

https://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>

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？

我在 上使用了 0 的高度，RelativeLayout因为布局根据layout_weight.

橙色矩形的高度会根据设备和屏幕尺寸而变化吗？

不。尽管我更新了布局才能做到这一点。我推荐这篇文章来了解如何支持多种屏幕尺寸。在StackOverflow 帖子第 2 部分的底部，它讨论了 Google IO pdf 中每个屏幕尺寸的尺寸 xml。

另外，如果我想将文本放入橙色矩形内，如何确保它保留在其中？

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