0

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

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

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

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

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

子 ConstraintLayout 中的 ImageView 借助一根垂直线和一根水平线来显示，它们以百分比设置。我在这里错过了什么？

（我认为可能存在使用不同布局而不是子 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
4

1 回答 1

0

解决了！

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

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

int id = <A unique integer carrying some information>

iv.setId(id)

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

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

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

于 2022-01-16T17:40:49.347 回答