PopupWindow實現仿iOS QQ音樂上拉功能表列（支援手勢以及點擊操作）

標籤：

轉載請註明出處：王亟亟的大牛之路

能力OK的小夥伴可以不看N2，源碼在最下面

今天早上一個Andorid群的小夥伴問了我一些PopupWindow的問題，正好昨天晚上我注意到QQ音樂的一個功能表列，那麼今天就按照那個實現做一下（UI瞎湊合的你懂的）

先上下原圖：

再貼一下我們的效果（除了長得不像也沒什麼，哈哈哈）：

功能實現：

1：底部PopupWindow呈現

2：手勢動作操作控制項

3：按鈕操作控制項

4：控制項內部的點擊事件

How to do?

分析：

首先這是一個標準的底部的PopupWindow，pop(之後都這麼簡寫了)內部有2排，每一排都有一系列按鈕，
每一個按鈕都有它的點擊事件，pop支援手勢顯示or隱藏,這一系列就是我們要做的事，讓我們帶著需求來看代碼。

包結構：

這次沒像以前，寫一個Demo我導了一堆包，這次就用了Log的庫：

Gradle:

 compile ‘com.apkfuns.logutils:library:1.0.6‘

實作類別就一個public class HomeActivity extends Root implements View.OnClickListener, View.OnTouchListener

例子裡有一大堆的findID的東西，其實可以用註解來做這些事，可以參考http://blog.csdn.net/ddwhan0123/article/details/47399259

OnClickListener來解決我們所有的點擊事件，從按鈕到pop中的小表徵圖

OnTouchListener來解決我們滑動操作的業務，隱藏/顯示 pop用

具體滑動隱藏/顯示的方法：
moveY 是一個滑動距離判斷值，定義多場多端你自己決定吧
MotionEvent.ACTION_DOWN 觸摸到螢幕的那一刻 記錄一個座標。
MotionEvent.ACTION_UP 手指離開時的座標，然後？

加加減減就出結果了，是不是So easy?

   @Override    public boolean onTouch(View v, MotionEvent event) {        switch (event.getAction()) {            case MotionEvent.ACTION_DOWN:                y=event.getY();                LogUtils.d("--->HomeActivity onTouch  y=event.getY() "+y);                break;            case MotionEvent.ACTION_MOVE:                break;            case MotionEvent.ACTION_UP:                float tempY=event.getY();                LogUtils.d("--->HomeActivity onTouch  tempY=event.getY() "+tempY);                //從下往上滑                if(y-tempY<moveY){                    dissmissPop();                    //從上往下滑                }else if(y-tempY>moveY){                    popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);                }                break;        }        return true;    }

來點下一些基礎知識點（N2）

1.如何控制pop的位置？

popupWindow.showAtLocation();

如果只是設定在空間的下面只需要

popupWindow.showAsDropDown(控制項);

左邊：

popupWindow.showAtLocation(v, Gravity.NO_GRAVITY, location[0]-popupWindow.getWidth(), location[1]);

右邊：

popupWindow.showAtLocation(v, Gravity.NO_GRAVITY, location[0]+v.getWidth(), location[1]);  

2.pop中，所有小控制項都是遵循於style="@style/popTheme"，那這部分又是如何操作的？

Style!!

Style是針對表單元素層級的，改變指定控制項或者Layout的樣式。

那再說下Theme：
Theme是針對表單層級的，改變表單樣式

2.1 HOW to use Style?

1.在res/values 目錄下建立一個名叫style.xml的檔案。增加一個<resources>根節點。
2.對每一個風格和主題，給<style>element增加一個全域唯一的名字，也可以選擇增加一個父類屬性。在後邊我們可以用這個名字來應用風格，而父類屬性標識了當前風格是繼承於哪個風格。
3.在<style>元素內部，申明一個或者多個<item>,每一個<item>定義了一個名字屬性，並且在元素內部定義了這個風格的值。
4.你可以應用在其他XML定義的資源。

源碼地址：https://github.com/ddwhan0123/BlogSample/tree/master/PopupWindowDemo

記得點個贊哦！！

PopupWindow實現仿iOS QQ音樂上拉功能表列（支援手勢以及點擊操作）