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

最新推荐文章于 2022-11-30 21:18:34 发布

置顶 WllZmz

最新推荐文章于 2022-11-30 21:18:34 发布

阅读量1.6k

点赞数 1

分类专栏： Java 安卓

本文链接：https://blog.csdn.net/itdream88/article/details/78031374

版权

安卓同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Java

11 篇文章 0 订阅

订阅专栏

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

,感觉还挺好玩就试着设置了一下,里面主要牵扯到需要自定义一个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添加如下代码:

 <declare-styleable name="RotateTextView">
        <attr name="degree" format="dimension" />
    </declare-styleable>

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

在布局中如下设置

  <RelativeLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/icon_yaoming">

        <huaruishengtong.com.oa.view.RotateTextView
            android:id="@+id/ceshi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_gravity="center"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:autoLink="all"
            android:gravity="center"
            android:text="1000"
            android:textColor="#fff" />


    </RelativeLayout>

在代码中如下如下设置

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,顺时针转
    }  
}

这样一个控件就算完成了