如何将一个ImageView放置在另一个布局的顶部,如图所示?

4
我希望创建一个布局,使UI看起来像图中所示。
欢迎所有评论和指导。
添加我的当前布局:
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:orientation="vertical"
    android:id="@+id/video_panel">

    <RelativeLayout android:layout_width="fill_parent"
        android:id="@+id/top_panel" android:gravity="top"
        android:orientation="horizontal" android:alwaysDrawnWithCache="true"
        android:layout_height="fill_parent" android:layout_gravity="top"
        android:layout_weight="14" android:background="@drawable/top_bg1">

        <TextView android:layout_width="wrap_content"
            android:layout_height="fill_parent" android:id="@+id/date"
            android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
            android:text="@string/space" />

        <RelativeLayout android:layout_centerHorizontal="true"
            android:id="@+id/button_panel" android:layout_height="fill_parent"
            android:layout_width="wrap_content" android:gravity="center_horizontal"
            android:layout_centerInParent="true">
        </RelativeLayout>

        <TextView android:layout_height="fill_parent"
            android:layout_width="wrap_content" android:layout_alignParentRight="true"
            android:layout_alignParentTop="true" android:id="@+id/time"
            android:text="@string/space" />
    </RelativeLayout>

    <LinearLayout android:layout_width="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="fill_parent" android:layout_gravity="center_horizontal"
        android:layout_weight="4" android:id="@+id/screen">
    </LinearLayout>

    <RelativeLayout android:layout_width="fill_parent"
        android:id="@+id/bottom_panel" android:layout_height="fill_parent"
        android:layout_gravity="bottom" android:layout_weight="13"
        android:orientation="vertical" android:background="@drawable/bottom_bg1"
        android:duplicateParentState="true" android:alwaysDrawnWithCache="true">

        <LinearLayout android:foregroundGravity="center"
            android:id="@+id/album_art" android:layout_alignParentLeft="true"
            android:layout_width="256dip" android:layout_height="fill_parent">
            <ImageView android:layout_width="fill_parent"
                android:layout_height="fill_parent" android:layout_gravity="center"
                android:id="@+id/thumbnail"></ImageView>
        </LinearLayout>

        <LinearLayout android:layout_toRightOf="@+id/album_art"
            android:layout_height="fill_parent" android:orientation="vertical"
            android:paddingTop="10dip" android:layout_width="wrap_content"
            android:layout_centerHorizontal="true" android:layout_toLeftOf="@+id/status_frame"
            android:id="@+id/info_panel">
        </LinearLayout>

        <FrameLayout android:layout_width="wrap_content"
            android:id="@+id/status_frame" android:layout_height="fill_parent"
            android:visibility="visible" android:foregroundGravity="center"
            android:layout_alignParentRight="true" android:paddingTop="50dip">
            <ImageView android:id="@+id/status" android:layout_width="fill_parent"
                android:layout_height="fill_parent" android:scaleType="fitCenter"
                android:layout_gravity="center" />
        </FrameLayout>
    </RelativeLayout>
</LinearLayout>

我该如何更改布局,使其看起来像我图片中的样子?

2个回答

2

将FrameLayout改为RelativeLayout怎么样呢。

让VideoView填充整个父容器,bluelayout的align_parentBottom=true,linearLayout的水平布局居中并且横向占满整个屏幕,同时也要和父容器底部对齐。蓝色的ImageView的align_parentLeft=true,并且也要和父容器底部对齐,但是需要设置一个较大的下边距来抬高它的位置。橙色的ImageView的alignParentRight和bottom都要设置为true。


1

有几种可能性,但我想我会选择在imageview上使用简单的负上边距。将图像视图放入您的蓝色linearview中并使用android:layout_marginTop="-20dip"

这应该有效。


在你的布局中,将蓝色组设置为具有水平方向的线性视图。然后在其中作为直接子项放置你的ImageView、LinearLayout和其他ImageView。然后应用负边距即可。 - Yahel
我有一个类似的情况,使用垂直线性布局。需要将一个直接子项的ImageView向左移动一点。发生了什么:视图确实被移动了(可以在Android布局管理器中看到),但是可绘制对象仍然保持在原地。除了可绘制对象不会向左移动之外,它还因为ImageView向左移动而在右侧被裁剪。 - User
抱歉 ixx,你所描述的情况很奇怪。如果你还没有解决它,请开一个新问题并发布你的代码。可能有些地方出了问题。 - Yahel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接