适应布局以改变图像的宽度查看

Question

我有一个布局，其中一个元素动态地改变其大小（红色imageView）。问题是，下面的视图或者不存在或者不对中。

前两个图像显示它看起来应该像：

与LinearLayout低于设定到match_parent： big imageView, match_parent http://i58.tinypic.com/35jedxt.png

与LinearLayout低于设定到wrap_content： small imageView, wrap_content http://i58.tinypic.com/255qjxs.png

这就是它的样子在LinearLayoutlayout:width属性是错误的： big imageView, wrap_content http://i61.tinypic.com/x1zk1h.png small imageView, match_parent http://i57.tinypic.com/2eutqmq.png

这里是XML代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity"> 

    <LinearLayout 
     android:orientation="vertical" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true"> 

     <ImageView 
      android:layout_width="200dp" 
      android:layout_height="200dp" 
      android:id="@+id/imageView" 
      android:layout_gravity="center_horizontal" 
      android:background="#ffff0000" /> 

     <LinearLayout 
      android:orientation="horizontal" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:layout_gravity="center_horizontal"> 

      <Space 
       android:layout_width="20px" 
       android:layout_height="20px" 
       android:layout_weight="1" /> 

      <ImageView 
       android:layout_width="50dp" 
       android:layout_height="50dp" 
       android:id="@+id/imageView2" 
       android:background="#ff0000ff" /> 

      <Space 
       android:layout_width="20px" 
       android:layout_height="20px" 
       android:layout_weight="1" /> 

      <ImageView 
       android:layout_width="50dp" 
       android:layout_height="50dp" 
       android:id="@+id/imageView3" 
       android:background="#ff00ff00" /> 

      <Space 
       android:layout_width="20px" 
       android:layout_height="20px" 
       android:layout_weight="1" /> 
     </LinearLayout> 
    </LinearLayout> 

</RelativeLayout> 

怎么可能适应的布局，所以绿色和蓝色元素始终围绕和空间当红色imageView很大时扩大，但当它太小时不切断？

我更喜欢xml解决方案，因为这只是一个简单的例子，以编程方式执行此操作可能会变得复杂。

Answer 1

我原来的答复错过要求“当红色ImageView的大，空间扩展”。

你可以使用GridLayout来做到这一点 - layout_columnWeight仅适用于21，或者其他的东西。所以，你可能会想使用v7.gridlayout支持库，但它会是这个样子：

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

<GridLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center"> 

    <ImageView 
     android:id="@+id/imageView" 
     android:layout_width="400dp" 
     android:layout_height="200dp" 
     android:layout_columnSpan="5" 
     android:layout_gravity="center" 
     android:layout_row="0" 
     android:background="#ffff0000" 
     /> 

    <Space 
     android:layout_width="20px" 
     android:layout_height="20px" 
     android:layout_column="0" 
     android:layout_row="1" 
     android:layout_columnWeight="1" 
     /> 

    <ImageView 
     android:id="@+id/imageView2" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_column="1" 
     android:layout_row="1" 
     android:background="#ff0000ff" /> 

    <Space 
     android:layout_width="20px" 
     android:layout_height="20px" 
     android:layout_column="2" 
     android:layout_columnWeight="1" 
     android:layout_row="1" /> 

    <ImageView 
     android:id="@+id/imageView3" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_column="3" 
     android:layout_row="1" 
     android:background="#ff00ff0a" /> 

    <Space 
     android:layout_width="20px" 
     android:layout_height="20px" 
     android:layout_column="4" 
     android:layout_columnWeight="1" 
     android:layout_row="1" /> 

</GridLayout> 
</FrameLayout> 

Answer 2

是的，你可以玩的LinearLayout和重量，像

<LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_gravity="center_horizontal" 
     android:layout_weight="0dp" 
     android:orientation="horizontal"> 

     <FrameLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:padding="10dp"> 

      <ImageView 
       android:id="@+id/imageView2" 
       android:layout_gravity="center" 
       android:layout_width="50dp" 
       android:layout_height="50dp" 
       android:background="#ff0000ff" /> 

     </FrameLayout> 

     <FrameLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:padding="10dp"> 

      <ImageView 
       android:layout_gravity="center" 
       android:id="@+id/imageView3" 
       android:layout_width="50dp" 
       android:layout_height="50dp" 
       android:background="#ff00ff00" /> 

     </FrameLayout> 

    </LinearLayout>