ViewFlipper界面自动切换和滑动切换

ViewFlipper

public class ViewFlipper
   
    extends 
    ViewAnimator
   

Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

   ViewFlipper类是ViewAnimator类的一个简单的实现子类，其功能是切换添加到其中的两个或多个view对象。同一时刻只会显示其中的一个view。如果需要，也可以把它设置成，按着一定规律间隔自动在每个子对象中跳转。

       比较它和ViewSwitcher的异同；官方文档中关于ViewSwitcher的说明是：ViewAnimator that switches between two views, and has a factory from which these views are created. You can either use the factory to create the views, or add them yourself. A ViewSwitcher can only have two child views, of which only one is shown at a time.

      大意为：ViewSwitcher是在两个views之间进行切换的ViewAnimator，并且有一个能够创建views的工厂（factory）。使用时可以使用工厂创建views，也可自己添加他们。一个ViewSwitcher只能拥有两个子views，并且同一时刻只能有一个显示。

      由此可见：ViewFlipper和ViewSwitcher的一大不同就是它们可以含有的子view数，ViewSwitcher（包括它的子类ImageSwitcher和TextSwitcher）只能含有两个子view，而ViewFlipper可以含有两个及以上个子view。

      接着，继续学习ViewFlipper主要的成员方法：

 

     

      boolean
     

     

      isAutoStart()
     
     

      Returns
 true if this view automatically calls 
      startFlipping() when
 it becomes attached to a window.
     
     

      如果当ViewFlipper添加到窗口时，它会自动调用startFlipping()方法，则返回true。
     

     

      boolean
     

     

      isFlipping()
     
     

      Returns
 true if the child views are flipping.
     
     

      如果子视图正在切换（
      flipping）则返回true
     

     

      void
     

     

      onInitializeAccessibilityEvent(
      AccessibilityEvent event)
     
     

      Initializes
 an 
      AccessibilityEvent with
 information about this View which is the event source.
     
     

      不明白
     

     

      void
     

     

      onInitializeAccessibilityNodeInfo(
      AccessibilityNodeInfo info)
     
     

      Initializes
 an 
      AccessibilityNodeInfo with
 information about this view.
     
     

      不明白
     

     

      void
     

     

      setAutoStart(boolean
 autoStart)
     
     

      Set if this view automatically calls 
      startFlipping() when
 it becomes attached to a window.
     
     

      设置
      当ViewFlipper添加到窗口时，是否会自动调用startFlipping()方法
     

     

      void
     

     

      setFlipInterval(int
 milliseconds)
     
     

      How long to wait before flipping to the next view
     
     

      切换到下一视图的时间间隔（单位ms）
     

     

      void
     

     

      startFlipping()
     
     

      Start
 a timer to cycle through child views
     
     

      启动一个定时器来循环播放子视图
     

     

      void
     

     

      stopFlipping()
     
     

      No
 more flips
     
     

      停止切换
     
此外，还有从它的父类ViewAnimator继承的一些方法，常用的有：

          setInAnimation(Context context, int resId):设置进入动画
          setOutAnimation(Context context, int resId)：设置移出动画
          showPrevious(); 显示ViewFlipper中的前一个view对象
 

            showNext()：显示ViewFlipper中的下一个view对象。
 
 

   
 
 

  ViewFlipper的使用示例：
 
 

  1.静态用法：直接把要实现的切换效果的view放在布局中的ViewFlipper内，并通过xml属性来设置切换的效果。ViewFlipper里放置的views既可以是单个的控件比如ImageView，也可以是一个复杂的控件容器比如一个LinearLayout布局。
 
 

  在xml中常需设置的属性主要有：
 
 

     android:autoStart="true"
        android:flipInterval="2000"
        android:inAnimation="@android:anim/slide_in_left"
        android:outAnimation="@android:anim/slide_out_right" 
 
 

  分别对应着：是否自动播放，间隔，进入动画，移出动画。最重要的应该算是动画效果的设定，可根据需要设置自己想要的效果。这里直接引用的是系统自带的动画。
 
 

   
 
 

  
  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:textSize="18sp"
        android:text="ViewFlipper测试" />
    
      <ViewFlipper 
       <span style="color:#cc0000;"> android:autoStart="true"
        android:flipInterval="2000"
        android:inAnimation="@android:anim/slide_in_left"
        android:outAnimation="@android:anim/slide_out_right"</span>
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/flip"> 
        
          <LinearLayout 
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:gravity="center_horizontal"
              android:background="#556677"
              android:orientation="vertical"                                        
              >
               <ImageView 
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:background="@drawable/ic_launcher"/>
              <TextView
                 android:layout_marginTop="20dp"
                 android:layout_width="match_parent"
                 android:gravity="center"
                 android:layout_height="wrap_content"
                 android:text="这是把一个布局作为一个子view"/>
                                  
          </LinearLayout>             
          
             <ImageView 
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:background="@drawable/img4"/>

             <ImageView
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:background="@drawable/img1" />

             <ImageView
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:background="@drawable/img2" />

             <ImageView
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:background="@drawable/img3" />
 
    </ViewFlipper>

</LinearLayout>
  通过以上xml文件，不许在代码中做任何处理，就可以实现简单的切换效果。
 
 

  2.动态添加页面，可以让使用更加灵活。则只需在xml中添加一个ViewFlipper控件，再在程序中用代码处理即可。实现代码如下:
 
 

  xml主布局：
 
 

  
  
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    
    <ViewFlipper 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/flip"                
        >
        
    </ViewFlipper>

</LinearLayout><strong>
</strong>
  3个动态加载的示意布局：layout_view1，layout_view2，layout_view3，内容基本相同：其一如下：

 
 

  
  
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="#ff0000" 
    >
    
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_marginTop="40dp"
        android:gravity="center"
        android:textStyle="bold"
        android:background="#ffffff"
        android:text="我是界面一，我可以根据需要修改"
        
        
        />
    

</LinearLayout>
主程序代码：
 
 

  
  
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ViewFlipper;

public class AddViewInActivity extends Activity {

	ViewFlipper viewFlipper;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.addview_in_code);
		addViews();
		viewFlipper.setFlipInterval(2000);//设置时间间隔
		viewFlipper.setInAnimation(this, R.anim.abc_slide_in_top);//使用系统自带的进入动画
		viewFlipper.setOutAnimation(this, R.anim.abc_slide_out_bottom);//使用系统自带的滑出动画
		viewFlipper.startFlipping();
	}
	/**
	 * 把views添加到ViewFlipper中
	 */
	void addViews(){
		viewFlipper=(ViewFlipper) findViewById(R.id.flip);
		View v1=getLayoutInflater().inflate(R.layout.layout_view1, null);
		View v2=getLayoutInflater().inflate(R.layout.layout_view2, null);
		View v3=getLayoutInflater().inflate(R.layout.layout_view3, null);
		viewFlipper.addView(v1);
		viewFlipper.addView(v2);
		viewFlipper.addView(v3);
	}
	
	
} 
     以上两种都是页面按照一定间隔规律自动跳转，同样，还可以实现手指滑动跳转。内容基本差不多，不同就是多了一个触摸监听，来判断是左滑还是右滑。
 
 

  布局文件activity_flip_with_touch.xml如下：
 
 

  
  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:textSize="18sp"
        android:text="ViewFlipper测试" />
    
      <ViewFlipper 
        android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
       >                                
             <Button 
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:text="界面1"
                 android:textColor="#ffffff"
                 android:clickable="false"
                 android:background="@drawable/img4"/>

             <Button
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:text="界面2"
                 android:textColor="#ffffff"
                 android:clickable="false"
                 android:background="@drawable/img1" />

             <Button
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:text="界面3"
                 android:textColor="#ffffff"
                 android:clickable="false"
                 android:background="@drawable/img2" />

             <Button
                 android:text="界面4"
                 android:textColor="#ffffff"
                 android:clickable="false"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:background="@drawable/img3" />
 
    </ViewFlipper>
  
     <Button 
          
             android:onClick="goLast"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="前一页"                   
          />

      <Button 
          
             android:onClick="goNext"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="后一页"                   
          />
</LinearLayout>
  
程序代码：
 
 

  

 
 

  
  
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ViewFlipper;

public class FlipWithTouchActivity extends Activity {

	ViewFlipper viewFlipper;
	float lastX;
	float currentX;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_flip_with_touch);
		
		viewFlipper=(ViewFlipper) findViewById(R.id.flipper);
		
	}
	
	/**
	 * 监听触摸事件，判断是如何滑动控件的
	 */
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		switch(event.getAction()){	
		case MotionEvent.ACTION_DOWN:
			lastX=event.getX();
			break;
		case MotionEvent.ACTION_MOVE:
			break;
		case MotionEvent.ACTION_UP:
			currentX=event.getX();
			if(currentX-lastX>50){//向右滑动
				viewFlipper.setInAnimation(this, R.anim.left_in);
				viewFlipper.setOutAnimation(this, R.anim.left_out);
				viewFlipper.showPrevious();	
			}
			
			if(lastX-currentX>50){//向左滑动
				viewFlipper.setInAnimation(this, R.anim.left_in);
				viewFlipper.setOutAnimation(this, R.anim.right_out);
				viewFlipper.showNext();
	             
			}
			break;
		}		
		return super.onTouchEvent(event);
			
	}
	
	public void goLast(View view){//回到前一页
		
	    viewFlipper.setInAnimation(this, R.anim.left_in);
		viewFlipper.setOutAnimation(this, R.anim.left_out);
		viewFlipper.showPrevious();	
	}
	
	public void goNext(View view){//跳到下一页
		
		viewFlipper.setInAnimation(this, R.anim.right_in);
		viewFlipper.setOutAnimation(this, R.anim.right_out);
		viewFlipper.showNext();
	}
	
	
}
  
源码地址:
  http://download.youkuaiyun.com/detail/u012221316/9391695