Implementation of a function, for example, an iOS application that closes vertical scrolling to Dismiss with ViewPager

Question

I currently have views arranged horizontally in the ViewPager, and they can cycle through them using the PagerAdapter. Currently, to complete the action that I would like to do when scrolling, I need to double-click on the View page. I could send the code, but it is somewhat difficult to extract the necessary fragments ...

I would like it to be able to vertically move around these views, translate them vertically, scroll and disappear, and then perform an action when they reach a certain distance from the edge of the device.

To understand what I think, in the Gallery application you can pinch an open photo to reduce it and open a horizontal view of the filmstrip. From there, you can scroll (or down) on a photo / video to delete it. For those who do not have the same Gallery application, this is exactly the same as closing iOS applications.

I tried to scan, although the source code for the Gallery application, but no luck finding the right activity.

Answer 1

I ended up doing it more or less by cloning a well-written Android-SwipeToDismiss library and simply replacing the ListView code with the ViewPager.

The finished product looked like this.

Answer 2

view.setOnTouchListener(new View.OnTouchListener(){ public boolean onTouch(View v, MotionEvent motion) { float y = motion.getY(); /* NOTE: the following line might need to be in runOnUiThread() */ view.animate().alpha(1-Math.abs(y-height/2)/(height/2)).setDuration(50).start(); return true; //false if you want to pass this event on to other listeners } }); 

The explanation for using 1-Math.abs(y-height/2)/(height/2) is that I want alpha to be 1 when I'm in the center, and alpha to 0 when it's above or below . You must determine how you get the height value, or if you want to use another method to calculate alpha. If you want to get the touch position relative to the screen instead of the position relative to the view, use getRawY() .

In addition, it may be useful for you to find out that if a MotionEvent is a click, drag or drop event, use motion.getAction() == with MotionEvent.ACTION_UP, MotionEvent.ACTION_MOVE and MotionEvent.ACTION_DOWN respectively.

Answer 3

Check out the code below, this may help you:

  public class MainActivity extends Activity implements View.OnTouchListener{ private RelativeLayout baseLayout; private int previousFingerPosition = 0; private int baseLayoutPosition = 0; private int defaultViewHeight; private boolean isClosing = false; private boolean isScrollingUp = false; private boolean isScrollingDown = false; @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_popup); baseLayout = (RelativeLayout) findViewById(R.id.base_popup_layout);//this is the main layout baseLayout.setOnTouchListener(this); } public boolean onTouch(View view, MotionEvent event) { // Get finger position on screen final int Y = (int) event.getRawY(); // Switch on motion event type switch (event.getAction() & MotionEvent.ACTION_MASK) { case MotionEvent.ACTION_DOWN: // save default base layout height defaultViewHeight = baseLayout.getHeight(); // Init finger and view position previousFingerPosition = Y; baseLayoutPosition = (int) baseLayout.getY(); break; case MotionEvent.ACTION_UP: // If user was doing a scroll up if(isScrollingUp){ // Reset baselayout position baseLayout.setY(0); // We are not in scrolling up mode anymore isScrollingUp = false; } // If user was doing a scroll down if(isScrollingDown){ // Reset baselayout position baseLayout.setY(0); // Reset base layout size baseLayout.getLayoutParams().height = defaultViewHeight; baseLayout.requestLayout(); // We are not in scrolling down mode anymore isScrollingDown = false; } break; case MotionEvent.ACTION_MOVE: if(!isClosing){ int currentYPosition = (int) baseLayout.getY(); // If we scroll up if(previousFingerPosition >Y){ // First time android rise an event for "up" move if(!isScrollingUp){ isScrollingUp = true; } // Has user scroll down before -> view is smaller than it default size -> resize it instead of change it position if(baseLayout.getHeight()<defaultViewHeight){ baseLayout.getLayoutParams().height = baseLayout.getHeight() - (Y - previousFingerPosition); baseLayout.requestLayout(); } else { // Has user scroll enough to "auto close" popup ? if ((baseLayoutPosition - currentYPosition) > defaultViewHeight / 4) { closeUpAndDismissDialog(currentYPosition); return true; } // } baseLayout.setY(baseLayout.getY() + (Y - previousFingerPosition)); } // If we scroll down else{ // First time android rise an event for "down" move if(!isScrollingDown){ isScrollingDown = true; } // Has user scroll enough to "auto close" popup ? if (Math.abs(baseLayoutPosition - currentYPosition) > defaultViewHeight / 2) { closeDownAndDismissDialog(currentYPosition); return true; } // Change base layout size and position (must change position because view anchor is top left corner) baseLayout.setY(baseLayout.getY() + (Y - previousFingerPosition)); baseLayout.getLayoutParams().height = baseLayout.getHeight() - (Y - previousFingerPosition); baseLayout.requestLayout(); } // Update position previousFingerPosition = Y; } break; } return true; } } 

Use the following methods for animation:

  public void closeUpAndDismissDialog(int currentPosition){ isClosing = true; ObjectAnimator positionAnimator = ObjectAnimator.ofFloat(baseLayout, "y", currentPosition, -baseLayout.getHeight()); positionAnimator.setDuration(300); positionAnimator.addListener(new Animator.AnimatorListener() { . . . @Override public void onAnimationEnd(Animator animator) { finish(); } . . . }); positionAnimator.start(); } public void closeDownAndDismissDialog(int currentPosition){ isClosing = true; Display display = getWindowManager().getDefaultDisplay(); Point size = new Point(); display.getSize(size); int screenHeight = size.y; ObjectAnimator positionAnimator = ObjectAnimator.ofFloat(baseLayout, "y", currentPosition, screenHeight+baseLayout.getHeight()); positionAnimator.setDuration(300); positionAnimator.addListener(new Animator.AnimatorListener() { . . . @Override public void onAnimationEnd(Animator animator) { finish(); } . . . }); positionAnimator.start(); }