Android ViewFlipper

Android ViewFlipper

Overview

用于两个或更多的View之间的切换，在同一时间内只有一个View将被显示。同时我们也可以让其自动切换，根据我们给定的时间间隔，为了不让其切换的效果十分生硬，我们也为为其定义进入动画和退出动画。常用的方法setFlipInterval 设置每一个View之间切换的时间的间隔setInAnimation 设置View 进入时候的动画setOutAnimation 设置View退出时候的动画startFlipping 开始播放

一个Demo

下面我们将一步步的实现上面的功能涉及到的知识点动画(这里使用了补间动画中的 位移动画)Shape-drawable 资源 用来画小圆点手势，用来监听上一页下一页的操作用到的素材9张图片因为本篇的主要的内容是讲解ViewFlipper，所以第一个页面的GridView控件的使用这里就不在赘述,主要是为了功能的完善加上去的。

使用到的动画

这里使用了4个补间动画-位移动画从左边进入的动画 对应着手势 向右边滑从右边退出的动画 对应着手势向右边滑从右边进入的动画 对应着向左滑从左边退出的动画 对应着向左滑Note : 这些动画放在了 ​​res​​​ 目录下​​anim​​​目录中，如果没有此目录需要手动创建，关于动画这里不再赘述，不太了解的可以参考​​菜鸟教程​​ 。

left_in.xml 从左边进入的动画 对应着手势 向右边滑 ``

right_out 从右边退出的动画 对应着手势向右边滑

right_in 从右边进入的动画 对应着向左滑

left_out 从左边退出的动画 对应着向左滑

shape 小圆点

这些小圆点用来指示图片的进图，一共有两种格式没有被选中的状态选中状态Note: shape xml 文档 放在 drawable 文件夹下

dot_selected 选中状态的小圆点

dot_unselected 没有选中的状态

代码

为了代码可读性更好一些，将进行分割为几部分全局变量初始化代码手势操作

用到的全部变量

/************ * 一些全局变量 ***********/private ViewFlipper flipper; //ViewFlipper 对象private List id_list; //图片Id的集合，为了偷懒在上一个Activity总存储成为了静态private LinearLayout llDots; //小点点的父容器private List dotList; //所有小点点的集合/*********** * 手势相关的变量 ***********/private GestureDetector detector; //手势-private int currentId; //当前图片的索引

初始化方法

/** * 初始化标识图片位置的小圆点 */ private void initDots() { dotList = new ArrayList(); //根据图片的数量来设置小圆点的数量 for (int i = 0; i < id_list.size(); i++) { ImageView iv = new ImageView(this); //设置包裹内容 LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(-2, -2); //设置Margin lp.setMargins(3, 3, 3, 3); iv.setLayoutParams(lp); iv.setImageResource(R.drawable.dot_unselected); //添加到dot的父容器中 llDots.addView(iv); dotList.add(iv); } } /** * 初始化轮播的视图 */ private void initImageView() { //根据图片的数量来设置小圆点的数量 for (int i = 0; i < id_list.size(); i++) { ImageView iv = new ImageView(this); //设置包裹内容 LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(-1, -1); //设置Margin iv.setLayoutParams(lp); iv.setScaleType(ImageView.ScaleType.FIT_XY); iv.setImageResource(id_list.get(i)); //添加到dot的父容器中 flipper.addView(iv); } } /** * 初始化手势 */ private void initGesture() { detector = new GestureDetector(this, new MySimpleOnGestureListener()); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_album); id_list = HomeActivity.ID_List; initFindView(); initDots(); initImageView(); initGesture(); //获取到上一个Activity传递过来的参数 Intent intent = this.getIntent(); currentId = intent.getIntExtra("currentId", -1); //设置当前选中的点 if (currentId != -1) { flipper.setDisplayedChild(currentId); dotList.get(currentId).setImageResource(R.drawable.dot_selected); } }

手势操作的代码

class MySimpleOnGestureListener extends GestureDetector.SimpleOnGestureListener { @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { //滑动距离的绝对值 int distance = (int) Math.abs(e1.getX() - e2.getX()); //证明是向左滑动,查看下一个图片 if (e1.getX() > e2.getX()) { if (distance > 300) { //设置一下相关的动画 flipper.setInAnimation(AlbumActivity.this, R.anim.right_in); flipper.setOutAnimation(AlbumActivity.this, R.anim.left_out); //显示下一个View flipper.showNext(); //将上一个选中的dot取消 dotList.get(currentId).setImageResource(R.drawable.dot_unselected); //计算下一张图片应该选中的小圆点 currentId = (currentId + 1) == id_list.size() ? 0 : currentId + 1; //选中当前的dot dotList.get(currentId).setImageResource(R.drawable.dot_selected); } } else { //证明是向右滑动,查看下一个图片 if (distance > 300) { //设置一下相关的动画 flipper.setInAnimation(AlbumActivity.this, R.anim.left_in); flipper.setOutAnimation(AlbumActivity.this, R.anim.right_out); //显示上一个视图 flipper.showPrevious(); //将上一个选中的dot取消 dotList.get(currentId).setImageResource(R.drawable.dot_unselected); //计算下一张图片应该选中的小圆点 currentId = (currentId - 1) == -1 ? id_list.size() - 1 : currentId - 1; //选中当前的dot dotList.get(currentId).setImageResource(R.drawable.dot_selected); } } return true; }}

源码-

如果本博客损害了您的相关权益，请及时联系我，我将妥善处理。​​​​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。