使用参考线时在约束布局中正确设置约束

Question

我有以下ConstraintLayout：

<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:id="@+id/detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/contact_selector"
android:minHeight="64dp">
<FrameLayout
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline">
<TextView
android:id="@+id/image_text"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:background="@drawable/contact_circle"
android:gravity="center"
tools:text="A.R" />
</FrameLayout>
<TextView
android:id="@+id/contact_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:maxWidth="248dp"
android:paddingLeft="16dp"
android:paddingStart="16dp"
android:textSize="17sp"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintStart_toEndOf="@+id/image"
tools:text="Ali Rezaei" />
<TextView
android:id="@+id/phone_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingStart="16dp"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="@+id/contact_name"
app:layout_constraintTop_toTopOf="@+id/guideline"
tools:text="[phone]" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="@+id/phone_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="@+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline"
tools:text="Mobile" />
<View
android:id="@+id/line"
style="@style/LineStyle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/image" />
</android.support.constraint.ConstraintLayout>

如您所见，contact_name是image右侧和guideline顶部的文本视图。名称文本可能太长，因此我们有：

android:ellipsize="end"
android:maxLines="1"
android:maxWidth="248dp"

但是设置maxWidth似乎是一个糟糕的解决方案，因为设备可以横向。

您建议的避免contact_name和phone_type文本视图之间冲突的方法是什么？

Answer 1

可以将@id/contact_name的末尾限制为@id/phone_type的开头，然后将水平偏差设置为0以使其与左对齐并设置app:layout_constrainedWidth="true"以便在文本过长时强制实施约束。您的@id/contact_nameTextView应如下所示：

<TextView
android:id="@+id/contact_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:paddingLeft="16dp"
android:paddingStart="16dp"
android:textSize="17sp"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toTopOf="@id/guideline"
app:layout_constraintEnd_toStartOf="@id/phone_type"
app:layout_constraintStart_toEndOf="@id/image"
tools:text="Ali Rezaei" />

另一种方法是将这两个Views放在一个水平链中，并使用它spread_inside样式，app:layout_constrainedWidth="true"用于@id/contact_name。

Answer 2

您可以将contact_name文本视图的宽度设置为0dp，并将其结束约束设置为phone_type文本视图的开头并删除maxWidth属性。

检查此更新的布局：

<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:id="@+id/detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/contact_selector"
android:minHeight="64dp">
<FrameLayout
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline">
<TextView
android:id="@+id/image_text"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:background="@drawable/contact_circle"
android:gravity="center"
tools:text="A.R" />
</FrameLayout>
<TextView
android:id="@+id/contact_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:paddingLeft="16dp"
android:paddingStart="16dp"
android:textSize="17sp"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintStart_toEndOf="@+id/image"
app:layout_constraintEnd_toStartOf="@id/phone_type"
tools:text="Ali Rezaei asdasdasdasdasdasdasdasd" />
<TextView
android:id="@+id/phone_number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingStart="16dp"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="@+id/contact_name"
app:layout_constraintTop_toTopOf="@+id/guideline"
tools:text="[phone]" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="@+id/phone_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="@+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline"
tools:text="Mobile" />
<View
android:id="@+id/line"
style="@style/LineStyle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/image" />
</android.support.constraint.ConstraintLayout>

让我知道它是否有效！

Answer 3

试试这个。 约束contact_name基于phone_type。

<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:id="@+id/detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/contact_selector"
android:minHeight="64dp">
<FrameLayout
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline">
<TextView
android:id="@+id/image_text"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:background="@drawable/contact_circle"
android:gravity="center"
tools:text="A.R" />
</FrameLayout>
<TextView
android:id="@+id/phone_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="@+id/image"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/image"
tools:text="Mobile" />
<TextView
android:id="@+id/contact_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:maxWidth="248dp"
android:paddingLeft="16dp"
android:paddingStart="16dp"
android:textSize="17sp"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintStart_toEndOf="@+id/image"
app:layout_constraintEnd_toStartOf="@id/phone_type"
tools:text="really long long long long long long long long long long name" />
<TextView
android:id="@+id/phone_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingStart="16dp"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="@+id/contact_name"
app:layout_constraintTop_toTopOf="@+id/guideline"
tools:text="[phone]" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />

<View
android:id="@+id/line"
style="@style/LineStyle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/image" />

注意 - 您还可以将框架布局替换为约束布局。