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

This article mainly introduces "how to achieve rubber band springback and movement and scaling effect in Android". In daily operation, I believe many people have doubts about how to achieve rubber band rebound and movement and scaling effect in Android. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "how to achieve rubber band rebound and movement and scaling effect in Android". Next, please follow the editor to study!

Code implementation

Here I'll write the effects separately, and then merge them.

Pan, Zoom

MLayout.java

Import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.widget.FrameLayout;import android.widget.Scroller;/** * Created by ChenZehao * on 2019-8-4 * / public class mLayout extends FrameLayout {/ / attribute variable private float translationX; / / Mobile X private float translationY; / / Mobile Y private float scale = 1; / / scaling / / temporary variable private float actionX during movement Private float actionY; private float spacing; private int moveType; / / 0 = not selected, 1 = drag, 2 = scale private float firstX; private float firstY; public mLayout (Context context) {this (context, null);} public mLayout (Context context, AttributeSet attrs) {this (context, attrs, 0);} public mLayout (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr) } @ Override public boolean onTouchEvent (MotionEvent event) {super.onTouchEvent (event); switch (event.getAction () & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_DOWN: moveType = 1; actionX = event.getRawX (); actionY = event.getRawY (); firstX = actionX; firstY = actionY Break; case MotionEvent.ACTION_POINTER_DOWN: moveType = 2; spacing = getSpacing (event); break; case MotionEvent.ACTION_MOVE: if (moveType = = 1) {translationX = translationX + event.getRawX ()-actionX TranslationY = translationY + event.getRawY ()-actionY; System.out.println (); setTranslationX (translationX); setTranslationY (translationY); actionX = event.getRawX (); actionY = event.getRawY () } else if (moveType = = 2) {scale = scale * getSpacing (event) / spacing; if (scale > = 1) {setScaleX (scale); setScaleY (scale);} else {scale = 1 }} break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_POINTER_UP: moveType = 0; break;} return true Private float getSpacing (MotionEvent event) {/ / the distance between two points is obtained by trigonometric function float x = event.getX (0)-event.getX (1); float y = event.getY (0)-event.getY (1); return (float) Math.sqrt (x * x + y * y);}}

Rubber band springback

Import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.widget.FrameLayout;import android.widget.Scroller;/** * Created by ChenZehao * on 2019-8-4 * / public class mLayout extends FrameLayout {/ / coefficient can be changed by yourself private static final float DEFAULT_FATOR = 0.4f; / * * damping factor * / private float mFator = DEFAULT_FATOR; private Scroller mScroller / * record the last touch event * / private MotionEvent mLastMotionEvent; public mLayout (Context context) {this (context, null);} public mLayout (Context context, AttributeSet attrs) {this (context, attrs, 0);} public mLayout (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); mScroller = new Scroller (context) } @ Override public boolean onTouchEvent (MotionEvent event) {super.onTouchEvent (event); switch (event.getAction ()) {case MotionEvent.ACTION_DOWN: mLastMotionEvent = MotionEvent.obtain (event); break; case MotionEvent.ACTION_MOVE: int dx = (int) (event.getRawX ()-mLastMotionEvent.getRawX ()) Int dy = (int) (event.getRawY ()-mLastMotionEvent.getRawY ()); / / if you don't want to increase the damping effect in all four directions, you can simply delete / / translate if upward ((Math.abs (dx))

< Math.abs(dy)) && dy < 0){ smoothScrollBy(0, -(int) (dy * mFator)); } //向下平移 else if (Math.abs(dx) < Math.abs(dy) && dy >

0) {smoothScrollBy (0,-(int) (dy * mFator));} / / translate else if (Math.abs (dx) > Math.abs (dy) & & dx to the left

< 0){ smoothScrollBy(-(int) (dx * mFator), 0); } //向右平移 else if (Math.abs(dx) >

Math.abs (dy) & & dx > 0) {smoothScrollBy (- (int) (dx * mFator), 0);} mLastMotionEvent = MotionEvent.obtain (event); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: smoothScrollTo (0,0); break } return true;} private void smoothScrollBy (int dx, int dy) {mScroller.startScroll (mScroller.getFinalX (), mScroller.getFinalY (), dx, dy); invalidate ();} private void smoothScrollTo (int fx, int fy) {int dx = fx-mScroller.getFinalX (); int dy = fx-mScroller.getFinalY (); smoothScrollBy (dx, dy) @ Override public void computeScroll () {if (mScroller.computeScrollOffset ()) {scrollTo (mScroller.getCurrX (), mScroller.getCurrY ()); postInvalidate ();} super.computeScroll ();}}

Combine pan, zoom, and damping effects

Import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.widget.FrameLayout;import android.widget.Scroller;/** * Created by ChenZehao * on 2019-8-4 * / public class mLayout extends FrameLayout {private float scale = 1; / / scaling / / temporary variable private float actionX; private float actionY; private float spacing; private int moveType during movement / / 0 = not selected, 1 = drag, 2 = zoom private float firstX; private float firstY; / / factor can be changed by yourself private static final float DEFAULT_FATOR = 0.4f; / * damping factor * / private float mFator = DEFAULT_FATOR; private Scroller mScroller; / * record the last touch event * / private MotionEvent mLastMotionEvent Public mLayout (Context context) {this (context, null);} public mLayout (Context context, AttributeSet attrs) {this (context, attrs, 0);} public mLayout (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); mScroller = new Scroller (context);} @ Override public boolean onTouchEvent (MotionEvent event) {super.onTouchEvent (event) Switch (event.getAction () & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_DOWN: mLastMotionEvent = MotionEvent.obtain (event); moveType = 1; actionX = event.getRawX (); actionY = event.getRawY (); firstX = actionX; firstY = actionY; break Case MotionEvent.ACTION_POINTER_DOWN: moveType = 2; spacing = getSpacing (event); break; case MotionEvent.ACTION_MOVE: if (moveType = = 1) {int dx = (int) (event.getRawX ()-mLastMotionEvent.getRawX ()) Int dy = (int) (event.getRawY ()-mLastMotionEvent.getRawY ()); / / if you don't want to increase the damping effect in all four directions, you can simply delete / / translate if upward ((Math.abs (dx))

< Math.abs(dy)) && dy < 0){ smoothScrollBy(0, -(int) (dy * mFator)); } //向下平移 else if (Math.abs(dx) < Math.abs(dy) && dy >

0) {smoothScrollBy (0,-(int) (dy * mFator));} / / translate else if (Math.abs (dx) > Math.abs (dy) & & dx to the left

< 0){ smoothScrollBy(-(int) (dx * mFator), 0); } //向右平移 else if (Math.abs(dx) >

Math.abs (dy) & & dx > 0) {smoothScrollBy (- (int) (dx * mFator), 0);} mLastMotionEvent = MotionEvent.obtain (event);} else if (moveType = = 2) {scale = scale * getSpacing (event) / spacing If (scale > = 1) {setScaleX (scale); setScaleY (scale);} else {scale = 1;}} break Case MotionEvent.ACTION_UP: case MotionEvent.ACTION_POINTER_UP: case MotionEvent.ACTION_CANCEL: moveType = 0; if (scale = = 1) smoothScrollTo (0,0); break;} return true } private void smoothScrollBy (int dx, int dy) {mScroller.startScroll (mScroller.getFinalX (), mScroller.getFinalY (), dx, dy); invalidate ();} private void smoothScrollTo (int fx, int fy) {int dx = fx-mScroller.getFinalX (); int dy = fx-mScroller.getFinalY (); smoothScrollBy (dx, dy) } @ Override public void computeScroll () {if (mScroller.computeScrollOffset ()) {scrollTo (mScroller.getCurrX (), mScroller.getCurrY ()); postInvalidate ();} super.computeScroll () Private float getSpacing (MotionEvent event) {/ / the distance between two points is obtained by trigonometric function float x = event.getX (0)-event.getX (1); float y = event.getY (0)-event.getY (1); return (float) Math.sqrt (x * x + y * y);}} usage

By adding the mLayout layout to the xml file, you can pan, zoom and damp the controls and layouts in mLayout.

Function extension-add button to the layout

If we add button to the mLayout layout, there will be the problem of getting focus conflicts, resulting in operations such as unable to pan when the button is touched, so we need to override the dispatchTouchEvent function of button, so we need to create a class mButton to inherit Button

The event is obtained by button when clicked, so the event is passed back to the parent view through dispatchTouchEvent, and then the onInterceptTouchEvent function of the parent view is called to handle the intercepted event.

The code is as follows:

MButton.java

Import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;public class mButton extends android.support.v7.widget.AppCompatButton {public mButton (Context context) {super (context);} public mButton (Context context, AttributeSet attrs) {super (context, attrs);} public mButton (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr) } @ Override public boolean dispatchTouchEvent (MotionEvent ev) {switch (ev.getAction ()) {case MotionEvent.ACTION_DOWN: getParent () .requestDisallowInterceptTouchEvent (false); break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_POINTER_UP: break } return super.dispatchTouchEvent (ev);}}

MLayout.java

Import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.widget.FrameLayout;import android.widget.Scroller;/** * Created by ChenZehao * on 2019-8-4 * / public class mLayout extends FrameLayout {private float scale = 1; / / scaling / / temporary variable private float actionX; private float actionY; private float spacing; private int moveType during movement / / 0 = not selected, 1 = drag, 2 = zoom private float firstX; private float firstY; / / factor can be changed by yourself private static final float DEFAULT_FATOR = 0.4f; / * damping factor * / private float mFator = DEFAULT_FATOR; private Scroller mScroller; / * record the last touch event * / private MotionEvent mLastMotionEvent Public mLayout (Context context) {this (context, null);} public mLayout (Context context, AttributeSet attrs) {this (context, attrs, 0);} public mLayout (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); mScroller = new Scroller (context);} @ Override public boolean onTouchEvent (MotionEvent event) {super.onTouchEvent (event) Switch (event.getAction () & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_DOWN: mLastMotionEvent = MotionEvent.obtain (event); moveType = 1; actionX = event.getRawX (); actionY = event.getRawY (); firstX = actionX; firstY = actionY; break Case MotionEvent.ACTION_POINTER_DOWN: moveType = 2; spacing = getSpacing (event); break; case MotionEvent.ACTION_MOVE: if (moveType = = 1) {int dx = (int) (event.getRawX ()-mLastMotionEvent.getRawX ()) Int dy = (int) (event.getRawY ()-mLastMotionEvent.getRawY ()); / / if you don't want to increase the damping effect in all four directions, you can simply delete / / translate if upward ((Math.abs (dx))

< Math.abs(dy)) && dy < 0){ smoothScrollBy(0, -(int) (dy * mFator)); } //向下平移 else if (Math.abs(dx) < Math.abs(dy) && dy >

0) {smoothScrollBy (0,-(int) (dy * mFator));} / / translate else if (Math.abs (dx) > Math.abs (dy) & & dx to the left

< 0){ smoothScrollBy(-(int) (dx * mFator), 0); } //向右平移 else if (Math.abs(dx) >

Math.abs (dy) & & dx > 0) {smoothScrollBy (- (int) (dx * mFator), 0);} mLastMotionEvent = MotionEvent.obtain (event);} else if (moveType = = 2) {scale = scale * getSpacing (event) / spacing If (scale > = 1) {setScaleX (scale); setScaleY (scale);} else {scale = 1;}} break Case MotionEvent.ACTION_UP: case MotionEvent.ACTION_POINTER_UP: case MotionEvent.ACTION_CANCEL: moveType = 0; if (scale = = 1) smoothScrollTo (0,0); break;} return true } / / intercept the event of child button @ Override public boolean onInterceptTouchEvent (MotionEvent event) {switch (event.getAction () & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_DOWN: mLastMotionEvent = MotionEvent.obtain (event); moveType = 1; actionX = event.getRawX (); actionY = event.getRawY () FirstX = actionX; firstY = actionY; break; case MotionEvent.ACTION_POINTER_DOWN: moveType = 2; spacing = getSpacing (event); break Case MotionEvent.ACTION_MOVE: if (moveType = = 1) {int dx = (int) (event.getRawX ()-mLastMotionEvent.getRawX ()); int dy = (int) (event.getRawY ()-mLastMotionEvent.getRawY ()) / / if you do not want to increase the damping effect in all four directions, you can simply delete / / translate if up ((Math.abs (dx))

< Math.abs(dy)) && dy < 0){ smoothScrollBy(0, -(int) (dy * mFator)); } //向下平移 else if (Math.abs(dx) < Math.abs(dy) && dy >

0) {smoothScrollBy (0,-(int) (dy * mFator));} / / translate else if (Math.abs (dx) > Math.abs (dy) & & dx to the left

< 0){ smoothScrollBy(-(int) (dx * mFator), 0); } //向右平移 else if (Math.abs(dx) >

Math.abs (dy) & & dx > 0) {smoothScrollBy (- (int) (dx * mFator), 0);} mLastMotionEvent = MotionEvent.obtain (event);} else if (moveType = = 2) {scale = scale * getSpacing (event) / spacing If (scale > = 1) {setScaleX (scale); setScaleY (scale);} else {scale = 1;}} break Case MotionEvent.ACTION_UP: moveType = 0; if (scale = = 1) smoothScrollTo (0,0); if (firstX! = event.getRawX () | | firstY! = event.getRawY ()) return true; break Case MotionEvent.ACTION_POINTER_UP: moveType = 0; if (scale = = 1) smoothScrollTo (0,0); break; case MotionEvent.ACTION_CANCEL: moveType = 0; if (scale = = 1) smoothScrollTo (0,0) Break;} return super.onInterceptTouchEvent (event);} private void smoothScrollBy (int dx, int dy) {mScroller.startScroll (mScroller.getFinalX (), mScroller.getFinalY (), dx, dy); invalidate ();} private void smoothScrollTo (int fx, int fy) {int dx = fx-mScroller.getFinalX (); int dy = fx-mScroller.getFinalY () SmoothScrollBy (dx, dy);} @ Override public void computeScroll () {if (mScroller.computeScrollOffset ()) {scrollTo (mScroller.getCurrX (), mScroller.getCurrY ()); postInvalidate ();} super.computeScroll () } / / distance between two points private float getSpacing (MotionEvent event) {/ / the distance between two points is obtained by trigonometric function float x = event.getX (0)-event.getX (1); float y = event.getY (0)-event.getY (1); return (float) Math.sqrt (x * x + y * y) }} at this point, the study on "how to achieve rubber band rebound and zoom effect in Android" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.