Hi,
I am working on an app that has a homescreen. This homescreen should behave like the android homescreen where you can switch between several views by flinging your finger over the touch screen.
The solution is easy. I have 3 view instances, right, left and current view. I get this instances from the viewflipper that I initialized earlier. Since I have a HTC G1 my sreen is 320 px in width and 480 px in height.
Imagine you capture the down value of a action down motion event when you touch the screen. Then you move your finger and the screen should move in exactly the same way so you have to recalculate the view's position. It works for me so far but I am facing a strange problem. When you touch the right view without moving you finger but keeping it on the screen for less then a second the view disappears and shows the left view.
Here is my code:
public class MainActivity extends Activity implements OnTouchListener{
private ViewFlipper vf;
private float downXValue;
private View view1, view2, view3;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
this.vf = (ViewFlipper) findViewById(R.id.flipper);
if(this.vf != null){
this.view1 = vf.getChildAt(0);
this.view2 = vf.getChildAt(1);
this.view3 = vf.getChildAt(2);
vf.setDisplayedChild(0);
}
LinearLayout layMain = (LinearLayout) findViewById(R.id.layout_main);
layMain.setOnTouchListener((OnTouchListener) this);
}
public boolean onTouch(View v, MotionEvent arg1) {
final View currentView = vf.getCurrentView();
final View leftView, rightView;
if(currentView == view1){
leftView = view3;
rightView = view2;
}else if(currentView == view2){
leftView = view1;
rightView = view3;
}else if(currentView == view3){
leftView = view2;
rightView = view1;
}else{
leftView = null;
rightView = null;
}
switch (arg1.getAction()){
case MotionEvent.ACTION_DOWN:{
this.downXValue = arg1.getX();
break;
}
case MotionEvent.ACTION_UP:{
float currentX = arg1.getX();
if ((downXValue < currentX)){
if(currentView != view3){
float t3 = (320-(currentX-downXValue))/320;
this.vf.setInAnimation(AnimationHelper.inFromLeftAnimation(t3));
this.vf.setOutAnimation(AnimationHelper.outToRightAnimation(t3));
this.vf.showPrevious(); }
}
if ((downXValue > currentX)){
if(currentView != view2){
float t = (320-(downXValue-currentX))/320;
this.vf.setInAnimation(AnimationHelper.inFromRightAnimation(t));
this.vf.setOutAnimation(AnimationHelper.outToLeftAnimation(t));
this.vf.showNext();}
}
}
break;
case MotionEvent.ACTION_MOVE:{
leftView.setVisibility(View.VISIBLE);
rightView.setVisibility(View.VISIBLE);
float currentX = arg1.getX();
if(downXValue > currentX){
if(currentView != view2){
currentView.layout((int) (currentX - downXValue),
currentView.getTop(),
(int) (currentX - downXValue) + 320,
currentView.getBottom());
}
}
if(downXValue < currentX){
if(currentView != view3){
currentView.layout((int) (currentX - downXValue),
currentView.getTop(),
(int) (currentX - downXValue) + 320,
currentView.getBottom());
}
}
leftView.layout(currentView.getLeft()-320, leftView.getTop(),
currentView.getLeft(), leftView.getBottom());
rightView.layout(currentView.getRight(), rightView.getTop(),
currentView.getRight() + 320, rightView.getBottom());
}
}
return true;
}
public static class AnimationHelper {
public static Animation inFromRightAnimation(float param) {
Animation inFromRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, +param,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
inFromRight.setDuration(250);
inFromRight.setInterpolator(new AccelerateInterpolator());
return inFromRight;
}
public static Animation outToLeftAnimation(float param) {
Animation outtoLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, -param,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
outtoLeft.setDuration(250);
outtoLeft.setInterpolator(new AccelerateInterpolator());
return outtoLeft;
}
// for the next movement
public static Animation inFromLeftAnimation(float param) {
Animation inFromLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, -param,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
inFromLeft.setDuration(250);
inFromLeft.setInterpolator(new AccelerateInterpolator());
return inFromLeft;
}
public static Animation outToRightAnimation(float param) {
Animation outtoRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, +param,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
outtoRight.setDuration(250);
outtoRight.setInterpolator(new AccelerateInterpolator());
return outtoRight;
}
}
}
I think such a Homescreen for your own app could be a interestion UI element.
Any ideas?