正确获取约束 - ConstraintLayout
原文链接:https://proandroiddev.com/getting-your-constraints-right-constraintlayout-786254ed1166
Constraintlayout文档描述：
一个ConstraintLayout是一个ViewGroup，它允许以灵活的方式调整组件的位置和大小。
这里的关键字是灵活性。这种灵活性可用于构建可扩展的响应式用户界面。一个XML在所有屏幕尺寸和设备类型上都可以完美展示。
顾名思义，ConstraintLayout可以处理定义的一组约束。 如何定义这些约束条件，事实上决定了布局将变得多么灵活。
为了说明这一点，我们尝试构建超级天才设计师X先生为我们提供的UI设计。
看起来很简单，对！
这种设计需要转换成一系列约束条件，这是你我进入的地方。
就我们的目的而言，需要关心的只是蓝图，而不是实际的设计资产：
能够实现这种布局的一些方式可能是：
“NOOB”方式：
绝对质朴的做法是指定每个元素的精确X和Y坐标。这可能在一台设备上工作，但肯定不会适配不同的屏幕尺寸。所以这种方法带有“不要在家里试用”的免责声明。
“我爱我的父母”方式：
查看约束的另一种方法是视图与其父项的关系。让我们看看如果遵循相对于其父项约束每个视图的策略，那么约束条件可能会是什么情况。
<?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="wrap_content"
android:padding="16dp"
tools:context=".MainActivity">
<TextView
android:id="@+id/titleTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="96dp"
android:layout_marginTop="12dp"
android:gravity="center"
android:textAlignment="center"
android:maxLines="1"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Team A vs Team B" />
<ImageView
android:id="@+id/teamALogo"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_marginTop="44dp"
tools:src="@tools:sample/avatars"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/teamBLogo"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_marginTop="44dp"
tools:src="@tools:sample/avatars"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/teamAScoreTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="80dp"
android:layout_marginTop="75dp"
android:padding="10dp"
android:textAlignment="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="3" />
<TextView
android:id="@+id/teamBScoreTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="75dp"
android:layout_marginEnd="80dp"
android:padding="10dp"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="2" />
<TextView
android:id="@+id/teamScoreSeparatorTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="160dp"
android:layout_marginTop="75dp"
android:padding="10dp"
android:textAlignment="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text=":" />
<TextView
android:id="@+id/teamANameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:layout_marginTop="135dp"
android:textAlignment="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Team Name" />
<TextView
android:id="@+id/teamBNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="135dp"
android:layout_marginEnd="60dp"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Team Name" />
</android.support.constraint.ConstraintLayout>在这种情况下，一切看起来都不错，但直到水平方向父母聚在一起时(父母分居确实对孩子有不良影响，对)。以下是横向模式下的相同布局：
随着横向差距的增加，子视图不再居中对齐，现在布局看起来不像设计师期望的那样。事实证明，仅依靠父布局并不是一个好主意。
“兄弟情”的方式：
同样，可以将所有视图放在一个或多个兄弟视图中。这里再一次，问题会和前面的情况一样。随着屏幕尺寸的增加或减少，视图之间的距离不会增加或减少。
“灵活”的方式
提出一套很好的约束条件的技巧是使用自适应约束。根据父视图大小的百分比定义约束条件通常是一个很好的起点。可以帮助您实现这一目标的工具是指导方针，链条和新引入的障碍。从标题开始，让我们找出哪些约束条件可以用于响应式用户界面：
1. titleTextView:
- 标题宽度应该与父布局一样，中心文字对齐
- 起终边距相等
- 从顶部，可以使用水平对齐，大致将它放置在父视图高度的20％处
这三个限制对titleTextView就够了。
2. teamLogo, teamScoreTextView (A队和B队):
- 这些视图具有共同的属性：水平中心对齐。为了达到这个目的，可以在屏幕中间添加一个垂直指引线，并在其左侧和右侧添加视图。
- scoreView和teamLogoView可以放置在相同的距离，覆盖各自的一半屏幕。这可以使用分散模式下的链来实现。
- 在垂直方向上，这些视图在其父项中居中对齐。
3. teamNameTextView:
- 球队名称在球队得分下边。这给了垂直方向的限制。可以添加20dp的顶部边距。
- 对于水平对齐，同时约束得分文本视图的开始和结束，以保持其与中心对齐w.r.t得分。
4. scoreSeparatorView:
- 该视图可以同时水平和垂直居中对齐。
此时，布局具有相当的可扩展性和响应能力。最终的结果：
<?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="200dp"
tools:context=".MainActivity">
<android.support.constraint.Guideline
android:id="@+id/titleTextViewGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="0dp"
app:layout_constraintGuide_percent=".2" />
<android.support.constraint.Guideline
android:id="@+id/horizontalCenterGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="0dp"
app:layout_constraintGuide_percent=".5" />
<android.support.constraint.Guideline
android:id="@+id/verticalCenterGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="0dp"
app:layout_constraintGuide_percent=".5" />
<TextView
android:id="@+id/titleTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:gravity="center"
android:maxLines="1"
android:textAlignment="center"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="@id/titleTextViewGuideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Team A vs Team B" />
<ImageView
android:id="@+id/teamALogo"
android:layout_width="60dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintEnd_toStartOf="@id/teamAScoreTextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:src="@tools:sample/avatars" />
<TextView
android:id="@+id/teamAScoreTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintEnd_toStartOf="@id/verticalCenterGuideline"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="@id/teamALogo"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:text="3" />
<ImageView
android:id="@+id/teamBLogo"
android:layout_width="60dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="@id/teamBScoreTextView"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:src="@tools:sample/avatars" />
<TextView
android:id="@+id/teamBScoreTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintEnd_toStartOf="@id/teamBLogo"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="@id/verticalCenterGuideline"
app:layout_constraintStart_toStartOf="@id/verticalCenterGuideline"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:text="3" />
<TextView
android:id="@+id/teamScoreSeparatorTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text=":" />
<TextView
android:id="@+id/teamANameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintTop_toBottomOf="@id/teamAScoreTextView"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="@id/teamAScoreTextView"
app:layout_constraintEnd_toEndOf="@id/teamAScoreTextView"
tools:text="Team Name" />
<TextView
android:id="@+id/teamBNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintTop_toBottomOf="@id/teamBScoreTextView"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="@id/teamBScoreTextView"
app:layout_constraintEnd_toEndOf="@id/teamBScoreTextView"
tools:text="Team Name" />
</android.support.constraint.ConstraintLayout>
不是很糟糕，嗯？！
“更细的细节”
解决几个问题就可以使用户界面变成真正的响应式。
视图缩放：
如果查看横向界面，与纵向界面相比，有更多空白区域。这是因为视图定位是响应的，视图大小却不是。
例如，teamLogo图片横向和纵向界面都是是60dp x 80dp。可以让视图随着屏幕尺寸进行缩放来解决这个问题。让我们看看如何做到的
对于所有视图：
ConstraintLayout允许使用用百分比来指定大小，不是用dp指定高度和宽度。这告诉系统特定视图占用的宽度或高度的百分比。使得视图与屏幕尺寸成比例。附加的，对于TextViews：支持库最近引入了AutoSize TextViews，其中我们可以指定最大和最小字体大小。根据可用区域，系统会在适合的约束范围内选择最大的字体大小。
<?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:showIn="@layout/activity_main">
<android.support.constraint.Guideline
android:id="@+id/titleTextViewGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="0dp"
app:layout_constraintGuide_percent=".2" />
<android.support.constraint.Guideline
android:id="@+id/horizontalCenterGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="0dp"
app:layout_constraintGuide_percent=".5" />
<android.support.constraint.Guideline
android:id="@+id/verticalCenterGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="0dp"
app:layout_constraintGuide_percent=".5" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/titleTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:gravity="center"
android:maxLines="1"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="18sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="@id/titleTextViewGuideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Team A vs Team B" />
<ImageView
android:id="@+id/teamALogo"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintDimensionRatio="3:4"
app:layout_constraintEnd_toStartOf="@id/teamAScoreTextView"
app:layout_constraintHeight_percent=".6"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:src="@tools:sample/avatars" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/teamAScoreTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintEnd_toStartOf="@id/verticalCenterGuideline"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="@id/teamALogo"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:text="3" />
<ImageView
android:id="@+id/teamBLogo"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintDimensionRatio="3:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".6"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="@id/teamBScoreTextView"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:src="@tools:sample/avatars" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/teamBScoreTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintEnd_toStartOf="@id/teamBLogo"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="@id/verticalCenterGuideline"
app:layout_constraintStart_toStartOf="@id/verticalCenterGuideline"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:text="3" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/teamScoreSeparatorTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text=":" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/teamANameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeTextType="uniform"
app:layout_constraintEnd_toEndOf="@id/teamAScoreTextView"
app:layout_constraintStart_toStartOf="@id/teamAScoreTextView"
app:layout_constraintTop_toBottomOf="@id/teamAScoreTextView"
tools:text="Team Name" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/teamBNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeTextType="uniform"
app:layout_constraintEnd_toEndOf="@id/teamBScoreTextView"
app:layout_constraintStart_toStartOf="@id/teamBScoreTextView"
app:layout_constraintTop_toBottomOf="@id/teamBScoreTextView"
tools:text="Team Name" />
</android.support.constraint.ConstraintLayout>以下显示此视图在不同设备上的外观的屏幕截图。一个80dp x 60dp的固定大小的TextView作为参考。
这里的另一个问题是如何定位teamNameTextView。如果查看它的约束条件，它被放置在scoreTextView下方20dp处，并且相对于scoreTextView水平居中。
首先，如果团队名称足够长，TextView最终将与团队徽标或相反的团队teamNameTextView合并。其次，20dp也不可扩展。
解决第二个问题是将20dp转换为视图高度百分比的一个简单情况。它是第一个需要更多关注的问题。
为了解决这个问题，需要将teamNameTextView作为包含teamLogo和teamScoreTextView的链的一部分，以便在扩展视图时将其考虑在内。
<?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="240dp"
android:padding="8dp">
<android.support.constraint.Guideline
android:id="@+id/titleTextViewGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="0dp"
app:layout_constraintGuide_percent=".2" />
<android.support.constraint.Guideline
android:id="@+id/horizontalCenterGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="0dp"
app:layout_constraintGuide_percent=".5" />
<android.support.constraint.Guideline
android:id="@+id/verticalCenterGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="0dp"
app:layout_constraintGuide_percent=".5" />
<android.support.constraint.Guideline
android:id="@+id/teamNameTextViewGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="0dp"
app:layout_constraintGuide_percent=".7" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/titleTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:gravity="center"
android:maxLines="1"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="18sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="@id/titleTextViewGuideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Team A vs Team B" />
<ImageView
android:id="@+id/teamALogo"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintDimensionRatio="3:4"
app:layout_constraintEnd_toStartOf="@id/teamANameTextView"
app:layout_constraintHeight_percent=".5"
app:layout_constraintHorizontal_chainStyle="spread"
android:scaleType="centerInside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:src="@tools:sample/avatars" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/teamAScoreTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintStart_toStartOf="@id/teamANameTextView"
app:layout_constraintEnd_toEndOf="@id/teamANameTextView"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:text="3" />
<ImageView
android:id="@+id/teamBLogo"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintDimensionRatio="3:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="@id/teamBNameTextView"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:src="@tools:sample/avatars" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/teamBScoreTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="@id/horizontalCenterGuideline"
app:layout_constraintEnd_toStartOf="@id/teamBLogo"
app:layout_constraintStart_toStartOf="@id/teamBNameTextView"
app:layout_constraintEnd_toEndOf="@id/teamBNameTextView"
app:layout_constraintTop_toTopOf="@id/horizontalCenterGuideline"
tools:text="3" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/teamScoreSeparatorTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/teamANameTextView"
app:layout_constraintEnd_toStartOf="@id/teamBNameTextView"
app:layout_constraintTop_toTopOf="parent"
tools:text=":" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/teamANameTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:ellipsize="end"
android:maxLines="1"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeTextType="uniform"
app:layout_constraintEnd_toStartOf="@id/teamScoreSeparatorTextView"
app:layout_constraintStart_toEndOf="@id/teamALogo"
app:layout_constraintTop_toBottomOf="@id/teamNameTextViewGuideline"
tools:text="Large Team Name" />
<android.support.v7.widget.AppCompatTextView
android:id="@+id/teamBNameTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:ellipsize="end"
android:maxLines="1"
android:textAlignment="center"
app:autoSizeMaxTextSize="24sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeTextType="uniform"
app:layout_constraintEnd_toStartOf="@id/teamBLogo"
app:layout_constraintStart_toEndOf="@id/teamScoreSeparatorTextView"
app:layout_constraintTop_toBottomOf="@id/teamNameTextViewGuideline"
tools:text="Team Name" />
</android.support.constraint.ConstraintLayout>
完成这些修改后，获得UI的最终版本?
如果你感觉像现代Android开发者一样强大得多，请拍手（并在此帖子上）。ConstraintLayout是一个包含许多有用工具的工具箱。通过一些练习，您将拥有一套合适的工具来创建漂亮灵活的用户界面。让Android一起成为更美丽的地方。