自定义TextView实现内容的旋转和偏移

在一些设计上，设计师会要求我们的文字以45度显示，或者135度显示（如下图“抽奖”），可是android本身并没有提供TextView在布局文件中实现旋转的标签，这时候就需要我们去自定义TextView，并且重写onDraw（）方法实现效果。

下面，让我们去实现这个效果吧。

首先我们熟悉一下android view坐标系，android采用的X,Y横纵坐标系，X轴向右为正方向，Y轴向下为正方向，旋转方向为顺时针，如下图。

默认我们的文字是在TextView左上角显示的，我们要旋转的也就是这个文字，而文字绘制的时候也是有一个范围的，例如下图，文字外面我标识出来的方框。而我们的操作的都是以TextView坐标系的原点进行移动和旋转。

这样我们就确定我们要进行的操作，针对onDraw（）对canvas进行translate（移动）或者rotate（旋转）操作坐标系，这里要说明的一点是，按我的习惯来，肯定是先进行偏移再进行旋转，旋转后的坐标系，想必你看着也会很难受吧。

下面是我重写的TextView的代码和效果图以及布局中的使用。我在Xml中自定义了标签，但是没有对标签内容进行约束，因为比较懒。。

package com.example.rtv;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * text旋转的textview
 * @author Kenneth
 *
 */
public class RotateTextView extends TextView {
	private static final   String NAME_SPACE = "http://www.baidu.com/apk/res/custom";
	
	private static final String ATTR_ROTATE = "rotate";
	private static final int DEFAULT_VALUE_ROTATE = 0;
	
	
	private static final String ATTR_TRANSLATE_X= "translateX";
	private static final String ATTR_TRANSLATE_Y = "translateY";
	private static final float DEFAULT_VALUE_TRANSLATE_X = 0f;
	private static final float DEFAULT_VALUE_TRANSLATE_Y = 0f;
	
	private int rotate = DEFAULT_VALUE_ROTATE;
	
	private float translateX = DEFAULT_VALUE_TRANSLATE_X;
	private float translateY = DEFAULT_VALUE_TRANSLATE_Y;
	
	public RotateTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
		rotate = attrs.getAttributeIntValue(NAME_SPACE, ATTR_ROTATE, DEFAULT_VALUE_ROTATE);//旋转度数
		
		translateX = attrs.getAttributeFloatValue(NAME_SPACE, ATTR_TRANSLATE_X, DEFAULT_VALUE_TRANSLATE_X);//获取在布局中的x轴偏移百分比
		translateY = attrs.getAttributeFloatValue(NAME_SPACE, ATTR_TRANSLATE_Y, DEFAULT_VALUE_TRANSLATE_Y);//获取在布局中的y轴偏移百分比
	}

	@Override
	protected void onDraw(Canvas canvas) {
		canvas.translate(getMeasuredWidth()*translateX, getMeasuredHeight()*translateY);
		//首先偏移在旋转，是因为，如果先旋转，本身xy坐标系也会跟着旋转，之后在偏移会不方便我们的控制，也不直观
		canvas.rotate(rotate);
		super.onDraw(canvas);
	}
	
}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://www.baidu.com/apk/res/custom"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.rtv.MainActivity$PlaceholderFragment" >

    <com.example.rtv.RotateTextView
        android:id="@+id/rotateTextView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:text="@string/hello_world"
        custom:rotate="45" />

    <com.example.rtv.RotateTextView
        android:id="@+id/rotateTextView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignLeft="@+id/rotateTextView1"
        android:layout_alignParentTop="true"
        android:text="@string/hello_world"
        custom:rotate="135"
        custom:translateX="1" />

    <com.example.rtv.RotateTextView
        android:id="@+id/rotateTextView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignLeft="@+id/rotateTextView1"
        android:layout_alignParentBottom="true"
        android:text="@string/hello_world"
        custom:rotate="135"
        custom:translateX="0.5"
        custom:translateY="0.5" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/rotateTextView2"
        android:layout_alignBottom="@+id/rotateTextView2"
        android:layout_toRightOf="@+id/rotateTextView2"
        android:text="向X轴正方向偏移100%，旋转135°" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/rotateTextView1"
        android:layout_marginTop="14dp"
        android:layout_toRightOf="@+id/rotateTextView1"
        android:text="原地不动，旋转45°" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/rotateTextView3"
        android:layout_marginTop="15dp"
        android:layout_toRightOf="@+id/rotateTextView3"
        android:text="x轴y轴偏移50%，旋转135°" />

    <com.example.rtv.RotateTextView
        android:id="@+id/RotateTextView01"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="@string/hello_world"
        />

</RelativeLayout>