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.csdn.net/detail/u012221316/9391695