玩转Android--UI篇--ViewFlipper(实现切换屏幕效果)

broken · 发表于 2011-9-16 10:54

ViewFlipper是ViewAnimator的子类，在ViewAnimator子类下，还有一个ViewSwitcher，这个ViewSwitcher又有两个子类：TextSwitcher和ImageSwitcher。不过今天还是说说ViewFlipper。

这个控件可以实现屏幕上下、左右的切换效果，而且可以加上动画特效，当然你可以点击就可以切换了，而用手指划屏其实还是点击操作（只针对这个控件）。该控件每次只能显示一屏

公共方法
public bool isAutoStart ()
　　如果视图显示到窗口上时会自动调用 startFlipping()方法，则返回 true

public bool isFlipping()
如果子视图正在切换，则返回 true

public bool setAutoStart (bool autoStart)
设置视图显示到窗口上时是否会自动调用 startFlipping()方法

public bool setFlipInterval (int milliseconds)
视图间切换的时间间隔
参数
milliseconds 毫秒数

public bool startFlipping ()
开始在子视图间定时循环切换

public bool stopFlipping ()
　　停止切换

下面实现一个小例子来看看这个控件到底是怎么用的
main.xml
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"
>
<ViewFlipper
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/viewFipper01">
<include android:id="@+id/layout1" layout="@layout/layout1"/>
<include android:id="@+id/layout2" layout="@layout/layout2"/>
</ViewFlipper>
</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:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/viewFipper01">
<include android:id="@+id/layout1" layout="@layout/layout1"/>
<include android:id="@+id/layout2" layout="@layout/layout2"/>
</ViewFlipper>
</LinearLayout>

复制代码

这里用到了include标签，学过java web的同学很容易理解，这和jsp页面里的include没啥区别。使用include我们可以把一个大的布局文件拆成多个小的文件，使用include，我们可以复用一些常用布局组合
layout1.xml
Xml代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="@drawable/ni_png_0120"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center"
android:text="乌贼"
android:textSize="20pt"
/>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="@drawable/ni_png_0120"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center"
android:text="乌贼"
android:textSize="20pt"
/>
</LinearLayout>

复制代码

layout2.xml
Xml代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="@drawable/ni_png_0115"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center"
android:text="鱼"
android:textSize="20pt">
</TextView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="@drawable/ni_png_0115"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center"
android:text="鱼"
android:textSize="20pt">
</TextView>
</LinearLayout>

复制代码

ViewTestActivity.java
Java代码

package com.view.ViewFlippertest;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;
public class ViewTestActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final ViewFlipper vf = (ViewFlipper)findViewById(R.id.viewFipper01);
vf.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//点击所在区域即可滑动到下一屏幕
vf.showNext();
}
});
//动画切入，从左边进入
vf.setInAnimation(AnimationUtils.loadAnimation(getApplicationContext(),
android.R.anim.slide_in_left));
//动画切出，从右边离开
vf.setOutAnimation(AnimationUtils.loadAnimation(getApplicationContext(),
android.R.anim.slide_out_right));
}
}
package com.view.ViewFlippertest;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;
public class ViewTestActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final ViewFlipper vf = (ViewFlipper)findViewById(R.id.viewFipper01);
vf.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//点击所在区域即可滑动到下一屏幕
vf.showNext();
}
});
//动画切入，从左边进入
vf.setInAnimation(AnimationUtils.loadAnimation(getApplicationContext(),
android.R.anim.slide_in_left));
//动画切出，从右边离开
vf.setOutAnimation(AnimationUtils.loadAnimation(getApplicationContext(),
android.R.anim.slide_out_right));
}
}

复制代码

运行效果如下：

公共方法说明参考：http://www.cnblogs.com/over140/archive/2010/12/06/1897439.html

fl · 发表于 2011-9-16 10:54

只能从左边进入，从右边离开，不能左右双向划？

帐号		自动登录	找回密码
密码			成为会员

玩转Android--UI篇--ViewFlipper(实现切换屏幕效果)

相关帖子