旋转后Vertical TextView定位问题及自定义实现方案咨询

Hey there! Let's work through your vertical TextView dilemma together—both the implementation options and the layout positioning question.

Option 1: Rotating a Regular TextView – The Catch #

Rotating a standard TextView -90deg is quick to try, but you’re right about the headaches: different screen sizes and densities throw off position control hard. Rotating swaps the view’s effective width and height, so layout_gravity or constraint rules don’t behave as you’d expect, leading to unpredictable offsets or text getting cut off.

If you insist on sticking with this approach, you can mitigate issues by using ConstraintLayout with explicit pivot points (setPivotX()/setPivotY() in code) and tight constraints, but it’s still a band-aid compared to a custom solution.

Option 2: Custom Vertical TextView – A Straightforward Implementation #

Building a custom vertical TextView isn’t as intimidating as it sounds. The core idea is overriding onDraw() to render text vertically, character by character. Here’s a simplified example to get you started:

public class VerticalTextView extends View {
    private String mText;
    private Paint mTextPaint;
    private int mTextSize = 48; // Default size
    private int mTextColor = Color.BLACK;

    public VerticalTextView(Context context) {
        super(context);
        initView();
    }

    public VerticalTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // Pull custom attributes from XML (add these to your styles.xml first!)
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.VerticalTextView);
        mText = typedArray.getString(R.styleable.VerticalTextView_verticalText);
        mTextSize = typedArray.getDimensionPixelSize(R.styleable.VerticalTextView_verticalTextSize, mTextSize);
        mTextColor = typedArray.getColor(R.styleable.VerticalTextView_verticalTextColor, mTextColor);
        typedArray.recycle();
        initView();
    }

    private void initView() {
        mTextPaint = new Paint();
        mTextPaint.setTextSize(mTextSize);
        mTextPaint.setColor(mTextColor);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (TextUtils.isEmpty(mText)) return;

        float startY = mTextSize; // Start below the top edge
        int centerX = getWidth() / 2; // Center text horizontally in the view

        for (int i = 0; i < mText.length(); i++) {
            char character = mText.charAt(i);
            canvas.drawText(String.valueOf(character), centerX, startY, mTextPaint);
            startY += mTextSize + 8; // Add line spacing between characters
        }
    }

    // Public method to update text dynamically
    public void setVerticalText(String text) {
        mText = text;
        invalidate(); // Trigger redraw
    }
}

This custom view gives you full control over text rendering, so layout positioning will behave predictably across devices.

How to Align Vertical TextView to the Right & Vertically Center It #

Whether you use the rotated TextView or custom view, here are two reliable ways to get that right-aligned, vertically centered position:

1. ConstraintLayout (Recommended) #

This is the most flexible approach for modern Android layouts:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- For rotated TextView -->
    <TextView
        android:id="@+id/rotated_vertical_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Rotated Vertical Text"
        android:rotation="-90"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginEnd="16dp"/> <!-- Adjust margin to fine-tune position -->

    <!-- For custom VerticalTextView -->
    <com.yourpackage.VerticalTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:verticalText="Custom Vertical Text"
        app:verticalTextSize="48sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginEnd="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

2. RelativeLayout #

If you’re working with an older codebase, RelativeLayout works too:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/rotated_vertical_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Rotated Vertical Text"
        android:rotation="-90"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="16dp"/>

    <!-- Custom view uses the same layout rules -->
</RelativeLayout>

Quick Note for Rotated TextView #

If you need the rotated TextView to respond to clicks correctly, remember that its touch area stays in the original (unrotated) position. Fix this by setting the pivot point to the view’s center with view.setPivotX(view.getWidth()/2f) and view.setPivotY(view.getHeight()/2f) after the view is laid out.

内容的提问来源于stack exchange，提问作者Husam Kahalah