Android Study Material Design 三 之:侧滑DrawerLayout ^_^
来源:互联网 发布:mysql charindex 编辑:程序博客网 时间:2024/06/05 09:54
LZ-Says:最近天气渐渐变凉了,终于感受到被子的温暖了。话说这几天的雾霾很是严重啊,能见度也就是几米而已,不知各位小伙伴所处地方如何呢?
前言
说起侧滑效果,大家脑海里首先会想到SlidingMenu,当前LZ也是在这个神器上被坑了很惨,也怪当初自己学艺不精。只从谷歌推出Material Design之后,其包含的内容可谓是丰富多彩,让人爱不释手,而今天,为大家带来新的侧滑实现,也就是Material Design包含的DrawerLayout~
效果图
老规矩,放置效果图,如下:
本文目标
快速有效掌握使用DrawerLayout实现侧滑菜单效果。
先撸一发
1. 初始化布局
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v4.widget.DrawerLayout android:id="@+id/i_drawerlayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.materialdesignstudy.drawerlayout.DrawerLayoutActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff0" android:gravity="center" android:text="使用DrawerLayout实现侧滑" /> </LinearLayout> <!-- 左侧侧滑 --> <LinearLayout android:layout_width="300dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#fff" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="#ff0" android:padding="15dp" android:text="哇咔咔" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="#ff0" android:padding="15dp" android:text="我去" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="#ff0" android:padding="15dp" android:text="啦啦啦" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="clickMe" android:text="点我哦~" /> </LinearLayout> </android.support.v4.widget.DrawerLayout></LinearLayout>
这里需要注意的是,假设设置左侧侧滑,那你需要在侧滑内容块的父布局中设置位置,例如我们现在设置的start,如下:
<!-- 左侧侧滑 --> <LinearLayout android:layout_width="300dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#fff" android:orientation="vertical">
好了,设置完基本布局后,运行瞅一眼。
嗯哼,是不是很简单呢?
下面我们配合Toolbar来秀一波。
2.1 布局新增Toolbar
<!-- 这里推荐使用兼容包 --> <android.support.v7.widget.Toolbar android:id="@+id/id_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" />
2.2 初始化并设置监听
mToolBar = findViewById(R.id.id_toolbar); mDrawerLayout = findViewById(R.id.i_drawerlayout); // 将ActionBar替换成toolbar setSupportActionBar(mToolBar); ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolBar, R.string.string_open, R.string.string_close); // 同步状态 drawerToggle.syncState(); // 设置侧滑监听 mDrawerLayout.setDrawerListener(drawerToggle);
查看效果:
上面俩个例子可以看出,DrawerLayout是真的方便快捷,省去不少的事儿,Nice~
下面我们简单的分析下源码,看看从源码中,我们能get什么小技能。
DrawerLayout源码简单分析
首先DrawerLayout extends ViewGroup,也就是说DrawerLayout其实是一个View组,我们可以在这里添加我们自己的View,也就是实际中的各种item项。
在构造初始化中,我们看到如下关键代码:
mLeftCallback = new ViewDragCallback(Gravity.LEFT); mRightCallback = new ViewDragCallback(Gravity.RIGHT); mLeftDragger = ViewDragHelper.create(this, TOUCH_SLOP_SENSITIVITY, mLeftCallback); mLeftDragger.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT); mLeftDragger.setMinVelocity(minVel); mLeftCallback.setDragger(mLeftDragger); mRightDragger = ViewDragHelper.create(this, TOUCH_SLOP_SENSITIVITY, mRightCallback); mRightDragger.setEdgeTrackingEnabled(ViewDragHelper.EDGE_RIGHT); mRightDragger.setMinVelocity(minVel); mRightCallback.setDragger(mRightDragger);
文章一开始,我们使用的是左侧滑动监听,但是我们可清晰的看到,同时他也提供了从右侧滑动监听,其次,滑动无论是左右,其依赖关键类便是:ViewDragHelper。
我们可以通过ViewDragHelper去设置一些属性,例如滑动方向,滑动偏移量速度等。
再接着往下看,看到了它的监听项,如下:
/** * Listener for monitoring events about drawers. 侧滑监听器 */ public interface DrawerListener { /** * 侧滑时位置状态变化 * @param 子视图被移动 * @param slideOffset The new offset of this drawer within its range, from 0-1 偏移量移动(绘制)范围:0-1 */ public void onDrawerSlide(View drawerView, float slideOffset); /** * 开始绘制 * * @param drawerView Drawer view that is now open */ public void onDrawerOpened(View drawerView); /** * 结束绘制 * * @param drawerView Drawer view that is now closed */ public void onDrawerClosed(View drawerView); /** * 绘制状态改变 * * @param newState The new drawer motion state */ public void onDrawerStateChanged(@State int newState); }
而关键内容也就是后期我们会根据不同的情况在回调中进行不同的操作,那么上面刚刚提到了可以设置右侧侧滑,那么现在着手实现一下吧。
继续玩~
首先,布局新增块,设置方式为end,关键代码如下:
<!-- 右侧侧滑 --> <LinearLayout android:layout_width="300dp" android:layout_height="match_parent" android:layout_gravity="end" android:background="#fff" android:orientation="vertical">
这块需要拓展的是,之前我们使用的是自带的ActionBarDrawerToggle,而通过简单查看源码,我们现在自己玩下监听,如下设置相关动画效果:
mDrawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() { @Override public void onDrawerSlide(View drawerView, float slideOffset) { // 绘制 slideOffset范围:0~1 View content=mDrawerLayout.getChildAt(0); // 拿到第0个布局 // 设置左侧滑动效果 View menu=drawerView; float scale=1-slideOffset; float leftScale= (float) (1-0.3*scale); menu.setScaleX(leftScale); // 反过来滑动范围是 1~0.7 menu.setScaleY(leftScale); // 反过来滑动范围是 1~0.7 // 设置右侧滑动效果 float rightScale=(float) (0.7+0.3*scale); content.setScaleX(rightScale); content.setScaleY(rightScale); content.setTranslationX(menu.getMeasuredWidth()*(1-scale)); // 0~width } @Override public void onDrawerOpened(View drawerView) { // 抽屉打开 } @Override public void onDrawerClosed(View drawerView) { // 抽屉被关闭 } @Override public void onDrawerStateChanged(int newState) { // 状态发生改变回调 } });
嗯哼,现在的效果就达到了文章开头的效果了。
GitHub地址
https://github.com/HLQ-Struggle/MaterialDesignStudy
结束
感谢大家观看~
希望我们越来越好~
- Android Study Material Design 三 之:侧滑DrawerLayout ^_^
- Android Study Material Design 四 之:DrawerLayout+NavigationView组合实现侧滑 ^_^
- android material design之DrawerLayout,NavigationView(三)
- Android Material Design DrawerLayout
- Android Material Design 之 DrawerLayout 的使用
- Material Design控件之DrawerLayout
- Android Study之Material Design初体验(一)
- Android Study Material Design 七 之 谈谈ToolBar以及SearchView
- Android Study Material Design 八 之 玩转Palette调色板
- Android Study Material Design 九 之 Hello TabLayout
- Android Study Material Design 十一 之CardView窥探
- Android Study Material Design 十二 之 FloatingActionButton初识
- Android Study Material Design 十三 之CoordinatorLayout交互动画
- Android Study Material Design 十四 之再战CoordinatorLayout
- Android 之 Material Design(三)—DrawerLayout+NavigationView+Toolbar(点击icon打开关闭侧滑菜单)
- Android Material Design学习之三TabLayout
- Material Design学习笔记之Toolbar+DrawerLayout
- Material Design学习之DrawerLayout与NavigationView
- EL表达式使用fmt:formatNumber标签保留两位小数
- Codeforces 873 D Merge Sort(归并排序性质)
- 【面试】--mysql 默认隔离级别 where 语句最长多少字符,int(10)10表示多大,char(128)128多大(357)
- Git流程理解与深度解析
- listview复用原理
- Android Study Material Design 三 之:侧滑DrawerLayout ^_^
- Windows编程基础--第3节 初探MFC
- Pandas处理数据出现MemoryError与Anaconda的安装
- Vim中复制粘贴缩进错乱问题的解决方案
- MySQL 获得当前日期时间\时间戳 函数
- java多线程编程核心技术第一章笔记
- hadoop 学习笔记004(设置ssh免登录)
- Java集合——HashSet
- 电子邮件未能发送。 可能原因:您的主机禁用了mail()函数。