Shulou(Shulou.com)05/31 Report--

This article mainly explains "Android how to imitate the QQ friend details page drop-down top picture zoom effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Android how to imitate the QQ friend details page drop-down top picture zoom effect" bar!

Effect picture

Effect analysis

1 slide down, and the picture of the head grows larger as the fingers slide.

2 slide up and move the picture up until the picture is not visible

3 when the top picture is not visible, slide up, slide ListView

Realization idea

1 since the View is divided into upper and lower parts and arranged vertically, it can be realized by inheriting LinearLayout:: customize a DragImageView, which inherits LinearLayout

Public DragImageView (Context context, AttributeSet attrs) {super (context, attrs); / / default that the View is vertically arranged in setOrientation (LinearLayout.VERTICAL); / / inertial sliding mScroller = new OverScroller (context); mTouchSlop = ViewConfiguration.get (context). GetScaledTouchSlop (); mMaximumVelocity = ViewConfiguration.get (context) .getScaledMaximumFlingVelocity (); mMinimumVelocity = ViewConfiguration.get (context) .getScaledMinimumFlushing Velocity ()};

2 set the height of the content view in onMeasure

@ Overrideprotected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure (widthMeasureSpec, heightMeasureSpec); LayoutParams params = (LayoutParams) getChildAt (1). GetLayoutParams (); / / the header can be completely hidden, so the height of the content view is the height of the control params.height = getMeasuredHeight ();}

3 set the ScaleType property of ImageView

@ Overrideprotected void onFinishInflate () {super.onFinishInflate (); imageView = (ImageView) getChildAt (0) / / as the fingers slide, the picture zooms in (both widths and heights are greater than or equal to the size of ImageView) and displays in the center: / / according to the above analysis, CENTER_CROP: you can use balanced scaling of the image (keeping the original scale of the image) so that the two coordinates (width and height) of the picture are greater than or equal to the corresponding view coordinates (negative inner margin), and the image is located in the central imageView.setScaleType (ScaleType.CENTER_CROP) of the view. ListView = (ListView) getChildAt (1);}

4 event interception

@ Overridepublic boolean onInterceptTouchEvent (MotionEvent ev) {if (ev.getAction () = = MotionEvent.ACTION_DOWN) {downX = (int) ev.getX (); downY = (int) ev.getY ();} if (ev.getAction () = = MotionEvent.ACTION_MOVE) {int currentX = (int) ev.getX (); int currentY = (int) ev.getY () / / make sure to slide vertically if (Math.abs (currentY-downY) > Math.abs (currentX-downX)) {View childView = listView.getChildAt (listView .getFirstVisiblePosition ()) / / there are two situations that need to be intercepted: / / 1 the picture is not completely hidden / / 2 the picture is completely hidden, but slide down, and the ListView slides to the top if (getScrollY ())! = imageHeight | | (getScrollY () = = imageHeight & & currentY-downY > 0 & & childView! = null & & childView.getTop () = 0)) {initVelocityTrackerIfNotExists (); mVelocityTracker.addMovement (ev); return true } if (ev.getAction () = = MotionEvent.ACTION_UP) {recycleVelocityTracker ();} return super.onInterceptTouchEvent (ev);}

ACTION_MOVE processing of 5 onTouchEvent

If (ev.getAction () = = MotionEvent.ACTION_MOVE) {int currentX = (int) ev.getX (); int currentY = (int) ev.getY (); int deltyX = currentX-downX; int deltyY = currentY-downY; if (Math.abs (deltyY) > Math.abs (deltyX)) {if (deltyY > 0) {if (getScrollY () > 0) {if (getScrollY ()-deltyY)

< 0) { scrollBy(0, -getScrollY()); return true; } // 当图片没有完全显示，并且向下滑动时，继续整个view使图片可见 scrollBy(0, -deltyY); } else { // 当图片完全显示，并且向下滑动时，则不断的放大图片（通过改变ImageView）的高度 LayoutParams layoutParams = (LayoutParams) getChildAt(0) .getLayoutParams(); layoutParams.height = layoutParams.height + deltyY / 2; getChildAt(0).setLayoutParams(layoutParams); } } else { // 当图片还处于放大状态，并且向上滑动时，继续不断的缩小图片的高度，使图片缩小 if (getChildAt(1).getTop() >

ImageHeight) {LayoutParams layoutParams = (LayoutParams) getChildAt (0) .getLayoutParams (); layoutParams.height = layoutParams.height + deltyY / 2; getChildAt (0) .setLayoutParams (layoutParams);} else {/ / when the picture is normal and sliding up, move the entire View to reduce the visible range of the picture if (getScrollY ()-deltyY > imageHeight) {scrollBy (0, imageHeight-Params ()); return true } scrollBy (0,-deltyY);}} downY = currentY; downX = currentX; return true;}}

ACTION_UP processing of 5 onTouchEvent

If (ev.getAction () = = MotionEvent.ACTION_UP) {/ / release when the picture is enlarged, making the picture slowly shrink back to its original state if (getChildAt (1). GetTop () > imageHeight) {isAnimating = true; ValueAnimator valueAnimator = ValueAnimator.ofInt (getChildAt (1) .getTop (), imageHeight); valueAnimator.setDuration (300) ValueAnimator.addUpdateListener (new AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {int value = (Integer) animation.getAnimatedValue (); LayoutParams layoutParams = (LayoutParams) getChildAt (0) .getLayoutParams (); layoutParams.height = value; getChildAt (0) .setLayoutParams (layoutParams);}); valueAnimator.addListener (new AnimatorListenerAdapter () {@ Override public void onAnimationEnd (Animator animation) {super.onAnimationEnd (animation); isAnimating = false) }}); valueAnimator.start ();} / / when the picture is in a normal state, and the picture is not completely hidden, and the sliding speed when releasing the hand is greater than the minimum value of inertial sliding, let View produce inertial sliding effect if (getChildAt (1). GetTop () = = imageHeight & & getScrollY ()! = imageHeight) {mVelocityTracker.computeCurrentVelocity (1000, mMaximumVelocity); int velocityY = (int) mVelocityTracker.getYVelocity () If (Math.abs (velocityY) > mMinimumVelocity) {fling (- velocityY);} recycleVelocityTracker ();} at this point, I believe you have a deeper understanding of "how to imitate the QQ friends details page drop-down top picture zoom effect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.