Android实现QQ侧滑菜单效果
更新时间：2019年01月28日 10:38:11 作者：常利兵
这篇文章主要为大家详细介绍了Android实现QQ侧滑菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
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>
</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();
}
});
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了android实现微信朋友圈发布动态功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
Android编程实现activity dialog透明背景的方法
这篇文章主要介绍了Android编程实现activity dialog透明背景的方法,涉及Activity相关属性设置及配置文件操作技巧,需要的朋友可以参考下2017-07-07
前些时候就是别人问我他的android APP怎么做一个广告的欢迎界面，就是过几秒后自动跳转到主界面的实现。下面通过本文给大家介绍Android 实现广告欢迎界面(倒计时)的方法，需要的朋友参考下吧2017-12-12
这篇文章主要介绍了浅谈Android添加快捷方式ShortCut，对添加快捷方式感兴趣的同学，可以参考下2021-04-04
这篇文章主要介绍了Android View 绘制机制的详解的相关资料,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了Android 中 退出多个activity的经典方法 的相关资料,本文给大家分享两种方法，在这小编给大家推荐使用第一种方法，对此文感兴趣的朋友可以参考下2016-09-09
记事本对我们每个人来说再熟悉不过，下面这篇文章主要给大家介绍了在Android中实现记事本动态添加行效果的相关资料，这是最近在开发中遇到的一个小需求，想着分享出来供大家参考学习，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要介绍了RxJava2 线程调度的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
android效果TapBarMenu绘制底部导航栏的使用方式示例
本篇文章主要介绍了android效果TapBarMenu绘制底部导航栏的使用方式，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
这篇文章主要介绍了Android 自定义阴影效果详解及实例的相关资料,需要的朋友可以参考下2017-02-02
最新评论