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: Placing ImageView on overlap between layouts

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

Answer 2

尝试这种方式：只需根据需要更改layout_width和layout_height。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <View
        android:id="@+id/viewOne"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#126989" />

    <View
        android:id="@+id/viewTwo"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_below="@+id/viewOne"
        android:background="#547866" />

    <View
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_alignBottom="@+id/viewTwo"
        android:layout_centerHorizontal="true"
        android:background="#ff7800"
        android:layout_marginBottom="35dp" />

</RelativeLayout>

看起来像这样：

Answer 3

我建议使用Constraintlayout，因为它可以很好地控制各个视图项的位置。基于以下示例的示例

<android.support.constraint.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:id="@+id/parentLayout">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_person_black"
        android:adjustViewBounds="true"
        android:id="@+id/image_view_product"/>

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintTop_toBottomOf="@+id/image_view_product"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignBottom="@id/image_view_product"
        android:layout_centerHorizontal="true"
        android:background="@drawable/circle"
        android:src="@drawable/ic_add_circle_green_24dp"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

Answer 4

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

android:layout_marginTop="-20dp"

Answer 5

将图像放在相对布局中首先定义要放在绿色圆圈后面的图像而不是将绿色圆圈定义为

android:layout_alignBottom="@+id/Image1"

通过为绿色圆圈图像添加边距来调整位置。

Answer 6

我建议你使用这两张图片的framelayout。

底部的刷新图像视图和顶部的桌面风扇。

注意：由于framelayout的行为类似于堆栈，因此底部的项目将显示在顶部。

然后将刷新图标的重力设置为最低点以使其看起来像这样。

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

   <ImageView 
      android:src="@drawable/ic_fan"
      android:scaleType="centerCrop"
      android:layout_height="wrap_content"
      android:layout_width="match_parent"/>

   <ImageView
            android:src="@drawable/ic_refresh"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:gravity="center|bottom"/>
</FrameLayout>

Answer 7

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >

<ImageView
android:id="@+id/ivBackground"
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="40dp"
android:layout_marginTop="-20dp"
android:layout_below="@+id/ivBackground"
android:layout_centerHorizontal="true"
android:background="@drawable/image_view_circle"
android:src="@drawable/ic_circle" />

我认为这可以帮助您编辑代码并进行如下更改 - 我将圆形图像视图高度更改为40dp，然后我给出前端-20 dp的边距，以便图像在背景图像上覆盖一半。

我没有运行此代码，所以如果您遇到任何问题，请告诉我，我希望这对您有用..

Answer 8

<强>截图：

<强> activity_main.xml中：

   <RelativeLayout
            android:id="@+id/rl_image"
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <ImageView
                android:id="@+id/thumbnail"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:contentDescription="null"
                android:scaleType="fitXY"
                android:src="@drawable/album9" />


            <ImageView
                android:id="@+id/imageView_round"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_alignParentBottom="true"
                 android:layout_centerHorizontal="true"
                android:src="@drawable/user_profile" />

        </RelativeLayout>

Android - ImageView覆盖另一个ImageView

8 个答案: