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

Question

I have a TextView containing some text that is displayed with android:rotation="270" so it reads from the bottom to the top.
I have another View in the layout (a Button , ImageView , or some other simple View object).

I want to align the second view to the top of the rotated text like so:

I'm using ConstraintLayout so I tried the obvious, assigning constraintBottom_toTopOf="@id/text" to the view. However, it does not align the View to the wanted positon but to the top of the TextView in its unrotated position. It's probably because (as you can see on the image) the bounding box of the TextView does not get rotated, only the displayed text does.

Is there any way to get the View to align to the actual top of the TextView , on top of its last character without hardcoding Translation values? Or do I have to work around it from code?

Here is my simple layout to reproduce the issue:

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

I found two solutions:

• Solution 1

Writing a simple custom control that inherits from 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);
}
}

• Solution 2

Usint this library . How to use?

Add in your dependencies in build.gradle file:

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

XML file:

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