将TextView的基线与约束布局中的基准线对齐

Question

希望我在这里不是完全笨拙的，但我无法将TextView的基线与ConstraintLayout中的指南对齐。该指南似乎没有基线，这是相当恼人的。有谁知道我是怎么做到这一点的吗？下面是一些不起作用的布局xml (这是在ConstraintLayout中)：

                 <TextView
                    android:id="@+id/textToAlignBaseline"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="20dp"
                    android:maxLines="1"
                    android:paddingRight="6dp"
                    android:textAppearance="@style/TextStyles.Body"
                    app:layout_constraintBaseline_toBaselineOf="@+id/guidelineBottomMargin"
                    app:layout_constraintLeft_toLeftOf="parent" />

                <Button
                    android:id="@+id/buttonToAlignBottom"
                    android:layout_width="wrap_content"
                    android:layout_height="39dp"
                    android:layout_marginRight="20dp"
                    android:background="@drawable/selector_button_bg"
                    android:paddingLeft="16dp"
                    android:paddingRight="16dp"
                    android:text="@string/clickme"
                    android:textAppearance="@style/TextStyles.Body"
                    app:layout_constraintBottom_toTopOf="@+id/guidelineBottomMargin"
                    app:layout_constraintRight_toRightOf="parent" />

                <android.support.constraint.Guideline
                    android:id="@+id/guidelineBottomMargin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    app:layout_constraintGuide_end="20dp" />

Answer 1

当我试图根据Material Design实现一个两行列表时，我遇到了这个问题，其中“两行项目”基线应该是从顶部开始的32dp：

​

​

它看起来像一个普通的View或Guideline没有基线，因为它从getBaseline返回-1。所以我最终使用了一个看不见的TextView，如下所示：

<TextView
    android:id="@+id/guideline"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="32dp"
    android:textSize="0sp"
    android:visibility="invisible"
    app:layout_constraintTop_toTopOf="parent" />

然后使用app:layout_constraintBaseline_toBaselineOf="@id/guideline"将另一个视图与其对齐。

Answer 2

我想我可能已经想出了一个解决方案，我尝试扩展基线并从'getBaseline‘返回0，但从未被调用，所以我尝试扩展AppCompatButton，并从'getBaseline’返回'getMeasuredHeight‘(就像使用'baselineAlignBottom’时ImageView所做的那样)，现在似乎可以正常工作了。TextView只需要更改以使其基线与按钮对齐，而不是与指南对齐。我需要用类似于ImageView的属性来清理它，但这就是我现在得到的：

public class ButtonBottomBaseline extends android.support.v7.widget.AppCompatButton {
    public ButtonBottomBaseline(Context context) {
        super(context);
    }

    public ButtonBottomBaseline(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ButtonBottomBaseline(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public int getBaseline() {
        return getMeasuredHeight();
    }
}

Answer 3

我已经找到了一种解决方法，可以完全按照@robinst提到的Material Design指南来对齐文本。

首先添加一个ImageView，将0设置为layout_width，将所需基线设置为layout_height，不添加src，并将baselineAlignBottom 设置为 baseline

<ImageView
    android:id="@+id/typeTextBaseline"
    android:layout_width="0dp"
    android:layout_height="24dp"
    android:baselineAlignBottom="true"
    android:visibility="invisible"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

然后，您可以将TextView的基线与此ImageView的基线对齐：

<TextView
    android:id="@+id/typeTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:textAppearance="@style/TextAppearance.MaterialComponents.Overline"
    app:layout_constraintBaseline_toBaselineOf="@id/typeTextBaseline"
    app:layout_constraintStart_toStartOf="parent" />

在搜索View的getBaseline方法的所有实现时，我发现了这个变通方法，ImageView的实现如下所示：

public int getBaseline() {
    if (mBaselineAlignBottom) {
        return getMeasuredHeight();
    } else {
        return mBaseline;
    }
}

因此，一旦您将baselineAlignBottom设置为true，ImageView的基线就变成了它的底边，它现在神奇地被用作指导方针：)