自定义ScaleLayout (模仿小米相册查看图片效果)(转载自作者

之前写的两篇关于自定义View：
http://www.jianshu.com/p/32d7d1ab985c 模仿饿了么加载效果（五八同城，UC也都有这个效果）

http://www.jianshu.com/p/e180aa9f293b 模仿小米的进度控件

先来看看效果图，这个gif弄得蛋疼，加快了播放速度，降低了清晰度：

scale_gif1.gif

GIF_20161019_230600.gif

github地址：https://github.com/niniloveyou/ScaleLayout

下面会从以下几个方面分析如何实现这个效果：

1.初始化完成后做了什么

2.onMeasure onLayout

3.触摸事件的处理

4.对外提供方法和接口

.
.
.
.
首先讲讲大概的思路：
就是我们要有三个View 分别为TopView CenterView bottomView 这很好理解，故名思义就是把这三个子View分别放在ViewGroup的上中下。
OnMeasure()中把CenterView的大小设置为等同于自身的大小
onLayout() 获取topview bottomView的高度，根据高度设置当centerView缩小时topView/BottomView位移距离
onInterceptTouchEvent() 只处理滑动冲突部分。
onTouchEvent()中才是真正滑动缩小或放大实现的部分。

1.初始化完成后做了什么

我们先贴代码，后面紧跟着解释：

    @Overrideprotected void onFinishInflate() {super.onFinishInflate();int childCount = getChildCount();if(childCount < 1){throw new IllegalStateException("ScaleLayout should have one direct child at least !");}mTopView = findViewById(R.id.scaleLayout_top);mBottomView = findViewById(R.id.scaleLayout_bottom);mCenterView = findViewById(R.id.scaleLayout_center);// if centerView does not exist// it make no senseif(mCenterView == null){throw new IllegalStateException("ScaleLayout should have one direct child at least !");}LayoutParams lp = (FrameLayout.LayoutParams)mCenterView.getLayoutParams();lp.gravity &= Gravity.CENTER;mCenterView.setLayoutParams(lp);//hide topView and bottomView//set the topView on the top of ScaleLayoutif(mTopView != null){lp = (FrameLayout.LayoutParams)mTopView.getLayoutParams();lp.gravity &= Gravity.TOP;mTopView.setLayoutParams(lp);mTopView.setAlpha(0);}//set the bottomView on the bottom of ScaleLayoutif(mBottomView != null){lp = (FrameLayout.LayoutParams)mBottomView.getLayoutParams();lp.gravity &= Gravity.BOTTOM;mBottomView.setLayoutParams(lp);mBottomView.setAlpha(0);}setState(mState, false);}

大家都知道onFinishInflate方法是View在XML中解析完成的回调，因此可以在里面做一些检查以及初始化的工作。从代码不难看出，我首先就是检查了ScaleLayout的子View数量，少于一个就直接抛出异常了，因为如果没有一个子View，咱们自定义的这个ScaleLayout就没什么意义了，其次是我指定了上中下三个子View的id，这么做是因为ScaleLayout是个ViewGroup，可能不止三个，但是多了我们又没法判断，哪一个是topView, 哪个是centerView, 有可能会乱掉。

后面又对CenterView做了判空，以及对三个View的位置做了些设置。

2.onMeasure onLayout

/**

 * 使得centerView 大小等同ScaleLayout的大小* 如果不想这样处理，也可以在触摸事件中使用TouchDelegate* @param widthMeasureSpec* @param heightMeasureSpec*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);final int widthSize = MeasureSpec.getSize(widthMeasureSpec);final int heightSize = MeasureSpec.getSize(heightMeasureSpec);int layoutHeight = heightSize - getPaddingTop() - getPaddingBottom();int layoutWidth = widthSize - getPaddingLeft() - getPaddingRight();int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(layoutWidth, MeasureSpec.EXACTLY);int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(layoutHeight, MeasureSpec.EXACTLY);mCenterView.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);if(mBottomView != null){mBottomViewMoveDistance = mBottomView.getMeasuredHeight();}if(mTopView != null){mTopViewMoveDistance = mTopView.getMeasuredHeight();}if(mSuggestScaleEnable){setMinScale(getSuggestScale());}
}

很简单，只说一点：mBottomViewMoveDistance， mTopViewMoveDistance 分别为bottomView， topView动画时位移的距离。

3.触摸事件的处理

重点来了这个也是核心部分了。

onInterceptTouchEvent

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {boolean intercept = false;switch (ev.getAction()) {case MotionEvent.ACTION_DOWN:onTouchEvent(ev);mInitialMotionX = ev.getX();mInitialMotionY = ev.getY();break;case MotionEvent.ACTION_MOVE:final float deltaX = Math.abs(ev.getX() - mInitialMotionX);final float deltaY = Math.abs(ev.getY() - mInitialMotionY);if(mCanScaleListener != null&& !mCanScaleListener.onGetCanScale(ev.getX() - mInitialMotionX > 0)){intercept = false;}else {intercept = deltaY > deltaX && deltaY > mTouchSlop;}break;}return intercept;
}

所有的down事件都不拦截，因此接下来的move, up事件，
都会先执行onInterceptTouchEvent的（move, up）
继而分发给子view的dispatchTouchEvent(move, up)，
因此在onInterceptTouchEvent（move）事件中我们可以判断是否满足滑动条件，满足就拦截，拦截了之后move up事件就会都分发给自身的OnTouchEvent, 否则如上继续分发给子View.

intercept = deltaY > deltaX && deltaY > mTouchSlop;

即Y位移的距离大于X方向，并且Y方向位移的距离大于TouchSlop，则认为这是有效滑动。

 /*** 返回是否可以scale,主要为了适配部分有滑动冲突的view* 如TouchImageView, 甚至webView等* isScrollSown = true  代表向下，* isScrollSown = false 代表向上*/public interface OnGetCanScaleListener{boolean onGetCanScale(boolean isScrollSown);}

if(mCanScaleListener != null && !mCanScaleListener.onGetCanScale(ev.getX() - mInitialMotionX > 0)){ intercept = false;
}

这下明白了吧，我是做了个接口，要不要拦截由你说了算，也算我偷懒了。

OnTouchEvent

 /*** 该方法中实现了* 上滑缩小下滑放大功能* 也可设置为 上滑放大下滑缩小* @param ev* @return*/@Overridepublic boolean onTouchEvent(MotionEvent ev) {if (!isEnabled() || !mSlideScaleEnable) {return super.onTouchEvent(ev);}switch (ev.getActionMasked()) {case MotionEvent.ACTION_DOWN:downY = ev.getY();return true;case MotionEvent.ACTION_MOVE:if(mCanScaleListener != null && !mCanScaleListener.onGetCanScale(ev.getY() - downY > 0)){return super.onTouchEvent(ev);}if (Math.abs(ev.getY() - downY) > mTouchSlop) {mSlopLength += (ev.getY() - downY);float scale;if (mSlideUpOrDownEnable) {scale = 1 + (0.8f * mSlopLength / getMeasuredHeight());} else {scale = 1 - (0.8f * mSlopLength / getMeasuredHeight());}scale = Math.min(scale, 1f);mCurrentScale = Math.max(mMinScale, scale);doSetScale();downY = ev.getY();}break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:if (mCurrentScale > mMinScale && mCurrentScale < 1f) {float half = (1 - mMinScale) / 2;if (mCurrentScale >= mMinScale + half) {setState(STATE_CLOSE, true);} else {setState(STATE_OPEN, true);}}break;}return super.onTouchEvent(ev);}

这部分，首先是move的时候用mSlopLength计算滑动的距离向下滑就加正值，向上划值就减小，不断根据这个值计算当前的Scale. 应该缩放的比例，然后根据这个值计算topView bottomView 的透明度，位移距离，等等，当UP的时候，根据当前的Scale决定是应该放大到原宽高还是缩小，以动画的形式。

···
/**

 * 1.触发监听事件* 2.计算scale的pivotX, pivotY(因为topView 和bottomView 的高度可能不一样，所以不能固定设置在中心点)* 3.设置 mCenterView的scale* 4.设置topView and BottomView 的动画（渐变和位移）*/
private void doSetScale() {int scaleListenerCount = mScaleListenerList.size();OnScaleChangedListener mScaleChangedListener;for (int i = 0; i < scaleListenerCount; i++) {mScaleChangedListener = mScaleListenerList.get(i);if(mScaleChangedListener != null){mScaleChangedListener.onScaleChanged(mCurrentScale);}}if(mCurrentScale == mMinScale || mCurrentScale == 1f){int stateListenerCount = mStateListenerList.size();OnStateChangedListener mStateChangedListener;for (int i = 0; i < stateListenerCount; i++) {mStateChangedListener = mStateListenerList.get(i);if(mStateChangedListener != null){mStateChangedListener.onStateChanged(mCurrentScale == mMinScale);}}}doSetCenterView(mCurrentScale);doSetTopAndBottomView(mCurrentScale);
}

···

我把监听事件也贴上：

    /*** 当centerView 的scale变化的时候，通过这个* 接口外部的View可以做一些同步的事情，* 比如，你有一个其他的view要根据centerView的变化而变化*/public interface OnScaleChangedListener{void onScaleChanged(float currentScale);}/*** state == false 当完全关闭（scale == 1f）* state == true  或当完全开启的时候(scale = mMinScale)*/public interface OnStateChangedListener{void onStateChanged(boolean state);}

4.对外提供方法和接口

关于接口，代码我都无耻的贴上去了。

下面说说提供的几个简单的外部方法：

    /*** 设置最小scale* {@link #DEFAULT_MIN_SCALE}* @param minScale*/public void setMinScale(float minScale){if(minScale > 0f && minScale < 1f){if(mMinScale != minScale){if(isOpen()){if(animator != null){animator.cancel();animator = null;}animator = getAnimator(mMinScale, minScale);animator.start();}mMinScale = minScale;}}}public float getMinScale(){return mMinScale;}public float getCurrentScale(){return mCurrentScale;}public void setSuggestScaleEnable(boolean enable){if(mSuggestScaleEnable != enable){mSuggestScaleEnable = enable;requestLayout();}}/*** 设置的scale不得当的话，有可能topView / bottomView被覆盖* 通过设置{@link #setSuggestScaleEnable(boolean)}启用* @return*/private float getSuggestScale(){int height = 0;if(mTopView != null){height += mTopView.getMeasuredHeight();}if(mBottomView != null){height += mBottomView.getMeasuredHeight();}return 1 - height * 1f / (getMeasuredHeight() - getPaddingTop() - getPaddingBottom());}/*** 设置是否启用滑动缩小功能* @param enable*/public void setSlideScaleEnable(boolean enable){this.mSlideScaleEnable = enable;}/***   现在有这么几种情况, 默认第二种, 两者都可以的话，感觉好奇怪，*   比如一直下滑会由大变小后又变大，操作感觉不是很好*   1. 只上滑放大下滑缩小  false*   2. 只上滑缩小下滑放大  true*/public void setSlideUpOrDownEnable(boolean enable){this.mSlideUpOrDownEnable = enable;}/*** add OnScaleChangedListener* @param listener*/public void addOnScaleChangedListener(OnScaleChangedListener listener){if(listener != null){mScaleListenerList.add(listener);}}/*** add OnStateChangedListener* @param listener*/public void addOnStateChangedListener(OnStateChangedListener listener){if(listener != null){mStateListenerList.add(listener);}}public void setOnGetCanScaleListener(OnGetCanScaleListener listener){mCanScaleListener = listener;}/***  {@link #setState(int state, boolean animationEnable)}* @param state*/public void setState(int state){setState(state, true);}/*** 设置状态变化* @param state open or close* @param animationEnable change state with or without animation*/public void setState(final int state, boolean animationEnable) {if(!animationEnable){if(state == STATE_CLOSE){mSlopLength = 0;mCurrentScale = 1;}else{if(mSlideUpOrDownEnable) {mSlopLength = -getMeasuredHeight() * (1 - mMinScale) * 1.25f;}else{mSlopLength = getMeasuredHeight() * (1 - mMinScale) * 1.25f;}mCurrentScale = mMinScale;}doSetScale();mState = state;}else{if(animator != null){animator.cancel();animator = null;}if(state == STATE_CLOSE && mCurrentScale != 1){mSlopLength = 0;animator = getAnimator(mCurrentScale, 1f);}else if(state == STATE_OPEN && mCurrentScale != mMinScale){if(mSlideUpOrDownEnable) {mSlopLength = -getMeasuredHeight() * (1 - mMinScale) * 1.25f;}else{mSlopLength = getMeasuredHeight() * (1 - mMinScale) * 1.25f;}animator = getAnimator(mCurrentScale, mMinScale);}if(animator != null) {animator.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {mState = state;}});animator.start();}}}/*** 获取当前状态开启或者关闭* @return*/public boolean isOpen(){return mState == STATE_OPEN;}

代码贴完了。

如果感觉还行，到我的github star一下吧。谢谢！

https://github.com/niniloveyou/ScaleLayout