android实现图片触摸旋转

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

android实现图片触摸旋转_第1张图片

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

attr.xml



    
        
        
    

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

Rview.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()方法,给出一张分析图。

android实现图片触摸旋转_第2张图片

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

activity_main.xml



    

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目录下。

android实现图片触摸旋转_第3张图片

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

你可能感兴趣的:(android,UI)