Android - ImageView覆盖另一个ImageView

Question

我想做一个像这样的ImageView叠加ImageView; 只有绿色圆圈的一半覆盖图像:

我试过使用RelativeLayout并将两者ImageView放在里面.然后我通过使用覆盖图像上的圆圈android:layout_alignBottom.它覆盖了但我不知道如何设置偏移量,以便只有一半的圆圈覆盖基本图像.

编辑:

对不起,这是我的布局xml代码

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginBottom="32sp" >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_person_black"
            android:adjustViewBounds="true"
            android:id="@+id/image_view_product" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/image_view_product"
            android:layout_centerHorizontal="true"
            android:background="@drawable/image_view_circle"
            android:src="@drawable/ic_circle" />

</RelativeLayout>

Answer 1

我得到了很多关于这个答案的赞成.所以我试着改善这个答案.可能这是比其他两个更好的方法,因为这个解决方案不需要修复布局或划分屏幕等,所以可能这样做更好.

<android.support.design.widget.CoordinatorLayout
 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">

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

    <LinearLayout
        android:id="@+id/viewA"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/subject"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="Thi"
            android:textColor="@android:color/white"
            android:textSize="17sp"
            />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/viewB"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="Thi"
            android:textColor="@android:color/black"
            android:textSize="17sp"
            />
    </LinearLayout>

 </LinearLayout>

 <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/plus"
    app:layout_anchor="@+id/viewA"
    app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

替代方式试试这个

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

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

    // this is your first layout to put the big image
    // use src or backgroud image as per requirement

    <LinearLayout
        android:background="@color/red_error"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </LinearLayout>

   // this is your bottom layout
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </LinearLayout>
</LinearLayout>

// This is the imageview which overlay the first LinearLayout 
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/success"
    android:adjustViewBounds="true"
    android:layout_gravity="center"/>
</FrameLayout>

它看起来像这样

找到了另一个解决方案(编辑)如果您的大图像尺寸是固定高度,您可以尝试这个

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

<RelativeLayout
    android:id="@+id/layoutTop"
    android:background="@color/red_error"
    android:layout_width="match_parent"
    android:layout_height="200dp" >
</RelativeLayout>

<RelativeLayout
    android:id="@+id/layoutBottom"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_alignParentBottom="true"
    android:layout_below="@id/layoutTop" >
</RelativeLayout>

<ImageView
    android:id="@+id/overlapImage"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_above="@id/layoutBottom"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="-20dp" 
    android:adjustViewBounds="true"
   android:src="@drawable/testimage" />

 </RelativeLayout>

参考: - Android:在布局之间重叠放置ImageView

希望这会有所帮助.祝你好运

Answer 2

使用layout_marginTop = -20dp（图像大小的一半）。它会上涨。

android:layout_marginTop="-20dp"