使用 Android ConstraintLayout 使视图居中出现问题

Posted 2023-03-29

【中文标题】使用 Android ConstraintLayout 使视图居中出现问题

【英文标题】：Trouble Centering View using Android ConstraintLayout

【发布时间】：2018-10-16 18:17:40

【问题描述】：

android 中的 ConstraintLayout 有点问题。

请注意下图：

我想提请您注意中间的三个视图行：TextView 和两个按钮。

垂直和水平虚线是固定的参考线（以屏幕高度/宽度的百分比表示），用于限制这些视图。

如您所见，TextView 在所有 4 个方向上都受到限制。

最右边的 Button 被限制在 3 个方向：顶部、底部和右侧...并且其纵横比限制为 1:1。

现在，中间的 Button 只被限制在顶部和底部，并且也应用了 1:1 的纵横比。

到目前为止一切都很好......但是如果我们想要保持一切都完全相同，除了将中间按钮居中以使其右侧和左侧具有相等的空间怎么办？ p>

人们可能认为简单地对其最近的邻居应用水平约束就可以解决问题......但不是。

这是结果：

所以...由于某种原因，按钮的大小正在增加。为什么？

在我看来，Android Studio 正在应用 1:1 纵横比规则（在这种情况下），说“高度是宽度的函数......”也就是说，首先计算宽度（基于新应用的约束），因此优先。

如果它只是简单地以相反的方式完成它并说“宽度 = 高度”，高度优先...（与应用最终约束之前所做的相同），那么一切都会好起来的。

所以...换句话说，您如何将“中间”视图居中于其他两个“右”和“左”视图之间并仍然保持：

1) 所有三个视图都具有匹配的高度，因为它们受到相同的水平约束。

2) 左视图处于固定位置。

3) 右视图的纵横比为 1:1，不允许与右侧参考线（固定位置）分离。

?

编辑：我为任何想要使用它的人制作了以下 XML sn-p：

（记住上面的三个规则。玩得开心！）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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_
    android:layout_
    tools:context="com.example.boober.deletethis.MainActivity">

    <android.support.constraint.Guideline
        android:id="@+id/guidelineH1"
        android:layout_
        android:layout_
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.45" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineH2"
        android:layout_
        android:layout_
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.55" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineV1"
        android:layout_
        android:layout_
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.50" />

    <TextView
        android:id="@+id/textView"
        android:layout_
        android:layout_
        android:background="@color/colorPrimary"
        android:text="1"
        android:textAlignment="center"
        android:gravity="center_vertical"
        app:layout_constraintBottom_toTopOf="@+id/guidelineH2"
        app:layout_constraintEnd_toStartOf="@+id/guidelineV1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guidelineH1" />

    <Button
        android:id="@+id/button"
        android:layout_
        android:layout_
        android:text="3"
        app:layout_constraintBottom_toTopOf="@+id/guidelineH2"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guidelineH1" />

    <Button
        android:id="@+id/button2"
        android:layout_
        android:layout_
        android:text="2"
        app:layout_constraintBottom_toTopOf="@+id/guidelineH2"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="@+id/guidelineH1"
        tools:layout_editor_absoluteX="219dp" />


</android.support.constraint.ConstraintLayout>

【问题讨论】：

你的问题非常清晰易懂，我不知道为什么人们一直对你的问题投反对票。我想他们有压力吗？

也许……我觉得这很有趣，因为他们不知道答案。

【参考方案1】：

更新：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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_
    android:layout_>

    <android.support.constraint.Guideline
        android:id="@+id/guidelineH1"
        android:layout_
        android:layout_
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.45" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineH2"
        android:layout_
        android:layout_
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.55" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineV1"
        android:layout_
        android:layout_
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.50" />

    <TextView
        android:id="@+id/textView"
        android:layout_
        android:layout_
        android:background="@color/colorPrimary"
        android:gravity="center_vertical"
        android:text="1"
        android:textAlignment="center"
        app:layout_constraintBottom_toTopOf="@+id/guidelineH2"
        app:layout_constraintEnd_toStartOf="@+id/guidelineV1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guidelineH1" />

    <Button
        android:id="@+id/button"
        android:layout_
        android:layout_
        android:text="3"
        app:layout_constraintBottom_toTopOf="@+id/guidelineH2"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guidelineH1" />

    <android.support.constraint.ConstraintLayout
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@+id/guidelineH2"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="@+id/guidelineH1">

        <Button
            android:id="@+id/button2"
            android:layout_
            android:layout_
            android:text="2"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

【讨论】：

感谢您的尝试，但这似乎不适用于涉及水平参考线和 1:1 纵横比的特定情况。

是的。我以前做过。你能分享你的部分布局代码吗？我帮你改正

好的，我将编辑问题以包含代码示例。

是的，行得通！我没想过要嵌套另一个 ConstraintLayout。