說明原理
好，看完效果圖之後，我們來看一下這個效果的設計原理。
首先，我們來看一張整體的設計圖：
設計效果圖是分為三個部分：頂部區域、浮動區域a、列表區域。
1.當螢幕往上面滑動的時候，互動區域a也跟著滑動；
2.當浮動區域a滑動到頂部的時候，浮動區域a停留在頂部（上右圖）；
3.當螢幕往下滑動的時候，浮動區域ａ也跟著往下滑動。
這是整個滑動的效果流程。
那麼，這時問題來了。怎麼能讓浮動區域a停在頂部，而且不影響其他內容的滑動呢？
在這裡我們可以寫多乙個和浮動區域a介面效果一模一樣的浮動區域b。在布局的時候，先把浮動區域b的可見性設定為gone，即隱藏起來。當浮動區域a滑動到頂部的時候，就把浮動區域b的可見性設定為visible，即可見。這時浮動區域b會覆蓋在整個螢幕的上面，即使整個螢幕在滑動的時候也不會影響浮動區域b的位置，那麼看起來就好像浮動區域a是停留在頂部位置不動了，見下圖。
（此時，設定浮動區域b的可見性為visible，即可見）
同理，當整個螢幕往下滑動的時候，再把浮動區域b的可見性設定為gone，那麼看起來的效果就好像浮動區域a又重新滑動起來了。
這個原理大家應該可以理解吧！
實現過程
說完原理之後，讓我們來看看在**裡面是怎麼實現這個過程的。
我們先看看布局檔案activity_main.xml
xmlns:tools=""
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".mainactivity" >
android:id="@+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:id="@+id/image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/pic01"/>
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#f6e4c0">
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textsize="10pt"
android:text="可樂雞翅 55元"
android:textcolor="#e68b4e"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="立即購買"
android:textcolor="#ffffff"/>
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
android:id="@+id/flow_llay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#f6e4c0"
android:visibility="gone">
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textsize="10pt"
android:text="可樂雞翅 55元"
android:textcolor="#e68b4e"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="立即購買"
android:textcolor="#ffffff"/>
複製**
布局檔案效果：
頂部的「可樂雞翅」就是剛剛所說的浮動區域b，中間的「可樂雞翅」則是浮動區域a，布局檔案應該不難理解。
那麼我們怎麼知道何時隱藏、顯示頂部的浮動layout呢？
由於整體的布局內容都是放在乙個自定義的scrollview裡面。所以，只要我們在scrollview裡面判斷：
當scrollview向上滑動的距離大於等於頂部區域的高度時，也就是浮動區域a的頂邊貼到螢幕頂部的時候，這是將浮動區域b的可見性設定為visible即可，否則設定為
gone
即可。 這樣就實現了我們想要的效果了。
關鍵**：
@override
protected void onscrollchanged(int l, int t, int oldl, int oldt) else }}
複製**
設計效果圖,
layout,
設計圖,
美團,
layout,
layout,
layout,
layout
本主題由 system 於 5 天前 解除限時高亮
無標題.png
仿美團app，浮動layout滑動到頂部懸停效果
那麼，這時問題來了。怎麼能讓浮動區域a停在頂部，而且不影響其他內容的滑動呢？在這裡我們可以寫多乙個和浮動區域a介面效果一模一樣的浮動區域b。在布局的時候，先把浮動區域b的可見性設定為gone，即隱藏起來。當浮動區域a滑動到頂部的時候，就把浮動區域b的可見性設定為visible，即可見。這時浮動區域b...
仿美團pc,koa ssr（六）
一，地點詳情頁 product.vue元件，點選h3標題，跳轉到對應地點的詳情detail路徑 商品 rate v model meta.rate colors ff9900 ff9900 ff9900 disabled v if meta.rate 4 class s item comment 很...
仿美團pc,koa ssr（四）
一，城市服務功能 components 新建changecity目錄 新建isselect.vue元件 按省份選擇 select v model pvalue placeholder 省份 option v for item in province key item.value label item...