呵呵,最近一直在忙linux,把ViewFlipper应用(二)都落下一边了,先来回顾下http://blog.csdn.net/ch_984326013/article/details/6666302(一)我们完成之后交给大家的两点疑问:
(1)、该项目,我们实现的是单击按钮显示下一张图片或上一张图片,这里我就要问了:“我们可否通过手势在屏幕上的移动来进行图片的切换呢?”;
(2)、该项目,我们实现了三张图片的切换,但是图片好多的话。我们这么在布局中使用图片,也不是一中明智之举。那么,我们该怎样动态加载几十张甚至几百张图片呢?
下面,我们就根据一个实例来解决以上两个问题,首先我们先看下该项目的运行效果:
以上三张截图,分别是运行项目效果、运行项目之后鼠标向右滑动及运行项目之后鼠标向左滑动的效果图。
下面,来开分析该项目的具体开发过程。
1、创建一个Android项目,命名为ViewFlipperExample。
2、准备图片资源,在这里我准备了8张图片,把它们存放与drawable-mdpi目录中,这里大家可以自己准备图片。
3、在res目录下新建一个anim目录,在里面编写四个动画,动画内容具体如下:
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.0"
- android:toAlpha="1.0"
- android:duration="500" />
- </set>
<?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.0"
android:toAlpha="1.0"
android:duration="500" />
</set>
push_left_out.xml:
- <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.0"
- android:duration="500" />
- </set>
<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.0"
android:duration="500" />
</set>
push_right_in.xml:
- <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.0"
- android:toAlpha="1.0"
- android:duration="500" />
- </set>
<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.0"
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="1.0"
- android:duration="500" />
- </set>
<?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="1.0"
android:duration="500" />
</set>
4、编写主布局文件,在这里不多讲,具体代码如下:
- <?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/myViewFlipper"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"/>
- </LinearLayout>
<?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/myViewFlipper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>
5、修改主程序代码,在这里我们实现了GestureDetector.OnGestureListener接口,要实现手势滑动,这个接口必须实现。在这里也不扯淡了,看代码吧:
- public class Demo extends Activity implements android.view.GestureDetector.OnGestureListener{
- //声明手势识别
- GestureDetector gd;
- //声明ViewFlipper控件
- ViewFlipper vf;
- //声明图片,这里可以声明多张图片,以供使用
- int[] imageID={R.drawable.gallery_photo_1,
- R.drawable.gallery_photo_2,
- R.drawable.gallery_photo_3,
- R.drawable.gallery_photo_4,
- R.drawable.gallery_photo_5,
- R.drawable.gallery_photo_6,
- R.drawable.gallery_photo_7,
- R.drawable.gallery_photo_8,
- };
- //索引值
- int index=0;
- int flag=0;
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- vf=(ViewFlipper)findViewById(R.id.myViewFlipper);
- LayoutParams lp=new LayoutParams(100, 150);
- //对imageID执行循环,获取ImageView对象,并把该对象添加到ViewFlipper中
- for(int i=0;i<imageID.length;i++){
- ImageView image=new ImageView(this);
- image.setImageResource(imageID[i]);
- vf.addView(image, index, lp);
- index++;
- }
- gd = new GestureDetector(this);
- }
- @Override
- public boolean onTouchEvent(MotionEvent event) {
- // TODO Auto-generated method stub
- return this.gd.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) {
- // TODO Auto-generated method stub
- //向左滑动
- if(e1.getX()-e2.getX()>10){
- vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
- vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
- //判断是否到最后一张
- if (flag % 8 == 0)
- this.vf.showPrevious();
- else
- this.vf.showNext();
- flag = (flag + 1) % 8;
- }
- //向右滑向
- else if(e1.getX()-e2.getX()<-10){
- vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
- vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
- //判断是否是第一张
- if(flag%8==0){
- vf.showNext();
- }
- else{
- vf.showPrevious();
- }
- flag = (flag + 1) % 8;
- }
- 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;
- }
- }
public class Demo extends Activity implements android.view.GestureDetector.OnGestureListener{
//声明手势识别
GestureDetector gd;
//声明ViewFlipper控件
ViewFlipper vf;
//声明图片,这里可以声明多张图片,以供使用
int[] imageID={R.drawable.gallery_photo_1,
R.drawable.gallery_photo_2,
R.drawable.gallery_photo_3,
R.drawable.gallery_photo_4,
R.drawable.gallery_photo_5,
R.drawable.gallery_photo_6,
R.drawable.gallery_photo_7,
R.drawable.gallery_photo_8,
};
//索引值
int index=0;
int flag=0;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
vf=(ViewFlipper)findViewById(R.id.myViewFlipper);
LayoutParams lp=new LayoutParams(100, 150);
//对imageID执行循环,获取ImageView对象,并把该对象添加到ViewFlipper中
for(int i=0;i<imageID.length;i++){
ImageView image=new ImageView(this);
image.setImageResource(imageID[i]);
vf.addView(image, index, lp);
index++;
}
gd = new GestureDetector(this);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return this.gd.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) {
// TODO Auto-generated method stub
//向左滑动
if(e1.getX()-e2.getX()>10){
vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
//判断是否到最后一张
if (flag % 8 == 0)
this.vf.showPrevious();
else
this.vf.showNext();
flag = (flag + 1) % 8;
}
//向右滑向
else if(e1.getX()-e2.getX()<-10){
vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
//判断是否是第一张
if(flag%8==0){
vf.showNext();
}
else{
vf.showPrevious();
}
flag = (flag + 1) % 8;
}
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;
}
}
6、到这里,我们的项目就开发完全了。运行该项目,便会得到以上效果!