如何使 ImageView 浮动在 LinearLayout 上方？

Question

请检查下图中的link。由于声誉低下，我无法 post 图片。

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>

Answer 1

为什么不在 albumheader 布局上设置 android:gravity="center"。现在，您的 ImageViews 高度被硬编码为 135dp，那么为什么不将 albumheader 中的所有其他布局设置为例如 100dp 的设置高度而不是 match_parent。现在因为 albumheader gravity 设置为中心，你应该得到 ImageView 漂浮在它上面的效果。

我认为这应该可以解决问题，但如果它不让我知道。

Answer 2

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 日 根据以下评论：

But please tell me why have you kept the layout_height of the RelativeLayout as 0?

我在 RelativeLayout 上使用了高度 0，因为布局是根据 layout_weight 获取高度的。

And will the height of orange rectangle change according to device and screen size?

没有。尽管我更新了布局以能够这样做。我推荐 this article for how to support multiple screen sizes. Toward the bottom of this this Whosebug post 第 2 部分，它讨论了 Google IO pdf 中每个屏幕尺寸的尺寸 xml。

Also if I want to put texts inside the orange rectangle, how do I ensure that it remains within it?

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

Answer 3

这是因为你的底层 linearLayout 有 100dp maring top and bottom

它的父级有 150dp 的高度，并且 100dp 已经被 marings 消耗了，所以只剩下 50dp 不足以让 imageView 显示 135dp 的高度。

如果您对某些视图使用 RelativeLayout 会更容易实现此视图尤其有助于定位图像视图和橙色框（使用中心垂直属性）。

如何使 ImageView 浮动在 LinearLayout 上方？

How do I make an ImageView float above a LinearLayout?

user-interface

android

android-layout

android-imageview