如何在ConstraintLayout中对齐两个具有不同字体大小的TextView

时间:2018-04-17 11:09:15

标签: android android-constraintlayout

A ConstraintLayout with two TextViews

在上图中,我使用ConstraintLayout' s layout_constraintBaseline_toBaselineOf属性对齐了两个TextView。但我真正想要的是左侧较小的TextView与右侧TextView第一行的中间(垂直)对齐(而不是与其基线对齐)。即在这种特殊情况下,我希望左侧的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; 3分钟前&#34; (垂直)与 &#34的第一行中间对齐;事情发生了......&#34;?

(P.S。我已经看到了这个问题:Align top two textviews with different font sizes但我相信我的问题不同了)

3 个答案:

答案 0 :(得分:1)

请尝试使用以下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边距应用到顶部。这将经过的时间与标题顶行的中心(或接近中心)对齐。无论标题是一行还是多行,此展示位置都是不变的。此解决方案取决于您选择的文本大小。

我使用4sp代替4dp,因为如果字体由用户缩放,您会希望边距适当调整。

效果如下:

enter image description here

答案 1 :(得分:0)

请尝试以下代码“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" />

答案 2 :(得分:0)

<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" />