Android imageview 在另一个 imageview答案

【问题标题】：Android imageview over another imageviewAndroid imageview 在另一个 imageview
【发布时间】：2019-11-20 04:59:55
【问题描述】：

我想要一个图标 (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>

我希望屏幕截图中的橙色图标位于白框上方。我怎样才能把它放在白框图像上？

【问题讨论】：

第一个有android:elevation="4dp"，但第二个没有海拔。
为此使用 ConstraintLayout
将警告图标图像视图放在按钮菜单上我的意思是在 xml 中放置第一个视图“警告图标”，然后是“按钮菜单”。仅更改两个图像视图的位置。检查我的答案
您是否希望仅由RelativeLayout 完成？我正在使用ConstraintLayout 解决方案。

标签： android kotlin

【解决方案1】：

<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>

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案3】：

您可以使用 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>

【讨论】：

【解决方案4】：

<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>

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

【讨论】：

【解决方案5】：

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

我已根据@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>

【讨论】：

他们为什么要使用ConstraintLayout？
@MikeM。 ConstraintLayout 比 RelativeLayout 更强大。你可以从这里stackoverflow.com/a/37992834/6238866和stackoverflow.com/questions/37321448/…了解更多信息
是的，我知道ConstraintLayout 是什么，但他们已经在飞机上按照自己的意愿安排了ImageViews。他们只是想在z轴上把一个向前推进。他们不需要更改父级来执行此操作，尤其是开销最大的ViewGroup。 RelativeLayout 足够了，在这里。
@MikeM。没错，但为了获得更好的性能和工具支持，您应该改为使用 ConstraintLayout 构建布局。 developer.android.com/guide/topics/ui/layout/relative
ConstraintLayout 在 IDE 设计器中可能更容易操作，但我仍然不相信它在运行时性能更高。诚然，我最近没有做任何测试，而且我看到的发布的数字有点旧，但很难想象ConstraintLayout 比普通的旧基本ViewGroups 在简单布局方面做得更好，当他们'是适当的；例如，android.jlelse.eu/constraint-layout-performance-870e5f238100.

【解决方案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>

【讨论】：

【解决方案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 布局中的容器数量并使其更具可读性。

【讨论】：