Android 自訂仿IOS上拉菜單實現

標籤：

最近在做一個歪果仁給我外包的項目，首頁需要做一個類似於IOS那種上拉菜單的功能，於是一時間試了各種方法，什麼Spinner、Drawlayout，SlidingMenu等等等等，都搞不了，後面實在被逼無奈自己寫了一個上拉菜單控制項，居然還能湊合著用！

姑且可以叫他MyPullUpMenu! 有時間我會封裝一下發到GitHub。

如下：

 

實現的功能有仨：

1、上拉位置未超過一定距離時，鬆開自動往下滾動。

2、上拉位置超過一定距離時，鬆開自動網上滾動直至菜單全展開。

3、菜單滾動到頂部並停止滾動時，點擊按鈕菜單自動復原到底部

實現步驟：

1.首先寫MyPullUpMenu的xml介面：

    <LinearLayout        android:id="@+id/main_textmenu"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        >        <ImageButton            android:id="@+id/main_dropdownbtn"            android:layout_width="80dp"            android:layout_height="30dp"            android:layout_alignParentBottom="true"            android:layout_centerHorizontal="true"            android:layout_gravity="center"            android:background="@drawable/main_shape0"            android:paddingBottom="5dp"            android:paddingLeft="20dp"            android:paddingRight="20dp"            android:paddingTop="5dp"            android:scaleType="fitXY"            android:src="@drawable/main_bottonbtn"/>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="0dp"            android:layout_weight="1"            android:orientation="vertical">            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn1"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="相片"                android:textColor="@android:color/white"                android:textSize="30sp"/>            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn2"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="老師"                android:textColor="@android:color/white"                android:textSize="30sp"/>            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn3"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="升級"                android:textColor="@android:color/white"                android:textSize="30sp"/>            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn4"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="活動"                android:textColor="@android:color/white"                android:textSize="30sp"/>            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn5"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="QR掃描"                android:textColor="@android:color/white"                android:textSize="30sp"/>            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn6"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="字典"                android:textColor="@android:color/white"                android:textSize="30sp"/>            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn7"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="店"                android:textColor="@android:color/white"                android:textSize="30sp"/>            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn8"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="建議"                android:textColor="@android:color/white"                android:textSize="30sp"/>            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn9"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="設定"                android:textColor="@android:color/white"                android:textSize="30sp"/>            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn10"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="新聞"                android:textColor="@android:color/white"                android:textSize="30sp"/>            <com.whale.nangua.omegaenglish.view.TextViewKaiti                android:id="@+id/main_btn11"                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="@drawable/main_shape_txtbtn"                android:gravity="center"                android:text="關於我們"                android:textColor="@android:color/white"                android:textSize="30sp"/>        </LinearLayout>

：

2.邏輯功能實現：

首先，需要在載入的過程中將這個布局檔案移動到底部:

main_textmenulayout.setY(screenHeight - 30 * scale);

這裡的screenHeight是螢幕高度，30是按鈕高度，scale是螢幕像素密度比。

接著，需要得到整個空間的高度main_textmenulayout_HEIGHT：

main_textmenulayout_HEIGHT = 40 * scale * 11 + 30 * scale;

這裡也可以改成得到整個空間高度之後再乘以縮放比進行縮放，我這樣寫是很不科學的，違反了可重用性QAQ。

之後再到按鈕的onTouch裡進行觸摸事件判斷就可以了：

        main_dropdownbtn.setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                Y = (int) event.getRawY();                ObjectAnimator animator;                switch (event.getAction()) {                    case MotionEvent.ACTION_MOVE:                        if ((Y <= (screenHeight - 30 * scale)) && (Y >= screenHeight - main_textmenulayout_HEIGHT  )) {                            main_textmenulayout.setY(Y);                        }                        break;                    case MotionEvent.ACTION_UP:                        if (Y <= (screenHeight - main_textmenulayout_HEIGHT + 30 * scale)) {                            break;                        }                        int Yposition = (int) (screenHeight - main_textmenulayout_HEIGHT / 2);                        if (Y <= Yposition) {                            animator = ObjectAnimator.ofFloat(main_textmenulayout, "translationY", screenHeight - main_textmenulayout_HEIGHT);                        } else {                            animator = ObjectAnimator.ofFloat(main_textmenulayout, "translationY", screenHeight - 30 * scale);                        }                        animator.setDuration(300);                        animator.start();                        break;                }                return false;            }        });

最後，還有按鈕的點擊下滑事件，需要在該按鈕的onClickListener中的onClick方法中定義：

ObjectAnimator animator = ObjectAnimator.ofFloat(main_textmenulayout, "translationY", screenHeight - 30 * scale);animator.setDuration(300);animator.start();

因為是商業外包項目，源碼就不提供了，就這樣，需要的可以私聊我。

Android 自訂仿IOS上拉菜單實現