ConstraintLayout 占位符未按预期布局

Question

当我尝试根据文章 ConstraintLayout Placeholder 编写布局时，预览屏幕上的页面并没有像我预期的那样显示。我唯一改变的是将 ImageButton 替换为 Button。如您所见，按钮 A 的文本没有像我预期的那样 center_vertical 布局，这是我在 styles.xml.

中定义的

有谁能解释一下原因，并告诉我如何解决吗？

谢谢。

这是我的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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.PlaceHolderExampleActivity">

    <ImageView
        android:id="@+id/top_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_background"
        android:src="@drawable/ic_launcher_foreground"
        tools:ignore="MissingConstraints" />

    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/template_main_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="50dp"
        app:content="@+id/top_image"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/template_action"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginEnd="24dp"
        android:background="#3F51B5"
        app:content="@+id/A"
        app:layout_constraintBottom_toBottomOf="@+id/template_main_image"
        app:layout_constraintEnd_toEndOf="@+id/template_main_image"
        app:layout_constraintTop_toBottomOf="@+id/template_main_image" />

    <Button
        android:id="@+id/A"
        style="@style/text_style"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginBottom="16dp"
        android:text="A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/B"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

这里是style.xml

 <style name="text_style">
        <item name="android:background">#E91E63</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">16sp</item>
        <item name="android:gravity">center</item>
    </style>

预览图如下：

Answer 1

我不希望你看到什么。当按钮是 Placeholder 的一部分时，它似乎被忽略了。（无论如何，重力是一种奇怪的野兽。）这对我来说就像一个错误。如果您愿意，可以考虑在 issue tracker 中报告。（也就是说，如果你同意的话。）

同时，这里有一个不太复杂的解决方法。将按钮包裹在 FrameLayout 中，如下所示。您需要在 Placeholder 中引用 FrameLayout 而不是按钮。

<FrameLayout
    android:id="@+id/frameForA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent">

    <Button
        android:id="@+id/A"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:text="A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</FrameLayout>

FrameLayout 非常轻巧。做出此更改后，模拟器上的布局如下所示：

我简化了这个答案的按钮定义。当然，您可以重新引入您的风格并恢复我对按钮所做的任何其他更改。

ConstraintLayout 占位符未按预期布局

ConstraintLayout Placeholder is not laying out as expected

android

android-constraintlayout