摘要:值得注意的是和方法,前者是顯示上一個視圖,后者則是顯示后一個視圖。最后還要記住,返回值要改為,否則觸摸事件是無法響應的。前面兩個參數(shù)分別表示手指按下和松開時的事件,通過它們的對象去調(diào)用方法就可以獲取滑動前后的坐標了。
大家都使用過ViewPager,但是ViewPager還有一個兄弟,那就是ViewFlipper。兩者的名字非常相似,我們可以將ViewPager理解成“一頁一頁的視圖”,ViewFlipper則是“快速翻轉(zhuǎn)的視圖”,但后者的使用率卻遠不及前者,不過這并不意味著ViewFlipper就弱了。現(xiàn)在我們就來拜訪一下經(jīng)常被冷落的ViewFlipper。
1、創(chuàng)建工程及頁面視圖布局在Android Studio中新建一個工程,實現(xiàn)這樣一個效果:創(chuàng)建紅、橙、綠、藍四種顏色的頁面,然后通過ViewFlipper讓它們來回切換。四個頁面布局文件的名稱如下所示:
item_view1.xml的代碼如下:
另外三個布局的代碼只要把背景色換掉就可以了。
2、添加布局至ViewFlipper頁面創(chuàng)建好了,那我們怎么把它放置到ViewFlipper中呢?很簡單,ViewFlipper支持include標簽添加頁面,我們只需在activity_main.xml中將四個布局依次include進去即可。
直接運行就可以看到下面的效果了:
除了直接在布局文件中添加頁面外,也可以在代碼中添加,把activity_mai.xml中include標簽注釋掉,然后在MainActivity中初始化ViewFlipper之后再添加如下的代碼:
//要添加的頁面布局ID private int viewIds[] = {R.layout.item_view1, R.layout.item_view2, R.layout.item_view3, R.layout.item_view4}; /** * 將頁面添加進ViewFlipper */ private void addViews() { View itemView; for (int viewId : viewIds) { itemView = View.inflate(this,viewId,null); viewFlipper.addView(itemView); } }
然后在onCreate中調(diào)用addViews方法即可。
3、添加頁面切換動畫頁面切換的效果我們是實現(xiàn)了,但是沒有變化過程,看起來太生硬了,累眼睛。如果能有動畫效果的話就會舒服很多。這里,我們就要用到兩個新屬性了:
inAnimation:視圖進入時的動畫效果
outAnimation:視圖退出時的動畫效果
這兩個屬性也可以在代碼中設置的,稍后我們會用到。現(xiàn)在,我們就創(chuàng)建所需要的動畫文件。比如,我想要實現(xiàn)左右循環(huán)滑動的動畫效果,那么就可以分成兩種情況來討論:一種是新的視圖從左邊進入,原有的視圖從右邊退出,即從左往右滑動;另一種是新視圖從右邊進入,原有的視圖從左邊退出,即從右往左滑動。弄清楚所有的動畫效果之后,我們就在res文件夾下新建一個anim文件夾,創(chuàng)建如下如下四種動畫效果:
left_in.xml
視圖從左邊進入界面的動畫:
left_out.xml
視圖從左邊退出界面的動畫:
right_in.xml
right_out.xml
現(xiàn)在我們先來試試從左往右轉(zhuǎn)的動畫效果。在布局中給ViewFlipper加上如下的屬性:
android:inAnimation="@anim/left_in" android:outAnimation="@anim/right_out"
運行一下,就可以實現(xiàn)從左往右滑動的動畫效果了(GIF圖有點失真,不過效果是沒問題的)。
相信不用我說,你也知道怎么讓它從右往左滑動了吧?
4、手指左右滑屏一(使用觸摸監(jiān)聽事件實現(xiàn))看著畫面自顧自地滑動,是不是心癢癢的?沒關(guān)系,下面我們就來讓它響應我們手指的滑動。在此之前,先做點準備工作:前往布局文件,去掉動畫屬性,并將autoStart屬性設為false。
要讓它聽從“指揮”,我們可以先繼承OnTouchListener接口,然后實現(xiàn)onTouch方法:
private float startX; //手指按下時的x坐標 private float endX; //手指抬起時的x坐標 private float moveX = 100f; //判斷是否切換頁面的標準值 /** * 觸摸監(jiān)聽事件 * @param v * @param event * @return */ @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //手指按下時獲取起始點坐標 startX = event.getX(); break; case MotionEvent.ACTION_UP: //手指抬起時獲取結(jié)束點坐標 endX = event.getX(); //比較startX和endX,判斷手指的滑動方向 if (endX - startX > moveX) { //手指從左向右滑動 viewFlipper.setInAnimation(this, R.anim.left_in); viewFlipper.setOutAnimation(this, R.anim.right_out); viewFlipper.showPrevious(); } else if (startX - endX > moveX) { //手指向右向左滑動 viewFlipper.setInAnimation(this, R.anim.right_in); viewFlipper.setOutAnimation(this, R.anim.left_out); viewFlipper.showNext(); } break; } return true; }
上面的代碼不難,注釋也寫得比較清楚了。總體的思路就是獲取手指按下和抬起時的坐標,然后判斷是向左還是向右滑動。值得注意的是showPrevious和showNext方法,前者是顯示上一個視圖,后者則是顯示后一個視圖。最后還要記住,返回值要改為true,否則觸摸事件是無法響應的。
效果圖如下,可以向左,也可以向右。
除了觸摸監(jiān)聽事件之外,我們也可以用手勢監(jiān)聽事件OnGestureListener實現(xiàn)同樣的效果,但繼承了該接口之后要實現(xiàn)一連串的方法,代碼一下子膨脹起來了,而我們需要的只是其中一個方法啊。好在Android還提供了一個類SimpleOnGestureListener,這樣我們只要自定義一個類繼承它,然后實現(xiàn)我們需要的方法就可以了:
//創(chuàng)建手勢監(jiān)聽器 GestureDetector gestureDetector = new GestureDetector(this, new MyGestureListener()); /** * 自定義手勢監(jiān)聽類 */ class MyGestureListener extends GestureDetector.SimpleOnGestureListener{ @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { if (e2.getX() - e1.getX() > moveX){ viewFlipper.setInAnimation(MainActivity.this, R.anim.left_in); viewFlipper.setOutAnimation(MainActivity.this, R.anim.right_out); viewFlipper.showPrevious(); } else if (e2.getX() - e1.getX() < moveX){ viewFlipper.setInAnimation(MainActivity.this, R.anim.right_in); viewFlipper.setOutAnimation(MainActivity.this, R.anim.left_out); viewFlipper.showNext(); } return true; } }
這里的onFling方法得解釋一下,它表示的是手指在屏幕上移動然后松開的手勢,也就是滑動。前面兩個參數(shù)分別表示手指按下和松開時的事件,通過它們的對象去調(diào)用getX()方法就可以獲取滑動前后的坐標了。后面的步驟就跟我們在觸摸事件里面的一樣,相信你能理解的。
我一開始以為到這里就大功告成了,可運行之后卻紋絲不動!仔細查看文檔,發(fā)現(xiàn)還必須到觸摸監(jiān)聽方法中調(diào)用onTouchEvent方法才行,否則觸摸事件不會起作用的。
@Override public boolean onTouch(View v, MotionEvent event) { gestureDetector.onTouchEvent(event); return true; }6、后記
ViewFlipper的用法就告一段落了,寫這篇文章的時候我還順便復習了手勢監(jiān)聽事件等知識,也希望你能有所收獲。下面是源碼:
ViewFlipperDemo
谷歌官方文檔之ViewFlipper
Android的手勢操作識別
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/67153.html
摘要:無論是跑馬燈新聞標題還是餓了么的導航欄,它們的作用都是一樣的,那就是復用有限的屏幕空間,展示更為豐富的內(nèi)容。最后附上源碼的地址參考文章之的簡單使用仿淘寶首頁的淘寶頭條垂直滾動仿餓了么首頁導航欄 在淘寶App的首頁中間位置,有一塊小小的地方在不知疲倦地循壞滾動著頭條標題(見下圖的紅框區(qū)域),這樣的設計無疑能夠在有限的手機屏幕上展示更豐富的內(nèi)容。而實現(xiàn)這一功能需要用到的控件就是我在上一篇文...
摘要:滾動信息最近項目中需要用到信息滾動的效果,類似淘寶京東今日頭條的那種效果,于是網(wǎng)上看了一下,原來的原生控件中就有這個,于是我就寫了幾個效果,現(xiàn)在拿出來大家共同探討下。 滾動信息Demo 最近項目中需要用到信息滾動的效果, 類似淘寶、京東、今日頭條的那種效果, 于是網(wǎng)上看了一下, 原來Android的原生控件中就有這個View, 于是我就寫了幾個效果, 現(xiàn)在拿出來大家共同探...
閱讀 3593·2021-11-23 09:51
閱讀 2795·2021-11-23 09:51
閱讀 676·2021-10-11 10:59
閱讀 1672·2021-09-08 10:43
閱讀 3223·2021-09-08 09:36
閱讀 3289·2021-09-03 10:30
閱讀 3293·2021-08-21 14:08
閱讀 2195·2021-08-05 09:59