Question

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

我想像这样将第二个视图对齐到旋转文本的顶部：

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

是否有任何方法可以使View对齐到TextView的 actual 顶部，而不是其最后一个字符，而无需对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

使用此library。如何使用？

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

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

1 个答案: