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 从左边进入的动画 对应着手势 向右边滑 ``
<?xml version="1.0" encoding="utf-8"?>
<!--图片进入的位移动画 从左边向右移动-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="-100%"
android:toXDelta="0" />
right_out 从右边退出的动画 对应着手势向右边滑
<?xml version="1.0" encoding="utf-8"?>
<!--图片退出的动画，从左边向右边移动-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="0"
android:toXDelta="100%" />
right_in 从右边进入的动画 对应着向左滑
<?xml version="1.0" encoding="utf-8"?>
<!--图片进入的位移动画 从右边向左移动-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="100%"
android:toXDelta="0" />
left_out 从左边退出的动画 对应着向左滑
<?xml version="1.0" encoding="utf-8"?>
<!--图片退出的动画 从右边向左边移动-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="0%"
android:toXDelta="-100%" />
shape 小圆点
这些小圆点用来指示图片的进图，一共有两种格式
- 没有被选中的状态
- 选中状态
Note: shape xml 文档 放在 drawable 文件夹下
dot_selected 选中状态的小圆点
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!--填充色-->
<solid android:color="#8F8F8F" />
<!--小圆点的边框-->
<stroke
android:width="1dp"
android:color="#000000" />
<!--小圆点的大小-->
<size
android:width="8dp"
android:height="8dp" />
<corners android:radius="45dp" />
</shape>
dot_unselected 没有选中的状态
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000000" />
<size
android:width="8dp"
android:height="8dp" />
<corners android:radius="45dp" />
</shape>
代码
为了代码可读性更好一些，将进行分割为几部分
- 全局变量
- 初始化代码
- 手势操作
用到的全部变量
/************
* 一些全局变量
***********/
private ViewFlipper flipper; //ViewFlipper 对象
private List<Integer> id_list; //图片Id的集合，为了偷懒在上一个Activity总存储成为了静态
private LinearLayout llDots; //小点点的父容器
private List<ImageView> dotList; //所有小点点的集合
/***********
* 手势相关的变量
***********/
private GestureDetector detector; //手势监听器
private int currentId; //当前图片的索引
初始化方法
/**
* 初始化标识图片位置的小圆点
*/
private void initDots() {
dotList = new ArrayList<ImageView>();
//根据图片的数量来设置小圆点的数量
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;
}
}
源码下载
http://git.oschina.net/ShareKnowledge/AndroidViewFlipperDemo
