改进Android SlidingMenu实现QQ样式边侧滑抽屉技术-阿里云开发者社区

开发者社区> 开发与运维> 正文

改进Android SlidingMenu实现QQ样式边侧滑抽屉技术

简介: 改进Android SlidingMenu实现QQ样式边侧滑抽屉技术 我在之前写的附录文章1中介绍了Android SlidingMenu的使用,Android SlidingMenu作为第三方的边侧滑技术(也被称之为‘抽屉’),在过去的四五年中被广泛使用,但随着后来谷歌官方在Android中以官方支持的形式相继推出了DrawerLayout(附录文章2)和NavigationView(附录文章3)作为抽屉技术的标准实现后,SlidingMenu逐渐在边缘化。

改进Android SlidingMenu实现QQ样式边侧滑抽屉技术

我在之前写的附录文章1中介绍了Android SlidingMenu的使用,Android SlidingMenu作为第三方的边侧滑技术(也被称之为‘抽屉’),在过去的四五年中被广泛使用,但随着后来谷歌官方在Android中以官方支持的形式相继推出了DrawerLayout(附录文章2)和NavigationView(附录文章3)作为抽屉技术的标准实现后,SlidingMenu逐渐在边缘化。在以后的开发中,如果要实现抽屉的边侧滑效果,DrawerLayout和NavigationView是首选。
但是,SlidingMenu在过去毕竟盛行过,一些老旧的APP中作为继承和惯性,还在使用SlidingMenu。如果瞬间说抛弃SlidingMenu,代码切换的时间和工作量有些多。
这篇文章要写的是,如何在不改变SlidingMenu的主题结构情况下,对SlidingMenu进行代码改造和增强,实现类似QQ的边侧滑抽屉效果。
在一段时间,QQ手机客户端的边侧滑(抽屉),和SlidingMenu一样,左滑右滑切换出隐藏的菜单和功能界面,但是需要特别注意的是:QQ的边侧滑与普通的SlidingMenu边侧滑效果不同,QQ的边侧滑、当抽屉打开时候,是一种逐渐缩进缩出的放大/缩小进出效果,同时还带有一定的电影中屏幕逐渐亮/暗效果。本文将在SlidingMenu的基础上改进SlidingMenu代码,作为兼容和增强,实现QQ样式的边侧滑抽屉效果。
写一个布局文件,主布局,通常在实际的开发中,这就是要盛放主体内容的界面activity_main.xml,我简单写一个布局,主要用于测试:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"
    android:background="#FF6F00" >  
      
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerInParent="true" 
        android:textColor="@android:color/white" 
        android:textSize="80sp"
        android:gravity="center"
        android:text="Zhang Phil" />  
  
</RelativeLayout>


MainActivity.java:

package zhangphil.slidingmenu;

import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu.CanvasTransformer;
import com.nineoldandroids.view.ViewHelper;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.PorterDuff.Mode;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {

	private SlidingMenu mSlidingMenu;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

		mSlidingMenu = new SlidingMenu(this);

		mSlidingMenu.setMode(SlidingMenu.LEFT);
		mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
		mSlidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);

		// 左边
		mSlidingMenu.setMenu(R.layout.left_menu);

		Fragment leftFragment = TestFragment.newInstance();
		FragmentManager fm = getSupportFragmentManager();
		FragmentTransaction ft = fm.beginTransaction();
		ft.replace(R.id.left, leftFragment);
		ft.commit();

		// 核心关键处,这就是对SlideMenu的增强和改进。
		addQQSlideStyleSlide();
	}

	// 为SlideMenu添加QQ样式的边侧滑
	private void addQQSlideStyleSlide() {

		CanvasTransformer mTransformer = new CanvasTransformer() {

			@Override
			public void transformCanvas(Canvas canvas, float percentOpen) {

				View mainContent = mSlidingMenu.getContent();
				View leftContent = mSlidingMenu.getMenu();

				animateView(mainContent, leftContent, percentOpen);
			}
		};

		// 设置滑动菜单视图的宽度
		mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);

		mSlidingMenu.setFadeEnabled(false);

		mSlidingMenu.setBehindCanvasTransformer(mTransformer);
	}

	private void animateView(View main, View left, float percent) {
		float f1 = 1 - percent * 0.3f;
		ViewHelper.setScaleX(main, f1);
		ViewHelper.setScaleY(main, f1);
		ViewHelper.setTranslationX(left, -left.getWidth() / 2.3f + left.getWidth() / 2.3f * percent);
		ViewHelper.setScaleX(left, 0.5f + 0.5f * percent);
		ViewHelper.setScaleY(left, 0.5f + 0.5f * percent);
		ViewHelper.setAlpha(left, percent);

		getWindow().getDecorView().getBackground().setColorFilter(evaluate(percent, Color.BLACK, Color.TRANSPARENT),
				Mode.SRC_OVER);
	}

	private Integer evaluate(float fraction, Object startValue, Integer endValue) {
		int startInt = (Integer) startValue;
		int startA = (startInt >> 24) & 0xff;
		int startR = (startInt >> 16) & 0xff;
		int startG = (startInt >> 8) & 0xff;
		int startB = startInt & 0xff;
		int endInt = (Integer) endValue;
		int endA = (endInt >> 24) & 0xff;
		int endR = (endInt >> 16) & 0xff;
		int endG = (endInt >> 8) & 0xff;
		int endB = endInt & 0xff;
		return (int) ((startA + (int) (fraction * (endA - startA))) << 24)
				| (int) ((startR + (int) (fraction * (endR - startR))) << 16)
				| (int) ((startG + (int) (fraction * (endG - startG))) << 8)
				| (int) ((startB + (int) (fraction * (endB - startB))));
	}

	//
	// 仅仅用于生成测试的Fragment。
	// 左边侧边滑打开的抽屉
	//
	public static class TestFragment extends Fragment {

		public static Fragment newInstance() {
			Fragment fragment = new TestFragment();
			return fragment;
		}

		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

			// 仅仅显示一个TextView。
			TextView tv = new TextView(getActivity());
			tv.setTextColor(Color.WHITE);
			tv.setText("左边");
			tv.setTextSize(60.0f);
			tv.setGravity(Gravity.CENTER);

			return tv;
		}
	}
}


在自己的代码中如何使用SlideMenu本文不再详细介绍,我写的附录文章1有介绍。
如何对SlidingMenu进行改造以实现QQ样式的边侧滑抽屉技术,核心关键处就是我写在MainActivity.java里面的这部分连锁代码:

// 为SlideMenu添加QQ样式的边侧滑
	private void addQQSlideStyleSlide() {

		CanvasTransformer mTransformer = new CanvasTransformer() {

			@Override
			public void transformCanvas(Canvas canvas, float percentOpen) {

				View mainContent = mSlidingMenu.getContent();
				View leftContent = mSlidingMenu.getMenu();

				animateView(mainContent, leftContent, percentOpen);
			}
		};

		// 设置滑动菜单视图的宽度
		mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);

		mSlidingMenu.setFadeEnabled(false);

		mSlidingMenu.setBehindCanvasTransformer(mTransformer);
	}

	private void animateView(View main, View left, float percent) {
		float f1 = 1 - percent * 0.3f;
		ViewHelper.setScaleX(main, f1);
		ViewHelper.setScaleY(main, f1);
		ViewHelper.setTranslationX(left, -left.getWidth() / 2.3f + left.getWidth() / 2.3f * percent);
		ViewHelper.setScaleX(left, 0.5f + 0.5f * percent);
		ViewHelper.setScaleY(left, 0.5f + 0.5f * percent);
		ViewHelper.setAlpha(left, percent);

		getWindow().getDecorView().getBackground().setColorFilter(evaluate(percent, Color.BLACK, Color.TRANSPARENT),
				Mode.SRC_OVER);
	}

	private Integer evaluate(float fraction, Object startValue, Integer endValue) {
		int startInt = (Integer) startValue;
		int startA = (startInt >> 24) & 0xff;
		int startR = (startInt >> 16) & 0xff;
		int startG = (startInt >> 8) & 0xff;
		int startB = startInt & 0xff;
		int endInt = (Integer) endValue;
		int endA = (endInt >> 24) & 0xff;
		int endR = (endInt >> 16) & 0xff;
		int endG = (endInt >> 8) & 0xff;
		int endB = endInt & 0xff;
		return (int) ((startA + (int) (fraction * (endA - startA))) << 24)
				| (int) ((startR + (int) (fraction * (endR - startR))) << 16)
				| (int) ((startG + (int) (fraction * (endG - startG))) << 8)
				| (int) ((startB + (int) (fraction * (endB - startB))));
	}



以下这部分代码,主要是为了实现背景逐渐点亮/逐渐暗淡的效果。

getWindow().getDecorView().getBackground().setColorFilter(evaluate(percent, Color.BLACK, Color.TRANSPARENT),
				Mode.SRC_OVER);


需要设置SlideMenu侧滑打开抽屉后的偏移距离,否则左边打开的窗口Menu将和普通的SlideMenu一样将完全展开铺满整个窗口,达不到QQ的那种各个窗口占据一般的效果。

Values/dimens.xml:

<dimen name="slidingmenu_offset">150dp</dimen>


测试的左边侧边滑打开的抽屉后,加载的Fragment使用的布局left.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#4FC3F7"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#F44336" >
    </FrameLayout>

</LinearLayout>


代码写到这里,像QQ样式的边侧滑打开抽屉技术已经实现,但仍有一个细节未实现。QQ边侧滑打开抽屉时候,注意整个屏幕窗口内的背景图,好像是一个星空,要在自己的代码中也有这个背景,那么需要需要对我们自己的Activity略做修改,修改values目录下styles.xml文件主题,把要实现QQ边侧滑抽屉效果的Activity的Theme背景添加一张图片,图片需要事先放到drawable目录,我的这个例子,事先在drawable目录下放一张zhangphil_background.jpg图片:

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    
    	<!-- zhang phil增加的背景,作为QQ样式边侧滑打开抽屉时候整个窗体背景图-->
    	<item name="android:windowBackground">@drawable/zhangphil_background</item>
    </style>

</resources>



代码运行结果(初始状态 –> 然后,从左往右的边侧滑,抽屉逐渐打开):



附录文章:
1,《集成Android SlidingMenu(SlideMenu)》链接地址:http://blog.csdn.net/zhangphil/article/details/44078805
2,《基于Android官方DrawerLayout实现抽屉导航菜单》链接地址:http://blog.csdn.net/zhangphil/article/details/48710453
3,《Android Material Design: NavigationView抽屉导航菜单》链接地址:http://blog.csdn.net/zhangphil/article/details/48931221

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章