首页 > 系统 > Android > 正文

Android实现QQ侧滑菜单效果

2019-10-21 21:26:16
字体:
来源:转载
供稿:网友

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);}@Overrideprotected 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事件@Overridepublic 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@Overridepublic void computeScroll() {  if (scroller.computeScrollOffset()){    int currx = scroller.getCurrX();    scrollTo(-currx,0);    invalidate();  }}//处理滑动冲突@Overridepublic 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;@Overrideprotected 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();    }  });}}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表