activity_main.xml

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical" >
  6.  
  7. <ViewFlipper
  8. android:id="@+id/flipper"
  9. android:layout_width="fill_parent"
  10. android:layout_height="fill_parent" >
  11. </ViewFlipper>
  12.  
  13. </LinearLayout>

MainActivity

  1. package com.example.viewflipper;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.Menu;
  6. import android.view.MenuItem;
  7. import android.view.MotionEvent;
  8. import android.widget.ImageView;
  9. import android.widget.ViewFlipper;
  10.  
  11. public class MainActivity extends Activity {
  12. private ViewFlipper flipper;
  13. private int[] resId = { R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,
  14. R.drawable.pic4 };
  15. private float startX;
  16.  
  17. @Override
  18. protected void onCreate(Bundle savedInstanceState) {
  19. super.onCreate(savedInstanceState);
  20. setContentView(R.layout.activity_main);
  21. flipper = (ViewFlipper) findViewById(R.id.flipper);
  22. // 动态导入的方式,增加子view
  23. for (int i = 0; i < resId.length; i++) {
  24. flipper.addView(getImageView(resId[i]));
  25. }
  26. // 进入动画--取消自己主动播放功能
  27. // flipper.setInAnimation(this, R.anim.left_in);
  28. // flipper.setOutAnimation(this, R.anim.left_out);
  29. // flipper.setFlipInterval(3000);
  30. // ;
  31. // flipper.startFlipping();
  32. }
  33.  
  34. // 通过id获取图片
  35. private ImageView getImageView(int resId) {
  36. ImageView imageView = new ImageView(this);
  37. // 铺满屏幕
  38. imageView.setBackgroundResource(resId);
  39. return imageView;
  40. }
  41.  
  42. /**
  43. * 处理手势事件
  44. */
  45. @Override
  46. public boolean onTouchEvent(MotionEvent event) {
  47. switch (event.getAction()) {
  48. case MotionEvent.ACTION_DOWN:
  49. // 获取起始点的x轴的坐标
  50. startX = event.getX();
  51. break;
  52.  
  53. case MotionEvent.ACTION_MOVE:
  54.  
  55. break;
  56. case MotionEvent.ACTION_UP:
  57. // 向右滑动
  58. if (event.getX() > startX + 100) {
  59. flipper.setInAnimation(this, R.anim.left_in);
  60. flipper.setOutAnimation(this, R.anim.rightf_out);
  61. // 显示前一页
  62. flipper.showPrevious();
  63. }
  64. // 向左边滑动
  65. if (event.getX() + 100 < startX) {
  66. flipper.setInAnimation(this, R.anim.right_in);
  67. flipper.setOutAnimation(this, R.anim.left_out);
  68. // 显示前一页
  69. flipper.showNext();
  70. }
  71. break;
  72. default:
  73. break;
  74. }
  75. return super.onTouchEvent(event);
  76. }
  77.  
  78. }

left_in.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >
  3.  
  4. <translate
  5. android:duration="1000"
  6. android:fromXDelta="-100%p"
  7. android:toXDelta="0" />
  8.  
  9. </set>

left_out.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >
  3.  
  4. <translate
  5. android:duration="1000"
  6. android:fromXDelta="0"
  7. android:toXDelta="-100%p" />
  8.  
  9. </set>

right_in.xml

  1. <?
  2.  
  3. xml version="1.0" encoding="utf-8"?>
  4. <set xmlns:android="http://schemas.android.com/apk/res/android" >
  5.  
  6. <translate
  7. android:duration="1000"
  8. android:fromXDelta="100%p"
  9. android:toXDelta="0" />
  10.  
  11. </set>

rightf_out.xml

  1. <?
  2.  
  3. xml version="1.0" encoding="utf-8"?
  4.  
  5. >
  6. <set xmlns:android="http://schemas.android.com/apk/res/android" >
  7.  
  8. <translate
  9. android:duration="1000"
  10. android:fromXDelta="0"
  11. android:toXDelta="100%p" />
  12.  
  13. </set>

ViewFlipper实现ViewPager的页面切换效果的更多相关文章

  1. jquery mobile页面切换效果(Flip toggle switch)(注:jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  2. Android - FragmentTabHost 与 Fragment 制作页面切换效果

    使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...

  3. Android - TabHost 与 Fragment 制作页面切换效果

    Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...

  4. html5各种页面切换效果和模态对话框

    页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...

  5. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  6. WP8 NavigationInTransition实现页面切换效果

    NavigationInTransition这个是实现页面切换效果,而且没控件来拖,要自己手动写, 将App.xaml.cs中InitializePhoneApplication()函数里的RootF ...

  7. 在uwp仿IOS的页面切换效果

    有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...

  8. [Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. [Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. sql server查看某个表上的触发器

    用企业管理器查看 在某个具体的表上点右键->“所有任务”->“管理触发器”,选择所要查看的触发器

  2. 把WebForm移植到.Net MVC中

    最近写项目,想把以前项目中的几个功能页面移植过来(想偷懒一下),在网上查了很多的资料,多数资料都是直接在MVC中添加WebForm,和我的需求不同.在此非常感谢网友“Jason”给予的帮助,终于搞定了 ...

  3. 计算器Pro应用项目源码

    本计算器实现了一些简单的功能,可能本身还存在一些缺陷,希望大家提建议,能够改进一下. 源码项目我已经上传到源码天堂那里了:http://code.662p.com/list/11_1.html < ...

  4. Windows 8.1设置WIFI共享以及无法启动承载链接解决方案.

    1.设置WIFI共享方法 2.无法启动承载链接解决方案 1.设置WIFI共享方法 Windows8 windows8.1笔记本wifi热点 wifi共享.快速将笔记本或者台式机的网络共享给手机,平板等 ...

  5. 数据层优化-jdbc连接池简述、druid简介

    终于回到既定轨道上了,这一篇讲讲数据库连接池的相关知识,线程池以后有机会再结合项目单独写篇文章(自己给自己挖坑,不知道什么时候能填上),从这一篇文章开始到本阶段结束的文章都会围绕数据库和dao层的优化 ...

  6. ALTER USER - 改变数据库用户帐号

    SYNOPSIS ALTER USER name [ [ WITH ] option [ ... ] ] where option can be: [ ENCRYPTED | UNENCRYPTED ...

  7. VS调试debug的即时窗口的使用

    例:

  8. BZOJ4318: OSU! (概率DP)

    题意:一个串 给出每个字符为1的可能性 否则为0 一段连续的1能获得长度的立方的收益 问总收益的期望 题解:设x_i为到第i位时连续的1的期望长度 由i-1递推来的贡献 如果这一位是0没有贡献 如果是 ...

  9. cc.Node—坐标系统

    cc.Vec21: cc.Vec2 二维向量坐标, 表结构{x: 120, y: 120}; cc.v2(x, y) 创建一个二维向量 cc.p() 创建一个二外向量;2: cc.pSub: 向量相减 ...

  10. node函数assert()详解

    assert.ok() 的别名. const assert = require('assert'); assert(true); // OK assert(1); // OK assert(false ...