ViewFlipper使用詳解
前言:今天,試用期績效考核通過了,從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,謝謝!
相關文章
- ViewFlipperView
- ViewFlipper探索與使用——順便實現Android圖片輪播ViewAndroid
- Jpa使用詳解
- mitmproxy使用詳解MIT
- Thymeleaf使用詳解
- mydumper使用詳解
- babel使用詳解Babel
- git使用詳解Git
- Mat使用詳解
- Proxy使用詳解
- nvm 使用詳解
- CSSModules使用詳解CSSSSM
- ctags使用詳解
- AutoLayout 使用詳解
- umask使用詳解
- OkHttp使用詳解HTTP
- Okhttp 使用詳解HTTP
- Inception使用詳解
- UITableView使用詳解UIView
- NULL 使用詳解Null
- ASIHttpRequest使用詳解HTTP
- at命令使用詳解
- LOMBOK使用詳解Lombok
- Supervisor使用詳解
- React Hooks 使用詳解ReactHook
- CMAKE的使用詳解
- Go Modules 詳解使用Go
- MFC——SkinMagic使用詳解
- Logstash使用詳解
- sed指令使用詳解
- Mybatis的使用詳解MyBatis
- Postman 使用教程詳解Postman
- sar命令使用詳解
- JWT 完整使用詳解JWT
- Apache POI使用詳解Apache
- RxJava 2.0 使用詳解RxJava
- git rebase 使用詳解Git
- Mysqlreport使用詳解MySql