高仿美團app，浮動layout滑動到頂部懸停效果

作了個相似美團app的一個效果

 

當一個浮動layout的滑動到頂部時，這個浮動layout就懸停下來，當屏幕往下滑動時，浮動layout也跟着往下移動。

       所以，我特地也寫了一個：浮動layuot滑動到頂部懸停demo，下圖：

（媽蛋上傳圖片不能超過200k，只能把圖片閹割成這樣，湊合着看吧）

 

 

 

原理
        好，看完效果圖以後，咱們來看一下這個效果的設計原理。
        首先，咱們來看一張總體的設計圖：

 

 

 

 

 

 

 

設計效果圖是分爲三個部分：頂部區域、浮動區域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

 

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.jimstin.topfloatdemo.view.MyScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/image_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/pic01"/>
           <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:background="#f6e4c0">
                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textSize="10pt"
                    android:text="可樂雞翅  55元"
                    android:textColor="#e68b4e"/>
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="當即購買"
                    android:textColor="#ffffff"/>
            </LinearLayout>
            <ListView
                android:id="@+id/list_view"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
               
            </ListView>
           
        </LinearLayout>
    </com.jimstin.topfloatdemo.view.MyScrollView>

    <LinearLayout
         android:id="@+id/flow_llay"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:background="#f6e4c0"
         android:visibility="gone">
         <TextView
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:textSize="10pt"
              android:text="可樂雞翅  55元"
              android:textColor="#e68b4e"/>
          <Button
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="當即購買"
              android:textColor="#ffffff"/>
     </LinearLayout>
</RelativeLayout>

 

 

佈局文件效果

 

 

頂部的「可樂雞翅」就是剛剛所說的浮動區域B，中間的「可樂雞翅」則是浮動區域A，佈局文件應該不難理解。
那麼咱們怎麼知道什麼時候隱藏、顯示頂部的浮動layout呢？

 

 

因爲總體的佈局內容都是放在一個自定義的ScrollView裏面。因此，只要咱們在ScrollView裏面判斷：
      當Scrollview向上滑動的距離大於等於頂部區域的高度時，也就是浮動區域A的頂邊貼到屏幕頂部的時候，這是將浮動區域B的可見性設置爲VISIBLE便可，不然設置爲GONE便可。
      這樣就實現了咱們想要的效果了。
關鍵代碼：

 

@Override
        protected void onScrollChanged(int l, int t, int oldl, int oldt) {
               
                super.onScrollChanged(l, t, oldl, oldt);
                if(mTopView != null) {
                        if(t >= mTopView.getHeight()) {
                                mFlowView.setVisibility(View.VISIBLE);
                        } else {
                                mFlowView.setVisibility(View.GONE);
                        }
                }
        }

 

代碼的意思是，當ScrollView向上滾動的高度大於等於mTopView頂部區域的高度時，那麼就將mFlowView浮動layout的可見性設置爲VISIBLE，不然設置爲GONE。
那麼這個判讀是在哪裏的呢？

 

 

其實這個方法是在自定義的ScrollView裏面的，可能這裏就有人疑問，爲何要自定義ScrollView？由於onScrollChange方法是一個protected的方法，直接使用ScrollView是使用不了該方法的。

 

好的，今天的分享就到此爲止！

 

若是你們喜歡就請多多支持我博客的文章，我會盡可能抽時間來分享乾貨！！嫩們的支持是仁家的動力！！！

 

1       想要盈利嗎？想，就對了

2       android 開發賺錢

 

這是在個人博客點擊率最高的兩篇文章，看來你們仍是對賺錢感興趣啊，有須要的朋友能夠去看看，不用謝，我是雷鋒，嘻嘻！！！