在Android Studio中使用约束布局会造成奇怪的后果

Question

我正处于Android开发阶段。最近，为了练习布局设计，我试图建立一个简单计算器的模拟。我在“设计”选项卡中创建并放置了视图（按钮，EditTexts）。然后我被困在“这个视图不受约束”的错误，所以我搜索了StackOverflow，最后发现解决方案是右键单击小部件 - >约束布局 - >推断约束。但是当我做到这一点时，我的程序中的这些视图发生了很大的变化，我无法将它们修改为原始位置和大小。如何在不改变视图的位置和大小的情况下解决错误？

这是之前使用约束布局我的计算器：

before_constraint：

这是使用后，我的计算器吧：

after_constraint：

这是我的源代码：

<?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_width="match_parent" 
android:layout_height="match_parent" 
tools:context="com.huy9515gmail.helloworld.MainActivity" 
tools:layout_editor_absoluteY="81dp" 
tools:layout_editor_absoluteX="0dp"> 


<Button 
    android:id="@+id/button10" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="0" 
    tools:layout_editor_absoluteX="87dp" 
    tools:layout_editor_absoluteY="186dp" /> 

<Button 
    android:id="@+id/button7" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="7" 
    tools:layout_editor_absoluteX="34dp" 
    tools:layout_editor_absoluteY="141dp" /> 

<Button 
    android:id="@+id/button8" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="8" 
    tools:layout_editor_absoluteX="87dp" 
    tools:layout_editor_absoluteY="141dp" /> 

<Button 
    android:id="@+id/button9" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="9" 
    tools:layout_editor_absoluteX="140dp" 
    tools:layout_editor_absoluteY="141dp" /> 

<TextView 
    android:id="@+id/textView" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="My First Calculator" 
    tools:layout_editor_absoluteX="134dp" 
    tools:layout_editor_absoluteY="16dp" /> 

<Button 
    android:id="@+id/button" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="2" 
    tools:layout_editor_absoluteX="87dp" 
    tools:layout_editor_absoluteY="51dp" /> 

<Button 
    android:id="@+id/button3" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="3" 
    tools:layout_editor_absoluteX="140dp" 
    tools:layout_editor_absoluteY="51dp" /> 

<Button 
    android:id="@+id/button4" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="/" 
    tools:layout_editor_absoluteX="281dp" 
    tools:layout_editor_absoluteY="96dp" /> 

<Button 
    android:id="@+id/button14" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="x" 
    tools:layout_editor_absoluteX="228dp" 
    tools:layout_editor_absoluteY="96dp" /> 

<Button 
    android:id="@+id/button13" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="-" 
    tools:layout_editor_absoluteX="281dp" 
    tools:layout_editor_absoluteY="51dp" /> 

<Button 
    android:id="@+id/button12" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="+" 
    tools:layout_editor_absoluteX="228dp" 
    tools:layout_editor_absoluteY="51dp" /> 

<Button 
    android:id="@+id/button11" 
    android:layout_width="106dp" 
    android:layout_height="40dp" 
    android:text="Delete" 
    tools:layout_editor_absoluteX="228dp" 
    tools:layout_editor_absoluteY="210dp" /> 

<Button 
    android:id="@+id/button16" 
    android:layout_width="106dp" 
    android:layout_height="40dp" 
    android:text="Calculate" 
    tools:layout_editor_absoluteX="228dp" 
    tools:layout_editor_absoluteY="170dp" /> 

<Button 
    android:id="@+id/button15" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="1" 
    tools:layout_editor_absoluteX="34dp" 
    tools:layout_editor_absoluteY="51dp" /> 

<Button 
    android:id="@+id/button2" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="4" 
    tools:layout_editor_absoluteX="34dp" 
    tools:layout_editor_absoluteY="96dp" /> 

<Button 
    android:id="@+id/button5" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="5" 
    tools:layout_editor_absoluteX="87dp" 
    tools:layout_editor_absoluteY="96dp" /> 

<Button 
    android:id="@+id/button6" 
    android:layout_width="53dp" 
    android:layout_height="45dp" 
    android:text="6" 
    tools:layout_editor_absoluteX="140dp" 
    tools:layout_editor_absoluteY="96dp" /> 

<EditText 
    android:id="@+id/editText" 
    android:layout_width="310dp" 
    android:layout_height="98dp" 
    android:ems="10" 
    android:inputType="textPersonName" 
    tools:layout_editor_absoluteX="37dp" 
    tools:layout_editor_absoluteY="327dp" /> 

Answer 1

当您“推断约束”时，硬编码值就出现了。我建议你删除所有布局并重新开始，了解约束布局如何工作。如果您看到“此视图不受约束”错误，Android Studio告诉您的是：视图需要更多约束

请记住iOS上的AutoLayout和Android上的ConstraintLayout的核心规则：每个视图都需要知道自己的位置（水平和垂直），同时也需要知道它的尺寸，宽度和高度。

所以，想想你的布局......我给你举个例子。

从顶部开始，您希望“标签”以文本“欢迎使用我的计算器”为中心。

好，现在发动机需要知道的4件事：

1. 凡在X轴我把这个标签？
2. 我在Y轴上的位置放了这个标签吗？
3. 这个标签的宽度是多少？
4. 这个标签的高度是多少？

有一些方法可以让发动机推断其中的一些（我们将会看到），但在大多数情况下，你需要这四个，按次（无论他们是否是推断或明确）。

那么让我们从您的“标题”开始。

TextView将居中，但我确定您希望它跨越它可以找到的所有宽度（并在需要时进行压缩）。由于ConstraintLayout没有match_parent（出于显而易见的原因：又名：想法是你必须设置约束），我们必须能够以不同的方式做...

对于X轴（水平），我们希望textView被固定到parent（又名：本例中的根）的start，以及父项的end（有效地使用所有屏幕，减去您决定在任一侧添加的任何边距）。

到目前为止，有两个约束条件。对于上述工作，ConstraintLayout说你必须在width中使用“特殊”值0dp。这告诉引擎宽度将是“任何我还不知道的值，在计算完所有约束条件后我会知道的”。

好。现在我们已经解决了＃1和＃3。

对于＃2和＃4，你可以做类似的事情......或者你可以享受一些事实，即某些观点，推断出了价值。例如：文本视图不需要高度，它们将根据字体大小，字符数量等自动调整大小，但仍需要告诉它该文本视图将在哪个轴上进行。

就你而言，我只是将文本视图的top与你的parent.top对齐。注意，您不需要告诉布局将文字的bottom固定为任何东西，因为它的高度= wrap_content。

，...等

现在，使用the official docs并开始阅读更多您可以做的事情（链，例如，可以在这里派上用场）。

Answer 2

你的意见都没有限制，但它们都具有设计时的位置。关于运行时间约束，请看看这个documentation。 This也是一个很好的介绍。

设计时位置看起来像这样的事情：

tools:layout_editor_absoluteY="81dp" 
tools:layout_editor_absoluteX="0dp" 

此代码将定位在设计视图。运行时间限制是这样的：

app:layout_constraintBottom_toBottomOf=”@+id/constraintLayout” 
app:layout_constraintEnd_toStartOf=”@+id/imageView” 
app:layout_constraintStart_toStartOf=”@+id/constraintLayout” 

，并在运行时定位您的视图（和设计师）

不幸的是，当你推断的约束一些不好的事情发生了。设计师做出了最好的猜测，但并不是想要的。

我建议您按照视图进行布局，删除设计时约束并添加运行时间约束，直到布局看起来像你想要的。