有关ViewFlipper的使用及设置动画效果的讲解

来源：互联网发布：东方快车杀人事件知乎编辑：程序博客网时间：2024/04/30 13:48

转自 http://blog.csdn.net/loongggdroid/article/details/18262543

说到左右滑动，其实实现左右滑动的方式很多，有ViewPaer，自定义实现Viewgroup，gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。
会用到以下的技术：
1、ViewFlipper
2、GestureDetector
3、Animation
主要是这三个类在起作用。
ViewFlipper，不妨把它看做一个容器吧，你可以把许多的View放在这个容器中，让它展示给用户，虽然它每次只展示一个view，我感觉它的用途更好是作为广告展示，比如类似购物网站那样的广告滚动展示。比如可以设置自动播放功能，就可以滚动广告了！

原理：向左向右滑动主要是依赖手势来控制，手势向右滑动就调用 viewFlipper.showNext()方法，同理，向左滑动就会去调用viewFlipper.showPrevious()方法。

效果图如下：

接下来直接上代码：

首先在布局文件中添加ViewFlipper的标签：

[html] view plain copy
 
<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:background="@drawable/pattern1" >  
  
    <Button  
        android:id="@+id/treasure_chest_btn"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentRight="true"  
        android:background="@drawable/treasure" />  
  
    <ViewFlipper  
        android:id="@+id/viewflipper"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:layout_below="@id/treasure_chest_btn" >  
    </ViewFlipper>  
  
    <Button  
        android:id="@+id/garbage_btn"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentLeft="true"  
        android:layout_below="@id/viewflipper"  
        android:background="@drawable/garbage" />  
  
</RelativeLayout>  

其次是在anim中定义动画：
slide_left_in.xml：

[html] view plain copy
 
<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <!--  
     画面转换位置移动动画效果   
     开始向左动画  
     fromXDelta ： 动画开始时 X坐标位置  
     toXDelta ：动画结束时 X坐标位置  
     duration ：动画持续时间  
    -->  
    <translate  
        android:duration="800"  
        android:fromXDelta="100%p"  
        android:toXDelta="0" />  
  
</set>  

slide_left_out.xml：

[html] view plain copy
 
<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <translate  
        android:duration="800"  
        android:fromXDelta="0"  
        android:toXDelta="-100%p" />  
  
</set>  

slide_right_in.xml：

[html] view plain copy
 
<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <translate  
        android:duration="800"  
        android:fromXDelta="-100%p"  
        android:toXDelta="0" />  
  
</set>  

slide_right_out.xml：

[html] view plain copy
 
<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <translate  
        android:duration="800"  
        android:fromXDelta="0"  
        android:toXDelta="100%p" />  
  
</set>  

最后是Activity中的实现：

[java] view plain copy
 
package net.loonggg.demo.slider;  
  
import android.app.Activity;  
import android.os.Bundle;  
import android.view.GestureDetector;  
import android.view.GestureDetector.OnGestureListener;  
import android.view.LayoutInflater;  
import android.view.MotionEvent;  
import android.view.View;  
import android.view.View.OnTouchListener;  
import android.view.Window;  
import android.view.animation.Animation;  
import android.view.animation.Animation.AnimationListener;  
import android.view.animation.AnimationSet;  
import android.view.animation.AnimationUtils;  
import android.widget.Button;  
import android.widget.ImageView;  
import android.widget.TextView;  
import android.widget.ViewFlipper;  
  
public class MainActivity extends Activity implements OnGestureListener,  
        OnTouchListener {  
    private GestureDetector detector;  
    private ViewFlipper myViewFlipper;  
    private int[] imgs = { R.drawable.img0, R.drawable.img1, R.drawable.img2,  
            R.drawable.img3, R.drawable.img4, R.drawable.img5 };  
    private int displayedChildIndex = 0;  
  
    private Button treasure_btn;  
    private Button garbage_btn;  
  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        setContentView(R.layout.main);  
        myViewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);  
        treasure_btn = (Button) findViewById(R.id.treasure_chest_btn);  
        garbage_btn = (Button) findViewById(R.id.garbage_btn);  
        myViewFlipper.setOnTouchListener(this);  
        myViewFlipper.setLongClickable(true);// 设置长按事件  
  
        // myViewFlipper.setAutoStart(true);// 设置是否自动播放，默认不自动播放  
  
        detector = new GestureDetector(this);  
        addFlipperView();  
    }  
  
    /** 
     * 向FlipperView中动态添加View 
     */  
    private void addFlipperView() {  
        for (int i = 0; i < imgs.length; i++) {  
            View view = LayoutInflater.from(this).inflate(  
                    R.layout.myviewflipper, null);  
            TextView title = (TextView) view.findViewById(R.id.view_title);  
            title.setText("头像");  
            ImageView iv = (ImageView) view.findViewById(R.id.view_image);  
            iv.setBackgroundResource(imgs[i]);  
            myViewFlipper.addView(view);  
        }  
    }  
  
    @Override  
    public boolean onDown(MotionEvent e) {  
        return false;  
    }  
  
    @Override  
    public void onShowPress(MotionEvent e) {  
  
    }  
  
    @Override  
    public boolean onSingleTapUp(MotionEvent e) {  
        return false;  
    }  
  
    @Override  
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
            float distanceY) {  
        return false;  
    }  
  
    @Override  
    public void onLongPress(MotionEvent e) {  
  
    }  
  
    @Override  
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
            float velocityY) {  
        // 返回当前正在显示的子视图的索引  
        displayedChildIndex = myViewFlipper.getDisplayedChild();  
        final ImageView iv = (ImageView) myViewFlipper.getChildAt(  
                displayedChildIndex).findViewById(R.id.view_image);  
        if (e2.getX() - e1.getX() >= 100 && e1.getY() - e2.getY() >= 100) {  
            AnimationSet outAnim = (AnimationSet) AnimationUtils.loadAnimation(  
                    this, R.anim.collect_treasure);  
            iv.startAnimation(outAnim);  
            outAnim.setAnimationListener(new AnimationListener() {  
  
                public void onAnimationStart(Animation animation) {  
  
                }  
  
                public void onAnimationRepeat(Animation animation) {  
  
                }  
  
                public void onAnimationEnd(Animation animation) {  
                    showNextView();  
                    AnimationSet downAnim = (AnimationSet) AnimationUtils  
                            .loadAnimation(MainActivity.this, R.anim.up_or_down);  
                    treasure_btn.setAnimation(downAnim);  
                    iv.clearAnimation();  
                }  
            });  
  
        } else if (e1.getX() - e2.getX() >= 100 && e2.getY() - e1.getY() >= 100) {  
            AnimationSet outAnim = (AnimationSet) AnimationUtils.loadAnimation(  
                    this, R.anim.throw_garbage);  
            iv.startAnimation(outAnim);  
            outAnim.setAnimationListener(new AnimationListener() {  
  
                public void onAnimationStart(Animation animation) {  
  
                }  
  
                public void onAnimationRepeat(Animation animation) {  
  
                }  
  
                public void onAnimationEnd(Animation animation) {  
                    showNextView();  
                    AnimationSet leftAnim = (AnimationSet) AnimationUtils  
                            .loadAnimation(MainActivity.this,  
                                    R.anim.left_or_right);  
                    garbage_btn.setAnimation(leftAnim);  
                    iv.clearAnimation();  
                }  
            });  
  
        } else if (e1.getX() - e2.getX() >= 100) {  
            showNextView();  
        } else if (e2.getX() - e1.getX() >= 100) {  
            showPreviousView();  
        }  
        return false;  
    }  
  
    private void showPreviousView() {  
        myViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.slide_right_in));  
        myViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.slide_right_out));  
        myViewFlipper.showPrevious();  
    }  
  
    private void showNextView() {  
        myViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.slide_left_in));  
        myViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.slide_left_out));  
        myViewFlipper.showNext();  
  
    }  
  
    @Override  
    public boolean onTouch(View v, MotionEvent event) {  
        return detector.onTouchEvent(event);  
    }  
  
}  

0 0