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，謝謝！

ViewFlipper
2015-07-22
View
ViewFlipper探索與使用——順便實現Android圖片輪播
2018-12-03
ViewAndroid
Jpa使用詳解
2020-06-02
mitmproxy使用詳解
2021-02-06
MIT
Thymeleaf使用詳解
2018-12-01
mydumper使用詳解
2018-10-16
babel使用詳解
2018-12-11
Babel
git使用詳解
2018-08-01
Git
Mat使用詳解
2020-11-28
Proxy使用詳解
2020-09-15
nvm 使用詳解
2021-11-05
CSSModules使用詳解
2016-11-17
CSSSSM
ctags使用詳解
2016-09-18
AutoLayout 使用詳解
2016-12-24
umask使用詳解
2017-05-06
OkHttp使用詳解
2016-06-24
HTTP
Okhttp 使用詳解
2016-07-14
HTTP
Inception使用詳解
2017-12-29
UITableView使用詳解
2015-06-04
UIView
NULL 使用詳解
2005-01-28
Null
ASIHttpRequest使用詳解
2016-05-23
HTTP
at命令使用詳解
2007-01-27
Supervisor使用詳解
2020-08-25
React Hooks 使用詳解
2019-04-08
ReactHook
CMAKE的使用詳解
2019-04-12
Go Modules 詳解使用
2019-04-13
Go
MFC——SkinMagic使用詳解
2018-07-30
Logstash使用詳解
2020-11-26
sed指令使用詳解
2020-09-30
Mybatis的使用詳解
2016-12-10
MyBatis
Postman 使用教程詳解
2018-06-05
Postman
sar命令使用詳解
2017-09-27
JWT 完整使用詳解
2018-05-08
JWT
Apache POI使用詳解
2017-12-06
Apache
RxJava 2.0 使用詳解
2017-06-13
RxJava
git rebase 使用詳解
2015-03-07
Git
Mysqlreport使用詳解
2014-12-01
MySql
volatile使用詳解
2013-09-12

ViewFlipper使用詳解

一、基本實現

1、在XML中的佈局：

2、JAVA程式碼：

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

1、XML中佈局不變：

2、JAVA程式碼

三、動態新增圖片

1、XML程式碼：

相關文章