Android实现图片左右滑动效果

关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现。接下来就让我们开始实现这种效果。

接下来我们看一下程序结构图:

MainActivity文件中代码:

package com.android.flip;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.OnGestureListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;

/**
 * Android实现左右滑动效果
 * @Description: Android实现左右滑动效果

 * @File: MainActivity.java

 * @Package com.android.flip

 * @Author Hanyonglu

 * @Date 2012-02-12 上午10:44:04

 * @Version V1.0
 */
public class MainActivity extends Activity implements OnGestureListener {
  private ViewFlipper flipper;
  private GestureDetector detector;

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

    detector = new GestureDetector(this);
    flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper1);

    flipper.addView(addImageView(R.drawable.one));
    flipper.addView(addImageView(R.drawable.two));
    flipper.addView(addImageView(R.drawable.three));
    flipper.addView(addImageView(R.drawable.four));
    flipper.addView(addImageView(R.drawable.five));
  }

  private View addImageView(int id) {
    ImageView iv = new ImageView(this);
    iv.setImageResource(id);
    return iv;
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    // TODO Auto-generated method stub
    return this.detector.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) {
    if (e1.getX() - e2.getX() > 120) {
      this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
      this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
      this.flipper.showNext();
      return true;
    } else if (e1.getX() - e2.getX() < -120) {
      this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
      this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
      this.flipper.showPrevious();
      return true;
    }

    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;
  }
}

布局界面相对比较简单,我们只需要加入ViewFlipper就可以,代码如下:

<?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/ViewFlipper1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
  </ViewFlipper>
</LinearLayout>

为了使其滑动时有一定的特效,我们需要加入Animation效果,说到Animation,我们先看下如何在Android中实现自定义Animation。自定义的Animation是以XML格式定义的,定义好的XML文件存放在res/anim中。

一般的Animation有以下四种类型:

  1. Alpha:渐变透明度动画效果
  2. Scale:渐变尺寸伸缩动画效果
  3. Translate:画面转换位置移动动画效果
  4. Rotate:画面转换位置移动动画效果

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.1" android:toAlpha="1.0"
    android:duration="500" />
</set>
  push_left_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="0.1"
    android:duration="500" />
</set>

push_right_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.1" 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="0.1"
    android:duration="500" />
</set>

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

(0)

相关推荐

  • Android开发之使用ViewPager实现图片左右滑动切换效果

    Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android 使用ViewPager实现图片左右循环滑动自动播放

    ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1. 首先看一些layout下的xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_

  • Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)

    前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以要实现循环还得需要自己去动手.自己在网上也找了些例子,本博文的Demo是结合自己找到的一些相关例子的基础上去改造,也希望对读者有用. Demo实现的效果图如下: Demo代码: 工程目录如下图: 废话不多说,上代码. 1.主Activity代码如下: package com.stevenhu.and

  • Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

    自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

  • Android实现图片自动轮播并且支持手势左右无限滑动

    废话不多说了,先给大家上左右无限滑动的代码了. 1.左右无限滑动 public class MainActivity extends AppCompatActivity { private static ViewPager viewPager; private RadioGroup group; //图片资源,实际项目需要从网络获取 private int[] imageIds = {R.drawable.ym1, R.drawable.ym2, R.drawable.ym3, R.drawab

  • Android实现图片左右滑动效果

    关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来就让我们开始实现这种效果. 接下来我们看一下程序结构图: MainActivity文件中代码: package com.android.flip; import android.app.Activity; import android.os.Bundle; import android.view.GestureDetector; import andro

  • Android实现图片轮播效果的两种方法

    大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

  • android实现图片闪烁动画效果的两种实现方式(实用性高)

    大家在使用APP的时候,有的APP在点击语音搜索界面后,会出现一个小话筒,小话筒会类似雷达似得在闪烁,表示正在倾听你说话的内容(这个大家可以参照微软的必应APP),那么问题来了,这种动画效果是如何实现的呢?其实实现这种动画效果有很多种方法,最常见的是两种:第一种就是插入n张图片进行切换已达到如此目的,第二种就是通过改变一张图片的透明度来达到闪烁的效果.下面就分别讲一下通过这两种方法如何实现. 第一种:通过n张图片之间切换实现动画效果 这种方法的原理很简单,利用handler的延时机制在子线程中完

  • Android实现三段式滑动效果

    目录 高德的效果: 高德的效果: 实现的效果: 我们实现的效果和高德差距不是很大,也很顺滑.具体实现其实就是集成CoordinatorLayout.Behavior /**  * 高德首页滑动效果 */ public class GaoDeBottomSheetBehavior<V extends View> extends CoordinatorLayout.Behavior<V> { public static final int STATE_DRAGGING = 1; pub

  • Android实现图片轮播效果

    本文实例讲述了JaAndroid实现图片轮播效果代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_par

  • js实现手机web图片左右滑动效果

    最近在做一个手机端web站点,里面有一个图片展示效果: 1.点击任意图片时图片全屏展示,左右滑动能展示其他的图片. 2.滑动超过一定范围自动滑到下一张图片,不超过则回退到当前照片位置.此处的滑动要带动画效果 实现: 每张图片外面一个div,将其宽度设置为100%,最外层有一个div[命名为outerDiv],其宽度设为:总图片数量*100+'%'.给最外层div设置touchstart,touchmove,touchend事件监听处理函数,在touchmove中根据移动的x轴距离动态改变oute

  • Android GestureDetector实现手势滑动效果

    本文实例为大家分享了Android GestureDetector实现手势滑动的具体代码,供大家参考,具体内容如下 目标效果: 程序运行,手指在屏幕上从左往右或者从右往左滑动超过一定距离,就会吐司输出滑动方向和距离. 1.activity_main.xml页面放置一个ImageView控件. activity_main.xml页面: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • android中图片翻页效果简单的实现方法

    复制代码 代码如下: public class PageWidget extends View {    private Bitmap foreImage;    private Bitmap bgImage;    private PointF touchPt;    private int screenWidth;    private int screenHeight;    private GradientDrawable shadowDrawableRL;    private Gra

  • Android自定义StickinessView粘性滑动效果

    design包的出现,Android界面发生了巨大变化,各种滑动配合的效果,下面我就粘性滑动中的一种进行自定义,效果图如下: 大家看到效果了,这里我是继承了LinerLayout,方便一点,若果是ViewGroup的话,也就复杂一点点.这里分为三部分: 1.head1,顶部可移动的Layout. 2.head2,固定的头部,不会滑动除屏幕外. 3.可滑动的Layout(这里只可以是ListView,不过也可以是任何可滑动的View,只要给出Head可滑动的时机即可) 本StickinessVie

  • 一个支持任意尺寸的图片上下左右滑动效果

    常常遇到图片通过后台上传后就变形了的问题,如果你的网站风格适合,可以用这种方式来给页面布局,支持任意尺寸的图片滑动(上下左右滑动) <! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>任意尺寸的图片滑动</title> <sty

随机推荐