Android 如何在ConstraintLayout中将两个字体大小不同的文本视图对齐

Android 如何在ConstraintLayout中将两个字体大小不同的文本视图对齐,android,android-constraintlayout,Android,Android Constraintlayout,在上图中,我使用ConstraintLayout的layout\u constraintBaseline\u toBaselineOf属性对齐了两个文本视图。但我真正想要的是左边较小的TextView与右边TextView第一行的中间(垂直)对齐(而不是与基线对齐)。也就是说,在这种特殊情况下,我希望左侧的文本视图高出约2dp 我的xml是: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.C

在上图中,我使用ConstraintLayout的
layout\u constraintBaseline\u toBaselineOf
属性对齐了两个文本视图。但我真正想要的是左边较小的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分钟前”文本查看代码:

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


请尝试使用以下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
,因为如果用户缩放字体,您会希望边距大小合适

效果如下:


如果你想要两个都是中心的,那就是左边的一个在右边,只是垂直地排列它们。我已经编辑了我的问题:我想要“3分钟前”与右边的文本视图的第一行中间对齐(我不希望它与右边的整个文本视图的中间对齐)。因此,您基本上希望“3分钟前”处于相同的位置,而不考虑右文本视图中的行数?如果是这种情况,则只需在距离父对象“固定”(dp)的距离处向bi发送左文本即可。或者你可以使用
app:layout\u constraintHeight\u percent
…谢谢@Gotiasits的回复。我认为你的答案与Cheticamp下面的建议类似:值得注意的是,他提出了一条额外的建议,即在sp中设置布局,以处理用户调整文本大小的情况。这将使elapsedTime文本视图居中于另一个文本视图的中间。但我想要的是让它集中在标题文本视图第一行的中间。这将使elapsedTime文本视图集中在另一个文本视图的中间。但我想要的是让它集中在标题文本视图第一行的中间。@Villa,我想你必须手动设置文本视图顶部的边距来解决你的问题。我尝试添加边距和填充,但它们被忽略了;我认为app:layou\u constraintBaseline\u tobalineof会取代边距和填充设置。很好,这很有效。正如您所观察到的,这里的关键问题是,一旦您使用constraintBaseline,就是它。。。从那一点上是无法调整的。这个解决方案似乎是最好的解决方案;我的一个保留意见是,如果我们对较大/较小的屏幕使用多个维度集,那么我们需要为每个维度集添加另一个变量(边距顶部)。但它绝对足够满足我现在的需要,谢谢你的帮助@Cheticamp
<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" />