Question

我想要一个图标（ImageView）覆盖另一个ImageView。当我尝试时，该图标隐藏在白色图像后面。在下面的代码中，第一个图像视图用于白框，另一个图像视图用于图标。

<RelativeLayout
            android:layout_width="54dp"
            android:layout_height="54dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp">

            <ImageView
                android:id="@+id/button_menu"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_alignParentTop="true"
                android:layout_alignParentStart="true"
                android:padding="5dp"
                android:src="@drawable/ic_menu"
                android:background="@drawable/button_white_rounded"
                android:elevation="4dp"
                android:scaleType="fitXY"
                android:adjustViewBounds="true"
                android:tint="@color/colorText"/>

            <ImageView
                android:id="@+id/warning_circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:src="@drawable/ic_warning_circle"/>
        </RelativeLayout>

我希望屏幕截图中的橙色图标位于白框上方。如何将其带到白框图像上？

Answer 1

RelativeLayout中的layout_align [Top | Bottom | Left | Right] 属性用于根据边距内各自的x和y值对齐视图。现在，根据边缘，第二个ImageView将与第一个ImageView的顶部，底部，左侧和右侧对齐。对齐中忽略填充。

<RelativeLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@color/white" >

    <ImageView
        android:id="@+id/inside_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dip"
        android:layout_marginTop="5dip"
        android:src="@drawable/frame" />

      <ImageView
         android:id="@+id/outside_imageview"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignTop="@id/inside_imageview"
         android:layout_alignBottom="@id/inside_imageview"
         android:layout_alignLeft="@id/inside_imageview"
         android:layout_alignRight="@id/inside_imageview"            
         android:scaleType="fitXY" />
  </RelativeLayout>

Answer 2

<RelativeLayout
            android:layout_width="54dp"
            android:layout_height="54dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp">

             <ImageView
                android:id="@+id/warning_circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:src="@drawable/ic_warning_circle"/>

            <ImageView
                android:id="@+id/button_menu"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_alignParentTop="true"
                android:layout_alignParentStart="true"
                android:padding="5dp"
                android:src="@drawable/ic_menu"
                android:background="@drawable/button_white_rounded"
                android:elevation="4dp"
                android:scaleType="fitXY"
                android:adjustViewBounds="true"
                android:tint="@color/colorText"/>


        </RelativeLayout>

Answer 3

您的代码很完美，但是您必须从android:elevation中删除button_menu，或者必须在android:elevation中添加warning_circle。

我已根据@MikeM.条关于使用RelativeLayout而不是ConstraintLayout的建议更新了答案

解决方案1：

<RelativeLayout
    android:layout_width="54dp"
    android:layout_height="54dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp">

    <ImageView
        android:id="@+id/button_menu"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:background="@drawable/button_white_rounded"
        android:padding="5dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_menu"
        android:tint="@color/colorText"
        tools:src="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/warning_circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:src="@drawable/ic_warning_circle"
        tools:src="@tools:sample/avatars" />
</RelativeLayout>

解决方案2：

<RelativeLayout
    android:layout_width="54dp"
    android:layout_height="54dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp">

    <ImageView
        android:id="@+id/button_menu"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:background="@drawable/button_white_rounded"
        android:elevation="4dp"
        android:padding="5dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_menu"
        android:tint="@color/colorText"
        tools:src="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/warning_circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:elevation="4dp"
        android:src="@drawable/ic_warning_circle"
        tools:src="@tools:sample/avatars" />
</RelativeLayout>

Answer 4

您可以使用FrameLayout来实现。.这是一个示例，您可以根据需要进行修改。使用FrameLayout时，在警告图标图像视图中添加重力为底，在菜单图标图像视图中添加10dp的余量。

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp">

    <ImageView
        android:id="@+id/button_menu"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:layout_margin="10dp"
        android:padding="5dp"
        android:src="@drawable/ic_menu"
        android:background="@drawable/button_white_rounded"
        android:elevation="4dp"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:tint="@color/colorText"/>

    <ImageView
        android:id="@+id/warning_circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@drawable/ic_warning_circle"/>

</FrameLayout>

Answer 5

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginTop="20dp">

    <ImageView
        android:layout_centerInParent="true"
        android:id="@+id/warning_circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@drawable/ic_launcher_background"/>

    <ImageView
        android:id="@+id/button_menu"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:padding="5dp"
        android:layout_marginRight="-20dp"
        android:layout_marginBottom="-20dp"
        android:layout_alignRight="@+id/warning_circle"
        android:layout_alignBottom="@+id/warning_circle"
        android:src="@drawable/ic_menu_gallery"
        android:background="@color/colorAccent"
        android:elevation="4dp"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"/>

</RelativeLayout>

使用这种方式！我们有相对布局中的图层概念！垂直向下的视图位于最顶层。

Answer 6

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/download" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/download_img" />
    </RelativeLayout>

</RelativeLayout>

Answer 7

您可以尝试搜索任何现成的解决方案，以查找诸如ImageBadgeView之类的徽章。或尝试使用素材库中的BadgeDrawable。

出于这种目的，我更愿意使用ViewOverlay并仅添加几行代码：

button_menu.post {
    val drawable = ContextCompat.getDrawable(context, R.drawable.ic_warning_circle)
    drawable.setBounds(
        button_menu.width - drawable.intrinsicWidth,
        button_menu.height - drawable.intrinsicHeight,
        button_menu.width,
        button_menu.height
    )
    button_menu.overlay.add(drawable)
}

通过这种方式，您可以减少xml布局中的容器数量，并使其更具可读性。

Android imageview在另一个imageview上

7 个答案: