Tutorial :Android ViewFlipper + homescreen animation



Question:

I am trying to use a ViewFlipper and make it act like the home screen(The layout will move with your finger). Check out this for an example. I want to do this with a ViewFlipper that only contains two children so the opposite view should be shown on either side of the current view depending on which way the user moves their finger. This code works but only for 1 direction at a time. This is in onTouchEvent.

case MotionEvent.ACTION_MOVE:     leftView.setVisibility(View.VISIBLE);  rightView.setVisibility(View.VISIBLE);  // move the current view to the left or right.  currentView.layout((int) (touchEvent.getX() - oldTouchValue),      currentView.getTop(),      (int) (touchEvent.getX() - oldTouchValue) + 320,      currentView.getBottom());    // place this view just left of the currentView  leftView.layout(currentView.getLeft() - 320, leftView.getTop(),      currentView.getLeft(), leftView.getBottom());    // place this view just right of the currentView  rightView.layout(currentView.getRight(), rightView.getTop(),       currentView.getRight() + 320, rightView.getBottom());  

Which ever of the bottom two lines I put last that direction will work correctly but the other will not.

Here is how I set the leftView and rightView:

final View currentView = myFlipper.getCurrentView();  final View leftView, rightView;  if (currentView == meView) {      Log.d("current layout: ", "me");      leftView = youView;      rightView = youView;  } else if (currentView == youView) {      Log.d("current layout: ", "you");      leftView = meView;      rightView = meView;  } else {      leftView = null;      rightView = null;  }  

Is it going to be possible to set it up so that the same view is shown on both sides of the current view?


Solution:1

Thanks stealthcopter

That worked here is the new code if anyone is interested.

        if (touchEvent.getX() < oldTouchValue){               // place this view just right of the currentView              rightView.layout(currentView.getRight(), rightView.getTop(),                               currentView.getRight() + 320, rightView.getBottom());            }else if (touchEvent.getX() > oldTouchValue) {              // place this view just left of the currentView              leftView.layout(currentView.getLeft() - 320, leftView.getTop(),                              currentView.getLeft(), leftView.getBottom());            }  

I also moved the setVisibility() calls to the MotionEvent.ACTION_DOWN in an attempt to get rid of some flickering of the views. This helped but I still get a bit.


Solution:2

I have possibly not very constructive suggestion, but if you want it to behave like a home screen, why you don't want to look at the src of that, and modify it to your needs ?


Solution:3

To get rid of the flickering, set setVisibility(View.INVISIBLE) in MotionEvent.ACTION_DOWN. The default value is "GONE" on a view. That means that you can not set Layout() on a view until it's either "VISIBLE" or "INVISIBLE". So in three steps:

  1. Set Visibility to INVISIBLE on the View
  2. Set Layout() on the View
  3. Set Visibility to Visible on the View


Solution:4

If I understand your request, this effect should now be implemented using a View Pager

Looks like this:

enter image description here


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »