轻松掌握Android ImageView 移动、缩放、旋转功能

Android

2023-03-16 11:59:59

自定义 ImageView 控件：赋予你的图像无限操控力

想象一下，你正在开发一款图片编辑应用程序，希望用户能够灵活地操控图像，对其进行移动、缩放和旋转。这时候，你就可以自定义 ImageView 控件，赋予它这些炫酷的功能。

了解 ImageView

ImageView 是 Android 中用于显示图像的控件，可以加载不同格式的图片，如 PNG、JPEG 和 GIF。默认情况下，它会居中显示图像，但你可以通过设置属性来调整图像的位置和大小。

自定义 ImageView

自定义控件是指扩展现有控件的功能，满足你的特定需求。这里，我们将实现图像的移动、缩放和旋转。

移动图像

要移动图像，需要重写 ImageView 的 onTouchEvent() 方法。在这个方法中，我们可以获取用户的触控事件，并使用这些事件更新图像的位置。

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // 记录手指按下的位置
            mDownX = event.getX();
            mDownY = event.getY();
            break;
        case MotionEvent.ACTION_MOVE:
            // 计算手指移动的距离
            float deltaX = event.getX() - mDownX;
            float deltaY = event.getY() - mDownY;

            // 更新图像的位置
            mTranslationX += deltaX;
            mTranslationY += deltaY;

            // 重新绘制图像
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            // 手指抬起时，停止移动图像
            break;
    }

    return true;
}

缩放图像

缩放图像需要用到 Pinch 缩放手势。这种手势允许用户用两根手指同时触控屏幕，通过手指的移动来放大或缩小图像。

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 获取手指的触控点数量
    int pointerCount = event.getPointerCount();

    // 如果是两根手指触控
    if (pointerCount == 2) {
        // 计算两根手指之间的距离
        float distance = calculateDistance(event.getX(0), event.getY(0), event.getX(1), event.getY(1));

        // 计算缩放比例
        float scale = distance / mPreviousDistance;

        // 更新图像的缩放比例
        mScaleX *= scale;
        mScaleY *= scale;

        // 重新绘制图像
        invalidate();
    }

    // 更新上一次两根手指之间的距离
    mPreviousDistance = distance;

    return true;
}

旋转图像

旋转图像需要用到旋转手势。这种手势允许用户用两根手指同时触控屏幕，通过手指的旋转来旋转图像。

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 获取手指的触控点数量
    int pointerCount = event.getPointerCount();

    // 如果是两根手指触控
    if (pointerCount == 2) {
        // 计算两根手指之间的中点
        float centerX = (event.getX(0) + event.getX(1)) / 2;
        float centerY = (event.getY(0) + event.getY(1)) / 2;

        // 计算旋转角度
        float angle = calculateAngle(centerX, centerY, event.getX(0), event.getY(0), event.getX(1), event.getY(1));

        // 更新图像的旋转角度
        mRotation += angle;

        // 重新绘制图像
        invalidate();
    }

    return true;
}