如何用LinearLayout和RelativeLayout实现重叠元素答案

【问题标题】：How to achieve overlapping elements with LinearLayout and RelativeLayout如何用LinearLayout和RelativeLayout实现重叠元素
【发布时间】：2017-02-03 06:45:34
【问题描述】：

我正在尝试使用 LinearLayout 来实现具有多个图像的布局，这些图像的水平位置均匀分布在某个宽度 [A] 的容器中。随着容器宽度的缩小，图像应该会相互重叠。

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="128dp"                    <--- [A] 
    android:layout_height="64dp"
    >
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        >
        <ImageView
            android:layout_width="wrap_content"    <---- [B]
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            app:srcCompat="@drawable/ic_star_black_24dp"
            />
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            app:srcCompat="@drawable/ic_star_black_24dp"
            />
    </RelativeLayout>
</LinearLayout>

上面的布局将图片均匀分布在容器宽度[A]中：

但是，当将 [A] 更改为应该使图像重叠的某个小值时，它们会按比例缩小以使其适合其父级 RelativeLayout 的宽度。这很奇怪，因为我在 [B] 处明确询问了 wrap_content 的宽度。我不希望图像被缩放。

有什么想法可以让我完成这项工作吗？

（我希望图像重叠的原因是因为它是过渡期间预期编排的一部分。它们的最终位置将是不重叠的。）

【问题讨论】：

如果你分享它的图像/草图会更好理解
没什么花哨的，只是旁边的几颗星星，就像★★★★★。上面的例子只显示了两个。我希望星星最初折叠成一颗星星（即五颗星星相互重叠），然后过渡将它们分开。
@digorydoo 那么你必须使用动画
一旦布局按预期工作，我会的。这个想法是动画基本上改变了父LinearLayout的layout_width。

标签： android android-layout android-linearlayout android-relativelayout overlapping

【解决方案1】：

刚刚自己找到了解决方案。我找到了android:scaleType，它控制图像相对于其大小的缩放方式。但是，使用android:scaleType 根本没有任何效果，直到我也将app:srcCompat 更改为android:src。我不知道为什么会这样，但是现在可以按预期进行以下操作：

<LinearLayout
 android:orientation="horizontal"
 android:layout_width="128dp"
 android:layout_height="64dp"
 >
 <RelativeLayout
     android:layout_width="0dp"
     android:layout_height="match_parent"
     android:layout_weight="1"
     >
     <ImageView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerInParent="true"
         android:src="@drawable/ic_star_black_24dp"   <--- !!
         android:scaleType="center"                   <--- !!
         />
 </RelativeLayout>
 <RelativeLayout
     android:layout_width="0dp"
     android:layout_height="match_parent"
     android:layout_weight="1"
     >
     <ImageView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerInParent="true"
         android:src="@drawable/ic_star_black_24dp"   <--- !!
         android:scaleType="center"                   <--- !!
         />
 </RelativeLayout>
</LinearLayout>

【讨论】：