能否让两个布局共享一个ImageView？实现跨布局部分显示的方法

嘿，这个需求我碰到过好几次，给你几个实用的实现思路，都是Android开发里常用的方案：

其实没必要把ImageView硬塞到上方的RelativeLayout里，反而应该把两个RelativeLayout和ImageView都放在一个更高层级的父容器（比如ConstraintLayout或者FrameLayout）中，这样就能灵活控制ImageView的位置，让它刚好跨在两个布局中间。

拿ConstraintLayout举个例子，代码大概是这样：

<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <!-- 上方的RelativeLayout -->
    <RelativeLayout
        android:id="@+id/top_layout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#FFCCCC"
        app:layout_constraintTop_toTopOf="parent"/>

    <!-- 下方的RelativeLayout -->
    <RelativeLayout
        android:id="@+id/bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#CCFFCC"
        app:layout_constraintTop_toBottomOf="@id/top_layout"/>

    <!-- 跨布局的ImageView -->
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/your_image"
        app:layout_constraintTop_toBottomOf="@id/top_layout"
        app:layout_constraintBottom_toTopOf="@id/bottom_layout"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:translationY="-50dp"/> <!-- 向上偏移自身高度的一半，刚好卡中间 -->
</androidx.constraintlayout.widget.ConstraintLayout>

这里的核心点：

• ImageView和两个RelativeLayout是同级的，层级在它们之上，所以能同时覆盖两个布局的区域
• 用translationY偏移自身高度的一半，或者直接用layout_marginTop="-50dp"也能达到同样效果

如果用FrameLayout的话思路类似：给两个RelativeLayout设置固定高度，ImageView设置layout_gravity="center_horizontal"，再通过margin或者translation调整位置就行。

如果你因为某些原因必须把ImageView放在上方的RelativeLayout里，也能实现：

• 给上方的RelativeLayout加android:clipChildren="false"，这个属性允许它的子View超出自身边界显示，不会被裁剪
• 给ImageView设置android:layout_marginBottom="-50dp"（假设ImageView高度是100dp，就是一半的高度），这样ImageView的下半部分就会延伸到下方的RelativeLayout区域

代码示例：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/top_layout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#FFCCCC"
        android:clipChildren="false"> <!-- 关键：关闭子View裁剪 -->

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/your_image"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="-50dp"/> <!-- 向下超出自身一半高度 -->
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#CCFFCC"/>
</LinearLayout>

这个方案要注意：

• 务必给上方RelativeLayout加clipChildren="false"，不然ImageView超出的部分会被切掉
• 要确保下方的RelativeLayout没有设置比ImageView更高的elevation，不然会把ImageView的下半部分挡住

如果你的ImageView是静态的，不需要任何交互（比如点击、动画），也可以把两个RelativeLayout的背景做成包含这个图片的LayerList。不过这个方法灵活性差，只适合纯展示的场景，这里就不细说了。

总的来说，方案1是最稳妥的，布局层级清晰，后期维护也方便，不会有裁剪或者层级遮挡的坑。

内容的提问来源于stack exchange，提问作者Onur