将视图与旋转的 TextView 的顶部对齐

Question

我有一个TextView包含一些显示的文本，android:rotation="270"因此它从下到上读取。
我在布局中有另一个视图（Button、ImageView或其他一些简单View对象）。

我想将第二个视图与旋转文本的顶部对齐，如下所示：

我正在使用，ConstraintLayout所以我尝试了显而易见的方法，分配constraintBottom_toTopOf="@id/text"给视图。但是，它不会将 与所需位置对齐，而是与未旋转位置View的顶部对齐。这可能是因为（正如您在图像上看到的）边界框没有旋转，只有显示的文本旋转。TextViewTextView

有没有办法让与 的实际顶部View对齐，在其最后一个字符的顶部，而无需硬编码值？或者我必须通过代码来解决它吗？TextViewTranslation

这是我重现问题的简单布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:rotation="270"/>

    <Button
        android:layout_width="200dp"
        android:layout_height="64dp"
        android:text="Align me!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/text"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

我找到了两个解决方案：

• 解决方案1

编写一个简单的继承自TextView的自定义控件：

public class VerticalTextView extends TextView {
final boolean topDown;

public VerticalTextView(Context context,
                        AttributeSet attrs) {
    super(context, attrs);
    final int gravity = getGravity();
    if (Gravity.isVertical(gravity) && (gravity & Gravity.VERTICAL_GRAVITY_MASK) == Gravity.BOTTOM) {
        setGravity( (gravity & Gravity.HORIZONTAL_GRAVITY_MASK) | Gravity.TOP );
        topDown = false;
    } else {
        topDown = true;
    }
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(heightMeasureSpec, widthMeasureSpec);
    setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
}

@Override
protected void onDraw(Canvas canvas) {
    if (topDown) {
        canvas.translate(getWidth(), 0);
        canvas.rotate(90);
    } else {
        canvas.translate(0, getHeight());
        canvas.rotate(-90);
    }

    canvas.translate(getCompoundPaddingLeft(), getExtendedPaddingTop());
    getLayout().draw(canvas);
}
}

• 解决方案2

使用这个库。如何使用？

在 build.gradle 文件中添加依赖项：

dependencies {
    compile 'rongi.rotate-layout:rotate-layout:2.0.0'
}

XML 文件：

<com.github.rongi.rotate_layout.layout.RotateLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:angle="270">    <!-- Specify rotate angle here -->

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
</com.github.rongi.rotate_layout.layout.RotateLayout>

<Button
    android:layout_width="200dp"
    android:layout_height="64dp"
    android:text="Align me!"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toTopOf="@id/text"/>