Java 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="match_parent"
android:layout_height="match_parent"

android:background="#f4f4f4"
tools:context=".MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="144dp"
android:gravity="center"
android:shadowColor="#000000"
android:text="@string/title"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />

<Button
android:id="@+id/button"
android:layout_width="342dp"
android:layout_height="0dp"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="260dp"
android:layout_marginEnd="160dp"
android:layout_marginRight="160dp"
android:background="#eadca6"
android:text="@string/all_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="@+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />

<Button
android:id="@+id/button2"
android:layout_width="342dp"
android:layout_height="0dp"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="160dp"
android:layout_marginRight="160dp"
android:layout_marginBottom="50dp"
android:background="#eadca6"
android:text="@string/favorite_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button" />
</androidx.constraintlayout.widget.ConstraintLayout>

---

但是，如果像这样运行代码，标题将被一分为二。但这两个按钮的大小正常。如果我在textview上使用wrap_内容，textview将正常显示，但按钮高度也仅与内部文本一样大（如继承wrap内容），即使我没有在buttons字段中写入wrap_内容。LayoutEditor告诉我一切正常，但当我运行应用程序时，这些设计“错误”就会发生。

在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:layout_width="match_parent"
    android:layout_height="match_parent"

    android:background="#f4f4f4"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:shadowColor="#000000"
        android:text="@string/title"
        android:textColor="#eadca6"
        android:textSize="60sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/button"
        android:layout_width="342dp"
        android:layout_height="120dp"
        android:background="#eadca6"
        android:text="@string/all_quotes"
        android:textAllCaps="false"
        android:textSize="20sp"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/group" />

    <Button
        android:id="@+id/button2"
        android:layout_width="342dp"
        android:layout_height="120dp"
        android:layout_marginTop="20dp"
        android:background="#eadca6"
        android:text="@string/favorite_quotes"
        android:textAllCaps="false"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@id/group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="button,button2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />
</androidx.constraintlayout.widget.ConstraintLayout>

---

我在您的代码中添加了一些修改，并为此代码添加了一个屏幕截图

<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="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4"
tools:context=".MainActivity">

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="144dp"
    android:shadowColor="#000000"
    android:text="title"
    android:textAlignment="center"
    android:textColor="#eadca6"
    android:textSize="60sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/button"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.500"
    app:layout_constraintVertical_bias="0.0" />

<Button
    android:id="@+id/button"
    android:layout_width="342dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="260dp"
    android:layout_marginLeft="35dp"
    android:layout_marginRight="35dp"
    android:background="#eadca6"
    android:text="all_quotes"
    android:textAllCaps="false"
    android:textSize="20sp"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

<Button
    android:id="@+id/button2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:layout_marginTop="23dp"
    android:layout_marginBottom="50dp"
    android:layout_marginLeft="35dp"
    android:layout_marginRight="35dp"
    android:background="#eadca6"
    android:text="favqussdi"
    android:textAllCaps="false"
    android:textSize="20sp"
    app:layout_constraintTop_toBottomOf="@+id/button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

如您所见，我更改了以下内容：

android:layout\u height change
值变为
wrap\u content

android:layout\u width将值更改为
match\u parent

在按钮中添加了
android:paddingTop=“10dp”
和
android:paddingBottom=“10dp”

修改
layout_-marginLeft
和
layout_-marginRight

删除一些冗余代码，并尽可能避免添加静态编号。希望我能对您有所帮助^ ^
您想知道您的代码出了什么问题，所以在编写代码之前，我将从一些解释开始：

TL；医生：

<?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="match_parent"
  android:layout_height="match_parent"
  android:background="#f4f4f4"
  tools:context=".MainActivity">

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:shadowColor="#000000"
    android:text="title"
    android:textColor="#eadca6"
    android:textSize="60sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/guideline3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.15"
    app:layout_constraintWidth_percent="0.9"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#eadca6"
    android:text="all_quotes"
    android:textAllCaps="false"
    android:textSize="20sp"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintHorizontal_bias="0.500"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent="0.9" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#eadca6"
    android:text="favorite_quotes"
    android:textAllCaps="false"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button"
    app:layout_constraintWidth_percent="0.9" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.8" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.2" />

</androidx.constraintlayout.widget.ConstraintLayout>

不要在视图上使用固定大小，您可以使用
app:layout\u constraintHeight\u percent=“0.xx”
app:layout\u constraintWidth\u percent=“0.yy”
和


完整答案
不同的手机有不同的屏幕大小，在您的布局中，您在视图上使用固定大小（例如，固定大小为
android:layout\u marginTop=“144dp”
），其结果是，在一个屏幕（您的android studio预览屏幕）上看起来不错的内容在另一个屏幕（您的实际手机）上看起来不好，这就是为什么会出现设计“错误”

使用
wrap\u content
时，您无法保证完全的布局责任，例如，如果您将拍摄一张非常大的图像并将其放在视图中，则在不同的设备上看起来不会相同


如果您已经使用了
constraintLayout
，这里有一些工具可以帮助您实现一个响应式布局，该布局的大小适合所有屏幕大小

例如，看看这个布局：

<?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="match_parent"
  android:layout_height="match_parent"
  android:background="#f4f4f4"
  tools:context=".MainActivity">

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:shadowColor="#000000"
    android:text="title"
    android:textColor="#eadca6"
    android:textSize="60sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/guideline3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.15"
    app:layout_constraintWidth_percent="0.9"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#eadca6"
    android:text="all_quotes"
    android:textAllCaps="false"
    android:textSize="20sp"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintHorizontal_bias="0.500"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent="0.9" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#eadca6"
    android:text="favorite_quotes"
    android:textAllCaps="false"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button"
    app:layout_constraintWidth_percent="0.9" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.8" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.2" />

</androidx.constraintlayout.widget.ConstraintLayout>

此视图的大小将等于屏幕高度的15%和宽度的90%，它将响应不同的布局

我通过使用管理视图的位置，例如：

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.2" />

/如果您想缩放视图的大小（在您的情况下，我将使用ssp库缩放视图上的文本大小）。
您好，谢谢您的回答。但是我需要知道为什么我的代码不起作用，为什么你的解决方案起作用。你的代码不起作用，因为文本视图和按钮的layout_marginTop和layout_marginBottom太大。因此，内容不适合屏幕，文本视图和按钮的内容被裁剪。例如，如果您对TextView使用android:layout_marginTop=“120dp”-内容将不会被裁剪。通常，在创建布局时，您可以设置您知道的项目的大小（对于TextView width和height是wrap_内容，对于Button-static height和width），所有其他内容都应尽可能灵活（设置这么多静态边距是不好的做法）。+1对我来说，但你的答案并不能使布局响应。你可以查看我的答案，了解如何响应。非常感谢！我可以问一下作为初学者如何学习这一点吗？比如，你有什么建议给我吗？从创建布局开始，跟随页面，并询问有关堆栈溢出的更多问题