Android中TextView和ImageView实现倾斜效果

2020-10-22 10:26:14 浏览数 (1)

TextView倾斜:

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

首先需要先自定义一个TextView

代码语言:javascript复制
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

代码语言:javascript复制
<com.peace.test.incline_textview.MyTextView 
    android:layout_width="100dip" 
    android:layout_height="100dip" 
    android:gravity="center" 
    android:text="@string/hello_world"/  

ImageView倾斜:

MainActivity如下:

代码语言:javascript复制
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如下:

代码语言:javascript复制
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如下:

代码语言:javascript复制
<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  

以上就是本文的全部内容,希望对大家的学习有所帮助。

0 人点赞