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>

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。

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

没有。虽然我更新了布局以便能够这样做。我推荐this文章，了解如何支持多种屏幕尺寸。在this StackOverflow post第2部分的底部，它讨论了来自Google IO pdf的每个屏幕尺寸的尺寸xml。

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

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

Answer 2

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

我认为应该这样做，但如果它不让我知道。

Answer 3

因为你的底线linearLayout有100dp maring top和bottom

它的父级有150dp的高度，并且已经消耗了100dp，所以只剩下50dp，这对于高度为135dp的imageView来说是不够的。

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

如何使ImageView浮动在LinearLayout上方？

3 个答案: