菜单侧滑效果【Android】

最新推荐文章于 2024-04-27 14:28:41 发布
最新推荐文章于 2024-04-27 14:28:41 发布
阅读量732 收藏 1
点赞数
分类专栏： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin14543/article/details/52459824
版权

跟着慕课的视频学子这个，但还是感觉云里雾里的听不懂。。。。算了，还是先把代码总结一下，以后用多了应该就知道了吧

一般侧滑的实现
ViewGroup Menu + Content
onTouchEvent
MOVE:ViewGroup的leftMargin
UP:根据显示菜单的宽度，决定将其隐藏或者显示;
1.Scroller
2.LeftMargin + Thread
继承自HorizontalScrollView
自定义ViewGroup
1.onMeasure
决定内部View(子View)的宽和高，以及自己的宽和高
2.onLayout
决定子View的放置的位置
3.onTouchEvent


自定义属性:允许用户设置菜单离屏幕右边的边距

1.书写xml文件 values/attr.xml

2.在布局文件中进行使用，特别注意xmlns

3.在构造方法中（3个参数的构造方法）中获得我们设置的值

-------------------
抽屉式侧滑
区别：菜单仿佛在内容区域底下
mMenuWidth:
100px mMenuWidth-100px
200px mMenuWidth-200px


属性动画(Android 3.0):TraslationX


getScrollX : mMenuWidth ~ 0


调用动画时机
ACTION_MOVE
------------------
区别1：内容区域1.0~0.7缩放的效果
scale : 1.0~0.0
0.7+0.3*scale


区别2：菜单的偏移量需要修改


区别3：菜单的显示时有缩放，以及透明度变化


缩放：0.7 ~ 1.0
0.7 ~ scale*0.3
透明度：0.6 ~ 1.0
0.6 + 0.4*(1-scale) ;
----------------------------
总结
一、自定义ViewGroup
1.构造方法的选择，获得一些需要用到的值
2.onMeasure 计算子View的宽和高，以及设置自己的宽和高
3.onLayout 决定子View的布局的位置
4.onTouchEvent
二、构造方法
1.context new CustomViewGroup(Context) this(Context, null);
2.context, attr 布局文件中声明（没有自定义的属性）
this(Context ,attr, 0);
3.context,  attr, defStyle (有自定义的属性)
三、自定义属性
1.attr.xml
2.布局文件中 xmlns = 
3.在3个参数的构造方法中，获得我们自定义属性的值
布局文件：activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:hyman="http://schemas.android.com/apk/res/com.example.slidingmenutest"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:background="@drawable/img_frame_background">
	
    <com.example.slidingmenutest.view.SlidingMenu 
        android:id="@+id/id_menu"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        hyman:rightPadding="100dp"
        >
        
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            >
            
            <include layout="@layout/left_menu"/>
            
           	<LinearLayout 
           	    android:layout_width="fill_parent"
           	    android:layout_height="match_parent"
           	    android:background="@drawable/qq">
           	    
           	    <Button
           	        android:onClick="toggleMenu"
           	        android:layout_width="wrap_content"
           	        android:layout_height="35dp"
           	        android:textSize="15sp"
           	        android:text="切换菜单"
           	        />
           	    
           	</LinearLayout>
        </LinearLayout>
        
    </com.example.slidingmenutest.view.SlidingMenu>
    
</RelativeLayout>
left_menu.xml 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:hyman="http://schemas.android.com/apk/res/com.example.slidingmenutest"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:background="@drawable/img_frame_background">
	
    <com.example.slidingmenutest.view.SlidingMenu 
        android:id="@+id/id_menu"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        hyman:rightPadding="100dp"
        >
        
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            >
            
            <include layout="@layout/left_menu"/>
            
           	<LinearLayout 
           	    android:layout_width="fill_parent"
           	    android:layout_height="match_parent"
           	    android:background="@drawable/qq">
           	    
           	    <Button
           	        android:onClick="toggleMenu"
           	        android:layout_width="wrap_content"
           	        android:layout_height="35dp"
           	        android:textSize="15sp"
           	        android:text="切换菜单"
           	        />
           	    
           	</LinearLayout>
        </LinearLayout>
        
    </com.example.slidingmenutest.view.SlidingMenu>
    
</RelativeLayout>
自定义属性：values/attr.xml 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <declare-styleable name="SlidingMenu">
        <attr name="rightPadding" format="dimension">
    	</attr>
    </declare-styleable>
</resources>
滑动功能实现部分：SlidingMenu.java 

package com.example.slidingmenutest.view;

import android.content.Context;
import android.content.res.TypedArray;
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;

import com.example.slidingmenutest.R;
import com.nineoldandroids.view.ViewHelper;

public class SlidingMenu extends HorizontalScrollView {

	private LinearLayout mWapper;
	private ViewGroup mMenu;
	private ViewGroup mContent;
	private int mScreenWidth;

	private int mMenuWidth;

	// dp
	private int mMenuRightPadding = 50;

	private boolean once;//boolean类型默认为false
	private boolean isOpen;

	/**
	 * 未使用自定义属性时，调用
	 * 
	 * @param context
	 * @param attrs
	 */
	public SlidingMenu(Context context, AttributeSet attrs) {
		this(context, attrs, -1);
		// WindowManager wm = (WindowManager) context
		// .getSystemService(Context.WINDOW_SERVICE);
		// DisplayMetrics outMetrics = new DisplayMetrics();
		// wm.getDefaultDisplay().getMetrics(outMetrics);
		//
		// mScreenWidth = outMetrics.widthPixels;
		//
		// // 把dp/sp转化为px
		// mMenuRightPadding = (int) TypedValue.applyDimension(
		// TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
		// .getDisplayMetrics());

	}

	/**
	 * 当使用了自定义了属性时，会调用此构造方法
	 * 
	 * @param context
	 * @param attrs
	 * @param defStyle
	 */
	public SlidingMenu(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		// 获取我们定义的属性
		TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
				R.styleable.SlidingMenu, defStyle, 0);

		int n = a.getIndexCount();
		for (int i = 0; i < n; i++) {
			int attr = a.getIndex(i);
			switch (attr) {
			case R.styleable.SlidingMenu_rightPadding:
				mMenuRightPadding = a.getDimensionPixelSize(attr,
						(int) TypedValue.applyDimension(
								TypedValue.COMPLEX_UNIT_DIP, 50, context
										.getResources().getDisplayMetrics()));
				break;

			}
		}
		a.recycle();

		WindowManager wm = (WindowManager) context
				.getSystemService(Context.WINDOW_SERVICE);
		DisplayMetrics outMetrics = new DisplayMetrics();
		wm.getDefaultDisplay().getMetrics(outMetrics);

		mScreenWidth = outMetrics.widthPixels;

		/*// 把dp/sp转化为px
		mMenuRightPadding = (int) TypedValue.applyDimension(
				TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
						.getDisplayMetrics());*/
	}

	public SlidingMenu(Context context) {
		this(context, null);
	}

	/**
	 * 设置子View的宽和高 设置自己的宽和高
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		if (!once) {
			mWapper = (LinearLayout) getChildAt(0);
			mMenu = (ViewGroup) mWapper.getChildAt(0);
			mContent = (ViewGroup) mWapper.getChildAt(1);
			mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth
					- mMenuRightPadding;
			mContent.getLayoutParams().width = mScreenWidth;
			once = true;
		}

		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

	/**
	 * 通过设置偏移量，将menu隐藏
	 */
	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {

		super.onLayout(changed, l, t, r, b);
		if (changed) {
			this.scrollTo(mMenuWidth, 0);
		}
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		int action = ev.getAction();
		switch (action) {
		case MotionEvent.ACTION_UP:
			// 隐藏在左边的宽度
			int scrollX = getScrollX();

			if (scrollX >= mMenuWidth / 2) {
				this.smoothScrollTo(mMenuWidth, 0);
				isOpen = false;
			} else {
				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(mMenuWidth, 0);
		isOpen = false;
	}
	
	/**
	 * 切换菜单
	 */
	public void toggle(){
		if(isOpen){
			closeMenu();
		}else{
			openMenu();
		}
	}
	
	/**
	 * 滚动发生时
	 */
	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		super.onScrollChanged(l, t, oldl, oldt);
		
		float scale = l*1.0f/mMenuWidth;//1~0
		
		/*//调用属性动画，设置TranslationX简单切换
		ViewHelper.setTranslationX(mMenu, l);*/
		/**动画缩放效果
		 * 区别1：内容区域1.0~0.7缩放的效果
			scale : 1.0~0.0
			0.7+0.3*scale
			
			区别2：菜单的偏移量需要修改
			
			区别3：菜单的显示时有缩放，以及透明度变化
			
			缩放：0.7 ~ 1.0
			0.7 ~ scale*0.3
			透明度：0.6 ~ 1.0
			0.6 + 0.4*(1-scale) ;
		 */
		
		float rightScale = (float) (0.7f + 0.3*scale);
		float leftScale = (float) (1.0f-scale*0.3f);
		float leftAlpha = 0.6f+0.4f*(1-scale);
		
		//调用属性动画，设置TranslationX
		ViewHelper.setTranslationX(mMenu, mMenuWidth*scale*0.7f);
		ViewHelper.setScaleX(mMenu, leftScale);
		ViewHelper.setScaleY(mMenu, leftScale);
		ViewHelper.setAlpha(mMenu, leftAlpha);
		
		//设置content的缩放的中心点
		ViewHelper.setPivotX(mContent, 0);
		ViewHelper.setPivotY(mContent, mContent.getHeight()/2);
		ViewHelper.setScaleX(mContent, rightScale);
		ViewHelper.setScaleY(mContent, rightScale);
		
	}
}
点击按钮事件：MainActivity.java 

package com.example.slidingmenutest;

import com.example.slidingmenutest.view.SlidingMenu;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;

public class MainActivity extends Activity {

	private SlidingMenu mLeftMenu;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		mLeftMenu = (SlidingMenu) findViewById(R.id.id_menu);
	}

	public void toggleMenu(View v){
		mLeftMenu.toggle();
	}
}






林次次
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android 右边侧滑菜单,android实现左右侧滑菜单效果
weixin_32234493的博客
05-26 625
在android开发中，左右侧滑菜单的开发已成为我们现在开发的必备技术之一，再次之前，我没有做过相类似的demo,但是项目的开发有要求有这样的效果，而且大家都知道，虽然网上由开源的代码，但是不仅种类多，看着一个头两个大，而且代码不好分离。因此我们无法简化成自己的demo,为此，还查阅了很多别人的资料，最后做出了自己想要的效果，具体效果如下所示：图1 左边菜单图2 右边菜单今天要做的是把两个效果结合...
android studio 侧滑菜单,Android Studio实现侧滑菜单（最佳）
weixin_33198642的博客
05-26 1407
在CSDN中我们会看到很多侧滑的案例，但是有的不是少这个就是少那个，很浪费时间，所以我们要仔细看看代码全不全。在多种APP里，比如QQ的主页面就有向右滑动出现菜单栏的情况，今天就来看一下如何实现这种功能。 我的工程文件布局如下： 我们可以看到，侧滑菜单主要由两个页面组成，主页面和Menu页面，现在先来把布局文件写好。可以看到Menu页面的条目有许多相同的属性，所以为了减少代码的书写量，我们可以在...
React Native仿某电商店铺首页
vv_bug
08-26 4212
前言：有朋友需要实现一个仿某电商app店铺首页的效果，花了一点点时间简单的实现了一下，最后的效果大概是这样的：1、可以看到，当底部的滑动控件滑动的时候tabview滑动到指定的位置后悬浮。 2、当底部的滑动控件滑动的时候状态栏view透明度从0到1的转变。 3、当底部的滑动控件滑动的时候背景view需要根据滑动的距离缩放最后跟状态栏view重合。当然，需求远不止这些，我只是简单的实现了一下功能，
侧滑菜单SlidingMenu普通抽屉、侧滑抽屉、特效抽屉
丶ban
09-23 353
简单侧滑实现 史上最简单侧滑实现  package com.example.qq.view; import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.util.DisplayMetrics; import and
Android Pileup ROM升级漏洞初探
移动安全研究和Android/iOS/小程序隐私合规
04-02 9508
最近由印第安纳大学以及微软的研究人员（下文简称：研究人员）共同发现了Android系统上一直存在的一个漏洞，并发表了相应的论文，论文中称此漏洞为“Pileup”。此漏洞涉及范围广泛，几乎涉及到了目前所有的Android发行版本。 那么到底是怎样的一个漏洞会有如此大的影响范围呢？下面让我们一探究竟。  Pileup 漏洞是研究人员对于“privilegeescalation through upda
Android 自定义控件打造史上最简单的侧滑菜单
810364804
09-11 641
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/39185641，本文出自【张鸿洋的博客】 侧滑菜单在很多应用中都会见到，最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单，一般大家都会自定义ViewGroup，然后隐藏菜单栏，当手指滑动时，通过Scroller或者不断的改变leftMargin等实现；多少都有点复杂，完成以后还需要对...
android 自定义侧滑菜单,Android自定义实现侧滑菜单效果
weixin_29568911的博客
05-25 332
本文实例为大家分享了Android自定义实现侧滑菜单的具体代码，供大家参考，具体内容如下实现原理：继承ViewGroup控件要显示到界面上需要重写OnMeature()OnLayout()，因此在实现OnLayout()的时候，将菜单界面划出到屏幕左侧，动态改变菜单界面距离scrollXto()左边界的距离就能实现滑动效果。1.继承ViewGroup2.事件分发机制3.状态监听在主界面中添加两个子...
android效仿qq侧滑菜单,Android仿qq侧滑菜单
weixin_39853523的博客
05-26 300
我们经常能看到各种app中都有应用侧滑菜单(SlidingMenu),效果很好的一种显示方式，今天我就向大家展示可以说是很简单就能实现和qq的侧滑菜单很相似的效果。现在侧滑菜单的框架在github上也有很多，有兴趣的可以去搜一下，今天我就给大家展示一个简单的仿qq侧滑菜单的例子。开始实现原理我们可以自定义一个view，然后用一个水平滚动条HorizontalScrollView匹配父容器原理如图:...
android drawerlayout侧滑菜单,Android中drawerlayout侧滑菜单效果的实现
weixin_42356145的博客
05-26 355
众所周知，Android中drawerlayout侧滑菜单是一个很常见的功能，而我们大多数人都是使用slidengmenu作为一个开源框架，下面爱站技术频道小编给大家介绍Android中drawerlayout侧滑菜单效果的实现，希望能帮到大家。话不多说，先来发图以表我滴诚意：开始写代码DrawerLayout 是v4包里面的，所以项目里面需要添加v4包，具体怎么添加就不多说了，Navigatio...
Android侧滑菜单的实现
最新发布
2401_84520332的博客
04-27 646
写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个学习思路及方向，从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
仿QQ 侧滑菜单效果android源码
05-21
基于android开发的仿QQ的侧滑菜单效果，非常好用的哦，有需要的可以下载哈 基于android开发的仿QQ的侧滑菜单效果，非常好用的哦，有需要的可以下载哈 基于android开发的仿QQ的侧滑菜单效果，非常好用的哦，有需要的...
Android使用DrawerLayout实现侧滑菜单效果
08-29
Android 使用 DrawerLayout 实现侧滑菜单效果 Android 开发中，侧滑菜单是一种常见的交互方式，DrawerLayout 是 Android 提供的一种可以方便实现侧滑菜单的组件。下面，将详细介绍 Android 使用 DrawerLayout 实现...
Android实现QQ侧滑菜单效果
08-26
Android实现QQ侧滑菜单效果是指在Android平台上实现类似于QQ侧滑菜单的滑动效果，该效果可以在Android应用程序中使用，具有很高的参考价值。下面是Android实现QQ侧滑菜单效果的知识点总结： 一、布局文件设定 在...
Android Drawerlayout实现侧滑菜单效果
08-29
Android Drawerlayout 实现侧滑菜单效果 Android Drawerlayout 是 Android 系统中的一种通用布局控件，主要用于实现侧滑菜单的效果。 Drawerlayout 是 Support Library 中的一部分，提供了一个灵活的布局机制，能够...
Android自定义实现侧滑菜单效果
08-26
在Android开发中，侧滑菜单（Slide Menu）是一种常见的交互设计，它允许用户通过从屏幕边缘向内滑动来展示或隐藏附加的功能选项。本文将详细介绍如何在Android中自定义实现一个侧滑菜单。 首先，要创建侧滑菜单，...
动态显示带图片列表【Android】
所谓梦想，就是永不停息的疯狂。。。。。
08-08 4922
一.功能描述:         1. 动态获取服务器端商品信息显示         2. 动态加载服务器端图片显示 二.技术点: ListView+BaseAdapterJSON数据解析Handler+ThreadHttpUrlConnectionAsyncTaskHttpClient图片的三级缓存 三.过程分析 ： 1. 搭建服务器端 2. 界面布局 整体 : ListVie
Android制作简易计算器【JAVA】
所谓梦想，就是永不停息的疯狂。。。。。
07-22 4170
跟着视频做的，但比视频上的多了一个功能，即连续运算 主要代码： package com.example.calculatedemo; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.
黑名单电话自动拦截【Android】
所谓梦想，就是永不停息的疯狂。。。。。
09-02 3954
1.功能描述:  当前手机中保存了一些黑名单电话号(如110等) 当一个电话打入进来, 如果它刚好是一个黑名单号码, 就会自动将电话挂断 过程分析: 启动服务 在服务中监听电话状态,  当电话状态是响铃时, 判断是否为黑名单号 如果是, 挂断电话 2.相关API TelephonyManager: 电话服务的管理器        context.ge
按钮监听事件的实现方式【JAVA】
所谓梦想，就是永不停息的疯狂。。。。。
07-21 3140
按钮监听事件的实现方式： 1.匿名内部类； 2.匿名外部类； 3.实现接口； 代码 ： package com.example.first; import android.app.Activity; import android.app.SearchManager.OnCancelListener; import android.os.Bundle; import android.u
Android侧滑菜单
11-19
Android侧滑菜单是一种常见的交互方式，可以让用户通过滑动屏幕打开或关闭菜单。实现侧滑菜单需要掌握自定义View、属性动画、事件分发等知识点。以下是一种常见的实现思路和一个不错的开源库： 1. 实现思路： - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值