Android基礎控件——ViewPager實現帶有動畫的引導頁



 

好了,又到我們學習基礎控件的時候了,其實引導頁很簡單,就是五張圖片而已

傳統的ViewPager實現引導頁和ListView是一樣道理的,只是把ListView的Item換成圖片,把BaseAdapter換成PagerAdapter,我們先來看下傳統引導頁的效果圖

既然用到的是ViewPager,那么xml文件就必須要有ViewPager,細心的你,可能會發現最后一頁還有個按鈕的出現,沒錯,xml文件中也要有個按鈕

開頭也說了,Viewpager其實就和ListView一樣的,需要一個Adapter,那么就從Adapter入手。Google提供了一個專門適配ViewPager的Adapter——PagerAdapter

基本ViewPager的Adapter都是這么寫的,就是往ViewPager中添加List傳過來的View和刪除List傳過來的View,可以說是每個ViewPager的模板

我們找到對應的ViewPager,然后設置Adapter,代碼中的initViews、initListener、initData是按順序執行下去的,這段代碼不難,很容易看懂

細心的你可能也發現了該引導頁是沒有狀態欄的,所以我們需要設置其主題為狀態欄透明

特別注意:這里需要注意的是圖片的大小問題,如果圖片高清太大,可能會出現內存溢出的錯誤。

帶有動畫的引導頁編寫步驟和傳統是一模一樣的,只不過給ViewPager設置一個動畫。Google提供ViewPager.setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)方法來設置引導頁的切換效果,這里先看Google提供的切換Demo

從上面效果看出,只是在引導頁之間添加了一個動畫而已,而Google提供的PageTransformer就可以對當前位置的引導頁進行操作,比如:設置透明度的變化,設置縮放的變化,就能實現切換的動畫效果

從上面的代碼中,可以知道在ViewPager滑動的時候,蘇月會觸發transformPage這個方法,並且會將當前的position和View傳遞過來,下面就是我們的對View的操作

① position

  1. position < -1(即-無窮到-1):讓引導頁消失,透明度為0
  2. position <=0(即-1到0):讓引導頁出現
  3. position <=1(即0到1):讓引導頁根據position做動畫
  4. 剩下else(即1到無窮):讓引導頁消失,透明度為0

② 圖解position

原諒我畫圖不好看,不生動,如果還不理解的話可以自己打印Log信息,把View和Position都打印出來幫助理解

使用PageTransformer非常簡單,只要通過ViewPager設置即可

Google還為我們提供了另一個動畫效果,看效果圖

實現步驟其實和上面的步驟是一樣的,具體我們來看PageTransformer的編寫

這里的原理就不分析了,和上面是一樣的,只不過操作不同而已。除了Google提供的Demo之外,我們可以模仿谷歌的Demo,編寫出我們自己的動畫效果

效果如圖

好了,今天基礎控件就到這里了,如果不懂的話可以自己實踐一下,然后用紙筆思考思考,你就會有收獲的。我也是通過博客學習別人的博客,然后通過自己的方式,將學習的內容寫出來。我們一起加油,后來者們


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM