android实现图片触摸旋转

1.先上一张模拟触摸旋转的效果图。



2.下面是具体的实现，自定义Rview控件类继承View,首先自定义Rview的属性，在项目文件的res/values目录下新建attr.xml文件。

attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Rview">
<attr name="src" format="reference" />
<!-- 用于缩放旋转的图标 -->
</declare-styleable>
</resources>

其次，在Rview里重写构造函数，onDraw()，onTouchEvent()方法。

Rview.Java

<pre name="code" class="java">package com.example.liutao.test;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
* Created by liutao on 2015/6/8.
*/
public class Rview extends View {
private Bitmap mbitmap;//图片的位图
public float mdegree = 0;//图片旋转角度，初始化为0
private Matrix matrix = new Matrix();//用来旋转图片的矩阵
private float viewHalfWidth;//画布宽度的一半
private float viewHalfHeight;//画布高度的一半
private PointF mCurMove = new PointF();//触摸点现在的坐标

private PointF viewCenter = new PointF();//组件的中心点坐标

public Rview(Context context, AttributeSet attr) {
super(context, attr);
//mTyped获取布局文件中控件的属性参数数组
TypedArray mTyped = getContext().obtainStyledAttributes(attr, R.styleable.Rview);
//src获取数组中的图片参数
Drawable src = mTyped.getDrawable(R.styleable.Rview_src);
//获取图片的位图形式
if (src instanceof BitmapDrawable) {
BitmapDrawable bd = (BitmapDrawable) src;
this.mbitmap = bd.getBitmap();
}
//数组回收，以供下次使用
mTyped.recycle();
}

protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

if (mbitmap == null) return;
//绘制图片
canvas.drawBitmap(mbitmap, matrix, null);

viewHalfWidth = canvas.getWidth() / 2;
viewHalfHeight = canvas.getHeight() / 2;
//画布的1/2宽度为中心点的X坐标，1/2高度为中心点的Y坐标
viewCenter.set(viewHalfWidth, viewHalfHeight);
}

//响应控件的触摸事件
public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {
//如果手指按下或者移动，那么图片也随之相应地旋转
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
//设置现在手指触摸点的坐标
mCurMove.set(event.getX(), event.getY());

mDegree(mCurMove);
rotate(mdegree);
break;
//如果手指抬起，则停止响应触摸事件
case MotionEvent.ACTION_UP:
break;

}
return true;
}

//计算应该旋转的角度
public void mDegree(PointF cur) {
//mDegree是图片旋转角度
//获取触摸点和中心点分别在水平和竖直方向的距离
float x = cur.x - viewCenter.x;
float y = cur.y - viewCenter.y;
//特殊情况，y=0
if (y == 0) {
if (x > 0) {

mdegree = -90;
} else if (x < 0) {
mdegree = 90;
}
} else {
//tan(x/y)换算出角度edge
float edge = (float) (Math.atan(Math.abs(x / y)) / (Math.PI) * 180);

if (x >= 0 && y > 0) {
//触摸点在分析图的4位置
mdegree = -edge;
} else if (x > 0 && y < 0) {
//触摸点在分析图的2位置
mdegree = -180 + edge;
} else if (x <= 0 && y < 0) {
//触摸点在分析图的1位置
mdegree = 180 - edge;
} else if (x < 0 && y > 0) {
//触摸点在分析图的3位置
mdegree = edge;
}
}
}

//用matrix矩阵旋转图片
public void rotate(float degree) {
//设置图片缩放比例，这里是1:1
matrix.setScale(1.0f, 1.0f);
//绕图片中心点进行旋转，旋转角度为degree
matrix.postRotate(degree, mbitmap.getWidth() / 2, mbitmap.getHeight() / 2);
//请求重绘
invalidate();
}
}

下面对于Rview类中的mDegree()和rotate()方法，给出一张分析图。



3.在布局文件中，使用Rview。

activity_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"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<com.example.liutao.test.Rview xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/mView"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

android:layout_width="240dp"
android:layout_height="240dp"
app:src="@drawable/chuyin" />

</RelativeLayout>

4.在MainActivity.java中引用布局文件activity_main.xml。

MainActivity.java

package com.example.liutao.test;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

}

5.chuyin.png图片放到res/drawable目录下。



6.运行APP后就可以触摸图片转动它啦！