当前位置： 移动技术网 > IT编程>移动开发>Android > Android实现QQ侧滑菜单效果

Android实现QQ侧滑菜单效果

2019年07月29日  | 移动技术网IT编程  | 我要评论

存款利率查询,走光看见毛,扬州电梯

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

实现逻辑

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

2.创建一个类,继承relativelayout,实现里面的onlayout

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

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

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

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

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

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

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

代码文件

布局文件

菜单布局文件

<?xml version="1.0" encoding="utf-8"?>
<scrollview xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="240dp"
android:background="@mipmap/menu_bg"
android:layout_height="match_parent"
android:orientation="vertical">

<linearlayout
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <textview
    style="@style/menu_style"
    android:text="新闻"
    android:drawableleft="@mipmap/tab_news" />
  <textview
    style="@style/menu_style"
    android:text="订阅"
    android:drawableleft="@mipmap/tab_read" />
  <textview
    style="@style/menu_style"
    android:text="跟帖"
    android:drawableleft="@mipmap/tab_ties" />
  <textview
    style="@style/menu_style"
    android:text="图片"
    android:drawableleft="@mipmap/tab_pics" />
  <textview
    style="@style/menu_style"
    android:text="话题"
    android:drawableleft="@mipmap/tab_ugc" />
  <textview
    style="@style/menu_style"
    android:text="投票"
    android:drawableleft="@mipmap/tab_vote" />
  <textview
    style="@style/menu_style"
    android:text="本地"
    android:drawableleft="@mipmap/tab_local" />
  <textview
    style="@style/menu_style"
    android:text="聚合阅读"
    android:drawableleft="@mipmap/tab_focus" />

  <textview
    style="@style/menu_style"
    android:text="聚合阅读"
    android:drawableleft="@mipmap/tab_focus" />

  <textview
    style="@style/menu_style"
    android:text="聚合阅读"
    android:drawableleft="@mipmap/tab_focus" />

  <textview
    style="@style/menu_style"
    android:text="聚合阅读"
    android:drawableleft="@mipmap/tab_focus" />

  <textview
    style="@style/menu_style"
    android:text="聚合阅读"
    android:drawableleft="@mipmap/tab_focus" />

</linearlayout>
</scrollview>

主页面布局

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<linearlayout
  android:gravity="center_vertical"
  android:background="@mipmap/top_bar_bg"
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <imagebutton
    android:background="@null"
    android:id="@+id/ib_back"
    android:src="@mipmap/main_back"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
  <imageview
    android:src="@mipmap/top_bar_divider"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

  <textview
    android:layout_weight="1"
    android:gravity="center"
    android:text="黑马新闻"
    android:textsize="20sp"
    android:textcolor="#fff"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</linearlayout>

<textview
  android:gravity="center"
  android:textcolor="#cfcfcf"
  android:textsize="20sp"
  android:text="钓鱼岛是中国的..."
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

</linearlayout>

主页面布局

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
android:layout_width="match_parent" android:layout_height="match_parent"
android:paddingbottom="@dimen/activity_vertical_margin"
android:paddingleft="@dimen/activity_horizontal_margin"
android:paddingright="@dimen/activity_horizontal_margin"
android:paddingtop="@dimen/activity_vertical_margin"
tools:context="com.example.a1_.mainactivity">

<com.example.a1_.slidingmenu
  android:id="@+id/slidingmenu"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <include layout="@layout/menu"/>
  <include layout="@layout/main"/>
</com.example.a1_.slidingmenu>
</relativelayout>

自定义布局

package com.example.a1_;

import android.content.context;
import android.util.attributeset;
import android.view.motionevent;
import android.view.view;
import android.widget.relativelayout;
import android.widget.scroller;

/**
 * created by administrator on 2017.05.29.0029.
 */

public class slidingmenu extends relativelayout {

private float downx;
private int destance;
private int menuwidth;
private int endx;
private int dx;
private final scroller scroller;
private float downy;
private int dy;

public slidingmenu(context context, attributeset attrs) {
  super(context, attrs);
  //创建scroller对象
  scroller = new scroller(context);
}

@override
protected void onlayout(boolean changed, int l, int t, int r, int b) {
  //获取子控件
  view menu = getchildat(0);
  view main = getchildat(1);
  //获取菜单布局的宽度
  menuwidth = menu.getmeasuredwidth();
  //把菜单布局布置在屏幕左侧
  menu.layout(-menuwidth,t,0,b);
  //主页面使用默认的位置就可以
  main.layout(l,t,r,b);
}

//给布局添加一个touch事件

@override
public boolean ontouchevent(motionevent event) {
  switch (event.getaction()){
    case motionevent.action_down:
      //当手指按下时,记录一下手指的位置
      downx = event.getx();
      break;
    case motionevent.action_move:
      //当手指移动的时候,记录移动的距离
      destance = (int) (event.getx()- downx+endx);
      //对手指滑动的时候,页面移动做出限制
      if (destance>menuwidth){
        destance = menuwidth;
      }else if (destance<0){
        destance = 0;
      }
      scrollto(-destance,0);
      break;
    case motionevent.action_up:
      //当手指离开屏幕的时候,记录菜单的位置,根据情况进行判定
      if (destance<menuwidth/2){
        endx = 0;
      }else {
        endx = menuwidth;
      }
      int startx = destance;
      //计算偏移量
      dx = endx-destance;
      scroller.startscroll(startx,0,dx,0,math.abs(dx)*10);
      invalidate();
      break;
  }
  return true;
}

//重写computescroll
@override
public void computescroll() {
  if (scroller.computescrolloffset()){
    int currx = scroller.getcurrx();
    scrollto(-currx,0);
    invalidate();
  }
}

//处理滑动冲突
@override
public boolean onintercepttouchevent(motionevent ev) {
  switch (ev.getaction()){
    case motionevent.action_down:
      //获取当前点击的位置
      downx = ev.getx();
      downy = ev.gety();
      break;
    case motionevent.action_move:
      //获取x和y方向的偏移量
      dx = (int) (ev.getx()-downx);
      dy = (int) (ev.gety() - downy);
      //判断是x方向偏移的多还是y方向偏移得多
      if (math.abs(dx)>math.abs(dy)){
        //拦截move事件
        return true;
      }
      break;
  }
  return super.onintercepttouchevent(ev);
}

//判断当前的菜单状态是打开还是关闭的
public void switchmenu(){
  int startx = 0;
  if (endx == 0){
    endx = menuwidth;
  }else {
    endx = 0;
    startx = menuwidth;
  }
  //设置偏移量
  int dx = endx-startx;
  scroller.startscroll(startx,0,dx,0,math.abs(dx)*10);
  invalidate();
}
}

主页面代码

package com.example.a1_;

import android.support.v7.app.appcompatactivity;
import android.os.bundle;
import android.view.view;
import android.widget.imagebutton;

public class mainactivity extends appcompatactivity {
private slidingmenu slidingmenu;

@override
protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_main);
  //初始化控件
  imagebutton imagebutton = (imagebutton) findviewbyid(r.id.ib_back);
  slidingmenu = (slidingmenu) findviewbyid(r.id.slidingmenu);

  //设置点击事件
  imagebutton.setonclicklistener(new view.onclicklistener() {
    @override
    public void onclick(view v) {
      slidingmenu.switchmenu();
    }
  });
}
}

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网