如何在 ConstraintLayout 中对齐两个具有不同字体大小的 TextView
How to align two TextViews with different font sizes in a ConstraintLayout
在上图中,我使用 ConstraintLayout layout_constraintBaseline_toBaselineOf
属性 对齐了两个 TextView。但我真正想要的是左侧较小的 TextView 与右侧 TextView 第一行的中间(垂直)对齐(而不是与其基线对齐)。 IE。在这种特殊情况下,我希望左侧的 TextView 高出约 2dp。
我的xml是:
<?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:layout_marginBottom="8dp"
android:layout_marginEnd="12dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:background="@android:color/white">
<TextView
android:id="@+id/tvElapsedTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:textColor="@color/grey"
android:textSize="8sp"
app:customTypeface="@string/my_typeface"
app:layout_constraintBaseline_toBaselineOf="@+id/tvHeadline"
app:layout_constraintEnd_toEndOf="@id/headlineStart"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="@id/headlineStart"
app:layout_constraintStart_toStartOf="parent"
tools:text="3 min ago" />
<android.support.constraint.Guideline
android:id="@+id/headlineStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<TextView
android:id="@+id/tvHeadline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:textSize="14sp"
app:customTypeface="@string/my_bold_typeface"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="@id/headlineStart"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="@id/headlineStart"
tools:text="Things happened that you would not believe even if I told you." />
</android.support.constraint.ConstraintLayout>
如何才能使“3 分钟前”与第一行的中间(垂直)对齐"Things happened.."?
(P.S。我看过这个问题: 但我相信我的问题是不同的)
试试下面的“3 分钟前”TextView 代码:
<TextView
android:id="@+id/tvElapsedTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textColor="@android:color/darker_gray"
android:textSize="8sp"
app:layout_constraintBottom_toBottomOf="@+id/tvHeadline"
app:layout_constraintEnd_toStartOf="@+id/tvHeadline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/tvHeadline"
tools:text="3 min ago" />
<TextView
android:id="@+id/tvElapsedTime"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:textColor="@color/grey"
android:textSize="8sp"
android:gravity="center"
app:customTypeface="@string/my_typeface"
app:layout_constraintEnd_toEndOf="@id/headlineStart"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="@id/headlineStart"
app:layout_constraintStart_toStartOf="parent"
tools:text="3 min ago" />
尝试以下 XML 已用时间 TextView
:
<TextView
android:id="@+id/tvElapsedTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:textColor="@android:color/darker_gray"
android:textSize="8sp"
app:layout_constraintTop_toTopOf="@id/tvHeadline"
android:layout_marginTop="4sp"
app:layout_constraintEnd_toEndOf="@id/headlineStart"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="@id/headlineStart"
app:layout_constraintStart_toStartOf="parent"
tools:text="3 min ago" />
理想情况下,您可以将此文本视图的基线限制为标题文本视图的基线,将顶部限制在顶部并使其居中。不幸的是,一旦你绑定了基线,那就是:居中不再是一种选择。
此方法将经过时间文本视图的顶部限制在标题文本视图的顶部,并向顶部应用 4sp
边距。这会将经过的时间与标题顶行的中心(或接近中心)对齐。无论标题是一行还是多行,此位置都是不变的。此解决方案取决于您 select.
的文本大小
我使用 4sp
而不是 4dp
,因为如果用户缩放字体,您会希望边距大小适当。
效果如下:
在上图中,我使用 ConstraintLayout layout_constraintBaseline_toBaselineOf
属性 对齐了两个 TextView。但我真正想要的是左侧较小的 TextView 与右侧 TextView 第一行的中间(垂直)对齐(而不是与其基线对齐)。 IE。在这种特殊情况下,我希望左侧的 TextView 高出约 2dp。
我的xml是:
<?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:layout_marginBottom="8dp"
android:layout_marginEnd="12dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:background="@android:color/white">
<TextView
android:id="@+id/tvElapsedTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:textColor="@color/grey"
android:textSize="8sp"
app:customTypeface="@string/my_typeface"
app:layout_constraintBaseline_toBaselineOf="@+id/tvHeadline"
app:layout_constraintEnd_toEndOf="@id/headlineStart"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="@id/headlineStart"
app:layout_constraintStart_toStartOf="parent"
tools:text="3 min ago" />
<android.support.constraint.Guideline
android:id="@+id/headlineStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<TextView
android:id="@+id/tvHeadline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:textSize="14sp"
app:customTypeface="@string/my_bold_typeface"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="@id/headlineStart"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="@id/headlineStart"
tools:text="Things happened that you would not believe even if I told you." />
</android.support.constraint.ConstraintLayout>
如何才能使“3 分钟前”与第一行的中间(垂直)对齐"Things happened.."?
(P.S。我看过这个问题:
试试下面的“3 分钟前”TextView 代码:
<TextView
android:id="@+id/tvElapsedTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textColor="@android:color/darker_gray"
android:textSize="8sp"
app:layout_constraintBottom_toBottomOf="@+id/tvHeadline"
app:layout_constraintEnd_toStartOf="@+id/tvHeadline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/tvHeadline"
tools:text="3 min ago" />
<TextView
android:id="@+id/tvElapsedTime"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:textColor="@color/grey"
android:textSize="8sp"
android:gravity="center"
app:customTypeface="@string/my_typeface"
app:layout_constraintEnd_toEndOf="@id/headlineStart"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="@id/headlineStart"
app:layout_constraintStart_toStartOf="parent"
tools:text="3 min ago" />
尝试以下 XML 已用时间 TextView
:
<TextView
android:id="@+id/tvElapsedTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:textColor="@android:color/darker_gray"
android:textSize="8sp"
app:layout_constraintTop_toTopOf="@id/tvHeadline"
android:layout_marginTop="4sp"
app:layout_constraintEnd_toEndOf="@id/headlineStart"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="@id/headlineStart"
app:layout_constraintStart_toStartOf="parent"
tools:text="3 min ago" />
理想情况下,您可以将此文本视图的基线限制为标题文本视图的基线,将顶部限制在顶部并使其居中。不幸的是,一旦你绑定了基线,那就是:居中不再是一种选择。
此方法将经过时间文本视图的顶部限制在标题文本视图的顶部,并向顶部应用 4sp
边距。这会将经过的时间与标题顶行的中心(或接近中心)对齐。无论标题是一行还是多行,此位置都是不变的。此解决方案取决于您 select.
我使用 4sp
而不是 4dp
,因为如果用户缩放字体,您会希望边距大小适当。
效果如下: