蓝桉云顶

Android实现控件的缩放移动功能

一、简介

在Android平台上实现控件的缩放和移动功能，对于理解和定制用户界面交互非常重要，本文将详细介绍如何在Android中实现控件的缩放和移动功能，包括布局设置、自定义视图的创建以及处理触摸事件，为需要实现类似交互的开发者提供一套完整的指导。

二、使用步骤

布局文件

我们需要创建一个外层的LinearLayout，里面包含一个自定义的控件DragScaleView，为了能够更清楚地看到控件的变化过程，给控件加了一个灰色带虚线的边框bg_dashgap。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#80ce3d3a"
    android:gravity="center_horizontal"
    android:fitsSystemWindows="true">
    
    <com.xxx.xxx.ui.DragScaleView
        android:id="@+id/hair_dv"
        android:src="@drawable/ic_sure"
        android:background="@drawable/bg_dashgap"
        android:adjustViewBounds="true"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="10dp"
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:clickable="true"/>
</LinearLayout>

在drawable文件夹下的bg_dashgap.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:bottomLeftRadius="8dp"
    android:bottomRightRadius="8dp"
    android:radius="15dp"
    android:topLeftRadius="8dp"
    android:topRightRadius="8dp" />
<stroke
    android:dashGap="4dp"
    android:dashWidth="4dp"
    android:width="2dp"
    android:color="@color/my_gery" />

自定义控件

单指触摸

当ACTION_DOWN时如果坐标为1.2.3.4四个区域，则对View进行相应的左上/右上/左下/右下拉伸；当ACTION_DOWN时如果坐标为5.6.7.8四个区域，则分别对上/右/下/左四个方向进行拉伸；当ACTION_DOWN时如果坐标为9这个区域，则对View进行移动。

双指触摸

先计算出触摸时双指的距离，然后得到双指离开屏幕的距离，得到两者之间的比例，计算双指间距离的方法如下：

/**
 * 计算两个手指间的距离
 * @param event 触摸事件
 * @return 返回两个手指之间的距离
 */
private float distance(MotionEvent event) {
    float x = event.getX(0) event.getX(1);
    float y = event.getY(0) event.getY(1);
    return (float) Math.sqrt(x * x + y * y); //两点间距离公式
}

3.DragScaleView的完整代码

public class DragScaleView extends android.support.v7.widget.AppCompatImageView implements View.OnTouchListener {
    protected int screenWidth;
    protected int screenHeight;
    protected int lastX;
    protected int lastY;
    private int oriLeft;
    private int oriRight;
    private int oriTop;
    private int oriBottom;
    private int dragDirection;
    private static final int TOP = 0x15;
    private static final int LEFT = 0x16;
    private static final int BOTTOM = 0x17;
    private static final int RIGHT = 0x18;
    private static final int LEFT_TOP = 0x11;
    private static final int RIGHT_TOP = 0x12;
    private static final int LEFT_BOTTOM = 0x13;
    private static final int RIGHT_BOTTOM = 0x14;
    private static final int TOUCH_TWO = 0x21;
    private static final int CENTER = 0x19;
    private int offset = 0; //可超出其父控件的偏移量
    protected Paint paint = new Paint();
    private int touchMode;
    private boolean mIsPointerDown = false;
    private float mDownX, private float mDownY;
    private float mLastX;
    private float mLastY;
    private float mDegree = 0.0f;
    private Bitmap mRotateIcon;
    private int mFrameColor = Color.parseColor("#1677FF");
    private int mLineWidth = dp2px(context, 2f);
    var mScaleDotRadius = dp2px(context, 5f);
    var mRotateDotRadius = dp2px(context, 12f);
    private var mDownClickListener: ((view: View, pointF: PointF) -> Unit)? = null;
    private var mLongClickListener: ((view: View, pointF: PointF) -> Unit)? = null;
    private var mMoveListener: ((view: View, pointF: PointF) -> Unit)? = null;
    private var mLongClickJob: Job? = null;
    constructor(context: Context) : this(context, null) {}
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0) {}
    defStyleAttr: Int) : super(attrs, defStyleAttr) {
        setAttribute(attrs);
    }
    private fun setAttribute(attrs: AttributeSet?) {
        if (attrs == null) { return }
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.MatrixImageView)
        for (i in 0 until typedArray.indexCount) {
            when (typedArray.getIndex(i)) {
                R.styleable.MatrixImageView_fcLineWidth -> { //连接线宽度
                    mLineWidth = typedArray.getDimension(attr, mLineWidth)
                }
                R.styleable.MatrixImageView_fcScaleDotRadius -> { //缩放控制点半径
                    mScaleDotRadius = typedArray.getDimension(attr, mScaleDotRadius)
                }
                R.styleable.MatrixImageView_fcRotateDotRadius -> { //旋转控制点半径
                    mRotateDotRadius = typedArray.getDimension(attr, mRotateDotRadius)
                }
            }
        }
        typedArray.recycle()
    }
}

三、归纳

通过以上步骤，我们实现了在Android中控件的缩放和移动功能，这一功能的关键在于自定义视图类DragScaleView，其中重写了触摸事件监听器，通过计算手指的位置和缩放因子来调整控件的大小和位置，还可能需要考虑性能优化，比如在适当的时候使用GestureDetector或PinchDetector来检测手势，并在缩放和移动完成后更新UI，对于移动功能，还需要处理边界条件，确保控件不会超出父视图的范围。

以上内容就是解答有关“Android实现控件的缩放移动功能”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。