Android高级UI开发（九）之侧滑菜单 --抽屉

Android里的抽屉控件在Android2.0---Android2.3是最常见的，记得当时Android系统的桌面本身就自带一个抽屉控件，点击它则展开所有已安装的应用。直到Android4.0问世后比较流行的就是侧滑了，例如新浪新闻APP。实现侧滑的方法比较多，今天我们先讲第一种方法，那就是使用抽屉控件DrawerLayout来实现侧滑菜单，具体效果如下图：

1. 首先，我们来看一下布局XML文件

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/drawerlayout"android:layout_width="match_parent"android:layout_height="match_parent"><!-- 内容部分的布局 --><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="fill_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimary" /><TextViewandroid:textColor="#ffffff"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#000000"android:text="内容" /></LinearLayout><!-- 侧滑菜单左侧部分 --><LinearLayoutandroid:layout_width="200dp"android:layout_height="fill_parent"android:layout_gravity="start"android:orientation="vertical"android:paddingTop="50dp" ><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="列表项1" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="列表项2" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="列表项3" /></LinearLayout><!-- 侧滑菜单右侧部分 --><LinearLayoutandroid:layout_width="200dp"android:layout_height="fill_parent"android:layout_gravity="end"android:background="#ff0000"android:orientation="vertical"android:paddingTop="50dp" ><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="item1" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="item2" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="item3" /></LinearLayout></android.support.v4.widget.DrawerLayout>

这个XML布局的根布局是DrawerLayout抽屉控件，子控件实质包含了两部分，第一部分是内容，第二部分是侧滑菜单的布局。

我们先看这里的第一部分：内容布局，它是由一个包含一个TOOLBAR（Android标题栏）控件与一个TextView。再来看第二部分：这里有2个LinearLayout，其中第一个的属性 android:layout_gravity = "start",另一个android:layout_gravity="end"，分别表示屏幕左边的侧滑菜单与屏幕右边的侧滑菜单。好了，通过分析我们这个Demo工程的界面有2个侧滑菜单与一个显示主体内容的页面。

2. MainActivity代码：

主要加载1中的布局UI，并控制侧滑菜单与内容页面的缩放大小及位移等动画属性。

package com.anyikang.volunteer.sos.swipemenulist;import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;public class MainActivity extends AppCompatActivity {private Toolbar toolbar;private DrawerLayout drawerlayout;private String TAG = "MainActivity";@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);toolbar = (Toolbar)findViewById(R.id.toolbar);// gxw- setSupportActionBar(toolbar);drawerlayout = (DrawerLayout)findViewById(R.id.drawerlayout);ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerlayout, toolbar,R.string.drawer_open, R.string.drawer_close);//同步drawerToggle按钮与侧滑菜单的打开（关闭）状态drawerToggle.syncState();//侧滑菜单与drawerToggle绑在一起，drawerToggle按钮点击打开（关闭）侧滑菜单
//      drawerlayout.setDrawerListener(drawerToggle);drawerlayout.setDrawerListener(new DrawerLayout.DrawerListener() {@Overridepublic void onDrawerStateChanged(int newState) {// 打开关闭状态切换时调用}@Overridepublic void onDrawerSlide(View drawerView, float slideOffset) {// 滑动的过程中执行 slideOffset：0~1View content = drawerlayout.getChildAt(0);View menu = drawerView;float scale = 1-slideOffset;//1~0float leftScale = (float) (1-0.3*scale);float rightScale = (float) (0.7f+0.3*scale);//0.7~1menu.setScaleX(leftScale);//1~0.7menu.setScaleY(leftScale);//1~0.7content.setScaleX(rightScale);content.setScaleY(rightScale);content.setTranslationX(menu.getMeasuredWidth()*slideOffset);//0~widthLog.i(TAG,"slideOffset="+slideOffset+",leftScale="+leftScale+",rightScale="+rightScale);}@Overridepublic void onDrawerOpened(View drawerView) {// 打开了菜单}@Overridepublic void onDrawerClosed(View drawerView) {// 关闭了菜单}});}
}

我们主要来分析以下两段代码：

第一段，

  ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerlayout, toolbar,R.string.drawer_open, R.string.drawer_close);//同步状态drawerToggle.syncState();

这段代码的作用是将TOOLBAR标题栏左上角的返回按钮（向导按钮）与抽屉控件drawerlayout关联起来，（1）如果当前侧滑菜单已显示，那么当点击“向导按钮”时，将控制drawerlayout抽屉关闭，即达到了隐藏侧滑菜单的目的；（2）同理，当前侧滑菜单已隐藏，那么当点击“向导按钮”时，将控制drawerlayout抽屉打开，即达到了展示侧滑菜单的目的；然而，想要正确的实现上述（1）（2）动作，前提是需要调用drawToggle.syncState()将抽屉的状态（当前是打开还是关闭）与“向导按钮”的状态同步，即抽屉打开时，“向导按钮”状态也应该处于打开状态，这样才能实现再次点击“向导按钮”时抽屉控件应该表现关闭抽屉的动作。

第二段,

     drawerlayout.setDrawerListener(new DrawerLayout.DrawerListener() {@Overridepublic void onDrawerStateChanged(int newState) {// 打开关闭状态切换时调用}@Overridepublic void onDrawerSlide(View drawerView, float slideOffset) {// 滑动过程中调用 slideOffset：0~1View content = drawerlayout.getChildAt(0);View menu = drawerView;float scale = 1-slideOffset;//1~0float leftScale = (float) (1-0.3*scale); //0.7~1float rightScale = (float) (0.7f+0.3*scale);//1~0.7menu.setScaleX(leftScale);//0.7~1menu.setScaleY(leftScale);//0.7~1content.setScaleX(rightScale); //1~0.7content.setScaleY(rightScale); //1~0.7content.setTranslationX(menu.getMeasuredWidth()*(slideOffset));//0~widthLog.i(TAG,"slideOffset="+slideOffset+",leftScale="+leftScale+",rightScale="+rightScale);}@Overridepublic void onDrawerOpened(View drawerView) {// 打开了侧滑菜单}@Overridepublic void onDrawerClosed(View drawerView) {// 关闭了侧滑菜单}});

这里使用serDrawerListener来监听抽屉控件drawerlayout的动作行为，我们主要来看中间这个函数onDrawerSlide，它包含了一个参数slideOffset,这个参数代表了抽屉控件滑出的百分比（也就是侧滑菜单滑出的百分比），例如现在的左边侧滑菜单是隐藏的，然后我们滑动屏幕左边缘，侧滑菜单会跟着滑动出来，当我们观察到当slideOffset这个值为0.8时，侧滑菜单界面的80%已经展示出来，另外20%的界面仍隐藏在屏幕左侧以外。这说明slideOffset并不是侧滑菜单移动过的像素距离，而是移动过的像素距离dx 占侧滑菜单整体宽度的一个百分比，它的值是由0-1，即0%-100%，简单的讲就是整个侧滑菜单宽度漏出来的百分比。

明白了slideOffset的含义后，我们来分析我们的代码，举个例子，当从屏幕左侧滑出菜单时，slideOffset从0变为1，这时scale的值由1变为0，leftScale的值由0.7变为1。menu.setScaleX, menu.setScaleY会使侧滑菜单的大小先缩放为原来的70%，然后逐渐扩大到原本的大小，即菜单完整展示出来，与此同时content.setTranslationX逐渐位移内容布局从0（内容布局的原来左边缘）到侧滑菜单的宽度，content.setScaleX,setScaleY会将内容布局逐渐缩放到原来的70%（由完整大小开始逐渐缩小到70%）。这样就实现了我们侧滑菜单时，菜单由小变大，内容布局由大变小并且随着侧滑菜单的滑出逐渐被推到屏幕的右半部分的效果。

其余的几个监听函数，我相信大家看到函数名就明白了，在此不再赘述，最后按照惯例给出源码下载地址：

https://download.csdn.net/download/gaoxiaoweiandy/10590696

Android高级UI开发（九）之侧滑菜单 --抽屉相关推荐

android 属性动画高级,Android高级UI开发（二十五）属性动画实战案例之流浪大师与乔帮主...
在上一篇文章里我们介绍了属性动画的基础知识,今天我们综合运用属性动画的知识来完成一个动画案例.首先,看一下这个动画效果: 1. 分析这个动画案例第一个动画(浏览大师的动画)是:当点击顶部" ...
你连《Android高级UI与FrameWork源码》都搞不懂学什么Android？还敢面试阿里P7！
Android高级UI与FrameWork源码重要性? 这块知识是现今使用者最多的,我们称之为Android2013~2016年的技术,但是,即使是这样的技术,Android开发者也往往因为网上Co ...
Android高级终端开发学习笔记（《疯狂Android讲义》第11章-第17章）
Android高级终端开发笔记 2021/6/19 下午 13:34开始多媒体应用开发 Android支持的音频格式有:MP3 WAV 3GP等.支持的视频格式有MP4 3GP等. 多媒体数据既可以 ...
android高级UI之贝塞尔曲线＜上＞---基本概念、德卡斯特里奥算法
在上一次android高级UI之Canvas综合案例操练 - cexo - 博客园对于Android UI绘制中核心的Canvas进行了相关的学习,这块的学习也中断一年多了,既然主业是Android开 ...
android的UI开发工程师指引
不管是MFC,还是linux,还是android,UI开发都是如下两大核心机制: 第一个是消息循环,第二个是界面组织结构. 围绕着这些,衍生出来的OpenGL,SurfaceView,SurfaceF ...
android炫酷动画代码,Android高级UI特效仿直播点赞动画效果
Android高级UI特效仿直播点赞动画效果发布时间:2020-10-02 16:06:18 来源:脚本之家阅读:117 作者:mrr 本文给大家分享高级UI特效仿直播点赞效果-一个优美炫酷的点赞 ...
Android 高级UI解密 (三) ：Canvas裁剪与二维、三维Camera几何变换（图层Layer原理）
Android的绘图机制是核心内容之一,无论是什么样的功能最终都是以图像的形式呈现给用户.因此掌握Android的绘图技巧,有助于Android理解层次的提高,在面对产品经理提出的idea时也更有底气 ...
Android高级UI系列教程（二）
上期回顾 Android高级UI系列教程(一)_我想月薪过万的博客-CSDN博客https://blog.csdn.net/qq_41885673/article/details/121870917 ...
android高级UI视频全套
android高级UI视频全套 http://nez.cc/NfhYoO
Android 高级UI解密 (四) ：花式玩转贝塞尔曲线（波浪、轨迹变换动画）
讲解此UI系列必然少不了一个奇妙数学曲线-–贝塞尔曲线,它目前运用于App的范围是在太广了,最初的QQ气泡拖拽,到个人界面的波浪效果.Loading波浪效果,甚至于轨迹变化的动画都可以依赖贝塞尔曲线完 ...

Android高级UI开发（九）之侧滑菜单 --抽屉

Android高级UI开发（九）之侧滑菜单 --抽屉相关推荐

最新文章

热门文章