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

Question

我想按照下图来制作我的布局。这个图像我能够在iPhone设备中看到。

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

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

如果我在我的代码中有错，请让我正确。

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

每安卓documentation

孩子的意见被描绘在一个堆栈，顶部最近添加的孩子。

所以你需要在这种情况下，视图的实际位置不被该意见在XML声明的顺序确定如下

<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> 

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

EDIT2：与山姆聊天后，我们能够找出问题这里是我们的解决方案

<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的使用。