当添加到父 ConstraintLayout 中的 FrameLayout 时，子 ConstraintLayout 中的 ImageViews 失去其位置

【问题标题】：The ImageViews in child ConstraintLayout loose its position when added to a FrameLayout in parent ConstraintLayout当添加到父 ConstraintLayout 中的 FrameLayout 时，子 ConstraintLayout 中的 ImageViews 失去其位置
【发布时间】：2022-01-04 13:47:34
【问题描述】：

请帮我找到一种方法来组合两个 ConstraintLayout，以便正确显示 ImageView。

我有一项活动过去几年都可以正常工作。但是在更新到 androidx 并从 1.1.3 更新到 androidx.constraintlayout:constraintlayout:2.1.2 之后，其中一个 ConstraintLayouts 中的所有 ImageView 都失去了位置。奇怪的是，我无法通过更改回 1.1.3 版本来使此活动恢复到以前的显示方式……唯一可行的方法是返回到较旧的备份版本。但是，这样做似乎不是一个好的解决方案，因为它可能与未来的更新不兼容。

这个Activity-view的结构如下图所示。一个 ConstraintLayout 是使用两个 FrameLayout 将一个子 ConstraintLayout 和一个子 LinearLayout 放在一起。这两个 FrameLayout 使用以百分比表示的 Horizo​​ntalGuideline 定位，将视图一分为二。 LinearLayout 正确显示。但是子 ConstraintsLayout 中的 ImageViews 要么：

  1. 对于 MatchParent：ImageView 忘记了它们彼此之间的相对位置，彼此分离并散布在屏幕上，甚至在手机屏幕之外。

  2. 对于 WrapContent：ImageViews 忘记了它们彼此的相对位置，获取手机屏幕中心的位置。中心看起来像子 ConstraintLayout 的微型窗口，其 ImageView 被挤压在一起并相互重叠。

子 ConstraintLayout 中的 ImageViews 是在一条垂直线和一条水平线的帮助下显示的，它们以百分比设置。我在这里错过了什么？

（我认为可能有一种解决方法，使用不同的布局而不是子 ConstraintLayout，但这可能会弄乱已经开发的动画......因此，我想避免这种情况。）

[设计模式和手机屏幕上的视图][1]

[结构][2]

代码父约束布局

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/Constraintlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.85" />

    <FrameLayout
        android:id="@+id/containergame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/guideline14"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <FrameLayout
        android:id="@+id/containergamecontrol"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline14" />

</androidx.constraintlayout.widget.ConstraintLayout>

子代码 ConstraintLayout（在设备上失败，但在 Android Studio 的设计视图中看起来不错）

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <ImageView
        android:id="@+id/tile2"
        style="@style/TileButton_3by3"
        android:src="@drawable/borderpiece_upper"
        android:visibility="visible"
        app:layout_constraintLeft_toRightOf="@+id/guideline5"
        app:layout_constraintRight_toLeftOf="@+id/guideline5"
        app:layout_constraintTop_toBottomOf="@id/guideline6"
        app:layout_constraintBottom_toTopOf="@id/tile5"
        tools:ignore="ContentDescription" />


    <ImageView
        android:id="@+id/tile1"
        style="@style/TileButton_3by3"
        android:src="@drawable/cornerpiece_left_upper"
        android:visibility="visible"
        app:layout_constraintRight_toLeftOf="@+id/tile2"
        app:layout_constraintTop_toBottomOf="@+id/guideline6"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/tile3"
        style="@style/TileButton_3by3"
        android:src="@drawable/cornerpiece_right_upper"
        android:visibility="visible"
        app:layout_constraintLeft_toRightOf="@+id/tile2"
        app:layout_constraintTop_toBottomOf="@+id/guideline6"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/tile5"
        style="@style/TileButton_3by3"
        android:src="@drawable/centerpiece"
        android:visibility="visible"
        app:layout_constraintLeft_toRightOf="@+id/guideline5"
        app:layout_constraintRight_toLeftOf="@+id/guideline5"
        app:layout_constraintTop_toBottomOf="@+id/tile2"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/tile4"
        style="@style/TileButton_3by3"
        android:src="@drawable/borderpiece_left"
        android:visibility="visible"
        app:layout_constraintRight_toLeftOf="@+id/tile5"
        app:layout_constraintTop_toBottomOf="@+id/tile1"
        tools:ignore="ContentDescription" />


    <ImageView
        android:id="@+id/tile6"
        style="@style/TileButton_3by3"
        android:src="@drawable/borderpiece_right"
        android:visibility="visible"
        app:layout_constraintLeft_toRightOf="@+id/tile5"
        app:layout_constraintTop_toBottomOf="@+id/tile3"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/tile8"
        style="@style/TileButton_3by3"
        android:src="@drawable/borderpiece_bottom"
        android:visibility="visible"
        app:layout_constraintLeft_toRightOf="@+id/guideline5"
        app:layout_constraintRight_toLeftOf="@+id/guideline5"
        app:layout_constraintTop_toBottomOf="@+id/tile5"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/tile7"
        style="@style/TileButton_3by3"
        android:src="@drawable/cornerpiece_left_bottom"
        android:visibility="visible"
        app:layout_constraintRight_toLeftOf="@+id/tile8"
        app:layout_constraintTop_toBottomOf="@+id/tile4"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/tile9"
        style="@style/TileButton_3by3"
        android:src="@drawable/cornerpiece_right_bottom"
        android:visibility="visible"
        app:layout_constraintLeft_toRightOf="@+id/tile8"
        app:layout_constraintTop_toBottomOf="@+id/tile6"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand12"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand11"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand10"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand9"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand8"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand7"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand6"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand5"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand4"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand3"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />


    <ImageView
        android:id="@+id/operand2"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/operand1"
        style="@style/Operand_3by3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6"
        app:srcCompat="@drawable/operand_level_list"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/number2"
        style="@style/Number_3by3"
        app:layout_constraintBottom_toBottomOf="@+id/tile2"
        app:layout_constraintEnd_toEndOf="@+id/tile2"
        app:layout_constraintStart_toStartOf="@+id/tile2"
        app:layout_constraintTop_toTopOf="@+id/tile2" />

    <TextView
        android:id="@+id/number1"
        style="@style/Number_3by3"
        app:layout_constraintBottom_toBottomOf="@+id/tile1"
        app:layout_constraintEnd_toEndOf="@+id/tile1"
        app:layout_constraintStart_toStartOf="@+id/tile1"
        app:layout_constraintTop_toTopOf="@+id/tile1" />

    <TextView
        android:id="@+id/number3"
        style="@style/Number_3by3"
        app:layout_constraintBottom_toBottomOf="@+id/tile3"
        app:layout_constraintEnd_toEndOf="@+id/tile3"
        app:layout_constraintStart_toStartOf="@+id/tile3"
        app:layout_constraintTop_toTopOf="@+id/tile3" />

    <TextView
        android:id="@+id/number5"
        style="@style/Number_3by3"
        app:layout_constraintBottom_toBottomOf="@+id/tile5"
        app:layout_constraintEnd_toEndOf="@+id/tile5"
        app:layout_constraintStart_toStartOf="@+id/tile5"
        app:layout_constraintTop_toTopOf="@+id/tile5" />

    <TextView
        android:id="@+id/number4"
        style="@style/Number_3by3"
        app:layout_constraintBottom_toBottomOf="@+id/tile4"
        app:layout_constraintEnd_toEndOf="@+id/tile4"
        app:layout_constraintStart_toStartOf="@+id/tile4"
        app:layout_constraintTop_toTopOf="@+id/tile4" />

    <TextView
        android:id="@+id/number6"
        style="@style/Number_3by3"
        app:layout_constraintBottom_toBottomOf="@+id/tile6"
        app:layout_constraintEnd_toEndOf="@+id/tile6"
        app:layout_constraintStart_toStartOf="@+id/tile6"
        app:layout_constraintTop_toTopOf="@+id/tile6" />

    <TextView
        android:id="@+id/number8"
        style="@style/Number_3by3"
        app:layout_constraintBottom_toBottomOf="@+id/tile8"
        app:layout_constraintEnd_toEndOf="@+id/tile8"
        app:layout_constraintStart_toStartOf="@+id/tile8"
        app:layout_constraintTop_toTopOf="@+id/tile8" />

    <TextView
        android:id="@+id/number7"
        style="@style/Number_3by3"
        app:layout_constraintBottom_toBottomOf="@+id/tile7"
        app:layout_constraintEnd_toEndOf="@+id/tile7"
        app:layout_constraintStart_toStartOf="@+id/tile7"
        app:layout_constraintTop_toTopOf="@+id/tile7" />

    <TextView
        android:id="@+id/number9"
        style="@style/Number_3by3"
        app:layout_constraintBottom_toBottomOf="@+id/tile9"
        app:layout_constraintEnd_toEndOf="@+id/tile9"
        app:layout_constraintStart_toStartOf="@+id/tile9"
        app:layout_constraintTop_toTopOf="@+id/tile9" />

    <TextView
        android:id="@+id/operands"
        style="@style/Operands_as_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintHorizontal_bias="0.50"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/operand1"
        app:layout_constraintVertical_bias="1.0" />

</androidx.constraintlayout.widget.ConstraintLayout>


  [1]: https://i.stack.imgur.com/zCwvG.png
  [2]: https://i.stack.imgur.com/BnVdW.png

【问题讨论】：

  • 显示布局 XML 以及可能显示好和坏表示的两张图像会很有帮助。如果没有这些信息，很难知道发生了什么。但是，从您的问题来看，您似乎正在使用 'match_parent' 作为 ConstraintLayot 的子级维度 - 不要那样做。将尺寸更改为“0dp”，并将约束设置为父级。
  • 请包含您的 XML 代码。
  • 我已添加代码并尝试添加结果视图 - 您会在页面底部找到它们作为链接。
  • 您的某些限制似乎不正确。例如，对于 tile2，您指定 app:layout_constraintLeft_toRightOf="@+id/guideline5" 和 app:layout_constraintRight_toLeftOf="@+id/guideline5"，这将导致宽度为零。检查您的所有约束是否存在此类问题。像这样的问题将在您的布局中级联。不知道为什么设计视图没有显示问题。
  • 不，它不应该给出零宽度，因为约束只定位视图。作为测试，我使用水平和垂直链和样式打包更改了子 ConstraintLayout。我还删除了垂直指南。没有任何变化 - 在 Android Studio 和设备上的设计模式下看起来与以前相同。这使我相信子 ConstraintLayout 没有任何问题，并且可能在 XML 代码中也没有。孩子正在展示一个片段，而父母正在展示一个活动。 java代码中的某些内容是否会使活动误解如何正确显示片段？

标签： android-layout android-constraintlayout androidx constraintlayout-guideline


【解决方案1】：

解决了！

请记住，在更新到 AndroidX 后，我们的 ImageViews 定位错误。这也使碎片的视图失去了它的形状。要查看这种奇怪行为的图片，请查看：

原来问题是我的一个不小心的 java 编程。我希望 ImageViews 连接到我的 java 代码的其余部分中的程序逻辑。为了实现这一点，我自己更改了ImageViews 上的Ids，以便id 携带一些与其他代码相关的信息。我在片段中的onCreateView 方法中这样做了，如下所示：

int id = <A unique integer carrying some information>

iv.setId(id)

删除上面的这两行代码，保持 id:s 不变，让应用再次完美运行。

嗯，怎么会这样？好吧，我猜想ImageViews 的id 是在AndroidX 中的布局引擎之前读取的，并且在我的java 代码中onCreateView 方法中的id 更改发生之前。因此，当我将 id:s 更改为其他内容（之后）时，我不小心破坏了视图意识与视图本身之间的联系，从而使布局引擎感到困惑。

经验教训：切勿更改 ImageViews 的 id，除非您确切知道何时读取 id:s 以及布局引擎如何使用它们。

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-31
    • 1970-01-01
    • 1970-01-01
    • 2017-08-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode