devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：羊村懒王 | 2024-03-21 07:54:46

赞

踩

android 抽屉菜单

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

标题

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

  1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:id="@+id/drawerlayout"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.  
  6.     <!-- 内容部分的布局 -->
  7.  
  8.     <LinearLayout
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="fill_parent"
  11.         android:orientation="vertical" >
  12.  
  13.         <android.support.v7.widget.Toolbar
  14.             android:id="@+id/toolbar"
  15.             android:layout_width="fill_parent"
  16.             android:layout_height="wrap_content"
  17.             android:background="?attr/colorPrimary" />
  18.  
  19.         <TextView
  20.             android:textColor="#ffffff"
  21.             android:layout_width="match_parent"
  22.             android:layout_height="match_parent"
  23.             android:background="#000000"
  24.             android:text="内容" />
  25.     </LinearLayout>
  26.     <!-- 侧滑菜单左侧部分 -->
  27.  
  28.     <LinearLayout
  29.         android:layout_width="200dp"
  30.         android:layout_height="fill_parent"
  31.         android:layout_gravity="start"
  32.         android:orientation="vertical"
  33.         android:paddingTop="50dp" >
  34.  
  35.         <TextView
  36.             android:layout_width="match_parent"
  37.             android:layout_height="wrap_content"
  38.             android:text="列表项1" />
  39.  
  40.         <TextView
  41.             android:layout_width="match_parent"
  42.             android:layout_height="wrap_content"
  43.             android:text="列表项2" />
  44.  
  45.         <TextView
  46.             android:layout_width="match_parent"
  47.             android:layout_height="wrap_content"
  48.             android:text="列表项3" />
  49.     </LinearLayout>
  50.     <!-- 侧滑菜单右侧部分 -->
  51.  
  52.     <LinearLayout
  53.         android:layout_width="200dp"
  54.         android:layout_height="fill_parent"
  55.         android:layout_gravity="end"
  56.         android:background="#ff0000"
  57.         android:orientation="vertical"
  58.         android:paddingTop="50dp" >
  59.  
  60.         <TextView
  61.             android:layout_width="match_parent"
  62.             android:layout_height="wrap_content"
  63.             android:text="item1" />
  64.  
  65.         <TextView
  66.             android:layout_width="match_parent"
  67.             android:layout_height="wrap_content"
  68.             android:text="item2" />
  69.  
  70.         <TextView
  71.             android:layout_width="match_parent"
  72.             android:layout_height="wrap_content"
  73.             android:text="item3" />
  74.     </LinearLayout>
  75.  
  76. </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，并控制侧滑菜单与内容页面的缩放大小及位移等动画属性。 

  1. package com.anyikang.volunteer.sos.swipemenulist;
  2.  
  3. import android.os.Bundle;
  4. import android.support.v4.widget.DrawerLayout;
  5. import android.support.v7.app.ActionBarDrawerToggle;
  6. import android.support.v7.app.AppCompatActivity;
  7. import android.support.v7.widget.Toolbar;
  8. import android.util.Log;
  9. import android.view.View;
  10.  
  11. public class MainActivity extends AppCompatActivity {
  12.     private Toolbar toolbar;
  13.     private DrawerLayout drawerlayout;
  14.     private String TAG = "MainActivity";
  15.  
  16.     @Override
  17.     protected void onCreate(Bundle savedInstanceState) {
  18.         super.onCreate(savedInstanceState);
  19.         setContentView(R.layout.activity_main);
  20.         toolbar = (Toolbar)findViewById(R.id.toolbar);
  21.       
  22.        // gxw- setSupportActionBar(toolbar);
  23.  
  24.         drawerlayout = (DrawerLayout)findViewById(R.id.drawerlayout);
  25.  
  26.         ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(
  27.                 this, drawerlayout, toolbar,
  28.                 R.string.drawer_open, R.string.drawer_close);
  29.         //同步drawerToggle按钮与侧滑菜单的打开（关闭）状态
  30.         drawerToggle.syncState();
  31.         //侧滑菜单与drawerToggle绑在一起，drawerToggle按钮点击打开（关闭）侧滑菜单
  32. //		drawerlayout.setDrawerListener(drawerToggle);
  33.  
  34.         drawerlayout.setDrawerListener(new DrawerLayout.DrawerListener() {
  35.  
  36.             @Override
  37.             public void onDrawerStateChanged(int newState) {
  38.                 // 打开关闭状态切换时调用
  39.  
  40.             }
  41.  
  42.             @Override
  43.             public void onDrawerSlide(View drawerView, float slideOffset) {
  44.                 // 滑动的过程中执行 slideOffset：0~1
  45.                 View content = drawerlayout.getChildAt(0);
  46.                 View menu = drawerView;
  47.                 float scale = 1-slideOffset;//1~0
  48.                 float leftScale = (float) (1-0.3*scale);
  49.                 float rightScale = (float) (0.7f+0.3*scale);//0.7~1
  50.                 menu.setScaleX(leftScale);//1~0.7
  51.                 menu.setScaleY(leftScale);//1~0.7
  52.  
  53.                 content.setScaleX(rightScale);
  54.                 content.setScaleY(rightScale);
  55.                 content.setTranslationX(menu.getMeasuredWidth()*slideOffset);//0~width
  56.                 Log.i(TAG,"slideOffset="+slideOffset+",leftScale="+leftScale+",rightScale="+rightScale);
  57.  
  58.             }
  59.  
  60.             @Override
  61.             public void onDrawerOpened(View drawerView) {
  62.                 // 打开了菜单
  63.  
  64.             }
  65.  
  66.             @Override
  67.             public void onDrawerClosed(View drawerView) {
  68.                 // 关闭了菜单
  69.  
  70.             }
  71.         });
  72.  
  73.     }
  74. }

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

第一段，

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

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

 

第二段,

 

  1.      drawerlayout.setDrawerListener(new DrawerLayout.DrawerListener() {
  2.  
  3.             @Override
  4.             public void onDrawerStateChanged(int newState) {
  5.                 // 打开关闭状态切换时调用
  6.  
  7.             }
  8.  
  9.             @Override
  10.             public void onDrawerSlide(View drawerView, float slideOffset) {
  11.                 // 滑动过程中调用 slideOffset：0~1
  12.                 View content = drawerlayout.getChildAt(0);
  13.                 View menu = drawerView;
  14.                 float scale = 1-slideOffset;//1~0
  15.                 float leftScale = (float) (1-0.3*scale); //0.7~1
  16.                 float rightScale = (float) (0.7f+0.3*scale);//1~0.7
  17.                 menu.setScaleX(leftScale);//0.7~1
  18.                 menu.setScaleY(leftScale);//0.7~1
  19.  
  20.                 content.setScaleX(rightScale); //1~0.7
  21.                 content.setScaleY(rightScale); //1~0.7
  22.                 content.setTranslationX(menu.getMeasuredWidth()*(slideOffset));//0~width
  23.                 Log.i(TAG,"slideOffset="+slideOffset+",leftScale="+leftScale+",rightScale="+rightScale);
  24.  
  25.             }
  26.  
  27.             @Override
  28.             public void onDrawerOpened(View drawerView) {
  29.                 // 打开了侧滑菜单
  30.  
  31.             }
  32.  
  33.             @Override
  34.             public void onDrawerClosed(View drawerView) {
  35.                 // 关闭了侧滑菜单
  36.  
  37.             }
  38.         });

         这里使用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

 

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号