隨著移動網際網路的快速發展，它已經和我們的生活息息相關了，在公交地鐵裡面都能看到很多人的人低頭看著自己的手機螢幕，從此“低頭族”一詞就產生了，作為一名移動行業的開發人員，我自己也是一名“低頭族”，上下班時間在公交地鐵上看看新聞來打發下時間，有時候也會看看那些受歡迎的App的一些介面效果，為什麼人家的app那麼受歡迎？跟使用者體驗跟UI設計也有直接的關係，最近在美團和大眾點評的App看到如下效果，我感覺使用者好，很人性化，所以自己也嘗試著實現了下，接下來就講解下實現思路！

如上圖(2)我們看到了，當立即搶購佈局向上滑動到導航欄佈局的時候，立即搶購佈局就貼在導航欄佈局下面，下面的其他的佈局還是可以滑動，當我們向下滑動的時候，立即搶購的佈局又隨著往下滑動了，看似有點複雜，但是一說思路可能你就頓時恍然大悟了。

當我們向上滑動過程中，我們判斷立即搶購的佈局是否滑到導航欄佈局下面，如果立即搶購的上面頂到了導航欄，我們新建一個立即搶購的懸浮框來顯示在導航欄下面，這樣子就實現了立即搶購貼在導航欄下面的效果啦，而當我們向下滑動的時候，當立即搶購佈局的下面剛好到了剛剛新建的立即搶購懸浮框的下面的時候，我們就移除立即搶購懸浮框，可能說的有點拗口，既然知道了思路，接下來我們就來實現效果。

新建一個Android專案，取名MeiTuanDemo,先看立即搶購（buy_layout.xml）的佈局，這裡為了方便我直接從美團上面截去了圖片

1. <?xmlversion="1.0"encoding
   ="UTF-8"?>
2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3.     android:orientation="horizontal"
4.     android:layout_width="fill_parent"
5.     android:layout_height="wrap_content">
6.     <ImageView
7.         android:id="@+id/buy_layout"
8.         android:layout_width="fill_parent"
9.         android:layout_height="wrap_content"
10.         android:background="@drawable/buy"/>
11. </LinearLayout>

立即搶購的佈局實現了，接下來實現主介面的佈局，上面是導航欄佈局，為了方便還是直接從美團擷取的圖片，然後下面的ViewPager佈局，立即搶購佈局，其他佈局 放在ScrollView裡面，介面還是很簡單的

1. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:tools="http://schemas.android.com/tools"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent"
5.     android:orientation="vertical">
6.       <ImageView
7.         android:id="@+id/imageView1"
8.         android:scaleType="centerCrop"
9.         android:layout_width="match_parent"
10.         android:layout_height="45dip"
11.         android:src="@drawable/navigation_bar"/>
12.     <com.example.meituandemo.MyScrollView
13.         android:id="@+id/scrollView"
14.         android:layout_width="fill_parent"
15.         android:layout_height="fill_parent">
16.         <LinearLayout
17.             android:layout_width="match_parent"
18.             android:layout_height="wrap_content"
19.             android:orientation="vertical">
20.             <ImageView
21.                 android:id="@+id/iamge"
22.                 android:layout_width="match_parent"
23.                 android:layout_height="wrap_content"
24.                 android:background="@drawable/pic"
25.                 android:scaleType="centerCrop"/>
26.             <include
27.                 android:id="@+id/buy"
28.                 layout="@layout/buy_layout"/>
29.             <ImageView
30.                 android:layout_width="match_parent"
31.                 android:layout_height="wrap_content"
32.                 android:background="@drawable/one"
33.                 android:scaleType="centerCrop"/>
34.             <ImageView
35.                 android:layout_width="match_parent"
36.                 android:layout_height="wrap_content"
37.                 android:background="@drawable/one"
38.                 android:scaleType="centerCrop"/>
39.             <ImageView
40.                 android:layout_width="match_parent"
41.                 android:layout_height="wrap_content"
42.                 android:background="@drawable/one"
43.                 android:scaleType="centerCrop"/>
44.         </LinearLayout>
45.     </com.example.meituandemo.MyScrollView>
46. </LinearLayout>

你會發現上面的主介面佈局中並不是ScrollView,而是自定義的一個MyScrollView,接下來就看看MyScrollView類中的程式碼

1. package com.example.meituandemo;  
2. import android.content.Context;  
3. import android.os.Handler;  
4. import android.util.AttributeSet;  
5. import android.view.MotionEvent;  
6. import android.widget.ScrollView;  
7. /** 
8.  * 部落格地址:http://blog.csdn.net/xiaanming 
9.  *  
10.  * @author xiaanming 
11.  * 
12.  */
13. publicclass MyScrollView extends ScrollView {  
14.     private OnScrollListener onScrollListener;  
15.     /** 
16.      * 主要是用在使用者手指離開MyScrollView，MyScrollView還在繼續滑動，我們用來儲存Y的距離，然後做比較 
17.      */
18.     privateint lastScrollY;  
19.     public MyScrollView(Context context) {  
20.         this(context, null);  
21.     }  
22.     public MyScrollView(Context context, AttributeSet attrs) {  
23.         this(context, attrs, 0);  
24.     }  
25.     public MyScrollView(Context context, AttributeSet attrs, int defStyle) {  
26.         super(context, attrs, defStyle);  
27. 相關推薦

    Android 實現控制元件懸浮效果

    隨著移動網際網路的快速發展，它已經和我們的生活息息相關了，在公交地鐵裡面都能看到很多人的人低頭看著自己的手機螢幕，從此“低頭族”一詞就產生了，作為一名移動行業的開發人員，我自己也是一名“低頭族”，上下班時間在公交地鐵上看看新聞來打發下時間，有時候也會看看那些受歡迎

    【Win10】實現控制元件倒影效果

    原文: 【Win10】實現控制元件倒影效果 先引入個小廣告： 最近買了臺小米盒子折騰下，發覺 UI 還是挺漂亮的，特別是主頁那個倒影效果。 （圖隨便找的，就是上面圖片底部的那個倒影效果。）   好了，廣告結束，迴歸正題，這個倒影效果我個人覺得是挺不錯的，那麼有沒有辦法在 Win10 中

    【Win10】【Win2D】實現控制元件陰影效果

    原文: 【Win10】【Win2D】實現控制元件陰影效果 學過 WPF 的都知道，在 WPF 中，為控制元件新增一個陰影效果是相當容易的。 <Border Width="100" Height="100" Background="Red">

    android實現控制元件的手勢縮放、移動以及雙擊還原

    我分四部分介紹：        1.Imageview利用Matrix和OnScaleGestureListener實現手勢縮放；        2.在第一部分的基礎上實現圖片跟隨手指進行滑動；        3.在一、二的基礎上利用GestureDetector的On

    android xml實現控制元件邊框陰影漸變效果

    實現原理：使用兩塊畫布重疊，上面畫布小於下面畫布，下面畫布漸變 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/an

    android之用scrollview實現控制元件滑動固定效果

    專案中最近用到需要佈局滑動到某一個地方的時候某個控制元件固定在螢幕頂部不動，就去研究了下，思路其實挺簡單的。我置頂的懸浮控制元件上邊還需要留個控制元件，比如搜尋框之類的，專案需求不一樣就留的不一樣，所以就研究了一下，網上也有很多，其實方法思路都一樣的，很簡單，自定義一下Sc

    Android基礎控制元件——ProgressBar自定義的介紹、動畫效果實現、附加三個漂亮的進度條

    ProgressBar自定義的介紹、動畫效果實現、附加三個漂亮的進度條 shape屬性介紹： corners 圓角   gradient 漸變   padding 內容離邊界距離   size 大小   solid 填充顏色   stroke 描邊 gradien

    Android 表格控制元件-動態實現表格效果（內容、樣式可擴充套件）

    說明：表格是很常用的控制元件，Android本身提供了TableLayout供佈局實現，但本文介紹另外一種思路，用動態佈局的方式實現，這種方式更靈活，內容、樣式能高度擴充套件，熟練的人可隨意運用到任何檢

    利用photoView實現可點選放大到全屏顯示的控制元件，效果類似於微信朋友圈點開看大圖

    此控制元件繼承自ImageView,實現效果與微信朋友圈點開看大圖相似，點選控制元件後進入沉浸模式全屏顯示大圖，全屏時雙擊或手指拉伸可放大圖片，單擊會退出全屏 老規矩，先上控制元件實現程式碼： /** * 可點選放大全屏顯示的imageView * Created by Administ

    android studio的preview看不到佈局，導致看不到控制元件的效果

    android Studio新建專案，preview只顯示一個大白版，看不到任何控制元件，不能預覽。 這時候我上網查了很多資料，最後發現可能是這幾個原因導致的： 1。 Invalidate caches/Restart... 2.  force refresh st

    Android 去掉控制元件點選的瞬間的波紋效果

    使用appcompat_v7是應用相容包時，出現app點選控制元件會有水波紋效果，如需要去掉appcompat_v7預設的效果 只需在使用的app主題里加上如下設定： <item na

    Android 簡單實現ListView頂部懸浮效果

    首先上效果圖，實現如下效果：起初在網上搜了下實現這樣的效果，美團網,大眾點評的“購買框”懸浮效果也是這樣的，不過作者實現比較麻煩，自己想了想就根據ListView提供的一些特性進行了簡單實現。整個主要佈局就是一個ListView，如果listview的上面有內容且高度比較高，可以把它當做listview的he

    android課程表控制元件、懸浮窗、Todo應用、MVP框架、Kotlin完整專案原始碼

    Android精選原始碼 Android遊戲2048 MVP Kotlin專案（RxJava+Rerotfit+OkHttp+Glide） Android基於自定義Span的富文字編輯器 android課程表控制元件效果原始碼 Dagger、Clean、MVP框架搭建，快速開發～

    Android 點選按鈕實現控制元件顯示隱藏

    我寫了一個自定義的listview，listview 每一列點選切換圖示 同時顯示 隱藏的佈局，再次點選則隱藏該佈局。以下是判斷的程式碼： holder.isShowlin.setOnClickListener(new View.OnClickListener() { @

    Android設定控制元件的透明度（半透明效果）

    1. 前言 有些需求會改變佈局顏色透明度，比如根據滑動距離，改變title顏色，設定控制元件如View,Button等的透明度，有3種方法。 2.使用方法 （1）java程式碼實現： text = (TextView) findViewById(

    QML ListView實現樹形二級列表（類似 android ExpandableListView控制元件）

    前言 QML 中沒有直接提供類似 android 的ExpandableListView二級列表控制元件，treeView，但是用 treeView 實在是有些不方便，並且達不到想要的效果，所以乾脆用 ListView 來擴充套件一個，這其中也參考了網上一些用法

    Android中控制元件的事件——xml設定對應效果state_[pressed，checked，selected，focused]

    本篇文章主要是討論下控制元件的點選事件 一、在Drawable中新增控制元件的backgroundColor樣式（點選切換顏色） 直接貼測試結果了：【在Drawable中建立xml資原始檔,在其中的Selector標籤對中新增樣式（如下黑色截圖）】 ImageButton

    Android自定義控制元件：Android L控制元件點選水波紋的實現（原始碼 + Demo）

    Demo： 一、控制元件的流程： 大致上如下，實際是有些偏差的大家可以自己畫畫 RevealLayout()--->init()--->onMeasure()--->onLayout()--->onDraw()--->dispat

    Android UI控制元件之Spinner實現省市區三級聯動

    城市資訊我將他放在strings.xml檔案中，具體就不給出了，資訊太大了 主xml檔案如下： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xml

    Android使用控制元件Spinner實現下拉選單列表

    實現效果如下： 1.實現程式碼 package com.example.testspanner; import java.util.ArrayList; import java.util.Li