使用DrawerLayout实现QQ5.0侧拉菜单效果

在上一篇文章中，我们介绍了怎么使用DrawerLayout来实现一个简单的侧拉菜单（使用DrawerLayout实现侧拉菜单），也就是我们常说的抽屉效果，GitHub上类似效果的实现方式非常多，实现出来的效果也是非常的绚丽，但是万变不离其宗，Google提供给我们的DrawerLayout才是最基本的，我们今天就来介绍一下怎样通过DrawerLayout来实现QQ5.0的侧拉效果。先来看一张效果图：

好，这是一个我们即将要实现的效果图，关于这个效果，大部分都是很简单的，都是使用了我们在上一篇博客中介绍的DrawerLayout技术来做的，所以如果你还没读过上一篇博客，建议先去看一下DrawerLayout的使用方法（使用DrawerLayout实现侧拉菜单），了解了DrawerLayout的使用方法之后，那么要实现QQ5.0的侧拉效果就如同探囊取物一般。

好了，废话不多说，我们就先来看看怎么实现这样一个效果。

先来看看主布局文件：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/drawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/background" ><RelativeLayoutandroid:id="@+id/mContent"android:layout_width="match_parent"android:layout_height="match_parent" ><ImageViewandroid:id="@+id/mContent_iv"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="0dp"android:background="@drawable/content_iv"android:padding="0dp" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@null"android:onClick="onClick" /></RelativeLayout><fragmentandroid:id="@+id/left_fragment"android:name="com.lenve.qqdrawerlayout.LeftMenuFragment"android:layout_width="220dp"android:layout_height="match_parent"android:layout_gravity="left"android:tag="LEFTMENU" /></android.support.v4.widget.DrawerLayout>

整个布局文件还是比较简单的，DrawerLayout中一共分为两大块，第一块就是主布局文件，先是是一张图片（这里我直接截了QQ页面的一张图），然后就是一个Button，注意这个Button的位置在整个页面的左上角，Button的背景设置为null，所以我们看不到Button，但是这个Button会响应我们的点击事件，第二部分是一个Fragment，这个Fragment我们看android:layout_gravity="left"属性就知道它是左边菜单栏的Fragment，在上一篇博客中，左边的菜单栏我们并没有使用Fragment，而是直接使用了布局文件，其实这里写成Fragment是比较好的，方便扩展，也方便管理。

好了，既然左边是一个Fragment，我们就来看看这个Fragment长什么样子？

先看看Fragment的布局文件：

<?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" ><ListViewandroid:id="@+id/left_menu_lv"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="150dp" ></ListView></RelativeLayout>

就一个ListView，够简单吧，再看看listview中item的布局文件：

<?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" ><ImageViewandroid:id="@+id/left_iv"android:layout_width="48dp"android:layout_height="48dp"android:layout_marginLeft="20dp"android:padding="12dp"android:src="@drawable/svip" /><TextViewandroid:id="@+id/left_tv"android:layout_width="wrap_content"android:layout_height="48dp"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/left_iv"android:gravity="center"android:text="开通会员"android:textColor="@android:color/white"android:textSize="14sp" /></RelativeLayout>

item的布局文件也是比较简单的，左边一个ImageView，右边一个TextView，我们再看看Fragment：

public class LeftMenuFragment extends Fragment {private List<LeftMenu> list = null;private ListView lv;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);initData();}/*** 初始化数据*/private void initData() {list = new ArrayList<LeftMenu>();list.add(new LeftMenu(R.drawable.svip, "开通会员"));list.add(new LeftMenu(R.drawable.qianbao, "QQ钱包"));list.add(new LeftMenu(R.drawable.zhuangban, "个性装扮"));list.add(new LeftMenu(R.drawable.shoucang, "我的收藏"));list.add(new LeftMenu(R.drawable.xiangce, "我的相册"));list.add(new LeftMenu(R.drawable.wenjian, "我的文件"));}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(R.layout.left_menu, container, false);lv = (ListView) view.findViewById(R.id.left_menu_lv);LeftMenuAdapter adapter = new LeftMenuAdapter(list);lv.setAdapter(adapter);return view;}
}

Fragment整体也是比较简单的，在onCreate方法中拿到模拟数据，然后在onCreateView方法中给listview设置Adapter，在这里我们使用了一个JavaBean，这个JavaBean主要用来存储每一个item中的数据：

public class LeftMenu {private int imageView;private String text;public int getImageView() {return imageView;}public void setImageView(int imageView) {this.imageView = imageView;}public String getText() {return text;}public void setText(String text) {this.text = text;}public LeftMenu(int imageView, String text) {this.imageView = imageView;this.text = text;}public LeftMenu() {}}

在这个JavaBean中，我们存储Image的资源id，然后在使用的时候直接调用这个资源id即可，再看看Adapter：

public class LeftMenuAdapter extends BaseAdapter {private List<LeftMenu> list;public LeftMenuAdapter(List<LeftMenu> list) {this.list = list;}@Overridepublic int getCount() {return list.size();}@Overridepublic Object getItem(int position) {return list.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder = null;if (convertView == null) {convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.listview_item, null);holder = new ViewHolder();holder.iv = (ImageView) convertView.findViewById(R.id.left_iv);holder.tv = (TextView) convertView.findViewById(R.id.left_tv);convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}holder.iv.setImageResource(list.get(position).getImageView());holder.tv.setText(list.get(position).getText());return convertView;}class ViewHolder {ImageView iv;TextView tv;}
}

这个Adapter很简单，我就不多说了。

nineoldandroids

这些都看完了，就该说说我们的MainActivity，首先我们得大概说说这种效果是怎么实现的，说到这里，我就得给大家介绍一个非常非常出名的动画类了，那就是nineoldandroids，我们在GitHub上可以直接下载到这个动画类的源码（https://github.com/JakeWharton/NineOldAndroids），如果你想用jar包，一会直接下载本项目源码就能拿到了。

nineoldandroids中有一些非常好用的方法，比如：

ViewHelper.setScaleX(View view, float scaleX)
ViewHelper.setScaleY(View view, float scaleY)

通过这个方法，我们可以对一个View进行缩放，第一个参数是我们要缩放的View，第二个参数是缩放比例，还有一个方法：

ViewHelper.setAlpha(View view, float alpha)

通过这个方法，我们可以设置一个View的透明度，第一个参数是我们要改变透明度的View，第二个参数是透明度。还有一个方法：

ViewHelper.setTranslationX(View view, float translationX)

通过这个方法，我们可以对一个View进行平移操作，第一个参数是要平移的View，第二参数是在X轴平移多少。还有一个方法：

ViewHelper.setScaleX(View view, float scaleX)
ViewHelper.setScaleY(View view, float scaleY)

通过这个方法，我们可以设置View变化时的一个轴心。

为什么介绍这几个方法呢？原因很简单，因为我们即将用到。

好了，介绍完这几个方法之后，我们的MainActivity就可以登场了。只需要简单的几个动画我们就可以实现QQ的这种侧拉效果了。

在MainActivity中我们先拿到DrawerLayout的一个实例：

drawerLayout = (DrawerLayout) this.findViewById(R.id.drawerLayout);

然后我们要给DrawerLayout设置一个监听事件，当菜单出场的时候我们调整主布局的位置：

     drawerLayout.setDrawerListener(new DrawerListener() {@Overridepublic void onDrawerStateChanged(int newState) {Log.i("lenve", "onDrawerStateChanged");}@Overridepublic void onDrawerSlide(View drawerView, float slideOffset) {slideAnim(drawerView, slideOffset);Log.i("lenve", "onDrawerSlide");}@Overridepublic void onDrawerOpened(View drawerView) {Log.i("lenve", "onDrawerOpened");}@Overridepublic void onDrawerClosed(View drawerView) {Log.i("lenve", "onDrawerClosed");}});

这个监听事件一共要实现其中的四个方法，看名字我们大概也知道这四个方法是干什么的，那我们看看这四个方法的执行时机：

当我们打开菜单的时候，先执行onDrawerStateChanged，然后不断执行onDrawerSlide，第三步会执行onDrawerOpened，最后执行onDrawerStateChanged，当我们关闭菜单的时候，先执行onDrawerStateChanged，然后不断执行onDrawerSlide，第三步会执行onDrawerClosed，最后执行onDrawerStateChanged，好了，方法的执行时机如果大家还有疑问可以通过打印日志来查看各个方法的执行时机。好了，我们的动画逻辑要在onDrawerSlide方法中来完成，先来说说这个方法的这两个参数，第一个参数是一个View，这个View其实就是左边侧拉菜单的View，第二参数是偏移量，可以简单理解为左边菜单拉出来的比例，它的取值是从0到1。介绍完这个之后，我们来看看slideAnim(drawerView, slideOffset);方法，看看最核心的代码有多么简单：

 private void slideAnim(View drawerView, float slideOffset) {View contentView = drawerLayout.getChildAt(0);// slideOffset表示菜单项滑出来的比例，打开菜单时取值为0->1,关闭菜单时取值为1->0float scale = 1 - slideOffset;float rightScale = 0.8f + scale * 0.2f;float leftScale = 1 - 0.3f * scale;ViewHelper.setScaleX(drawerView, leftScale);ViewHelper.setScaleY(drawerView, leftScale);ViewHelper.setAlpha(drawerView, 0.6f + 0.4f * (1 - scale));ViewHelper.setTranslationX(contentView, drawerView.getMeasuredWidth()* (1 - scale));ViewHelper.setPivotX(contentView, 0);ViewHelper.setPivotY(contentView, contentView.getMeasuredHeight() / 2);contentView.invalidate();ViewHelper.setScaleX(contentView, rightScale);ViewHelper.setScaleY(contentView, rightScale);}

好了，我们可以看到rightScale取值是从1到0.8，那么大家注意rightScale最后用在了contentView上，所以对应的一个显示效果就是contentView从最初大小变为最初大小的0.8倍，leftScale取值是从0.7到1。leftScale最后用在了drawerView，也就是左边的侧拉菜单View，那么对应的显示效果就是左边的菜单View一开始只有原本布局的0.7倍，在菜单慢慢往出滑动的时候，它逐渐变大，直到变为原本的大小（这个时候菜单View已经完全显示出来了）。另外几个动画设置都比较简单，大家参照我们上面对这几个方法的讲解来理解。

好了，搞定这些之后，还剩最后一个东东，就是左上角的点击事件，这个我们在上一篇博客中已经介绍过了，这里我就直接贴代码：

 public void onClick(View v) {drawerLayout.openDrawer(Gravity.LEFT);}

所有这些工作做完之后，一个仿QQ5.0侧拉的Demo已经出炉了。。。。

好了，今天就说到这里，大家有什么问题，可以留言讨论。

Demo下载https://github.com/lenve/QQDrawerLayout

使用DrawerLayout实现QQ5.0侧拉菜单效果相关推荐

Android 高仿 QQ5.0 侧滑菜单效果自定义控件来袭
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39257409,本文出自[张鸿洋的博客] 上一篇博客带大家实现了:Android ...
仿QQ5.0侧滑菜单
一.概述侧滑菜单现在已经非常流行了,目前大概有这么几种:最普通的侧滑,抽屉侧滑,QQ侧滑注:本文来自慕课网二.最普通的侧滑先上图代码如下: 1 public class MainActivi ...
Android仿QQ5.0侧滑菜单ResideMenu的使用和源码分析
本文出自Cym的博客(http://blog.csdn.net/cym492224103) ResideMenu github:https://github.com/SpecialCyCi/Andro ...
使用DrawerLayout实现侧拉菜单
侧拉菜单在android应用中非常常见,它的实现方式太多了,今天我们就说说使用Google提供的DrawerLayout来实现侧拉菜单效果,先来看张效果图: DrawerLayout的实现其实非常简单 ...
Android自定义控件----继承ViewGroup侧滑菜单5，抽屉式侧滑，QQ5.0效果（完结）
效果图: 项目结构: QQ5.0的侧滑和抽屉菜单的区别简单的说就是在onScrollChanged方法中加入了缩放,偏移,渐变属性动画效果区别1:内容1:内容区域 1.0到0.7 缩放效果 sc ...
打造华丽QQ5.0侧滑效果
已经好久没写过Android开发的技术博客,只因最近项目比较急.耽误了.今天带来的QQ5.0侧滑效果.我们都对QQ5.0侧滑效果很熟悉了,就不多做介绍,就一个字"炫".正好这次在项 ...
DrawerLayout实现侧滑菜单效果
众所周知,android里面我们很熟悉的一个功能,侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架,自从谷歌官方新出的一个DrawerLayout控件之后,越来越多的应用开始使用 ...
android drawerlayout侧滑菜单,Android中drawerlayout侧滑菜单效果的实现
众所周知,Android中drawerlayout侧滑菜单是一个很常见的功能,而我们大多数人都是使用slidengmenu作为一个开源框架,下面爱站技术频道小编给大家介绍Android中drawerl ...
android侧边栏功能,DrawerLayout 实现SlidingMenu侧边栏菜单效果
先看效果图: ![ 0}`JV5)$1762$8DF3K@SPDR.png ]6ZLN7KJ6QO.png](http://upload-images.jianshu.io/upload_images ...

使用DrawerLayout实现QQ5.0侧拉菜单效果

使用DrawerLayout实现QQ5.0侧拉菜单效果相关推荐

最新文章

热门文章