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

最新推荐文章于 2016-08-13 21:20:38 发布
最新推荐文章于 2016-08-13 21:20:38 发布
阅读量566 收藏
点赞数
文章标签： android encoding layout html float image

 

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

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

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

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

     

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

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

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

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

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

push_left_in.xml：

[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>      
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">      
  3.     <translate      
  4.     android:fromXDelta="100%p"       
  5.     android:toXDelta="0"       
  6.     android:duration="500"/>      
  7.     <alpha      
  8.     android:fromAlpha="0.0"       
  9.     android:toAlpha="1.0"     
  10.     android:duration="500" />      
  11. </set>   
<?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：

[html] view plain copy print ?
  1. <set xmlns:android="http://schemas.android.com/apk/res/android">      
  2.     <translate      
  3.     android:fromXDelta="0"       
  4.     android:toXDelta="-100%p"       
  5.     android:duration="500"/>      
  6.     <alpha      
  7.     android:fromAlpha="1.0"       
  8.     android:toAlpha="0.0"       
  9.     android:duration="500" />      
  10. </set>   
<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：

[html] view plain copy print ?
  1. <set xmlns:android="http://schemas.android.com/apk/res/android">      
  2.     <translate      
  3.     android:fromXDelta="-100%p"       
  4.     android:toXDelta="0"       
  5.     android:duration="500"/>      
  6.     <alpha      
  7.     android:fromAlpha="0.0"       
  8.     android:toAlpha="1.0"       
  9.     android:duration="500" />      
  10. </set>  
<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：

[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>      
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">      
  3.     <translate      
  4.     android:fromXDelta="0"       
  5.     android:toXDelta="100%p"       
  6.     android:duration="500"/>      
  7.     <alpha      
  8.     android:fromAlpha="1.0"       
  9.     android:toAlpha="1.0"     
  10.     android:duration="500" />      
  11. </set>   
<?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、编写主布局文件，在这里不多讲，具体代码如下：

[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7. <ViewFlipper  
  8.     android:id="@+id/myViewFlipper"  
  9.     android:layout_width="wrap_content"  
  10.     android:layout_height="wrap_content"  
  11.     android:layout_gravity="center"/>  
  12. </LinearLayout>  
<?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接口，要实现手势滑动，这个接口必须实现。在这里也不扯淡了，看代码吧：

[html] view plain copy print ?
  1. public class Demo extends Activity implements android.view.GestureDetector.OnGestureListener{  
  2.     //声明手势识别  
  3.     GestureDetector gd;  
  4.     //声明ViewFlipper控件  
  5.     ViewFlipper vf;  
  6.     //声明图片，这里可以声明多张图片，以供使用  
  7.     int[] imageID={R.drawable.gallery_photo_1,  
  8.                    R.drawable.gallery_photo_2,  
  9.                    R.drawable.gallery_photo_3,  
  10.                    R.drawable.gallery_photo_4,  
  11.                    R.drawable.gallery_photo_5,  
  12.                    R.drawable.gallery_photo_6,  
  13.                    R.drawable.gallery_photo_7,  
  14.                    R.drawable.gallery_photo_8,  
  15.                    };  
  16.     //索引值  
  17.     int index=0;  
  18.     int flag=0;  
  19.     /** Called when the activity is first created. */  
  20.     @Override  
  21.     public void onCreate(Bundle savedInstanceState) {  
  22.         super.onCreate(savedInstanceState);  
  23.         setContentView(R.layout.main);  
  24.         vf=(ViewFlipper)findViewById(R.id.myViewFlipper);  
  25.         LayoutParams lp=new LayoutParams(100, 150);  
  26.         //对imageID执行循环，获取ImageView对象，并把该对象添加到ViewFlipper中  
  27.         for(int i=0;i<imageID.length;i++){  
  28.             ImageView image=new ImageView(this);  
  29.             image.setImageResource(imageID[i]);  
  30.             vf.addView(image, index, lp);  
  31.             index++;  
  32.         }  
  33.         gd = new GestureDetector(this);  
  34.     }  
  35.   
  36.     @Override  
  37.     public boolean onTouchEvent(MotionEvent event) {  
  38.         // TODO Auto-generated method stub  
  39.         return this.gd.onTouchEvent(event);   
  40.     }  
  41.   
  42.     @Override  
  43.     public boolean onDown(MotionEvent e) {  
  44.         // TODO Auto-generated method stub  
  45.         return false;  
  46.     }  
  47.   
  48.     @Override  
  49.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
  50.             float velocityY) {  
  51.         // TODO Auto-generated method stub  
  52.         //向左滑动  
  53.         if(e1.getX()-e2.getX()>10){  
  54.             vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));  
  55.             vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));  
  56.             //判断是否到最后一张  
  57.             if (flag % 8 == 0)  
  58.                 this.vf.showPrevious();  
  59.             else  
  60.                 this.vf.showNext();  
  61.             flag = (flag + 1) % 8;  
  62.         }  
  63.         //向右滑向  
  64.         else if(e1.getX()-e2.getX()<-10){  
  65.             vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));  
  66.             vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));  
  67.             //判断是否是第一张  
  68.             if(flag%8==0){  
  69.                 vf.showNext();  
  70.             }  
  71.             else{  
  72.                 vf.showPrevious();  
  73.             }  
  74.             flag = (flag + 1) % 8;  
  75.         }  
  76.         return false;  
  77.     }  
  78.   
  79.     @Override  
  80.     public void onLongPress(MotionEvent e) {  
  81.         // TODO Auto-generated method stub  
  82.           
  83.     }  
  84.   
  85.     @Override  
  86.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
  87.             float distanceY) {  
  88.         // TODO Auto-generated method stub  
  89.         return false;  
  90.     }  
  91.   
  92.     @Override  
  93.     public void onShowPress(MotionEvent e) {  
  94.         // TODO Auto-generated method stub  
  95.           
  96.     }  
  97.   
  98.     @Override  
  99.     public boolean onSingleTapUp(MotionEvent e) {  
  100.         // TODO Auto-generated method stub  
  101.         return false;  
  102.     }  
  103. }  
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、到这里，我们的项目就开发完全了。运行该项目，便会得到以上效果！

佳栩
关注
Android开发笔记（一百二十四）自定义相册
aqi00的博客
09-06 3418
画廊Gallery Gallery是一个早期的画廊控件，左右滑动手势可展示内嵌的图片列表，类似于一个平面的万花筒。虽然Android现在将Gallery标记为Deprecation（表示已废弃），建议开发者采用HorizontalScrollView或者ViewPager来代替，但是Gallery用来轮播图片其实是个挺好的选择，所以下面我们还是简单介绍它的用法，并结合其它控件加深对图像开发的理解
Android手势识别ViewFlipper触摸动画
caozuiba
12-23 135
最近项目中用到了ViewFlipper这个类，感觉效果真的很炫，今天自己也试着做了下，确实还不错。 首先在layout下定义viewflipper.xml &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro...
android之ViewFlipper实现左右滑动动画效果
fso918的专栏
03-13 864
说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果，不管是微博，还是QQ等。实现左右滑动的方式很多，有ViewPaer(不过这个和需要android-support-v4.jar的支持)，自定义实现Viewgroup，gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。 以下会会用到的技术有： 1、ViewFlipper 2、G
ViewFlipper结合手势OnGestureListener制作的滑动切换效果
网站开发初中级代码参考-转载
09-04 80
import android.app.Activity; import android.os.Bundle; import android.view.GestureDetector; import android.view.MotionEvent; import android.view.View; import android.widget.Button;...
Android_ViewFlipper手势滑动
qq_34278272的博客
08-13 360
XML文件：<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="ma
Android手势滑动图片浏览
08-22
在Android开发中，实现手势滑动图片浏览是一种常见的需求，特别是在设计用户界面时，如相册应用或展示产品图片的场景。本教程将详细介绍如何利用`ViewFlipper`组件结合手势识别来创建一个平滑的手势滑动图片浏览功能...
Android高级应用源码-Gallery+ImageSwitcher+ViewFlipper实现手机查看壁纸效果.zip
10-14
在Android开发中，创建一个能够展示并切换壁纸的应用是一项常见的任务。这个"Android高级应用源码-Gallery+ImageSwitcher+ViewFlipper实现手机查看壁纸效果.zip"的压缩包提供了一个很好的实例，展示了如何利用...
【Android】滑动屏幕效果GestureDetector、OnGestureListener、ViewFlipper
01-28
这种效果通常应用于新闻应用、相册应用或者任何需要展示多个页面并允许用户通过滑动手势切换的场景。在实际项目中，可能还需要考虑手势识别的灵敏度、滑动阈值等因素，以提供更优质的用户体验。同时，可以结合使用 `...
ViewFlipper手势滑动
既然目标是地平线 留给世界的只能是背影
05-21 887
View切换的控件—ViewFlipper 除了这个ViewFlipper，我们还需要了解一下ViewAnimator。它主要是为其中的View切换提供动画效果。 还会用到几个方法： setInAnimation：设置View进入屏幕时候使用的动画。该方法有两个重载方法，即可以直接传入Animation对象，也可以传入定义的Animation文件的resourceID。 s
最简单的ViewFlipper实现图片跟随手势滑动
08-02
NULL 博文链接：https://zhonglunshun.iteye.com/blog/1972245
Android相册支持点击放大图片，滑动切换图片，手势放大缩小
05-29
项目使用了开源框架Universal-Image-Loader 显示本地图库所有照片 点击放大，单击退出 双击放大缩小 支持左右滑动查看图片 支持手势放大缩小图片
用ViewFlipper实现手势滑动
jyDave的博客
01-25 822
ViewFlipper也可以结合onTouchEvent实现手势滑动。 在MainActivity中重写onTouchEvent方法，可以响应各种屏幕事件。通过一个变量startX保存手势起始坐标，并与当前坐标比较，可以判断向左滑动还是向右滑动。 示例代码如下： @Override public boolean onTouchEvent(MotionEvent event) { sw
ViewFlipper的使用
点点滴滴
01-17 278
屏幕切换指的是在同一个Activity内屏幕见的切换，最长见的情况就是在一个FrameLayout内有多个页面，比如一个系统设置页面；一个个性化设置页面。 通过查看OPhone API文档可以发现，有个android.widget.ViewAnimator类继承至FrameLayout，ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。该类有如下几个和动...
Android程序:使用ViewFlipper实现屏幕切换动画及手势滑动切换功能
记点小笔记
04-29 791
package com.example.viewflipperdemo;import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.widget.ImageView; import android.widget.ViewFlipper;public cla
Android使用ViewFlipper做页面切换，与手势滑动切换的使用
iteye_11268的博客
06-22 150
写道 Android系统自带有一个多页面管理的控件：ViewFlipper. 它可以简单实现子页面的切换 它只需使用addView方法添加几个View，每个View对应的是一个页面，即可完成对于多页面的管理，，， 在android上实现手势的识别也比较简单，可以实现OnTouchListener和OnGuestureListener接口， 然后在OnTouch函数中注册GestureD...
Android使用ViewFlipper做页面切换，与手势滑动切换的使用。
热门推荐
Yao.GUET
04-18 1万+
<br />Android系统自带有一个多页面管理的控件：ViewFlipper.<br />它可以简单实现子页面的切换，，，<br />它只需使用addView方法添加几个View，每个View对应的是一个页面，即可完成对于多页面的管理，，，<br /> <br />在android上实现手势的识别也比较简单，可以实现OnTouchListener和OnGuestureListener接口，<br />然后在OnTouch函数中注册GestureDetector来判别手势动作，<br /> <br />参
关于ViewFlipper中GridView手势滑动滑的实现
水迹专栏
07-18 1304
public class GestureGridView extends GridView { private GestureDetector gestureDetector; public GestureGridView(Context context){ super(context); } public GestureGridView(Context context, AttributeSet
Android开发之ViewFlipper使用制作相簿（一）
ch_984326013的专栏
08-07 2953
Android开发之ViewFlipper使用制作相框 今天我们来认识下ViewFlipper，它可以实现在同一个屏幕中的切换效果。最长见的情况就是在一个FrameLayout内有多个页面，比如一个系统设置页面；一个个性化设置页面。在这里，今天就用该控件来制作一个相簿。 照例
Android开发：ViewFlipper实现图片自动播放教程
本文提供了一个实例，展示了如何在Android应用中利用ViewFlipper实现图片的自动轮播，并探讨了其界面布局和功能实现的技巧。" 在Android开发中，ViewFlipper是一个非常有用的组件，它继承自ViewAnimator，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值