【Android 复习】:Android之ViewFlipper(一)

【Android 复习】:Android之ViewFlipper(一)

屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面;一个个性化设置页面。

【Android 复习】:Android之ViewFlipper(一)

通过查看Android API文档可以发现,有个android.widget.ViewAnimator类继承至FrameLayout,ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。该类有如下几个和动画相关的函数:
1. setInAnimation:设置View进入屏幕时候使用的动画,该函数有两个版本,一个接受单个参数,类型为android.view.animation.Animation;一个接受两个参数,类型为Context和int,分别为Context对象和定义Animation的resourceID。
  • setOutAnimation: 设置View退出屏幕时候使用的动画,参数setInAnimation函数一样。
  • showNext: 调用该函数来显示FrameLayout里面的下一个View。
  • showPrevious: 调用该函数来显示FrameLayout里面的上一个View。
一般不直接使用ViewAnimator而是使用它的两个子类ViewFlipper和ViewSwitcher。ViewFlipper可以用来指定FrameLayout内多个View之间的切换效果,可以一次指定也可以每次切换的时候都指定单独的效果。该类额外提供了如下几个函数:
  • isFlipping: 用来判断View切换是否正在进行
  • setFilpInterval:设置View之间切换的时间间隔
  • startFlipping:使用上面设置的时间间隔来开始切换所有的View,切换会循环进行
  • stopFlipping: 停止View切换
ViewSwitcher 顾名思义Switcher特指在两个View之间切换。可以通过该类指定一个ViewSwitcher.ViewFactory 工程类来创建这两个View。该类也具有两个子类ImageSwitcher、TextSwitcher分别用于图片和文本切换。
在教程中通过示例介绍ViewFlipper 的使用,其他的使用方式是类似的。详细信息可以参考文档:
ViewFlipper示例
记住,ViewFlipper是继承至FrameLayout的,所以它是一个Layout里面可以放置多个View。在示例中定义一个ViewFlipper,里面包含三个ViewGroup作为示例的三个屏幕,每个ViewGroup中包含一个按钮和一张图片,点击按钮则显示下一个屏幕。代码如下(reslayoutmain.xml):
<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/details"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:flipInterval="1000"
    android:inAnimation="@anim/push_left_in"
    android:outAnimation="@anim/push_left_out"
    android:persistentDrawingCache="animation" >

</ViewFlipper>

ViewFlipper中的一系列展示页面(reslayoutview_1.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/Button_next3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="Next"
        android:text="Next" >
    </Button>

    <ImageView
        android:id="@+id/image3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_14" >
    </ImageView>

</LinearLayout>

很简单,在Layout定义中指定动画的相关属性就可以了,通过persistentDrawingCache指定缓存策略;flipInterval指定每个View动画之间的时间间隔;inAnimation和outAnimation分别指定View进出使用的动画效果。动画效果定义如下:

resanimpush_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> 

resanimpush_left_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="0.0"    
    android:duration="500" />   
</set>

Activity代码如下(srccccTestActivity.java)

public class MainActivity extends Activity {
    private ViewFlipper mViewFlipper;

    private LayoutInflater inflater;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        inflater = (LayoutInflater) this
                .getSystemService(LAYOUT_INFLATER_SERVICE);
        mViewFlipper = (ViewFlipper) findViewById(R.id.details);

        View view1 = inflater.inflate(R.layout.view_1, null);
        View view2 = inflater.inflate(R.layout.view_2, null);
        View view3 = inflater.inflate(R.layout.view_3, null);
        View view4 = inflater.inflate(R.layout.view_4, null);

        mViewFlipper.addView(view1);
        mViewFlipper.addView(view2);
        mViewFlipper.addView(view3);
        mViewFlipper.addView(view4);
    }

    public void Next(View view) {
        mViewFlipper.showNext();
    }

}

效果图:

【Android 复习】:Android之ViewFlipper(一)

源代码:http://pan.baidu.com/share/link?shareid=960547067&uk=3909095065

本文参考:http://blog.sina.com.cn/s/blog_78e3ae430100py4p.html#