ViewFlipper使用詳解

啟艦發表於2014-09-26

前言:今天,試用期績效考核通過了,從C++轉到android還是很有難度的,這幾個月來雖然一直在學習,但相比他們還是差很多,沒關係,沒有人是一下生就會的,知識總是慢慢積累出來的,只是不停下來,總有一天會到達彼岸,我相信,我能行!


夢想還是要有的,萬一實現了呢——阿里IPO


一、基本實現

ViewFlipper是一個切換控制元件,一般用於圖片的切換,當然它是可以新增View的,而不限定只用於ImageView,當然我們也可以自定義View,只是我們經常利用ViewFlipper來實現的是ImageView的切換,如果切換自定義的View,倒還不如使用ViewPager來做。

下面先看一下實現的效果:(實現四張圖片的自動切換)


1、在XML中的佈局:

<RelativeLayout 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" >

    <ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="10dp"
        android:flipInterval="2000" >
        <ImageView 
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_1"/>
        <ImageView 
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_2"/>
        <ImageView 
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_3"/>
        <ImageView 
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_4"/>
    </ViewFlipper>

</RelativeLayout>
在ViewFlipper中,加入四個ImageView控制元件,其中flipInterval屬性是用來設定多少毫秒自動顯示下一個示圖;

2、JAVA程式碼:

public class MainActivity extends Activity {

	ViewFlipper flipper;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        flipper = (ViewFlipper) findViewById(R.id.flipper);
		flipper.startFlipping();
    }
    
}
這部分程式碼非常簡單,直接呼叫ViewFlipper的startFlipping()函式,開始滑動。
可見,ViewFlipper使用起來非常簡單,直接在xml中布好以後,直接就能用了。

原始碼在文章底部提供下載;


二、高階實現——實現手勢滑動

這部分根據使用者向左,向右滑的手拔勢來判斷當前是顯示前一張圖片,還是後一張圖片,效果圖如下:


找到了一個Gif錄影工具:http://blog.bahraniapps.com/gifcam/  挺好,還不需要安裝。

首先,這裡涉及到兩個方面的內容:

(1)顯示ViewFlipper中,當前圖片的上一張,和下一張圖片的介面

ViewFlipper::showNext();  //顯示下一個檢視
ViewFlipper::showPrevious(); //顯示上一個檢視
(2)使用者手勢檢測

這裡要用到GestureDetector,我這裡也會簡單提一下GestureDetector的使用方法,更詳細的請參看《使用者手勢檢測-GestureDetector使用詳解》

1、XML中佈局不變:

<RelativeLayout 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" >

    <ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="10dp"
        android:flipInterval="2000" >
        <ImageView 
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_1"/>
        <ImageView 
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_2"/>
        <ImageView 
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_3"/>
        <ImageView 
            android:layout_width="fill_parent"
            android:layout_height="300dip"
            android:scaleType="fitXY"
            android:src="@drawable/img_4"/>
    </ViewFlipper>

</RelativeLayout>

2、JAVA程式碼

同樣,先給出完整程式碼,然後逐步講解:

public class MainActivity extends Activity implements OnTouchListener {

	private ViewFlipper mFlipper;
	private GestureDetector mDetector; //手勢檢測
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		mFlipper = (ViewFlipper) findViewById(R.id.flipper);	
		mFlipper.setOnTouchListener(this);
		
		mDetector = new GestureDetector(new simpleGestureListener());
	}
	
	public boolean onTouch(View v, MotionEvent event) {
		return mDetector.onTouchEvent(event);
	}
	
	private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener{
		final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200;  
		
		//不知道為什麼,不加上onDown函式的話,onFling就不會響應,真是奇怪
		@Override
		public boolean onDown(MotionEvent e) {
			// TODO Auto-generated method stub
			Toast.makeText(MainActivity.this, "ondown", Toast.LENGTH_SHORT).show();   
			return true;
		}
		@Override
		public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
				float velocityY) {
			// Fling left     
			if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE    
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {    

				mFlipper.showNext();

                Toast.makeText(MainActivity.this, "Fling Left", Toast.LENGTH_SHORT).show();    
            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE    
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {    
                // Fling right     
 
            	mFlipper.showPrevious();
            	
                Toast.makeText(MainActivity.this, "Fling Right", Toast.LENGTH_SHORT).show();    
            }      
            return true;  
		}
	}

}

根據《使用者手勢檢測-GestureDetector使用詳解》 中GestureDector的四步走策略來看這段程式碼:

(1)建立OnGestureListener監聽函式:
我們這裡使用SimpleOnGestureListener類來實現監聽函式,因為這裡不需要必須寫出介面中的所有沒必要的函式,(不知道為什麼,我這裡必須要實現OnDown函式,如果沒有這個函式的重寫,OnFling就不會響應,真是奇怪),然後在OnFling中根據X軸方向移動的距離和速度來判斷當前使用者是向左滑還是向右滑,從而利用showPrevious()或者showNext()來顯示上一張或者下一張圖片。關於這一部分程式碼,如果有不理解的同學,還是乖乖看《使用者手勢檢測-GestureDetector使用詳解》這篇文章吧,這段程式碼在這篇文章的第五部分(五、OnFling應用——識別向左滑還是向右滑)

	private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener{
		final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200;  
		
		//不知道為什麼,不加上onDown函式的話,onFling就不會響應,真是奇怪
		@Override
		public boolean onDown(MotionEvent e) {
			// TODO Auto-generated method stub
			Toast.makeText(MainActivity.this, "ondown", Toast.LENGTH_SHORT).show();   
			return true;
		}
		@Override
		public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
				float velocityY) {
			// Fling left     
			if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE    
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {    

				mFlipper.showNext();

                Toast.makeText(MainActivity.this, "Fling Left", Toast.LENGTH_SHORT).show();    
            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE    
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {    
                // Fling right     
 
            	mFlipper.showPrevious();
            	
                Toast.makeText(MainActivity.this, "Fling Right", Toast.LENGTH_SHORT).show();    
            }      
            return true;  
		}
	}
2、建立GestureDetector例項mGestureDetector:
private GestureDetector mDetector;
3、onTouch(View v, MotionEvent event)中攔截:
	public boolean onTouch(View v, MotionEvent event) {
		return mDetector.onTouchEvent(event);
	}
4、控制元件繫結
mFlipper = (ViewFlipper) findViewById(R.id.flipper);	
mFlipper.setOnTouchListener(this);

根據這四步,程式碼也就結束了。

原始碼在文章底部提供下載;

但我們這裡有個問題在於,我們這裡的ImageView是寫死的,但我們在使用中一般是要動態加入ImageView的,這就是下面的內容嘍。

三、動態新增圖片

上面,我們都是在ViewFlipper裡直接加入ImageView來實現本地載入的VIew序列,但在程式中,我們一般是要動態載入View的,動態載入View,用到了ViewFlipper::addView函式。下面在上面的例子基礎上更改一下,實現同樣的功能:

1、XML程式碼:

<RelativeLayout 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"
    tools:context="com.example.viewflipperpart3.MainActivity" >

    <ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="10dp"
        android:flipInterval="2000" />

</RelativeLayout>
2、JAVA程式碼:
public class MainActivity extends Activity implements OnTouchListener {

	private ViewFlipper mFlipper;
	private GestureDetector mDetector; //手勢檢測
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		mFlipper = (ViewFlipper) findViewById(R.id.flipper);	
		mFlipper.addView(getImageView(R.drawable.img_1));
		mFlipper.addView(getImageView(R.drawable.img_2));
		mFlipper.addView(getImageView(R.drawable.img_3));
		mFlipper.addView(getImageView(R.drawable.img_4));
		mFlipper.setOnTouchListener(this);
		
		mDetector = new GestureDetector(new simpleGestureListener());
	}
	
	private ImageView getImageView(int id){
	  ImageView imageView = new ImageView(this);
	  imageView.setImageResource(id);
	  return imageView;
	}
	
	public boolean onTouch(View v, MotionEvent event) {
		return mDetector.onTouchEvent(event);
	}
	
	private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener{
		final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200;  
		
		//不知道為什麼,不加上onDown函式的話,onFling就不會響應,真是奇怪
		@Override
		public boolean onDown(MotionEvent e) {
			// TODO Auto-generated method stub
			Toast.makeText(MainActivity.this, "ondown", Toast.LENGTH_SHORT).show();   
			return true;
		}
		@Override
		public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
				float velocityY) {
			// Fling left     
			if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE    
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {    

				mFlipper.showNext();

                Toast.makeText(MainActivity.this, "Fling Left", Toast.LENGTH_SHORT).show();    
            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE    
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {    
                // Fling right     
 
            	mFlipper.showPrevious();
            	
                Toast.makeText(MainActivity.this, "Fling Right", Toast.LENGTH_SHORT).show();    
            }      
            return true;  
		}
	}

}
在上面這段程式碼中,一切都沒變,只是多了一個函式和幾個addView()

	private ImageView getImageView(int id){
	  ImageView imageView = new ImageView(this);
	  imageView.setImageResource(id);
	  return imageView;
	}
這段程式碼是自己寫的,通過傳進去圖片的resourceID,來構造對應的ImageView,然後利用addView()新增到ViewFlipper中:

		mFlipper = (ViewFlipper) findViewById(R.id.flipper);	
		mFlipper.addView(getImageView(R.drawable.img_1));
		mFlipper.addView(getImageView(R.drawable.img_2));
		mFlipper.addView(getImageView(R.drawable.img_3));
		mFlipper.addView(getImageView(R.drawable.img_4));
OK啦,到這就講完了。

原始碼在文章底部提供下載;


三個原始碼,放在一起了,下載地址:http://download.csdn.net/detail/harvic880925/7986705


請大家尊重原創者版權,轉載請標明出處:http://blog.csdn.net/harvic880925/article/details/39585347,謝謝!