TextView和ImageView的倾斜

最新推荐文章于 2024-04-16 17:39:54 发布

铸剑

最新推荐文章于 2024-04-16 17:39:54 发布

阅读量398

点赞数

分类专栏：安卓开发

安卓开发专栏收录该内容

23 篇文章 1 订阅

订阅专栏

TextView倾斜：
想做一个倾斜的TextView,想海报上显示的那样 ,在网上找例子一直不能实现,看了看TextView源码,发现很简单,为方便像我一样糊涂的孩纸,贴出来了

首先需要先自定义一个TextView

public class MyTextView extends TextView{

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

    @Override
    protected void onDraw(Canvas canvas) {
        //倾斜度45,上下左右居中
        canvas.rotate(-45, getMeasuredWidth()/2, getMeasuredHeight()/2);
        super.onDraw(canvas);
    }
    
}

xml文件中添加上这个MyTextView

<com.peace.test.incline_textview.MyTextView
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:gravity="center"
        android:text="@string/hello_world"/>

ImageView倾斜：
MainActivity如下:

import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.app.Activity;
import android.graphics.Matrix;
/**
 * Demo描述:
 * 利用mImageView.setImageMatrix(matrix)实现
 * 图片的平移,缩放,旋转,倾斜以及对称
 * 
 * 参考资料:
 * 0 http://blog.csdn.net/pathuang68/article/details/6991988
 * 1 http://blog.csdn.net/mingli198611/article/details/7830633
 * 
 * Thank you very much
 */
public class MainActivity extends Activity {
  private TestMatrixImageView mTestMatrixImageView;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mTestMatrixImageView=new TestMatrixImageView(MainActivity.this);
    mTestMatrixImageView.setScaleType(ImageView.ScaleType.MATRIX);//??
    mTestMatrixImageView.setOnTouchListener(new TouchListenerImpl());
    setContentView(mTestMatrixImageView);
  }
  
  private class TouchListenerImpl implements OnTouchListener{
    @Override
    public boolean onTouch(View v, MotionEvent event) {
      if (event.getAction()==MotionEvent.ACTION_UP) {
        //1 测试平移
        testTranslate();
        //2 测试围绕图片中心点旋转
        //testRotate();
        //3 测试围绕原点旋转后平移
        //testRotateAndTranslate();
        //4 缩放
        //testScale();
        //5 水平倾斜
        //testSkewX();
        //6 垂直倾斜
        //testSkewY();
        //7 水平且垂直倾斜
        //testSkewXY();
        //8 水平对称
        //testSymmetryX();
        //9 垂直对称
        //testSymmetryY();
        //10 关于X=Y对称
        //testSymmetryXY();
      }
      return true;
    }
    
  }
  
  //平移
  private void testTranslate(){
    Matrix matrix=new Matrix();
    int width=mTestMatrixImageView.getBitmap().getWidth();
    int height=mTestMatrixImageView.getBitmap().getHeight();
    matrix.postTranslate(width, height);
    mTestMatrixImageView.setImageMatrix(matrix);
    showMatrixEveryValue(matrix);
  }
  //围绕图片中心点旋转
  private void testRotate(){
    Matrix matrix=new Matrix();
    int width=mTestMatrixImageView.getBitmap().getWidth();
    int height=mTestMatrixImageView.getBitmap().getHeight();
    matrix.postRotate(45f, width/2, height/2);
    matrix.postTranslate(width, height);
    mTestMatrixImageView.setImageMatrix(matrix);
    showMatrixEveryValue(matrix);
  }
  
  //围绕原点旋转后平移
  //注意以下三行代码的执行顺序:
  //matrix.setRotate(45f);
  //matrix.preTranslate(-width, -height);
  //matrix.postTranslate(width, height);
  //先执行matrix.preTranslate(-width, -height);
  //后执行matrix.setRotate(45f);
  //再执行matrix.postTranslate(width, height);
  private void testRotateAndTranslate() {
    Matrix matrix = new Matrix();
    int width = mTestMatrixImageView.getBitmap().getWidth();
    int height = mTestMatrixImageView.getBitmap().getHeight();
    matrix.setRotate(45f);
    matrix.preTranslate(-width, -height);
    matrix.postTranslate(width, height);
    mTestMatrixImageView.setImageMatrix(matrix);
    showMatrixEveryValue(matrix);
  }
  
  //缩放
  private void testScale() {
    Matrix matrix = new Matrix();
    matrix.setScale(0.5f, 0.5f);
    mTestMatrixImageView.setImageMatrix(matrix);
    showMatrixEveryValue(matrix);
  }
  
  //水平倾斜
  private void testSkewX() {
    Matrix matrix = new Matrix();
    matrix.setSkew(0.5f, 0);
    mTestMatrixImageView.setImageMatrix(matrix);
    showMatrixEveryValue(matrix);
  }

  // 垂直倾斜
  private void testSkewY() {
    Matrix matrix = new Matrix();
    matrix.setSkew(0, 0.5f);
    mTestMatrixImageView.setImageMatrix(matrix);
    showMatrixEveryValue(matrix);
  }
  
  // 水平且垂直倾斜
  private void testSkewXY() {
    Matrix matrix = new Matrix();
    matrix.setSkew(0.5f, 0.5f);
    mTestMatrixImageView.setImageMatrix(matrix);
    showMatrixEveryValue(matrix);
  }
  
  // 水平对称--图片关于X轴对称
  private void testSymmetryX() {
    Matrix matrix = new Matrix();
    int height = mTestMatrixImageView.getBitmap().getHeight();
    float matrixValues[] = { 1f, 0f, 0f, 0f, -1f, 0f, 0f, 0f, 1f };
    matrix.setValues(matrixValues);
    //若是matrix.postTranslate(0, height);
    //表示将图片上下倒置
    matrix.postTranslate(0, height*2);
    mTestMatrixImageView.setImageMatrix(matrix);
    showMatrixEveryValue(matrix);
  }
  
  // 垂直对称--图片关于Y轴对称
  private void testSymmetryY() {
    Matrix matrix = new Matrix();
    int width=mTestMatrixImageView.getBitmap().getWidth();
    float matrixValues[] = {-1f, 0f, 0f, 0f, 1f, 0f, 0f, 0f, 1f};
    matrix.setValues(matrixValues);
    //若是matrix.postTranslate(width,0);
    //表示将图片左右倒置
    matrix.postTranslate(width*2, 0);
    mTestMatrixImageView.setImageMatrix(matrix);
    showMatrixEveryValue(matrix);

  }

  // 关于X=Y对称--图片关于X=Y轴对称
  private void testSymmetryXY() {
    Matrix matrix = new Matrix();
    int width = mTestMatrixImageView.getBitmap().getWidth();
    int height = mTestMatrixImageView.getBitmap().getHeight();
    float matrixValues[] = { 0f, -1f, 0f, -1f, 0f, 0f, 0f, 0f, 1f };
    matrix.setValues(matrixValues);
    matrix.postTranslate(width+height, width+height);
    mTestMatrixImageView.setImageMatrix(matrix);
    showMatrixEveryValue(matrix);
  }
  
  //获取变换矩阵Matrix中的每个值
  private void showMatrixEveryValue(Matrix matrix){
    float matrixValues []=new float[9];
    matrix.getValues(matrixValues);
    for (int i = 0; i <3; i++) {
      String valueString="";
      for (int j = 0; j < 3; j++) {
        valueString=matrixValues[3*i+j]+"";
        System.out.println("第"+(i+1)+"行的第"+(j+1)+"列的值为"+valueString);
      }
    }
  }

}

TestMatrixImageView如下:

package cn.testmatrix;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.widget.ImageView;
/**
 * 总结:
 * 在MainActivity中执行:
 * mTestMatrixImageView.setImageMatrix(matrix);
 * 时此自定义View会先调用setImageMatrix(Matrix matrix)
 * 然后调用onDraw(Canvas canvas)
 */
public class TestMatrixImageView extends ImageView{
  private Matrix mMatrix;
  private Bitmap mBitmap;
  public TestMatrixImageView(Context context) {
    super(context);
    mMatrix=new Matrix();
    mBitmap=BitmapFactory.decodeResource(getResources(), R.drawable.icon);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    System.out.println("---> onDraw");
    //画原图
    canvas.drawBitmap(mBitmap, 0, 0, null);
    //画经过Matrix变化后的图
    canvas.drawBitmap(mBitmap, mMatrix, null);
    super.onDraw(canvas);
  }
  @Override
  public void setImageMatrix(Matrix matrix) {
    System.out.println("---> setImageMatrix");
    this.mMatrix.set(matrix);
    super.setImageMatrix(matrix);
  }
  
  public Bitmap getBitmap(){
    System.out.println("---> getBitmap");
    return mBitmap;
  }

}

main.xml如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  >

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />

</RelativeLayout>