Android 實現(xiàn)小紅書登陸頁面背景圖無限滾動效果

1.需求分析

小紅書登陸頁面背景圖滾動效果

?需求特點(diǎn)：背景無限循環(huán)滾動?

登陸頁面布局分析

?功能分析

? ? 1.通過?uiautomatorviewer 分析頁面布局，其應(yīng)是通過自定義 FrameLayout 實現(xiàn)

? ? 2.通過清除 App 數(shù)據(jù)同時斷開數(shù)據(jù)連接再啟動該頁面犬缨，確定背景加載的是本地圖片

? ? 3.通過小紅書 apk 獲取資源文件，確定背景圖片為單張圖片

2.具體實現(xiàn)

實現(xiàn)效果

實現(xiàn)步驟

? ? 1.自定義?SrcScrollFrameLayout 繼承于 FrameLayout 卿嘲，初始化時 setWillNotDraw(false)? 使 onDraw 方法生效

? ? 2.獲取背景圖片 Bitmap 對象蚊荣，按 SrcScrollFrameLayout 實際寬度按比例縮放，同時計算需要繪制的背景圖 Bitmap 數(shù)（繪制多個背景圖 Bitmap 的目的：一是為了填滿當(dāng)前 View 高度密浑，二是為了填充滾動時產(chǎn)生的留白）

? ? 3.onDraw() 中通過?canvas.drawBitmap(mSrcBitmap, mMatrix, mPaint) 繪制背景圖

? ? 4.通過定時任務(wù)操作背景圖 Bitmap 平移距離后發(fā)起重繪种冬，實現(xiàn)滾動效果

? ? 5.當(dāng)平移距離 ≥ 背景圖 Bitmap 高度時镣丑，重置平移距離，實現(xiàn)無限滾動視覺效果

實現(xiàn)步驟示意圖

2-1 繪制背景圖

2-2 實現(xiàn)滾動效果

2-3 實現(xiàn)無限滾動視覺效果

既然豎屏無限滾動已經(jīng)實現(xiàn)了娱两，同理只要固定高度拉伸寬度將圖片填滿屏幕莺匠，即可實現(xiàn)無限橫向滾動效果

切換無限滾動的方向

具體代碼查閱?SrcScrollFrameLayout 源碼（點(diǎn)擊查看）

SrcScrollFrameLayout 功能特點(diǎn)

????1.將選擇的圖片按比例縮放填滿當(dāng)前 View 寬度

? ? 2.背景圖片縮放后高度小于當(dāng)前 View 高度時自動復(fù)制黏貼直到占滿當(dāng)前 View 高度，以此來達(dá)到無限滾動效果

? ? 3.可通過自定義屬性?speed?調(diào)整滾動速度十兢，提供?slow趣竣、ordinary?和?fast?選項，也可自行填入 int 值旱物，值越大滾動速度越快遥缕，建議?1 ≤ speed ≤ 50

? ? 4.可通過自定義屬性?maskLayerColor?設(shè)置遮罩層顏色，建議帶透明度

? ? 5.提供?startScroll?和?stopScroll?方法控制開始/停止?jié)L動

? ? 6. 可通過自定義屬性?scrollOrientation?設(shè)置滾動方向為?上移?或?左移?,默認(rèn)滾動方向為上移

3.最后

? ??源碼及 Demo 地址：https://github.com/ziwenL/SrcScrollFrameLayout

? ??如有更好的見解或建議异袄，歡迎留言

最后編輯于：2020.09.03 17:59:06

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者