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

Question

我有一个TextView包含一些用android:rotation="270"显示的文本，所以它从底部到顶部读取。
我在布局中有另一个View（ Button ， ImageView或其他一些简单的View对象）。

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

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

有没有什么办法让View ，调整到实际顶部TextView ，其最后一个字符的顶部没有硬编码Translation值？ 或者我是否必须从代码中解决它？

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

<?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

Usint这个图书馆 。 如何使用？

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