如何实现ImageView叠加及按屏幕宽度2/5布局4个ImageView

你遇到的问题核心有两个：一是ImageView的层叠显示，二是每个卡片固定为屏幕宽度2/5的横向排布。LinearLayout本身是线性布局，没法实现层叠，所以得换个思路，用「容器嵌套」的方式来搞定：

整体布局思路 #

1. 用HorizontalScrollView包裹外层布局：因为4个2/5宽度的卡片总宽度会超过屏幕，横向滚动能让用户查看所有内容。
2. 每个卡片用FrameLayout做容器：FrameLayout支持子View层叠，后面的View会自动覆盖在前面的View之上，刚好满足你叠加ImageView的需求。
3. 外层用横向LinearLayout排布卡片：通过layout_weight控制每个卡片的宽度占比（2/5=0.4）。

完整XML代码示例 #

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="2"
    android:scrollbars="none"> <!-- 隐藏滚动条，按需开启 -->

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:paddingHorizontal="4dp"> <!-- 整体左右边距 -->

        <!-- 第一个卡片：FrameLayout实现双ImageView叠加 -->
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.4" <!-- 2/5屏幕宽度 -->
            android:layout_marginHorizontal="2dp"> <!-- 卡片间间距 -->

            <!-- 底层背景ImageView -->
            <ImageView
                android:id="@+id/card1_bg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop" <!-- 根据图片需求调整缩放模式 -->
                android:src="@drawable/your_bg_image"/>

            <!-- 叠加在上方的ImageView -->
            <ImageView
                android:id="@+id/card1_overlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter" <!-- 按需调整 -->
                android:src="@drawable/your_overlay_image"/>
        </FrameLayout>

        <!-- 第二个卡片 -->
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:layout_marginHorizontal="2dp">

            <ImageView
                android:id="@+id/card2_bg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/your_bg_image"/>

            <ImageView
                android:id="@+id/card2_overlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/your_overlay_image"/>
        </FrameLayout>

        <!-- 第三个卡片 -->
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:layout_marginHorizontal="2dp">

            <ImageView
                android:id="@+id/card3_bg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/your_bg_image"/>

            <ImageView
                android:id="@+id/card3_overlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/your_overlay_image"/>
        </FrameLayout>

        <!-- 第四个卡片 -->
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:layout_marginHorizontal="2dp">

            <ImageView
                android:id="@+id/card4_bg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/your_bg_image"/>

            <ImageView
                android:id="@+id/card4_overlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/your_overlay_image"/>
        </FrameLayout>

    </LinearLayout>
</HorizontalScrollView>

关键细节说明 #

• 层叠实现：FrameLayout是核心，你可以调整两个ImageView的scaleType、alpha（透明度）等属性，让叠加效果更符合需求。
• 宽度控制：layout_weight="0.4"等价于屏幕宽度的2/5，LinearLayout会自动按比例分配宽度；如果需要更精确的数值，也可以在代码中动态计算屏幕宽度后设置：

// Kotlin示例，在Activity/Fragment的onCreate中
val screenWidth = resources.displayMetrics.widthPixels
val cardWidth = (screenWidth * 0.4).toInt()
findViewById<FrameLayout>(R.id.card1).layoutParams.width = cardWidth
// 重复设置其他三个卡片的宽度

• 滚动处理：HorizontalScrollView确保卡片超出屏幕时可以横向滑动，如果你不需要滚动（比如平板设备），可以直接去掉外层的HorizontalScrollView，把LinearLayout的宽度设为match_parent即可。

内容的提问来源于stack exchange，提问作者Kavin-K