为什么小尺寸图像视图不与约束布局内的大图像视图重叠？

Question

我正在尝试将小图像视图重叠在大图像视图上。我已经在模拟器和真实设备中测试了这段代码。没有任何作用。 XML 代码片段：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/itemCard"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<!-- large ImageView -->
<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/imageViewPhoto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_145sdp"
    android:background="@color/grey_lighter"
    android:elevation="@dimen/_1sdp"
    android:scaleType="centerCrop"
    android:visibility="visible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
    app:srcCompat="@mipmap/dummy" />


 <!-- small ImageView -->
<androidx.appcompat.widget.AppCompatImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/typ_rounded_view"
    android:paddingStart="@dimen/_8sdp"
    android:paddingTop="@dimen/_3sdp"
    android:paddingEnd="@dimen/_4sdp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:srcCompat="@drawable/ic_video" />
</androidx.constraintlayout.widget.ConstraintLayout>

约束布局gradle:

 implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

Android工作室版本：4.2.2

Answer 1

在我的例子中，两者是重叠的。我稍微减少了代码。切断不必要的属性：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/itemCard"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- large ImageView -->
    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageViewPhoto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/my_image" />


    <!-- small ImageView -->
    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:srcCompat="@drawable/my_image2" />
</androidx.constraintlayout.widget.ConstraintLayout>

结果：

Answer 2

在您的布局中，这是由于大图像中的海拔而发生的。例如，您可以看到大图像的当前高度为 1，小图像为 0，因为大图像将被提升。要解决此问题，您可以从大图像中删除高程属性，或者也可以根据您的要求在小图像中添加高程

在下文中，我为两个 ImageView 添加了高度。

main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/itemCard"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<!-- large ImageView -->
<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/imageViewPhoto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/grey_lighter"
    android:elevation="1dp"
    android:scaleType="centerCrop"
    android:visibility="visible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
    app:srcCompat="@mipmap/ic_launcher" />


<!-- small ImageView -->
<androidx.appcompat.widget.AppCompatImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/typ_round_view"
    android:elevation="1dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:srcCompat="@drawable/ic_camera" />

</androidx.constraintlayout.widget.ConstraintLayout>

typ_round_view.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/grey_darker" />
    <corners android:topLeftRadius="30dp" />
    <padding
        android:bottom="0dp"
        android:left="18dp"
        android:right="8dp"
        android:top="8dp" />

</shape>

上面的布局会给你同样的结果你的要求

为什么小尺寸图像视图不与约束布局内的大图像视图重叠？

Why small size Image View not overlapping over the large Image View inside constraint Layout?

android

android-layout

android-imageview

android-constraintlayout