炫酷的小红书图片裁剪控件.zip

### 第一站小红书图片裁剪控件，深度解析大厂炫酷控件 先来看两张效果图：   哈哈，就是这样了。效果差了一些，感兴趣的小伙伴们可以运行代码感受丝滑与弹性。前段时间在竞品小红书上看到了这样的效果：图片可以跟随手指移动，双指可以（无限）放大，缩小，还可以挤压，手指抬起后还有一个有趣的效果，图片回弹。。。一直想撸一个手势的控件，正好可以模仿小红书图片裁剪控件，话不多说，撸起袖子就是干。 本系列共有两篇，在第二篇会重点讲解与RecyclerView的联动效果，先放一张效果图，感兴趣的小伙伴们继续关注哦：  ### []()初步分析 先来看看小红书的样子：    emmmm，从效果上来看呢，其实也只是基本的Translation和Scale组合而已，难点在于缩小态下的阻尼计算，左下角那个按钮用来控制留白，填充等状态的切换（好像小红书还有bug，状态切换会导致图片位置不正确，哈哈哈），接下来我们就一步步分析，从而打造出属于我们的自己的效果。 仔细观察，有没有发现： * 单指滑动，图片跟随手指移动，当手指滑动到图片边缘继续沿同一方向滑动，会出现阻尼效果，滑动的距离越大，阻尼越大，手指抬起后，图片回弹到控件边缘； * 双指触摸分两种情况，一种是双指向内挤压，图片缩小；另一种是双指向外扩散，图片放大； * 当双指向外扩散达到一定的临界值，手指抬起后，图片缩小到临界值状态； * 手指触摸且有一定的滑动值，会显示线条九宫格，且线条跟随图片的大小动态改变，始终分割图片为9等分，如果手指触摸停止，线条消失，再次滑动，线条则再次出现； 那么图片缩放时，需要一个缩放中心点，也就是PivotX和PivotY，这个点默认情况下在View的中心。但很明显，它这个就不是在中心了，至于在哪里，先看下这张图：  可以看到，图片始终是以双指的中点在缩放，那么缩放中心点就是双指连线的中点位置上了。又怎么获取到双指的中点坐标呢？这里涉及到了Android提供的两个帮助类：GestureDetector、ScaleGestureDetector。接下来让我们先来了解下这两个类，揭开它的神秘面纱。神秘？你个糟老头，坏得很，信你个鬼。。。 ### []()手势帮助类 什么是手势帮助类？Android手机屏幕上，当我们触摸屏幕的时候，会产生许多手势事件，如down，up，scroll，filing等等。我们可以在onTouchEvent()方法里面完成各种手势识别。但是，我们自己去识别各种手势就比较麻烦了，而且有些情况可能考虑的不是那么的全面。所以，为了方便我们的使用Android就提供了GestureDetector帮助类，先来看看他的构造方法： ```java public GestureDetector(Context context, OnGestureListener listener, Handler handler, boolean unused) { } ``` context表示上下文，listener表示手势的监听回调，handler可以指定线程（UI线程、非UI线程），unused未被使用的参数。如果我们的手势不需要在子线程中处理，我们一般只关心前两个参数，context是上下文这个简单，重点看下listener参数： GestureDetector给我们提供了三个接口类与一个外部类： * OnGestureListener：接口，用来监听手势事件（6种）； * OnDoubleTapListener：接口，用来监听双击事件； * OnContextClickListener：接口，外接设备，比如外接鼠标产生的事件（本文中我们不考虑）； * SimpleOnGestureListener：外部类，SimpleOnGestureListener其实是上面三个接口中所有函数的集成，它包含了这三个接口里所有必须要实现的函数而且都已经重写，但所有方法体都是空的。需要自己根据情况去重写； OnGestureListener接口方法： ```java public interface OnGestureListener { /** * 按下。返回值表示事件是否处理 */ boolean onDown(MotionEvent e); /** * 短按(手指尚未松开也没有达到scroll条件) */ void onShowPress(MotionEvent e); /** * 轻触(手指松开) */ boolean onSingleTapUp(MotionEvent e); /** * 滑动(一次完整的事件可能会多次触发该函数)。返回值表示事件是否处理 */ boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY); /** * 长按(手指尚未松开也没有达到scroll条件) */ void onLongPress(MotionEvent e); /** * 滑屏(用户按下触摸屏、快速滑动后松开，返回值表示事件是否处理) */ boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY); } ``` OnDoubleTapListener接口方法： ```java public interface OnDoubleTapListener { /** * 单击事件(onSingleTapConfirmed，onDoubleTap是两个互斥的函数) */ boolean onSingleTapConfirmed(MotionEvent e); /** * 双击事件 */ boolean onDoubleTap(MotionEvent e); /** * 双击事件产生之后手指还没有抬起的时候的后续事件 */ boolean onDoubleTapEvent(MotionEvent e); } ``` GestureDetector的使用： * 定义GestureDetector类； * 将touch事件交给GestureDetector（onTouchEvent函数里面调用GestureDetector的onTouchEvent函数）； * 处理SimpleOnGestureListener或者OnGestureListener、OnDoubleTapListener、OnContextClickListener三者之一的回调； GestureDetector使用流程如下（有关例子会在后文中讲到）： ```java public GestureView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public GestureView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // 第一步 mGestureDetector = new GestureDetector(context, mOnGestureListener); } @Override public boolean onTouchEvent(MotionEvent event) { // 第三步 return mGestureDetector.onTouchEvent(event); } // 第二步 GestureDetector.OnGestureListener mOnGestureListener = new GestureDetector.OnGestureListener() { @Override public boolean onDown(MotionEvent e) { return false; } ``` 这里就不再深入GestureDetector源码讲解，有感兴趣的小伙伴可以自行查阅资料，接着了解ScaleGestureDetector缩放手势类，用法与GestureDetector类似，都是通过onTouchEvent()关联相应的MotionEvent事件。 ScaleGestureDetector类给提供了OnScaleGestureListener接口，来告诉我们缩放的过程中的一些回调： ```java public interface OnScaleGestureListener { /** * 缩放进行中，返回值表示是否下次缩放需要重置，如果返回ture，那么detector就会重置缩放事件，如果返回false，detector会在之前的缩放上继续进行计算 */ public boolean onScale(ScaleGestureDetector detector); /** * 缩放开始，返回值表示�