实现一个UI效果,有关文字倾斜

今天,一个朋友的产品经理要求我朋友动态设置文字给下面图片的方框上

,感觉还挺好玩就试着设置了一下,里面主要牵扯到需要自定义一个TextView,设置旋转角度即可

,最终效果如下

,是不是感觉挺好玩,其实也特别简单,下面就上代码吧

这里你只需要新建一个类继承TextView,在构造方法里面设置旋转角度.代码如下:

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.Gravity;

import huaruishengtong.com.oa.R;

/**
 * Created by Administrator on 2017/9/19.
 * 文字旋转
 */

public class RotateTextView extends android.support.v7.widget.AppCompatTextView {
    private static final int DEFAULT_DEGREES = 0;
    private int mDegrees;

    public RotateTextView(Context context) {
        super(context, null);
    }

    public RotateTextView(Context context, AttributeSet attrs) {
        super(context, attrs, android.R.attr.textViewStyle);
        this.setGravity(Gravity.CENTER);
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.RotateTextView);
        mDegrees = a.getDimensionPixelSize(R.styleable.RotateTextView_degree,
                DEFAULT_DEGREES);
        a.recycle();
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();
        canvas.translate(getCompoundPaddingLeft(), getExtendedPaddingTop());
        canvas.rotate(mDegrees, this.getWidth() / 2f, this.getHeight() / 2f);
        super.onDraw(canvas);
        canvas.restore();
    }

    public void setDegrees(int degrees) {
        mDegrees = degrees;
    }
}

这里还需要顶一个style,在velue->styleh添加如下代码:

这样一个自定义view就算完成了,下面就看使用了

在布局中如下设置

在代码中如下如下设置

import android.app.Activity;  
import android.os.Bundle;  
  
public class MainActivity extends Activity {  
    private RotateTextView mTextView;  
    private RotateTextView mTextView1;  
    private RotateTextView mTextView2;  
    private RotateTextView mTextView3;  
    private RotateTextView mTextView4;  
    private RotateTextView mTextView5;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        mTextView = (RotateTextView) findViewById(R.id.ceshi);  
        mTextView.setDegrees(10);  //旋转的角度0-360,顺时针转
    }  
}  

这样一个控件就算完成了