如何创建滑动布局,如主Android菜单?

时间:2010-10-13 22:17:08

标签: android

我需要创建一个包含4个视图的应用程序。我需要通过触摸和向左或向右移动(无按钮)从视图传递到另一个视图。我想要的效果与您在从主页面传递到另一个页面时在android主菜单中导航时看到的效果相同。

我已经测试了ViewFlipper,但是我无法使用它:它似乎没有正确捕获触摸事件。我甚至不知道它是否是正确的组件。

处理此问题的正确方法是什么?

4 个答案:

答案 0 :(得分:10)

最后我做到了。这是我的解决方案。 首先,您需要定义一个包含子布局的主布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >


<ViewFlipper android:id="@+id/ViewFlipper01" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    >
    <include android:id="@+id/libraryView1"  layout="@layout/page_1" />
    <include android:id="@+id/libraryView2"  layout="@layout/page_2" />


</ViewFlipper>

</RelativeLayout>

其中page_1和page_2是我需要交换的布局。这些布局绝对是标准布局,在您做好准备时制作。

然后你需要一个活动:

public class Main extends Activity {

    private ViewFlipper vf;

    private float oldTouchValue;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        vf=(ViewFlipper)findViewById(R.id.ViewFlipper01);
    }

    @Override
    public boolean onTouchEvent(MotionEvent touchevent) {
        switch (touchevent.getAction())
        {
            case MotionEvent.ACTION_DOWN:
            {
                oldTouchValue = touchevent.getX();
                break;
            }
            case MotionEvent.ACTION_UP:
            {
                //if(this.searchOk==false) return false;
                float currentX = touchevent.getX();
                if (oldTouchValue < currentX)
                {
                   vf.setInAnimation(inFromLeftAnimation());
                   vf.setOutAnimation(outToRightAnimation());
                    vf.showNext();
                }
                if (oldTouchValue > currentX)
                {
                    vf.setInAnimation(inFromRightAnimation());
                    vf.setOutAnimation(outToLeftAnimation());
                    vf.showPrevious();
                }
            break;
            }
        }
        return false;
    }

    //for the previous movement
    public static Animation inFromRightAnimation() {

        Animation inFromRight = new TranslateAnimation(
        Animation.RELATIVE_TO_PARENT,  +1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
        Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
        );
        inFromRight.setDuration(350);
        inFromRight.setInterpolator(new AccelerateInterpolator());
        return inFromRight;
        }
    public static Animation outToLeftAnimation() {
        Animation outtoLeft = new TranslateAnimation(
         Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  -1.0f,
         Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
        );
        outtoLeft.setDuration(350);
        outtoLeft.setInterpolator(new AccelerateInterpolator());
        return outtoLeft;
        }    
    // for the next movement
    public static Animation inFromLeftAnimation() {
        Animation inFromLeft = new TranslateAnimation(
        Animation.RELATIVE_TO_PARENT,  -1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
        Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
        );
        inFromLeft.setDuration(350);
        inFromLeft.setInterpolator(new AccelerateInterpolator());
        return inFromLeft;
        }
    public static Animation outToRightAnimation() {
        Animation outtoRight = new TranslateAnimation(
         Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  +1.0f,
         Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
        );
        outtoRight.setDuration(350);
        outtoRight.setInterpolator(new AccelerateInterpolator());
        return outtoRight;
        }    
}

多田!完成!

答案 1 :(得分:2)

我认为你要找的是SlidingDrawer。有了这个,你可以这样:

<SlidingDrawer
     android:id="@+id/drawer"
     android:layout_width="match_parent"
     android:layout_height="match_parent"

     android:handle="@+id/handle"
     android:content="@+id/content">

     <ImageView
         android:id="@id/handle"
         android:layout_width="88dip"
         android:layout_height="44dip" />

     <GridView
         android:id="@id/content"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

 </SlidingDrawer>

答案 2 :(得分:1)

你的意思是像主屏幕一样,你可以在视图之间滑动并在每个视图上捕捉它们? This可能会帮助你。

答案 3 :(得分:0)

我认为你可以使用布局动画......

RES /动画/ popin.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/accelerate_interpolator">
  <scale
    android:fromXScale="0.0" android:toXScale="1.0"
    android:fromYScale="0.0" android:toYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="400" 
  />
</set>

RES /动画/ popinlayout.xml:

<layoutAnimation 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:delay="0.5"
  android:animationOrder="random"
  android:animation="@anim/popin" 
/>

来源:

// Applying a Layout Animation and Animation Listener
aViewGroup.setLayoutAnimationListener(new AnimationListener() {
  public void onAnimationEnd(Animation _animation) {
    // TODO: Actions on animation complete. 
  }
  public void onAnimationRepeat(Animation _animation) {}
  public void onAnimationStart(Animation _animation) {}
});

aViewGroup.scheduleLayoutAnimation();