Android开发之ViewFlipper
/*
* Android开发之ViewFlipper
* 北京Android俱乐部群:167839253
*Created on: 2012-7-25
*Author: blueeagle
* Email:liujiaxiang@gmail.com
*/
概述
我们经常在应用中会遇见一种情况:用大拇指左右拨动屏幕,然后屏幕上的内容就发生了变化。这种现象叫做屏幕切换。屏幕切换是指在同一个Activcity内的切换,而并不涉及Activity的改变。
完成这个效果,需要用到Android中的一个类:ViewFlipper。在SDK中,ViewFliper被定义为是一个简单的ViewAnimator,可以实现在两个或多个被添加在其中的View进行动态切换,并且一次只显示一个View。如果需要的话,可以在这些View中按一定的间隔来自动切换。
继续深入查看ViewAnimator这个类。继承与FrameLayout,作用就是为FrameLayout里面的View切换提供动画效果。主要的成员方法如下:
void setInAnimation(Context context, intresourceID)
void setInAnimation(Animation inAnimation)
设置View进入屏幕时候使用的动画
void setOutAnimation(Animation outAnimation)
void setOutAnimation(Context context, intresourceID)
设置View退出屏幕时候使用的动画
void showNext()
显示FrameLayout里面的下一个View。
void showPrevious()
该函数来显示FrameLayout里面的上一个View。
ViewFlipper则为ViewAnimator类的子类,ViewFlipper可以用来指定FrameLayout内多个View之间的切换效果,可以一次指定也可以每次切换的时候都指定单独的效果。深入考察这个类,可以知道其XML属性和主要的成员方法:
XML属性
属性名称
|
描述
|
android:autoStart
|
当设为true时,自动启动动画
此时必须是一个布尔值,属性值为true或false
(对应于全局资源属性R.attr.autoStart)
|
android:flipInterval
|
显示下一个视图的时间间隔
|
成员方法
public bool isAutoStart ()
如果视图显示到窗口上时会自动调用startFlipping()方法,则返回true
public bool isFlipping()
用来判断View切换是否正在进行,如果在进行则返回true
public bool setAutoStart (boolautoStart)
设置视图显示到窗口上时是否会自动调用startFlipping()方法
public bool setFlipInterval (intmilliseconds)
View间切换的时间间隔
参数milliseconds
毫秒数
public bool startFlipping ()
开始在View间定时循环切换
public bool stopFlipping ()
停止切换
一个简单的例子
ViewFlipper是继承至FrameLayout的,所以它是一个Layout里面可以放置多个View。定义一个ViewFlipper,里面包含三个ViewGroup作为示例的三个屏幕,每个ViewGroup中包含一个TextView一个Button和一个ImageView,点击按钮则显示下一个屏幕。代码如下:
在XML文件中如下编写:
<?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"
android:background="#ffffff"
>
<ViewFlipper android:id="@+id/myViewFlipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<TextView android:id="@+id/myTextView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
>
</TextView>
<ImageView
android:id="@+id/myImageView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/digital_1" >
</ImageView>
<Button android:text="Next1"
android:id="@+id/myButton01"
android:textSize="18px"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<TextView android:id="@+id/myTextView02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
>
</TextView>
<ImageView
android:id="@+id/myImageView02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/digital_2" >
</ImageView>
<Button android:text="Next2"
android:id="@+id/myButton02"
android:textSize="18px"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<TextView android:id="@+id/myTextView03"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
>
</TextView>
<ImageView
android:id="@+id/myImageView03"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/digital_3" >
</ImageView>
<Button android:text="Next3"
android:id="@+id/myButton03"
android:textSize="18px"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</ViewFlipper>
</LinearLayout>
在JAVA文件中如下编写:
public class ViewFlipperDemoActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button myButtonNext1 = (Button)findViewById(R.id.myButton01);
Button myButtonNext2 = (Button)findViewById(R.id.myButton02);
Button myButtonNext3 = (Button)findViewById(R.id.myButton03);
myButtonNext1.setOnClickListener(newView.OnClickListener() {
public void onClick(View view) {
ViewFlipper myViewFlipper =(ViewFlipper) findViewById(R.id.myViewFlipper);
myViewFlipper.setAnimation(AnimationUtils.loadAnimation(view.getContext(),android.R.anim.slide_in_left));
myViewFlipper.showNext();
}
});
myButtonNext2.setOnClickListener(newView.OnClickListener() {
public void onClick(View view) {
ViewFlipper myViewFlipper =(ViewFlipper) findViewById(R.id.myViewFlipper);
myViewFlipper.setAnimation(AnimationUtils.loadAnimation(view.getContext(),android.R.anim.slide_in_left));
myViewFlipper.showNext();
}
});
myButtonNext3.setOnClickListener(newView.OnClickListener() {
public void onClick(View view) {
ViewFlipper myViewFlipper =(ViewFlipper) findViewById(R.id.myViewFlipper);
myViewFlipper.setAnimation(AnimationUtils.loadAnimation(view.getContext(),android.R.anim.slide_in_left));
myViewFlipper.showNext();
}
});
}
}
值得注意的是当ViewFlipper到最后一屏的时候,继续调用showNext()函数,则会返回去调用第一个屏幕。这也是ViewFlipper比较智能的地方。
效果如下图所示:下图为点击第一个屏上的按钮后第二屏正在出现的情形。
用触摸代替按钮
我们在应用程序中,很少遇见用按钮来实现左右切换屏幕的,都是用手指去控制左右切换屏幕,那么这种情况又该如何处理呢?
我们只需要将上述XML文件中的按钮去掉。并给LinearLayout加一个id,用来触发触屏事件。
实现一个OnTouchListener接口,然后添加代码:
LinearLayout myLinearLayoutMain =(LinearLayout) findViewById(R.id.myLinearLayoutMain);
myLinearLayoutMain.setOnTouchListener((OnTouchListener) this);
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction())
{
case MotionEvent.ACTION_DOWN:
{
downXValue =event.getX();
break;
}
case MotionEvent.ACTION_UP:
{
float currentX =event.getX();
if (downXValue <currentX)
{
ViewFlipper myViewFlipper = (ViewFlipper) findViewById(R.id.myViewFlipper);
myViewFlipper.setAnimation(AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right ));
myViewFlipper.showPrevious();
}
if (downXValue >currentX)
{
ViewFlipper myViewFlipper = (ViewFlipper) findViewById(R.id.myViewFlipper);
myViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right));
myViewFlipper.showNext();
}
break;
}
}
return true;
}
这样就可以实现用手指左右上下滑动,从而得到下一个或者上一个屏的操作。其具体表现在线判断手指初始触屏的位置,再判断手指离开屏的位置,根据位置坐标的上下左右对应关系来判断手指移动的方向,从而做出切屏的操作。
更加复杂的操作
我们在做切屏的时候,还可以利用类SimpleOnGestureListener或者是实现OnGestureListener接口来进行对手势的操作。同样,我们还可以利用自定义动画来做为切屏时候的效果。可以让切屏的动画按自己想要的方式来进行。
首先,我们先写几个动画的XML文件:
1、flyinleft.xml
2、flyoutleft
3、flyinright.xml
4、flyoutright.xml
具体动画效果,请参照自定义动画去实现。
下面我们用实现OnGestureListener接口来实现用手势切屏的效果。
1.首先需要定义GestureDetector myGestureDetector;
2.然后New出来myGestureDetector = new GestureDetector(this);
3.实现OnGestureListener接口,重点是onFling函数。
onFling函数代码如下:
public boolean onFling(MotionEvente1, MotionEvent e2, float velocityX,
float velocityY) {
ViewFlipper myViewFlipper =(ViewFlipper) findViewById(R.id.myViewFlipper);
if(e1.getX() >e2.getX()+10) { //向左划超过10px
myViewFlipper.setInAnimation(getApplicationContext(),R.anim.flyoutleft);
myViewFlipper.showNext();
}
else if(e1.getX() <e2.getX()+10) { //向右划超过10px
myViewFlipper.setInAnimation(getApplicationContext(),R.anim.flyinleft);
myViewFlipper.showPrevious();
}
else {
return false;
}
return true;
}
函数参数说明:
e1:第1个ACTION_DOWNMotionEvent
e2:最后一个ACTION_MOVEMotionEvent
velocityX:X轴上的移动速度,像素/秒
velocityY:Y轴上的移动速度,像素/秒
最后不要忘记:
@Override
public boolean onTouchEvent(MotionEventevent) {
returnthis.detector.onTouchEvent(event);
}
小结:
至此ViewFlipper的相关内容我们就学习完了。当然我们还可以进行更深一步的学习。比如我们可以对接口OnDoubleTapListener进行实现。
实现接口的函数public booleanonDoubleTap(MotionEvent e)
在双击的时候触发,比如,如果我们使用了myViewFlipper.startFlipping();图片将不停在切换,但是如果我们双击屏幕,将停止不停切换,变为正常的情况下,用手势或者按钮切换,当我们再次双击的时候,又不停地切换了。那么这个函数就应该写成如下形式:
publicboolean onDoubleTap(MotionEvent e) {
if(mViewFlipper.isFlipping()) {
mViewFlipper.stopFlipping();
}else {
mViewFlipper.startFlipping();
}
return true;
}
分享到:
相关推荐
本文实例讲述了Android开发之ViewFlipper自动播放图片功能实现方法。分享给大家供大家参考,具体如下: 简介: 1.ViewFlipper继承了ViewAnimator 可以调用addView()添加组件 2.ViewAnimator与AdapterViewFlipper类似...
Android使用ViewFlipper实现Switch。开关部分通过自定义控件继承ViewFlipper来实现,开关动画通过anim文件来实现。
android开发中使用ActivtiyGroup和ViewFlipper实现多个Activity之间的滑屏切换,用GestureDetector实现手势滑动
Android GridView + ViewFlipper布局界面,模仿“机锋市场.zip项目安卓应用源码下载Android GridView + ViewFlipper布局界面,模仿“机锋市场.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习...
手机开发的时候在应用第一次运行的时候都有一个指引页面,这个指引页面通常都是有几张图片组成来告诉用户如何操作,此例子就是以五张图片为例,利用viewflipper来实现图片的左右滑动
Android应用源码之ViewFlipper2.zip项目安卓应用源码下载Android应用源码之ViewFlipper2.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
Android应用源码之ViewFlipper1.zip项目安卓应用源码下载Android应用源码之ViewFlipper1.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
Android应用源码之ViewFlipper水平滑动.zip项目安卓应用源码下载Android应用源码之ViewFlipper水平滑动.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
Android 安卓开发应用源码 参考学习使用
本文实例讲述了Android中使用ViewFlipper进行手势切换的方法,分享给大家供大家参考。具体实现步骤如下: 首先在layout的xml文件中定义一个ViewFlipper: 代码如下:<?xml version=”1.0″ encoding=”utf-8″?&...
Android 应用项目开发源码 参考和学习使用
Android应用源码,安卓学习设计应用源代码,可供学习及设计参考。
Android移动开发实例包002是学习Android开发的利器,包含:1、条形码、二维码扫描、生成Demo 2、android-整体UI设计-滑动导航栏+滚动页面 3、CityWeather 4、FileManager 5、MobileMap 6、MusicPlayer 7、MyContacts...
Android应用源码开发Demo,主要用于毕业设计学习。
Android项目ActivityGroup + GridView + ViewFlipper 实现选项卡 本项目是一个基于Android平台的应用程序,它实现了选项卡功能。通过结合ActivityGroup、GridView和ViewFlipper组件,我们能够创建一个流畅、直观的...
基于android的,上下轮播显示消息的控件,android自带的ViewFliper不支持特别多的消息需要轮播,特别是在列表中,会显著卡顿。重新实现了上下轮播功能
Android--开发--ActivityGroup + GridView + ViewFlipper 实现选项卡
有一些场景,我们需要向用户...比如我们正在开发一个看漫画的应用,可能就需要向用户展示一张一张的漫画图片,用户使用手指滑动屏幕,可以在前一幅漫画和后一幅漫画之间切换。这个时候ViewFlipper就是一个很好的选择
ViewFlipper的使用,仿淘宝头条垂直滚动广告条,供大家参考,具体内容如下 学习,学习,学以致用 ViewFlipper是安卓自带的控件,很多人可能很少知道这个控件,这个控件很简单,也很好理解,能不能用上实战就看你们...