Android 自定义仿IOS上拉菜单实现
Posted 化作孤岛的瓜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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);接着，需要得到整个空间的高度main_textmenulayout_HEIGHT：
main_textmenulayout_HEIGHT = 40 * scale * 11 + 30 * scale;之后再到按钮的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;
}
});ObjectAnimator animator = ObjectAnimator.ofFloat(main_textmenulayout, "translationY", screenHeight - 30 * scale); animator.setDuration(300); animator.start();
因为是商业外包项目，源码就不提供了，就这样，需要的可以私聊我。
以上是关于Android 自定义仿IOS上拉菜单实现的主要内容，如果未能解决你的问题，请参考以下文章
Android系统下用js自定义gesture事件（仿ios实现移动端事件一致）
Android仿IOS底部弹出选择菜单ActionSheet