如題:
當一個浮動layout的滑動到頂部時,這個浮動layout就懸停下來,當屏幕往下滑動時,浮動layout也跟著往下移動。
因為不知道怎么錄制jif圖片,所以上傳兩張圖片代替。
效果就如上面三張圖片所示。
好,看完效果圖之后,我們來看一下這個效果的設計原理。 首先,我們來看一張整體的設計圖:
設計效果圖是分為三個部分:頂部區域、浮動區域A、列表區域。1.當屏幕往上面滑動的時候,互動區域A也跟著滑動;2.當浮動區域A滑動到頂部的時候,浮動區域A停留在頂部(上右圖);3.當屏幕往下滑動的時候,浮動區域A也跟著往下滑動。這是整個滑動的效果流程。
那么,這時問題來了。怎么能讓浮動區域A停在頂部,而且不影響其他內容的滑動呢?
在這里我們可以寫多一個和浮動區域A界面效果一模一樣的浮動區域B。在布局的時候,先把浮動區域B的可見性設置為gone,即隱藏起來。當浮動區域A滑動到頂部的時候,就把浮動區域B的可見性設置為VISIBLE,即可見。這時浮動區域B會覆蓋在整個屏幕的上面,即使整個屏幕在滑動的時候也不會影響浮動區域B的位置,那么看起來就好像浮動區域A是停留在頂部位置不動了,見下圖。
(此時,設置浮動區域B的可見性為VISIBLE,即可見)
同理,當整個屏幕往下滑動的時候,再把浮動區域B的可見性設置為GONE,那么看起來的效果就好像浮動區域A又重新滑動起來了。
實現過程 說完原理之后,讓我們來看看在代碼里面是怎么實現這個過程的。我們先看看布局文件activity_main.xml
由于整體的布局內容都是放在一個自定義的ScrollView里面。所以,只要我們在ScrollView里面判斷: 當Scrollview向上滑動的距離大于等于頂部區域的高度時,也就是浮動區域A的頂邊貼到屏幕頂部的時候,這是將浮動區域B的可見性設置為VISIBLE即可,否則設置為GONE即可。 這樣就實現了我們想要的效果了,代碼如下: 自定義的ListView代碼:新聞熱點
疑難解答