Android使用ViewFlipper实现图片切换功能

今天给大家简单的讲一下Android手势,目前市场上的App中手势的运用比较少。
Android提供了两种手势:
①.Android提供了手势检测,并为手势检测提供了相应的监听器
②.Android允许开发者添加手势,并提供了相应的API识别用户手势

在之前的一片博客我讲过如何使用ViewPager实现图片滑动切换
地址:Android使用ViewPager实现图片滑动预览效果

但是ViewPager拥有自带的手势识别,意思就是它会自动识别手势是右滑还是左滑。
今天我讲一下如何使用ViewFlipper控件实现图片滑动切换,代码很简单,下面我就将实现代码写出来。

activity_mian.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.example.android21_zhangkai_gesture.MainActivity">

 <ViewFlipper
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/vf_main_image"
  ></ViewFlipper>

</LinearLayout>

ViewPager是自带了图片切换的动画,ViewFlipper是没有自带切换的动画的,所以我们可以先写好动画,现在res文件夹下新建一个文件夹anim

然后再在anim文件夹内写动画文件

left_in.xml

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

 <rotate
  android:fromDegrees="0"
  android:toDegrees="360"
  android:pivotX="50%"
  android:pivotY="50%"
  ></rotate>
</set>

left_out.xml

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

 <rotate
  android:fromDegrees="0"
  android:toDegrees="-360"
  android:pivotX="50%"
  android:pivotY="50%"
  ></rotate>

</set>

right_in.xml

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

 <rotate
  android:fromDegrees="0"
  android:toDegrees="-360"
  android:pivotX="50%"
  android:pivotY="50%"
  ></rotate>
</set>

right_out.xml

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

 <rotate
  android:fromDegrees="0"
  android:toDegrees="360"
  android:pivotX="50%"
  android:pivotY="50%"
  ></rotate>
</set>

MainActivity.java

package com.example.android21_zhangkai_gesture;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {

 private ViewFlipper vf_main_image;
 private int images[]={R.mipmap.ic_launcher,R.mipmap.ic_launcher_round};
 private GestureDetector gd;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  vf_main_image = (ViewFlipper) findViewById(R.id.vf_main_image);
  for (int i = 0; i < images.length; i++) {
   ImageView iv=new ImageView(this);
   iv.setImageResource(images[i]);
   vf_main_image.addView(iv);
  }

  //实例化手势检测器类
  gd = new GestureDetector(this, new GestureDetector.OnGestureListener() {
   //按下
   @Override
   public boolean onDown(MotionEvent e) {
    Log.i("test","onDown");
    return false;
   }

   //按下,但是手指还未抬起时调用此方法
   @Override
   public void onShowPress(MotionEvent e) {
    Log.i("test","onShowPress");
   }
   //轻按,按一下,立刻抬起
   @Override
   public boolean onSingleTapUp(MotionEvent e) {
    Log.i("test","onSingleTapUp");
    return false;
   }
   //滚动
   @Override
   public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
    Log.i("test","onScroll");
    return false;
   }
   //长按
   @Override
   public void onLongPress(MotionEvent e) {
    Log.i("test","onLongPress");

   }
   //拖动

   /**
    *
    * @param e1 手指开始滑动时的位置
    * @param e2 手指开始滑动时的位置
    * @param velocityX
    * @param velocityY
    * @return
    */
   @Override
   public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
    Log.i("test","onFling");
    //向右滑,获取手指结束滑动时的X坐标-手指开始滑动时的X坐标,如果大于200,则换图片
    if (e2.getX()-e1.getX()>200){
     Toast.makeText(MainActivity.this, "右滑,上一张", Toast.LENGTH_SHORT).show();
     vf_main_image.showPrevious();//上一张的方法
     //动画为当前图片从右出去,新图从左进来
     vf_main_image.setInAnimation(MainActivity.this,R.anim.left_in);//设置进来的动画
     vf_main_image.setOutAnimation(MainActivity.this,R.anim.right_out);//设置出去的动画
    }else if(e1.getX()-e2.getX()>200){
     Toast.makeText(MainActivity.this, "左滑,下一张", Toast.LENGTH_SHORT).show();
     vf_main_image.showNext();
     //动画为当前图片从左出去,新图从右进来
     vf_main_image.setInAnimation(MainActivity.this,R.anim.right_in);
     vf_main_image.setOutAnimation(MainActivity.this,R.anim.left_out);
    }
    return false;
   }
  });
 }

 //给当前Activity设置触摸事件监听方法
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  return gd.onTouchEvent(event);
 }
}

上述代码就可以实现图片切换啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android ViewFlipper翻转视图使用详解

    简介 ViewFlipper是Android自带的一个多页面管理控件且可以自动播放!它和ViewPager有所不同,ViewPager继承自ViewGroup,是一页一页的,可以带动画效果,可以兼容低版本:而ViewFlipper继承ViewAnimator,是一层一层的,切换View的时候可以设置动画效果,是Android 4.0才引入的新控件.使用场景和ViewPager基本一样,在很多时候都是用来实现进入应用后的引导页或者用于图片轮播显示. 常用方法 setInAnimation:View

  • Android ViewFlipper用法实例分析

    本文实例讲述了Android ViewFlipper用法.分享给大家供大家参考,具体如下: 这里实现的效果是当手动滑动手机屏幕时会一个一个地显示图片,一次显示一张图片 package com.my.viewflippertest; import android.app.Activity; import android.os.Bundle; import android.view.GestureDetector; import android.view.GestureDetector.OnGest

  • Android ViewFlipper的详解及实例

    Android ViewFlipper的详解 前言: View Flipper,是ViewAnimator的子类,而ViewAnimator又是继承自FrameLayout,而FrameLayout就是平时基本上只显示一个子视图的布局,由于FrameLayout下不好确定子视图的位置,所以很多情况下子视图之前存在相互遮挡,这样就造成了很多时候我们基本上只要求FrameLayout显示一个子视图,然后通过某些控制来实现切换.正好,ViewFlipper帮我们实现了这个工作,我们需要做的就是,选择恰

  • Android ViewFlipper的简单使用

    大家都使用过ViewPager,但是ViewPager还有一个兄弟,那就是ViewFlipper.两者的名字非常相似,我们可以将ViewPager理解成"一页一页的视图",ViewFlipper则是"快速翻转的视图",但后者的使用率却远不及前者,不过这并不意味着ViewFlipper就弱了.现在我们就来拜访一下经常被冷落的ViewFlipper. 1.创建工程及页面视图布局 在Android Studio中新建一个工程,实现这样一个效果:创建红.橙.绿.蓝四种颜色的

  • Android ViewFlipper简单应用

    Android ViewFlipper 简单应用,废话不多说,直接看代码 activity_guide.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/too

  • Android使用ViewFlipper实现图片切换功能

    今天给大家简单的讲一下Android手势,目前市场上的App中手势的运用比较少. Android提供了两种手势: ①.Android提供了手势检测,并为手势检测提供了相应的监听器 ②.Android允许开发者添加手势,并提供了相应的API识别用户手势 在之前的一片博客我讲过如何使用ViewPager实现图片滑动切换 地址:Android使用ViewPager实现图片滑动预览效果 但是ViewPager拥有自带的手势识别,意思就是它会自动识别手势是右滑还是左滑. 今天我讲一下如何使用ViewFli

  • Android基于ImageSwitcher实现图片切换功能

    左右切换图片控件大家都用ViewPager, ViewFipper比较多吧,我之前也用ViewPager实现了,使用ViewPager实现左右循环滑动图片,有兴趣的可以去看下,今天介绍的是基于ImageSwitcher实现的左右切换图片,先上截图吧 好了,接下来来看代码吧,第一张图是一个GridView,点击item跳转到第二个界面,第一个界面可以忽略,主要是讲解ImageSwitcher的左右却换图片,先看布局文件 <?xml version="1.0" encoding=&q

  • JS实现的简单图片切换功能示例【测试可用】

    本文实例讲述了JS实现的简单图片切换功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • JavaScript实现鼠标滚轮控制页面图片切换功能示例

    本文实例讲述了JavaScript实现鼠标滚轮控制页面图片切换功能.分享给大家供大家参考,具体如下: 鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢? 最常见就是图片的切换了,能通过滚动滚轮进行图片的浏览,省得用户还要去点下一张,做这种繁琐的步骤.来看个简单的例子吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • Android ViewPager撤消左右滑动切换功能实现代码

    最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动.下面通过本文给大家ViewPager取消左右滑动切换功能的实例代码,具体代码如下所示: IndexViewPager.Java: <span style="background-color: rgb(255, 255, 255);">import android.content.Context; import android.support.v4.view.Vie

  • Android控件实现图片缩放功能

    1 简介 先来一张效果图 TIM图片.gif 上图中灰色的一块是ImageView控件,ImageView中的图片进行左右上下移动,以及双指缩放. 对于android控件的缩放移动,点这里----android控件的缩放,移动 2 使用步骤 布局layout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.

  • Android监听横竖屏切换功能

    偶然在项目中用到播放视频时,需要横屏将视频全屏播放,所以需要监听屏幕的横竖屏切换事件. 横竖屏切换监听效果: ConfigChanges,用于捕获手机状态的改变,当横竖屏切换,屏幕尺寸变化,弹出键盘,系统设置改变等条件,就会触发回调事件onConfigurationChanged.让Activity捕捉到该事件,需要做如下步骤: 声明Activity需要捕捉的事件类型,在manifest的配置: <activity android:name=".MainActivity" and

  • Android开发实现的图片浏览功能示例【放大图片】

    本文实例讲述了Android开发实现的图片浏览功能.分享给大家供大家参考,具体如下: 效果图: 布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res

  • JavaScript实现简单的图片切换功能(实例代码)

    代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 300px; margin: 50px auto; padding: 20p

  • Android使用ViewFlipper实现图片上下自动轮播的示例代码

    本文主要介绍了Android使用ViewFlipper实现图片上下自动轮播的示例代码,分享给大家,具体如下: 先看效果: 1.xml代码: <ViewFlipper android:id="@+id/viewFlipper" android:layout_width="match_parent" android:layout_height="match_parent" android:flipInterval="3000"

随机推荐