如何修复TextView在旋转时左右移动?

时间:2015-04-18 18:58:34

标签: android

我想让TextView与窗口屏幕的左右边缘对齐。预期结果将如下所示

expected result

但实际结果如下

actual result

这是我的XML ...

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/cameraContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/cameraPreview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"
        />


    <TextView
        android:id="@+id/text3"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/grey_700"
        android:rotation="270"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"
        android:layout_alignBottom="@+id/text4"
        android:layout_alignParentStart="true"
        />

    <TextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/grey_700"
        android:rotation="90"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"
        />
</RelativeLayout>

当我旋转文本视图时,似乎只有我旋转的文本视图才会向左和向右移动。

您是否有任何想法如何在左侧和右侧对齐2个文本视图以期望结果?

谢谢!

2 个答案:

答案 0 :(得分:4)

我在this answer中找到了一个可以使用并保留背景的自定义垂直TextView:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/cameraContainer"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/cameraPreview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"/>
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_gravity="bottom"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"/>
    <com.app.views.VerticalTextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|left"
        android:gravity="bottom|center_horizontal"
        android:text="TEST TEXT TEST TEXT"
        android:background="@color/grey_700"
        android:textColor="@color/white"
        android:textSize="35sp"/>
    <com.app.views.VerticalTextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|right"
        android:gravity="top|center_horizontal"
        android:text="TEST TEXT TEST TEXT"
        android:background="@color/grey_700"
        android:textColor="@color/white"
        android:textSize="35sp"/>
</FrameLayout>
/*VerticalTextView.java*/
package com.app.views;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.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 boolean setFrame(int l, int t, int r, int b) {
        return super.setFrame(l, t, l + (b - t), t + (r - l));
    }

    @Override
    public void draw(Canvas canvas) {
        if (topDown) {
            canvas.translate(getHeight(), 0);
            canvas.rotate(90);
        } else {
            canvas.translate(0, getWidth());
            canvas.rotate(-90);
        }
        canvas.clipRect(0, 0, getWidth(), getHeight(), android.graphics.Region.Op.REPLACE);
        super.draw(canvas);
    }
}

答案 1 :(得分:1)

您可以使用方形TextView来欺骗布局,但是您需要摆脱背景......

试试这个:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/cameraContainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/cameraPreview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView
        android:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"/>
    <TextView
        android:id="@+id/text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_gravity="bottom"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"/>
    <com.app.views.TextViewSquareW
        android:id="@+id/text3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center_horizontal"
        android:rotation="270"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/grey_700"
        android:textSize="35sp"/>
    <com.app.views.TextViewSquareW
        android:id="@+id/text4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center_horizontal"
        android:rotation="90"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/grey_700"
        android:textSize="35sp"/>
</FrameLayout>
/*TextViewSquareW.java*/
package com.app.views;

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.TextView;

public class TextViewSquareW extends TextView {
    public TextViewSquareW(Context context) {
        super(context);
    }

    public TextViewSquareW(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TextViewSquareW(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public TextViewSquareW(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

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