1.需求分析

小紅書登陸頁面背景圖滾動(dòng)效果

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

登陸頁面布局分析

?功能分析

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

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

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

2.具體實(shí)現(xiàn)

實(shí)現(xiàn)效果

實(shí)現(xiàn)步驟

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

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

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

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

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

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

2-1 繪制背景圖

2-2 實(shí)現(xiàn)滾動(dòng)效果

2-3 實(shí)現(xiàn)無限滾動(dòng)視覺效果

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

切換無限滾動(dòng)的方向

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

SrcScrollFrameLayout 功能特點(diǎn)

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

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

? ? 3.可通過自定義屬性?speed?調(diào)整滾動(dòng)速度，提供?slow、ordinary?和?fast?選項(xiàng)，也可自行填入 int 值，值越大滾動(dòng)速度越快，建議?1 ≤ speed ≤ 50

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

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

? ? 6. 可通過自定義屬性?scrollOrientation?設(shè)置滾動(dòng)方向?yàn)?上移?或?左移?,默認(rèn)滾動(dòng)方向?yàn)樯弦?/p>

3.最后

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

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