前两天学习了hyman老师讲的Android侧滑菜单的实现,经过自己的整理分享出来给大家学习一下

现在很多APP都有菜单侧滑的功能,本篇文章主要讲解使用自定义的HorizontalScrollView控件实现简单的菜单侧滑功能

用户可以左右滑动或者点击上方的菜单切换按钮,切换菜单

不多说先上两张效果图,图中内容正文页面只是QQ聊天界面的一张静态图片

接下来,让我们看下具体代码的实现,代码中有注释

1. left_menu.xml布局文件,用来显示图二中的菜单界面

注意:所有xml中的image图片信息没有提供,所以drawable图片资源需要自己另外,只有加上图片资源项目才能正常运行

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" > <LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/img_frame_background"
android:layout_marginLeft="50dp"
android:layout_marginTop="80dp"
android:orientation="vertical" > <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" > <ImageView
android:id="@+id/image1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/img_1" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@id/image1"
android:text="第一个item"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout> <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" > <ImageView
android:id="@+id/image2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/img_2" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@id/image2"
android:text="第二个item"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout> <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" > <ImageView
android:id="@+id/image3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/img_3" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@id/image3"
android:text="第三个item"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout> <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" > <ImageView
android:id="@+id/image4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/img_4" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@id/image4"
android:text="第四个item"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout> <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" > <ImageView
android:id="@+id/image5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/img_5" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@id/image5"
android:text="第五个item"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout> </RelativeLayout>

2.activity_main.xml,主页面,里面包含了自定义控件HorizontalScrollView,这个对应到下面的SlidingMenu.java类

注意HorizontalScrollView里最多只能包含一个布局,本案例使用的是LinearLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" > <com.wujiandong.slidingmenu.view.SlidingMenu
android:id="@+id/menu"
android:layout_width="match_parent"
android:layout_height="match_parent" > <LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" > <include layout="@layout/left_menu" /> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/qq" > <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text = "切换菜单"
android:onClick="toggleMenu"
/> </LinearLayout>
</LinearLayout>
</com.wujiandong.slidingmenu.view.SlidingMenu> </RelativeLayout>

3. 编写SlidingMenu.java类,这就是自定义的HorizontalScrollView控件

package com.wujiandong.slidingmenu.view;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout; public class SlidingMenu extends HorizontalScrollView{ private LinearLayout wrapper;
private ViewGroup menu;
private ViewGroup content; //屏幕的宽度
private int screenWidth;
//菜单view的宽度
private int muneWidth;
//内容view的宽度
private int contentWidth; //菜单向右边拉出来时,离右边屏幕的距离,初始化为80dp
private int muneRightPadding = 80; //判断onMeasure方法是不是第一次调用,我们只要求调用一次
private boolean flag; //判断菜单是否是打开状态
private boolean isOpen; //未使用自定义属性时,调用
public SlidingMenu(Context context, AttributeSet attrs) {
super(context, attrs); //获得屏幕的宽度
WindowManager wm = (WindowManager) getContext()
.getSystemService(Context.WINDOW_SERVICE); DisplayMetrics displayMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(displayMetrics);
screenWidth = displayMetrics.widthPixels; //将dip转化为px
muneRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 80, context.getResources().getDisplayMetrics()); } /*
* 设置子view的宽和高
* 设置自己的宽和高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { if(!flag){
//获得HorizontalScrollView控件中对应的子view,参考activity_main.xml
wrapper = (LinearLayout)getChildAt(0);
menu = (ViewGroup)wrapper.getChildAt(0);
content = (ViewGroup)wrapper.getChildAt(1); muneWidth= menu.getLayoutParams().width = screenWidth - muneRightPadding;
contentWidth = content.getLayoutParams().width = screenWidth;
//自己的宽度wrapperWidth,由于是一个LinearLayout,里面包含menu和content,子view的宽和高确定了,自己的宽和高就确定了,所以不设置了 flag = true;
} super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} /*
* 我们布局文件中是menu显示,content隐藏的
* 所以在这里通过设置偏移量,将menu隐藏,content显示
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b); //防止多次调用,我们只有在布局改变时才调用这个方法
if(changed){
//向左边滑动menu的宽度,就是隐藏了menu
this.scrollTo(muneWidth, 0);
} } /*
* 判断手指滑动的结果
*/
@Override
public boolean onTouchEvent(MotionEvent ev) { int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_UP: //menu菜单隐藏在屏幕左边的宽度
int scrollX = getScrollX();
if(scrollX >= muneWidth/2){
//渐滑的效果,菜单隐藏,隐藏在屏幕左边的宽度为muneWidth
this.smoothScrollTo(muneWidth, 0);
isOpen = false;
}else{
//菜单完全显示,隐藏在左边屏幕的宽度为0
this.smoothScrollTo(0, 0);
isOpen =true;
} return true;
} return super.onTouchEvent(ev);
} //打开菜单
public void openMenu(){ if(isOpen) return; this.smoothScrollTo(0, 0);
isOpen =true;
} //关闭菜单
public void closeMenu(){
if(!isOpen) return; this.smoothScrollTo(muneWidth, 0);
isOpen = false;
} //点击按钮,切换菜单
public void toggle(){ if(isOpen){
closeMenu();
}
else {
openMenu();
}
}
}

4.  MainActivity.java,程序的执行入口

package com.wujiandong.slidingmenu;

import com.wujiandong.slidingmenu.R;
import com.wujiandong.slidingmenu.view.SlidingMenu; import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window; public class MainActivity extends Activity { private SlidingMenu lefMenu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main); lefMenu = (SlidingMenu)findViewById(R.id.menu); } //布局文件中定义了点击事件,可以直接调用
public void toggleMenu(View view){
lefMenu.toggle();
} @Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
} }

好了,代码已经展示完毕,大家按照流程来,就能实现绚丽的侧滑功能了

如果大家有不懂的地方或者有错误的地方,欢迎发表评论提出,谢谢观看,下次我们在分享~~

Android侧滑菜单代码实现的更多相关文章

  1. Android 侧滑菜单的简单实现(SlidingMenu)二

    在上一篇博文中已经简单的实现了侧滑菜单,代码也很简单,就几行代码. 这篇文章依然讲侧滑菜单,与前一篇文章不同的是,这篇文章用不同的代码方式来实现侧滑菜单. 在前面的文章中已经用了在Activity中通 ...

  2. Android 侧滑菜单的简单实现(SlidingMenu)

    在我还没有学习Android的时候就用过侧滑菜单的APP,当时第一个感觉是:哇塞,这效果不错!当然,现在自己都已经学Android了,这效果当然也要做出来啊~ SlidingMenu是一种比较新的设置 ...

  3. android侧滑菜单笔记

    一.SlidingPaneLayout v4包下的控件,使用简单,功能简洁.官方文档明确说明该控件只能左侧滑动.使用如下: <android.support.v4.widget.SlidingP ...

  4. android 侧滑菜单

    就是用手一滑才出现,占手机半个多屏幕的菜单.为了美观和页面转跳,很多时候要用到. 实现的话就是使用官方的DrawerLayout,注意这个布局一定要是最顶层的布局. 在DrawerLayout里面直接 ...

  5. Android侧滑菜单和轮播图之滑动冲突

    接手一个项目,有一个问题需要修改:轮播图不能手动滑动,手动滑动轮播图只会触发侧滑菜单. 猜测:viewpager控件(轮播图)的触摸事件被SlidingMenu控件(侧滑菜单,非第三方项目,乃是上个开 ...

  6. 教你用DrawLayout 实现Android 侧滑菜单

    现在的APP越来越注重用户体验,百度视频客户端有一个特效还是挺吸引人的,在主界面手指向右滑动,就可以将菜单展示出来,而主界面会被隐藏大部分,但是仍有左侧的一小部分同菜单一起展示.类似的还有天天动听,人 ...

  7. MaterialDrawer开源侧滑菜单的使用手册

    官方有详细说明,但是我首次查找的时候并没有第一眼就能使用全部功能,而网上也查找了一下,几乎所有的博客都是简简单单的几句代码...连句说明都没有,可能是我这小菜鸡理解能力不行,或者大神们认为coding ...

  8. Android之自定义侧滑菜单

    先来上图: 我们把主界面从左向右拉动,可以看到地下有一层菜单页,从透明渐渐变得不透明,从小渐渐变大,感觉上觉得菜单页是从屏幕外面被拉到屏幕中的.下面的代码实现这个DEMO: 首先是自定义控件Slidi ...

  9. 第三方侧滑菜单SlidingMenu在android studio中的使用

    南尘:每天进步一点点! 前面讲了官方的侧滑菜单DrawerLayout的使用,其实早在官方没有推出这个之前,就有很多第三方的jar包如SlidingMenu等,感谢开源的力量. SlidingMenu ...

随机推荐

  1. 对HTML5校验 自定义验证信息

    在HTML5中,表单可以定义一个属性required来触发默认的校验机制,比如: <input type="text" required /> 弹出的错误提示默认为英文 ...

  2. 基础算法之选择排序Selection Sort

    原理 首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾.以此类推,直到所有元素均排序完毕.一种简单直观的排序算 ...

  3. C#如果把A.new()编译成new A()

    缘由 对于初次接触某个第三方库的C#开发者,假如要调用里面一个方法,发现需要一个A类型的实例作为参数,怎么获得这个实例呢? 我想大多数人会先尝试new A吧: 如果没有,可能会尝试输入A.看看有没可能 ...

  4. Java IO教程

    1  Java IO 教程 2 Java IO 概述 3 Java IO: 文件 4 Java IO: 管道 5 Java IO: 网络 6 Java IO: 字节和字符数组 7 Java IO: S ...

  5. 提高ASP.NET应用程序性能的十大方法

    一.返回多个数据集 检查你的访问数据库的代码,看是否存在着要返回多次的请求.每次往返降低了你的应用程序的每秒能够响应请求的次数.通过在单个数据库请求中返回多个结果集,可以减少与数据库通信的时间,使你的 ...

  6. WPF MVVM 学习总结(一)

    ---恢复内容开始--- 1. MVVM简介 在WPF中,MVVM(View-ViewModel-Model)开发模型用的很多,它具有低耦合,可重用行,相对独立的设计和逻辑.所以备受广大开发者的喜爱. ...

  7. struts2+spring+hibernte整合示例

    简单实现添加用户功能,仅供初学者参考,可自行扩展程序功能(增删改查). 这里贴下代码,需要的可以下载看(因为比较懒). applicationContext.xml <?xml version= ...

  8. IOS多媒体

    概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制,还是对麦克风.摄像 ...

  9. Git & GitHub

    使用 Git 和 GitHub 有一段时间了,总结下经验. 起初接触 Git 是先遇到 GitHub 的,当时傻傻分不清这两者的区别,毕竟名字都那么像,刚开始只想用酷酷的方法 clone 代码(SSH ...

  10. MFC之键盘和键盘消息处理

    今天学习了最基本的MFC操作,键盘及键盘消息函数,跟着书中的内容自己编了个小程序.检测用户是否同时按下SHIFT和B键 第一步:先是建了一个单文档模式的MFC程序,添加了键盘消息及处理函数.键盘消息处 ...