ViewPager滑動(dòng)過程中的指示器與頁(yè)面動(dòng)效

一莱革、ViewPager的簡(jiǎn)單使用
1.設(shè)置數(shù)據(jù):
具體頁(yè)面可以使用adapter來實(shí)現(xiàn),刷新數(shù)據(jù)使用adapter的notifyDataSetChanged,無限滑動(dòng)可以通過改變adapter的getCount方法和自己的setCurrentItem來實(shí)現(xiàn)厕氨。
2.常用基本方法:
ViewPager.setOffscreenPageLimit(3); // viewPager的緩存頁(yè)數(shù)
ViewPager.setPageMargin(CommonUtils.dip2px(activity, 15)); // viewPager頁(yè)與頁(yè)之前的間距
ViewPager.setPageTransformer(false, new AlphaTransformer()); // viewPager 滑動(dòng)過程中動(dòng)效的設(shè)置
3.自定義:
通過自定義可以實(shí)現(xiàn)是否可以滑動(dòng)換頁(yè)
是否需要滑動(dòng)效果
等等

最簡(jiǎn)單的指示器代碼如下圖
具體效果:
有多少個(gè)頁(yè)面就有多少個(gè)指示器圖標(biāo),可以是圖片也可以自己通過shape畫汹粤,一般都是灰白圓點(diǎn)命斧。
主要通過onPageSelected變化具體點(diǎn)位。
以前用setOnPageChangeListener
現(xiàn)在被addOnPageChangeListener替換


image.png

二嘱兼、OnPageChangeListener
1.onPageSelected(int position):
這個(gè)方法有一個(gè)參數(shù)position国葬,代表哪個(gè)頁(yè)面被選中。
當(dāng)用手指滑動(dòng)翻頁(yè)的時(shí)候芹壕,如果翻動(dòng)成功了(滑動(dòng)的距離夠長(zhǎng))汇四,手指抬起來就會(huì)執(zhí)行這個(gè)方法,position就是當(dāng)前滑動(dòng)到的頁(yè)面踢涌。
這個(gè)方法一般被用來獲取滑動(dòng)過后當(dāng)前頁(yè)通孽。

2.onPageScrolled(int position,float positionOffset, int positionOffsetPixels):
這個(gè)方法會(huì)在屏幕滾動(dòng)過程中不斷被調(diào)用。
有三個(gè)參數(shù)睁壁,第一個(gè)position
第二個(gè)positionOffset是當(dāng)前頁(yè)面滑動(dòng)比例背苦,如果頁(yè)面向右翻動(dòng)互捌,這個(gè)值不斷變大,最后在趨近1的情況后突變?yōu)?行剂。如果頁(yè)面向左翻動(dòng)秕噪,這個(gè)值不斷變小,最后變?yōu)?厚宰。
第三個(gè)positionOffsetPixels是當(dāng)前頁(yè)面滑動(dòng)像素腌巾,變化情況和positionOffset一致。

我理解的position 就是間隔與位置A的關(guān)系固阁,position的值取至位置A同位置或位置A左邊的間隔值壤躲,如上圖此時(shí)position為1,當(dāng)item左滑過程中备燃,位置A左邊是間隔1碉克,所有返回的值一直是1,若右滑并齐,位置A左邊的就是間隔0漏麦,那返回值就是0,當(dāng)左滑停止時(shí)况褪,間隔2與位置A重疊撕贞,返回值就變成2了,同理右滑停止時(shí)就是0测垛。


image.png

下圖是setCurrentItem到最后一頁(yè)的日志捏膨。


image.png

3.onPageScrollStateChanged(int state):這個(gè)方法在手指操作屏幕的時(shí)候發(fā)生變化。有三個(gè)值:0(END),1(PRESS) , 2(UP) 食侮。
當(dāng)用手指滑動(dòng)翻頁(yè)時(shí)号涯,手指按下去的時(shí)候會(huì)觸發(fā)這個(gè)方法,state值為1锯七,手指抬起時(shí)链快,如果發(fā)生了滑動(dòng)(即使很小)眉尸,這個(gè)值會(huì)變?yōu)?域蜗,然后最后變?yōu)? ≡牖總共執(zhí)行這個(gè)方法三次霉祸。一種特殊情況是手指按下去以后一點(diǎn)滑動(dòng)也沒有發(fā)生,這個(gè)時(shí)候只會(huì)調(diào)用這個(gè)方法兩次袱蜡,state值分別是1,0 丝蹭。
當(dāng)setCurrentItem翻頁(yè)時(shí),會(huì)執(zhí)行這個(gè)方法兩次戒劫,state值分別為2 , 0 半夷。

舉個(gè)’栗子’:以我本次UI為例,onPageScrolled方法處理滑動(dòng)過程中迅细,小點(diǎn)點(diǎn)大小變化巫橄,onPageScrollStateChanged被調(diào)用后,清空onPageScrolled中判斷的舊值茵典,onPageSelected被調(diào)用后設(shè)置顏色變化和頁(yè)面具體邏輯湘换。
此方法適合Item外的變化,Item的變化可以用setPageTransformer统阿。
顏色也可以變化彩倚,因?yàn)轭伾a是6個(gè)16進(jìn)制數(shù),可以通過倆個(gè)數(shù)的差值與position計(jì)算扶平。


image.png

三帆离、滑動(dòng)動(dòng)效
ViewPager.setPageTransformer(false, new AlphaTransformer());
第一個(gè)參數(shù)boolean型 item層級(jí)方向
通過自定義 Transformer 可以實(shí)現(xiàn)自己想要的動(dòng)效
下圖是一個(gè)跟隨滑動(dòng)改變透明度的代碼


image.png

transformPage
倆個(gè)參數(shù) View page ,float position
Page就是Item對(duì)應(yīng)的view
Position就是當(dāng)前頁(yè)滑動(dòng)位置
下圖是當(dāng)前位item左滑的全部過程


image.png

如果你想只有一頁(yè)的動(dòng)效你只需要找
-1 < Position < 0
這個(gè)區(qū)間的item就可以了
如果是多頁(yè)的動(dòng)效结澄,你需要根據(jù)Position 大小去做對(duì)應(yīng)的操作


image.png

image.png

你可以在這個(gè)過程中做你任何想做的事哥谷,例如:
透明度
setAlpha 百分比
縮放
setPivotX setPivotY 設(shè)置縮放中心點(diǎn)位置像素
setScaleX setScaleY 具體縮放值百分比
位移
setTranslationX setTranslationY 像素
旋轉(zhuǎn)
setPivotX setPivotY 設(shè)置旋轉(zhuǎn)中心點(diǎn)位置像素
setRotationX setRotationY setRotation 繞XYZ旋轉(zhuǎn) 參數(shù)是旋轉(zhuǎn)度數(shù)
如果你想根據(jù)滑動(dòng)狀態(tài)實(shí)現(xiàn)item內(nèi)部某個(gè)控件的動(dòng)效,可以通過findViewById 可以找到對(duì)應(yīng)控件進(jìn)行對(duì)應(yīng)動(dòng)效麻献,你可以為所欲為们妥。
有些動(dòng)畫或布局可能超過父類你需要下面這個(gè)屬性
android:clipChildren 父類屬性 clipChild用來定義他的子控件是否要在他應(yīng)有的邊界內(nèi)進(jìn)行繪制。

一些我寫過的效果


![image.png](https://upload-images.jianshu.io/upload_images/19146639-30afb8f1ee9b715b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
image.png
image.png

Viewpager缺點(diǎn):
缺點(diǎn):Viewpager adapter 生成itemUI后勉吻,用notify方法只能刷新數(shù)據(jù)监婶,不會(huì)刷新UI,只有當(dāng)UI被銷毀后齿桃,重新生成才會(huì)生效惑惶,還有一種方法getItemPosition能刷新,但是也有缺點(diǎn)源譬,就是每次都會(huì)重新創(chuàng)建Item集惋。
ViewPager一次只切換一頁(yè)
ViewPager層級(jí)是固定的只能一個(gè)方向復(fù)蓋下去,要么頭層級(jí)最高踩娘,要么尾層級(jí)最高


image.png

RecyclerView + SnapHelper實(shí)現(xiàn)類似ViewPager效果

https://www.reibang.com/p/ef3a3b8d0a77

RecyclerView 可以切換多頁(yè)也可以切換一頁(yè)

RecyclerView 實(shí)現(xiàn)后 層級(jí)可以實(shí)現(xiàn)中間最高

RecyclerView 如果不自定義刮刑,是快速滑動(dòng)效果

RecyclerView 可以實(shí)現(xiàn)簡(jiǎn)單ViewPager效果 和 比ViewPager效果更好的效果,但是如果UI上明顯是ViewPager的效果 想用RecyclerView 完全復(fù)制就不如直接用ViewPager了养渴。

我為什么喜歡自己寫UI效果:

  1. 很難找到完全一樣效果的開源代碼雷绢,找個(gè)類似的然后花費(fèi)時(shí)間去讀懂別人代碼后再加工時(shí)間成本會(huì)更高。
  2. 一般開源代碼理卑,都會(huì)給你很多種效果供選擇翘紊,代碼量會(huì)很大,層級(jí)和架構(gòu)會(huì)比較復(fù)雜藐唠,也不便于你再加工帆疟。
  3. 你沒辦法讓UI設(shè)計(jì)師像你妥協(xié)鹉究,有時(shí)候再加工后才發(fā)現(xiàn)差一丟丟,這一丟丟很難再弄出來踪宠,你基本算是白干了自赔。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市柳琢,隨后出現(xiàn)的幾起案子绍妨,更是在濱河造成了極大的恐慌,老刑警劉巖柬脸,帶你破解...
    沈念sama閱讀 218,682評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件他去,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡倒堕,警方通過查閱死者的電腦和手機(jī)灾测,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來垦巴,“玉大人行施,你說我怎么就攤上這事』昴牵” “怎么了蛾号?”我有些...
    開封第一講書人閱讀 165,083評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)涯雅。 經(jīng)常有香客問我鲜结,道長(zhǎng),這世上最難降的妖魔是什么活逆? 我笑而不...
    開封第一講書人閱讀 58,763評(píng)論 1 295
  • 正文 為了忘掉前任精刷,我火速辦了婚禮,結(jié)果婚禮上蔗候,老公的妹妹穿的比我還像新娘怒允。我一直安慰自己,他們只是感情好锈遥,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6 392
  • 文/花漫 我一把揭開白布纫事。 她就那樣靜靜地躺著,像睡著了一般所灸。 火紅的嫁衣襯著肌膚如雪丽惶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,624評(píng)論 1 305
  • 那天爬立,我揣著相機(jī)與錄音钾唬,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛抡秆,可吹牛的內(nèi)容都是我干的奕巍。 我是一名探鬼主播,決...
    沈念sama閱讀 40,358評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼儒士,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼伍绳!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起乍桂,我...
    開封第一講書人閱讀 39,261評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎效床,沒想到半個(gè)月后睹酌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡剩檀,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年憋沿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沪猴。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡辐啄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出运嗜,到底是詐尸還是另有隱情壶辜,我是刑警寧澤,帶...
    沈念sama閱讀 35,737評(píng)論 5 346
  • 正文 年R本政府宣布担租,位于F島的核電站砸民,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏奋救。R本人自食惡果不足惜岭参,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望尝艘。 院中可真熱鬧演侯,春花似錦、人聲如沸背亥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽狡汉。三九已至程癌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間轴猎,已是汗流浹背嵌莉。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捻脖,地道東北人锐峭。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3 371
  • 正文 我出身青樓中鼠,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親沿癞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子援雇,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容