知乎Android版翻頁
創(chuàng)新互聯(lián)建站成立10多年來,這條路我們正越走越好,積累了技術(shù)與客戶資源,形成了良好的口碑。為客戶提供做網(wǎng)站、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計、申請域名、網(wǎng)絡(luò)營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補等服務(wù)。網(wǎng)站是否美觀、功能強大、用戶體驗好、性價比高、打開快等等,這些對于網(wǎng)站建設(shè)都非常重要,創(chuàng)新互聯(lián)建站通過對建站技術(shù)性的掌握、對創(chuàng)意設(shè)計的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案,攜手廣大客戶,共同發(fā)展進步。
翻頁,查看分頁文件的上一個頁面、下一個頁面或任意存在的非當前頁面??梢詫嶓w書或者移動Web窗體中的內(nèi)容進行改變,以觀看不同內(nèi)容。在互聯(lián)網(wǎng)上運用時該機制還呈現(xiàn)可用于瀏覽到其他頁的用戶界面元素。
作用
翻頁:跳轉(zhuǎn)到上一個頁面、下一個頁面或任意存在的非當前頁面。
項目地址:
分享下之前寫的小說閱讀器,項目結(jié)構(gòu)是傳統(tǒng)mvc這樣來做,歡迎大家star。
如風(fēng)小說閱讀器,添加書簽、目錄跳轉(zhuǎn)、(仿真、覆蓋、滑動、無)翻頁動畫效果、日夜間模式、字體/字體大小/主題/亮度設(shè)置、本地txt書籍閱讀(支持大文件)
長按主屏空白區(qū)域,選擇添加小組件,屏幕滑動并不是所有手機都可以調(diào)節(jié),建議下載一個go桌面,滑動調(diào)節(jié)也是長按,選擇設(shè)置,界面滑動非常華麗
前言 :本篇是系列博客的第三篇,這次我們要研究 書籍翻頁效果 。不知道大家平時有沒用過iReader、掌閱這些小說軟件,里面的翻頁效果感覺十分的酷炫。有心想研究研究如何實現(xiàn),于是網(wǎng)上找了找,發(fā)現(xiàn)這方面的教學(xué)資料非常少,所幸能找到 何明桂大大 的 Android 實現(xiàn)書籍翻頁效果----原理篇 這樣的入門博客(感謝大大 Orz),我們就以這篇博客為切入點從零實現(xiàn)我們自己的翻頁效果。由于這次坑比較深,預(yù)計會寫好幾期,感興趣的小伙伴可以點下關(guān)注以便及時收到更新提醒,謝謝大家的支持 ~
本篇只著重于思路和實現(xiàn)步驟,里面用到的一些知識原理不會非常細地拿來講,如果有不清楚的api或方法可以在網(wǎng)上搜下相應(yīng)的資料,肯定有大神講得非常清楚的,我這就不獻丑了。本著認真負責(zé)的精神我會把相關(guān)知識的博文鏈接也貼出來(其實就是懶不想寫那么多哈哈),大家可以自行傳送。為了照顧第一次閱讀系列博客的小伙伴,本篇會出現(xiàn)一些在之前 系列博客 就講過的內(nèi)容,看過的童鞋自行跳過該段即可
國際慣例,先上效果圖,本次主要實現(xiàn)了 基本的上下翻頁效果 與 右側(cè)最大翻頁距離的限制
在看這篇博客之前,希望大家能先了解一下書籍翻頁的實現(xiàn)原理,博客鏈接我已經(jīng)貼出來了。通過原理講解我們知道,整個書籍翻頁效果界面分成了三個區(qū)域, A 為當前頁區(qū)域, B 為下一頁區(qū)域, C 為當前頁背面,如圖所示
書籍翻頁效果的實現(xiàn)就是要以我們 觸摸屏幕位置的坐標 為基礎(chǔ)繪制出這三個區(qū)域,形成模擬翻頁的特效。要繪制這三個區(qū)域,我們需要通過一組 特定的點 來完成,這些點的坐標需要通過兩個已知的點( 觸摸點 、 相對邊緣角 )計算得到,下圖我將各個特定點的位置和計算公式貼出來,大家對照著原理一起理解(渣畫工望體諒 ╮(╯▽╰)╭ ),其中 b 點是由 ae 和 cj 的交點, k 點是由 ah 和 cj 的交點
簡單總結(jié)一下, a 是觸摸點, f 是觸摸點相對的邊緣角, eh 我們設(shè)置為 af 的垂直平分線,則 g 是 af 的中點, ab 、 ak 、 dj 是 直線 ; 曲線cdb 是起點為 c ,控制點為 e ,終點為 b 的 二階貝塞爾曲線 ; 曲線kij 是起點為 k ,控制點為 h ,終點為 j 的 二階貝塞爾曲線 ,區(qū)域 A 、 B 、 C 就由這些點和線劃分開來。我們將這些點稱為標識點,下一步就是模擬設(shè)定 a 和 f 點的位置,將這組標識點繪制到屏幕上來驗證我們的計算公式是否正確,創(chuàng)建 BookPageView
實體類 MyPoint 用來存放我們的標識點坐標
界面布局:
在Activity中進行注冊
效果如圖
前文我們提到 ab 、 ak 、 dj 是 直線 ; 曲線cdb 是起點為 c ,控制點為 e ,終點為 b 的 二階貝塞爾曲線 ; 曲線kij 是起點為 k ,控制點為 h ,終點為 j 的 二階貝塞爾曲線 。通過觀察分析得知, 區(qū)域A 是由View 左上角 , 左下角 , 曲線cdb , 直線 ab 、 ak , 曲線kij , 右上角 連接而成的區(qū)域,修改 BookPageView ,利用 path 繪制處 區(qū)域A
效果如圖
區(qū)域C 理論上應(yīng)該是由點 a , b , d , i , k 連接而成的閉合區(qū)域,但由于 d 和 i 是曲線上的點,我們沒辦法直接從 d 出發(fā)通過 path 繪制路徑連接 b 點( i , k 同理),也就不能只用 path 的情況下直接繪制出 區(qū)域C ,我們需要用 PorterDuffXfermode 方面的知識“曲線救國”。我們試著先將點 a , b , d , i , k 連接起來,觀察閉合區(qū)域與 區(qū)域A 之間的聯(lián)系。修改 BookPageView
效果如圖
我們將兩條曲線也畫出來對比觀察
觀察分析后可以得出結(jié)論, 區(qū)域C 是 由直線ab,bd,dj,ik,ak連接而成的區(qū)域 減去 與區(qū)域A交集部分 后剩余的區(qū)域。于是我們設(shè)置 區(qū)域C 畫筆 Xfermode 模式為 DST_ATOP
效果如圖
最后是 區(qū)域B ,因為 區(qū)域B 處于最底層,我們直接將 區(qū)域B 畫筆 Xfermode 模式設(shè)為 DST_ATOP ,在 區(qū)域A、C 之后繪制即可,修改 BookPageView
效果如圖
翻頁可以從右下方翻自然也可以從右上方翻,我們將 f 點設(shè)在右上角,由于View上下兩部分是呈 鏡像 的,所以各標識點的位置也應(yīng)該是鏡像對應(yīng)的,因為 區(qū)域B和C 的繪制與 f 點沒有關(guān)系,所以我們只需要修改 區(qū)域A 的繪制邏輯,新增 getPathAFromTopRight() 方法
效果如圖
之前由于測試效果沒有對View的大小進行重新測量,在實現(xiàn)觸摸翻頁之前先把這個結(jié)了。重寫View的 onMeasure() 方法
我們的需求是,在上半部分翻頁時 f 點在右上角,在下半部分翻頁時 f 則在右下角,當手指離開屏幕時回到 初始狀態(tài) ,根據(jù)需求,修改 BookPageView
在Activity中監(jiān)聽View的 onTouch 狀態(tài)
注意,要設(shè)置 android:clickable 為 true ,否則無法監(jiān)聽到 ACTION_MOVE 和 ACTION_UP 狀態(tài)
效果如圖
到這里我們已經(jīng)實現(xiàn)了基本的翻頁效果,但要還原真實的書籍翻頁效果,我們還需要設(shè)置一些限制條件來完善我們的項目
對于一般的書本來說,最左側(cè)應(yīng)該是釘起來的,也就是說如果我們從右側(cè)翻頁,翻動的距離是 有限制的 ,最下方翻頁形成的曲線起點( c 點)的x坐標不能小于0(上方同理),按照這個限定條件,修改我們的 BookPageView
效果如圖
至此本篇教程就告一段落了,當然還有許多功能需要繼續(xù)完善,例如橫向翻頁、翻頁動畫、陰影效果等等,這些都會在后面的教程中一一解決。如果大家看了感覺還不錯麻煩點個贊,你們的支持是我最大的動力~
網(wǎng)站欄目:android翻頁,android翻頁效果插件
轉(zhuǎn)載注明:http://jinyejixie.com/article20/dsecejo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、網(wǎng)站收錄、移動網(wǎng)站建設(shè)、小程序開發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)