经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Android » 查看文章
Android实现QQ侧滑菜单效果
来源：jb51　　时间：2019/1/30 9:19:13　　对本文有异议

QQ侧滑菜单的Android实现代码，供大家参考，具体内容如下

实现逻辑

1.先写出菜单页面和主页面的布局

2.创建一个类,继承RelativeLayout,实现里面的onLayout

3.在主布局文件中添加子空间

4.在onLayout里面获取子控件的宽和高,并对子控件的位置进行绘制

5.给子布局设置滑动事件,分别在手指落下\移动\抬起的时候,获取手指的位置

6.在手指移动的过程中,对菜单页面的移动距离进行限制,防止菜单页面跑出指定的页面

7.在手指抬起的时候,判定一下手指移动的距离,如果移动的距离大于菜单页面宽度的一半,那就让菜单弹出,否则就让菜单回到默认的位置

8.针对菜单的弹出和收起,实现了一个渐变的过程,防止手指抬起的时候,菜单页面会突然间到达指定的位置,这个功能的实现需要借助computeScroll方法

9.滑动冲突的处理,分别求出手指移动时,X和Y方向的偏移量,如果x方向的大于Y方向的,那就判定滑动事件是弹出和收起菜单,否则就判定为菜单页面的内部滑动

代码文件

布局文件

菜单布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="240dp"
  4. android:background="@mipmap/menu_bg"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical">
  7.  
  8. <LinearLayout
  9.   android:orientation="vertical"
  10.   android:layout_width="match_parent"
  11.   android:layout_height="match_parent">
  12.  
  13.   <TextView
  14.     style="@style/menu_style"
  15.     android:text="新闻"
  16.     android:drawableLeft="@mipmap/tab_news" />
  17.   <TextView
  18.     style="@style/menu_style"
  19.     android:text="订阅"
  20.     android:drawableLeft="@mipmap/tab_read" />
  21.   <TextView
  22.     style="@style/menu_style"
  23.     android:text="跟帖"
  24.     android:drawableLeft="@mipmap/tab_ties" />
  25.   <TextView
  26.     style="@style/menu_style"
  27.     android:text="图片"
  28.     android:drawableLeft="@mipmap/tab_pics" />
  29.   <TextView
  30.     style="@style/menu_style"
  31.     android:text="话题"
  32.     android:drawableLeft="@mipmap/tab_ugc" />
  33.   <TextView
  34.     style="@style/menu_style"
  35.     android:text="投票"
  36.     android:drawableLeft="@mipmap/tab_vote" />
  37.   <TextView
  38.     style="@style/menu_style"
  39.     android:text="本地"
  40.     android:drawableLeft="@mipmap/tab_local" />
  41.   <TextView
  42.     style="@style/menu_style"
  43.     android:text="聚合阅读"
  44.     android:drawableLeft="@mipmap/tab_focus" />
  45.  
  46.   <TextView
  47.     style="@style/menu_style"
  48.     android:text="聚合阅读"
  49.     android:drawableLeft="@mipmap/tab_focus" />
  50.  
  51.   <TextView
  52.     style="@style/menu_style"
  53.     android:text="聚合阅读"
  54.     android:drawableLeft="@mipmap/tab_focus" />
  55.  
  56.   <TextView
  57.     style="@style/menu_style"
  58.     android:text="聚合阅读"
  59.     android:drawableLeft="@mipmap/tab_focus" />
  60.  
  61.   <TextView
  62.     style="@style/menu_style"
  63.     android:text="聚合阅读"
  64.     android:drawableLeft="@mipmap/tab_focus" />
  65.  
  66. </LinearLayout>
  67. </ScrollView>

主页面布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical">
  6.  
  7. <LinearLayout
  8.   android:gravity="center_vertical"
  9.   android:background="@mipmap/top_bar_bg"
  10.   android:orientation="horizontal"
  11.   android:layout_width="match_parent"
  12.   android:layout_height="wrap_content">
  13.   <ImageButton
  14.     android:background="@null"
  15.     android:id="@+id/ib_back"
  16.     android:src="@mipmap/main_back"
  17.     android:layout_width="wrap_content"
  18.     android:layout_height="wrap_content" />
  19.   <ImageView
  20.     android:src="@mipmap/top_bar_divider"
  21.     android:layout_width="wrap_content"
  22.     android:layout_height="wrap_content" />
  23.  
  24.   <TextView
  25.     android:layout_weight="1"
  26.     android:gravity="center"
  27.     android:text="黑马新闻"
  28.     android:textSize="20sp"
  29.     android:textColor="#fff"
  30.     android:layout_width="wrap_content"
  31.     android:layout_height="wrap_content" />
  32.  
  33. </LinearLayout>
  34.  
  35. <TextView
  36.   android:gravity="center"
  37.   android:textColor="#cfcfcf"
  38.   android:textSize="20sp"
  39.   android:text="钓鱼岛是中国的..."
  40.   android:layout_width="match_parent"
  41.   android:layout_height="match_parent" />
  42.  
  43. </LinearLayout>

主页面布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
  4. android:layout_width="match_parent" android:layout_height="match_parent"
  5. android:paddingBottom="@dimen/activity_vertical_margin"
  6. android:paddingLeft="@dimen/activity_horizontal_margin"
  7. android:paddingRight="@dimen/activity_horizontal_margin"
  8. android:paddingTop="@dimen/activity_vertical_margin"
  9. tools:context="com.example.a1_.MainActivity">
  10.  
  11. <com.example.a1_.SlidingMenu
  12.   android:id="@+id/slidingmenu"
  13.   android:layout_width="match_parent"
  14.   android:layout_height="match_parent">
  15.   <include layout="@layout/menu"/>
  16.   <include layout="@layout/main"/>
  17. </com.example.a1_.SlidingMenu>
  18. </RelativeLayout>

自定义布局

  1. package com.example.a1_;
  2.  
  3. import android.content.Context;
  4. import android.util.AttributeSet;
  5. import android.view.MotionEvent;
  6. import android.view.View;
  7. import android.widget.RelativeLayout;
  8. import android.widget.Scroller;
  9.  
  10. /**
  11.  * Created by Administrator on 2017.05.29.0029.
  12.  */
  13.  
  14. public class SlidingMenu extends RelativeLayout {
  15.  
  16. private float downX;
  17. private int destance;
  18. private int menuWidth;
  19. private int endx;
  20. private int dx;
  21. private final Scroller scroller;
  22. private float downY;
  23. private int dy;
  24.  
  25. public SlidingMenu(Context context, AttributeSet attrs) {
  26.   super(context, attrs);
  27.   //创建Scroller对象
  28.   scroller = new Scroller(context);
  29. }
  30.  
  31. @Override
  32. protected void onLayout(boolean changed, int l, int t, int r, int b) {
  33.   //获取子控件
  34.   View menu = getChildAt(0);
  35.   View main = getChildAt(1);
  36.   //获取菜单布局的宽度
  37.   menuWidth = menu.getMeasuredWidth();
  38.   //把菜单布局布置在屏幕左侧
  39.   menu.layout(-menuWidth,t,0,b);
  40.   //主页面使用默认的位置就可以
  41.   main.layout(l,t,r,b);
  42. }
  43.  
  44. //给布局添加一个touch事件
  45.  
  46. @Override
  47. public boolean onTouchEvent(MotionEvent event) {
  48.   switch (event.getAction()){
  49.     case MotionEvent.ACTION_DOWN:
  50.       //当手指按下时,记录一下手指的位置
  51.       downX = event.getX();
  52.       break;
  53.     case MotionEvent.ACTION_MOVE:
  54.       //当手指移动的时候,记录移动的距离
  55.       destance = (int) (event.getX()- downX+endx);
  56.       //对手指滑动的时候,页面移动做出限制
  57.       if (destance>menuWidth){
  58.         destance = menuWidth;
  59.       }else if (destance<0){
  60.         destance = 0;
  61.       }
  62.       scrollTo(-destance,0);
  63.       break;
  64.     case MotionEvent.ACTION_UP:
  65.       //当手指离开屏幕的时候,记录菜单的位置,根据情况进行判定
  66.       if (destance<menuWidth/2){
  67.         endx = 0;
  68.       }else {
  69.         endx = menuWidth;
  70.       }
  71.       int startX = destance;
  72.       //计算偏移量
  73.       dx = endx-destance;
  74.       scroller.startScroll(startX,0,dx,0,Math.abs(dx)*10);
  75.       invalidate();
  76.       break;
  77.   }
  78.   return true;
  79. }
  80.  
  81. //重写computeScroll
  82. @Override
  83. public void computeScroll() {
  84.   if (scroller.computeScrollOffset()){
  85.     int currx = scroller.getCurrX();
  86.     scrollTo(-currx,0);
  87.     invalidate();
  88.   }
  89. }
  90.  
  91. //处理滑动冲突
  92. @Override
  93. public boolean onInterceptTouchEvent(MotionEvent ev) {
  94.   switch (ev.getAction()){
  95.     case MotionEvent.ACTION_DOWN:
  96.       //获取当前点击的位置
  97.       downX = ev.getX();
  98.       downY = ev.getY();
  99.       break;
  100.     case MotionEvent.ACTION_MOVE:
  101.       //获取x和y方向的偏移量
  102.       dx = (int) (ev.getX()-downX);
  103.       dy = (int) (ev.getY() - downY);
  104.       //判断是x方向偏移的多还是y方向偏移得多
  105.       if (Math.abs(dx)>Math.abs(dy)){
  106.         //拦截move事件
  107.         return true;
  108.       }
  109.       break;
  110.   }
  111.   return super.onInterceptTouchEvent(ev);
  112. }
  113.  
  114. //判断当前的菜单状态是打开还是关闭的
  115. public void switchMenu(){
  116.   int startX = 0;
  117.   if (endx == 0){
  118.     endx = menuWidth;
  119.   }else {
  120.     endx = 0;
  121.     startX = menuWidth;
  122.   }
  123.   //设置偏移量
  124.   int dx = endx-startX;
  125.   scroller.startScroll(startX,0,dx,0,Math.abs(dx)*10);
  126.   invalidate();
  127. }
  128. }

主页面代码

  1. package com.example.a1_;
  2.  
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.widget.ImageButton;
  7.  
  8. public class MainActivity extends AppCompatActivity {
  9. private SlidingMenu slidingMenu;
  10.  
  11. @Override
  12. protected void onCreate(Bundle savedInstanceState) {
  13.   super.onCreate(savedInstanceState);
  14.   setContentView(R.layout.activity_main);
  15.   //初始化控件
  16.   ImageButton imageButton = (ImageButton) findViewById(R.id.ib_back);
  17.   slidingMenu = (SlidingMenu) findViewById(R.id.slidingmenu);
  18.  
  19.   //设置点击事件
  20.   imageButton.setOnClickListener(new View.OnClickListener() {
  21.     @Override
  22.     public void onClick(View v) {
  23.       slidingMenu.switchMenu();
  24.     }
  25.   });
  26. }
  27. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Android热门文章

  • 安卓虚拟定位实现与反作弊思路
  • Android之Activity启动流程详解（基于api28）
  • MAUI开发Android程序使PDA扫码广播消息转发至Web页面
  • android开发技巧杂谈
  • 高通CSR8675蓝牙音频芯片介绍
  • Android Studio列表用法之一：ListView图文列表显示（实例）
  • 分析Android 11.0Settings源码之主界面加载
  • 联发科MT6731 4G智能功能手机处理器芯片介绍
  • android 请求接口报错 org.apache.http.conn.HttpHostConnectException: Connection to http://192.168.1.90:9090 refused
  • GSYVideoPlayer使用记录

    • Android推荐文章

  • Jetpack Compose(7)——触摸反馈
  • 安卓开发日志采集和分析面面谈
  • Android桌面Launcher源码浅析
  • Android启动过程-万字长文(Android14)
  • Android Studio制作简单登录界面
  • FFmpeg开发笔记（九）Linux交叉编译Android的x265库
  • 在Android开发中如何使用OpenSL ES库播放解码后的pcm音频文件？
  • Android 开机流程介绍
  • 安卓端出现https请求失败的一次问题排查
  • Android 编译介绍

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号