Android开发之ViewFlipper应用（二）之手势滑动相册

最新推荐文章于 2016-08-13 21:20:38 发布

原创最新推荐文章于 2016-08-13 21:20:38 发布 · 4.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#android #encoding #layout #float #image #相册

Android开发系列专栏收录该内容

28 篇文章

订阅专栏

本文通过一个实例解决ViewFlipper应用中的两个问题：如何通过手势滑动切换图片，以及如何动态加载大量图片。首先介绍了项目的运行效果，然后详细讲述了开发过程，包括创建项目、准备图片资源、编写动画、设计布局和实现GestureDetector监听手势滑动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

呵呵，最近一直在忙linux，把ViewFlipper应用（二）都落下一边了，先来回顾下http://blog.youkuaiyun.com/ch_984326013/article/details/6666302（一）我们完成之后交给大家的两点疑问：

（1）、该项目，我们实现的是单击按钮显示下一张图片或上一张图片，这里我就要问了：“我们可否通过手势在屏幕上的移动来进行图片的切换呢？”；

（2）、该项目，我们实现了三张图片的切换，但是图片好多的话。我们这么在布局中使用图片，也不是一中明智之举。那么，我们该怎样动态加载几十张甚至几百张图片呢？

下面，我们就根据一个实例来解决以上两个问题，首先我们先看下该项目的运行效果：

以上三张截图，分别是运行项目效果、运行项目之后鼠标向右滑动及运行项目之后鼠标向左滑动的效果图。

下面，来开分析该项目的具体开发过程。

1、创建一个Android项目，命名为ViewFlipperExample。

2、准备图片资源，在这里我准备了8张图片，把它们存放与drawable-mdpi目录中，这里大家可以自己准备图片。

3、在res目录下新建一个anim目录，在里面编写四个动画，动画内容具体如下：

push_left_in.xml：

<?xml version="1.0" encoding="utf-8"?>    
<set xmlns:android="http://schemas.android.com/apk/res/android">    
    <translate    
    android:fromXDelta="100%p"     
    android:toXDelta="0"     
    android:duration="500"/>    
    <alpha    
    android:fromAlpha="0.0"     
    android:toAlpha="1.0"   
    android:duration="500" />    
</set>

push_left_out.xml：

<set xmlns:android="http://schemas.android.com/apk/res/android">    
    <translate    
    android:fromXDelta="0"     
    android:toXDelta="-100%p"     
    android:duration="500"/>    
    <alpha    
    android:fromAlpha="1.0"     
    android:toAlpha="0.0"     
    android:duration="500" />    
</set>

push_right_in.xml：

<set xmlns:android="http://schemas.android.com/apk/res/android">    
    <translate    
    android:fromXDelta="-100%p"     
    android:toXDelta="0"     
    android:duration="500"/>    
    <alpha    
    android:fromAlpha="0.0"     
    android:toAlpha="1.0"     
    android:duration="500" />    
</set>

push_right_out.xml：

<?xml version="1.0" encoding="utf-8"?>    
<set xmlns:android="http://schemas.android.com/apk/res/android">    
    <translate    
    android:fromXDelta="0"     
    android:toXDelta="100%p"     
    android:duration="500"/>    
    <alpha    
    android:fromAlpha="1.0"     
    android:toAlpha="1.0"   
    android:duration="500" />    
</set>

4、编写主布局文件，在这里不多讲，具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/myViewFlipper"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"/>
</LinearLayout>

5、修改主程序代码，在这里我们实现了GestureDetector.OnGestureListener接口，要实现手势滑动，这个接口必须实现。在这里也不扯淡了，看代码吧：

public class Demo extends Activity implements android.view.GestureDetector.OnGestureListener{
	//声明手势识别
	GestureDetector gd;
	//声明ViewFlipper控件
	ViewFlipper vf;
	//声明图片，这里可以声明多张图片，以供使用
	int[] imageID={R.drawable.gallery_photo_1,
			       R.drawable.gallery_photo_2,
			       R.drawable.gallery_photo_3,
			       R.drawable.gallery_photo_4,
			       R.drawable.gallery_photo_5,
			       R.drawable.gallery_photo_6,
			       R.drawable.gallery_photo_7,
			       R.drawable.gallery_photo_8,
			       };
	//索引值
	int index=0;
	int flag=0;
    /** 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.myViewFlipper);
        LayoutParams lp=new LayoutParams(100, 150);
        //对imageID执行循环，获取ImageView对象，并把该对象添加到ViewFlipper中
        for(int i=0;i<imageID.length;i++){
        	ImageView image=new ImageView(this);
        	image.setImageResource(imageID[i]);
        	vf.addView(image, index, lp);
            index++;
        }
        gd = new GestureDetector(this);
    }

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		return this.gd.onTouchEvent(event); 
	}

	@Override
	public boolean onDown(MotionEvent e) {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		// TODO Auto-generated method stub
		//向左滑动
		if(e1.getX()-e2.getX()>10){
			vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
			vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
			//判断是否到最后一张
			if (flag % 8 == 0)
				this.vf.showPrevious();
	        else
			    this.vf.showNext();
	        flag = (flag + 1) % 8;
		}
		//向右滑向
		else if(e1.getX()-e2.getX()<-10){
			vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
			vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
			//判断是否是第一张
			if(flag%8==0){
				vf.showNext();
			}
			else{
				vf.showPrevious();
			}
			flag = (flag + 1) % 8;
		}
		return false;
	}

	@Override
	public void onLongPress(MotionEvent e) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public void onShowPress(MotionEvent e) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		// TODO Auto-generated method stub
		return false;
	}
}

6、到这里，我们的项目就开发完全了。运行该项目，便会得到以上效果！