Question

我想按照下面的图片制作我的布局。我可以在iphone设备中看到这个图像。

这里我使用框架布局在imageview上实现顶部和底部图像条的叠加，但在使用框架布局后，我只能看到顶部图像栏覆盖而不是底部图像条？为什么会发生？

忘记了顶部和底部iamge栏的内容..我正专注于实现此功能。

如果我的代码错了，请告诉我。

xml文件代码：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <include
        android:id="@+id/top_bar"
        layout="@layout/item_below_image_bar"
        android:gravity="top" />

    <it.sephiroth.android.library.imagezoom.ImageViewTouch
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:contentDescription="@string/descr_image"
        android:scaleType="fitXY" />

    <include
        android:id="@+id/below_bar"
        layout="@layout/item_below_image_bar"
        android:gravity="bottom" />

</FrameLayout>

Answer 1

per android documentation

子视图以堆栈形式绘制，最近添加的子项位于顶部。

因此您需要按如下方式排列布局

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <it.sephiroth.android.library.imagezoom.ImageViewTouch
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:contentDescription="@string/descr_image"
        android:scaleType="fitXY" />   

    <include
        android:id="@+id/top_bar"
        layout="@layout/item_below_image_bar"
        android:gravity="top" />

    <include
        android:id="@+id/below_bar"
        layout="@layout/item_below_image_bar"
        android:gravity="bottom" />

</FrameLayout>

在这种情况下，视图的实际位置不是由在xml中声明视图的顺序决定的。对于线性布局，这对于FrameLayout不是这样，在framelayout中，位置由重力确定，因此您的视图仍将放置在正确的位置，并且它们将按照声明的顺序加载，因此首先是图像视图，然后第一个包含放在那个顶部，然后第二个包括放在那个顶部（但在这种情况下，它们不相交，所以它无关紧要。）

edit2：与sam聊天后，我们能够找到问题，这是我们的解决方案

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

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:id="@+id/greenImage"
            android:src="#2dff3d"/>


    <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp"
            >

        <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_alignParentRight="true"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="My Label"
                android:id="@+id/textView"
                android:layout_centerVertical="true"/>
    </RelativeLayout>

    <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp">

        <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_alignParentRight="true"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="My Label"
                android:id="@+id/textView1"
                android:layout_centerVertical="true"/>
    </RelativeLayout>


</FrameLayout>

请注意layout_gravity的用法与重力相关。

在imageview问题上叠加顶部和底部图像

1 个答案: