首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android滑菜单控件DrawerLayout使用详解

DrawerLayout是Android V4包下一个带有滑功能布局控件,可以根据手势展开与隐藏侧边栏,也可以随着侧边栏点击改变主界面区内容。...一、约定抽屉布局 DrawerLayout布局一般分为三个部分:第一部分为主界面内容布局,第二部分为左边滑界面布局,第三部分为右边滑界面布局。...那么系统是怎么区分左边滑和右边代码块呢?...DrawerLayout中主内容布局要放到最顶层,接着放置左边滑界面布局,最后放置右边滑界面布局。...和一般滑菜单相比,DrawerLayout滑效果会浮现在主界面的上方,而不像其他滑菜单,不会遮挡主界面。 以上就是本文全部内容,希望对大家学习有所帮助。

1.5K20

DrawerLayout结合Tollbar实现菜单滑效果

本文实例为大家分享了DrawerLayout结合Tollbar实现菜单具体代码,供大家参考,具体内容如下 ?...DrawerLayout(抽屉布局):谷歌官方控件,可以简单实现滑菜单; 此Demo主要是DrawerLayout结合Toolbar实现滑左上角返回键实现动画效果,点击左上角返回键实现动画效果并且滑出滑入滑菜单...-- 左边滑箭头指示 是否翻转,颜色-- <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"...:该方法会自动和actionBar关联, 将开关图片显示在了action上,如果不设置,也可以有抽屉效果,不过是默认图标 mDrawerToggle.syncState(); //第三步:设置抽屉滑出来...,和滑进去监听 mDrawerLayout.setDrawerListener(mDrawerToggle); 以上就是本文全部内容,希望对大家学习有所帮助。

1.3K10
您找到你想要的搜索结果了吗?
是的
没有找到

Android UI 备忘:DrawerLayout

DrawerLayout 作者:飞龙 DrawerLayout是android.support.v4中提供控件,用于实现边栏和滑效果。...大家在各种 APP 中看到左侧边栏就是这个控件。 ? 创建 DrawerLayout 最好是界面的顶级布局,否则可能出现触摸时间被屏蔽问题。它拥有两个子元素,第一个是主内容第二个是菜单内容。...主内容布局代码必须放在滑菜单布局前面, 因为 XML 元素按 z 序(层叠顺序)排列,并且抽屉式导航栏必须位于内容顶部。...菜单布局必须设置layout_gravity属性,它表示滑菜单滑出方向。...* 抽屉打开时候,点击抽屉,drawer状态就会变成STATE_DRAGGING,然后变成STATE_IDLE */ @Override public void onDrawerStateChanged

92030

Android分享:Android滑原来可以这么优雅

前言 滑手势在Android App应用得非常广泛,常见使用场景包括:滑动抽屉滑删除、滑返回、下拉刷新以及滑封面等。...//抽屉效果 //可以设置横向(左右两)抽屉为同一个view //也可以为不同方向分别设置不同view .setHorizontalDrawerView(menuLayout...一行代码添加带联动效果滑动抽屉 抽屉显示在主view之下 SmartSwipe.wrap(view) .addConsumer(new SlidingConsumer()) .setHorizontalDrawerView...(application, null); 一行代码添加下拉刷新功能 可用于任意view //xxxMode第二个参数为false,表示工作方向为纵向:下拉刷新&上拉加载更多 //如果第二个参数设置为true...false).setDataLoader(loader); 样式 效果图 drawerMode behindMode scaleMode translateMode header和footer可使用第三方炫酷自定义

1.5K20

【React Native 安卓开发】----侧边栏实现DrawerLayoutAndroid以及第三方框架react-native-side-menu使用【第六篇】

前言 做过安卓原生开发童鞋们应该都做过侧边栏这个东西,而且对于开源框架SlidingMenu和android官方滑菜单DrawerLayout应该都不陌生。...那么今天也在这里给大家介绍一下React-Native中滑菜单DrawerLayoutAndroid和第三方框架react-native-side-menu。...抽屉(通常用于导航切换)是通过renderNavigationView方法渲染,并且DrawerLayoutAndroid直接子视图会成为主视图(用于放置你内容)。...drawerWidth number 指定抽屉宽度,也就是从屏幕边缘拖进视图宽度。...第二步 引入: import SideMenu from 'react-native-side-menu'; 第三步 使用: import SideMenu from 'react-native-side-menu

6.7K40

Material Design整理(四)——DrawerLayout

github地址:https://github.com/shuaijia/MaterialDesignProject 简介 DrawerLayout是Support Library包中实现了滑菜单效果控件...; DrawerLayout分为侧边菜单和主内容两个部分,侧边菜单可以根据手势或点击控制展开与隐藏,主内容区可随菜单点击而切换(自己实现); DrawerLayout 提供 当界面弹出时候,主要内容区会自动背景变黑...,当点击内容时候,抽屉布局会消失 在屏幕边缘手势滑动 会拉出抽屉布局 注意:当按后退键时候,如果抽屉布局正在显示,则需要关闭抽屉布局 效果 ?...注意:在滑菜单区必须设置 android:layout_gravity 这个属性,只要布局中设置了android:layout_gravity,它就是滑菜单,当然,它可以是任一View或ViewGroup...点击事件穿透问题 DrawerLayout界面点击事件穿透问题,即点击Drawerlayout上面的区域,会发现该位置DrawerLayout覆盖掉区域控件可以被点击 解决方法:在抽屉完全打开时设置

68110

react-navigation,刷新你导航一、属性介绍二、案例

(2)TabNavigator:类似底部导航栏,用来在同一屏幕下切换不同界面 (3)DrawerNavigator:滑菜单导航栏,用于轻松设置带抽屉导航屏幕 ?...默认为左侧位置 contentComponent - 用于呈现抽屉内容组件,例如导航项。 接收抽屉导航。...默认为DrawerItems contentOptions - 配置抽屉内容 initialRouteName - 初始路由routeName order - 定义抽屉项目顺序routeNames数组...- 当您标签是字符串时,要覆盖内容部分中文本样式样式对象 二、案例 2.1StackNavigation案例 集成第三方库 使用npm安装react-navigation库,--save表示将该组件写入到...下面是HomeScreen中代码。ChatScreen是第二个导航界面。

19.6K90

Material Design — App bars: bottomApp bars: bottom

在主屏幕上使用 bottom app bars ,其中包含 navigation menu control 和突出操作(如FAB)。 在 bar 另一至少可以放置一个,最多两个操作。...不要将 FAB 放在 bottom app bar 外面,因为很难够到 ---- 行为 布局 为了支持 app 不同部分意图,可以更改 bottom app bar 布局和操作以适合每个屏幕。...例如,屏幕可以根据最适合屏幕内容显示更多或更少操作。 ? 为展示主要操作,此 bottom app bar 在其主屏幕上使用 FAB 居中布局。...查看消息时,bottom app bar 布局更改为“FAB 在尾部”布局以适应其他上下文操作。...底部导航抽屉从底部应用栏打开。 抽屉在底部应用程序栏前打开,并显示顶部应用程序栏以在达到完整高度时关闭抽屉

2.3K80

android滑菜单控件DrawerLayout使用方法详解

drawerLayout是Support Library包中实现了滑菜单效果控件,可以说drawerLayout是因为第三方控件如MenuDrawer等出现之后,google借鉴而出现产物。...同时在DrawerLayout内部添加两个view: 添加一个View,它包含应用内容(当抽屉隐藏时你主要布局); 添加另一个View它包含了导航抽屉; 如下面例子所示:该布局使用了DrawerLayout...: 主内容View(FrameLayout在最上层)必须是Drawerlayout第一个子节点因为XML在安排这些界面的时候是按照Z轴顺序来安排 同时 抽屉必须在主内容顶部。...主内容View被设置成匹配父View宽和高,因为当导航抽屉隐藏时候它要填充整个UI。...为了保证用户无论怎样都能看到主内容一部分,导航抽屉宽度不能超过320dp 初始化Drawer List 在你Activity中,要做第一件事是初始化导航抽屉列表项。

2.4K10

【手绘漫画】图解LeetCode之寻找重复数(LeetCode287题),抽屉原理

目光呆滞,今日不宜学习~ 2、题目 首先看一下题目, 说到这里,就来说一下本题关键,数字是在 1-n 之间,只有一个重复数字! 同时有四个限制条件: 不能更改原数组(假设数组是只读)。...这里使用方法还是二分法,不过引申出一个原理,就是——抽屉原理。 桌上有十个苹果,要把这十个苹果放到九个抽屉里,无论怎样放,我们会发现至少会有一个抽屉里面放不少于两个苹果。...如果 cnt 大于 mid,依然根据抽屉原理,重复元素就应该在区间 [left, mid] 里,否则在区间 [mid+1, right]。 为啥是 mid+1,这个前面讲过了,自己去翻一翻吧。..., cnt 代表小于等于猜测元素数量,mid 虽然是下标但是是猜测元素,这一点很重要,所以二分法数组不再是原来数组,而是一个新数组了,只是没有具体展示出来。...] 范围内(因为小于等于 mid 元素少); 其实通过 cnt 就相当于是完成了数组排序,把大于 mid 放在一,小于等于放在另一,正常情况下(没有重复元素),cnt 应该是等于 mid,

54420

AngularDart Material Design 应用布局 顶

对于抽屉外部主要内容,将其包装在material-content元件中或具有material-content样式类元素中。 固定性抽屉 固定性抽屉是不能关闭抽屉。 它们完全由CSS提供。...-- Content goes here --> 持久性抽屉 持久抽屉是可以通过动作打开和关闭抽屉,例如按钮触发器。这些抽屉重新定位内容以适应抽屉流动。...临时抽屉具有可选overlay属性,可用于在抽屉打开时在非抽屉内容上方显示透明覆盖。...-- Content goes here --> 在另一显示抽屉 所有抽屉都有一个HTML属性end,它将抽屉定位在页面的另一,正常(LTR右侧,RTL左侧...当可堆叠抽屉打开时,任何现有的可堆叠抽屉将被展开以填充背景中屏幕。 适用于延期内容。 Inputs: visible bool  抽屉可见性。

4K30

TAB导航与侧边抽屉导航巅峰对决

我们尝试下把他们收到侧边栏里,或者叫安卓团队给它名字“侧边抽屉导航”。...但从另外一个角度来说,没有那一排tab导航,让设计看上去干净多了,把导航放进侧边抽屉里,让主内容区域有了更大空间余地。 侧边抽屉导航这种设计模式兴起于18个月前。...6个月后,zeebox经历了不少改变,我们有了一个新“我TV”页面,它内容内容更丰富,包括了订阅和广告,是对于用户来说很重要一个页面。...为了让更多内容展现在这个页面里,我们又想到了尝试导航。基于之前经历,这一次,我们决定使用一种更聪明办法,A/B test去测试。...我建议是,如果应用主要功能和内容都在一个页面里面。只是一些用户设置和选项需要显示在其他页面里。处于让主页面看上去干净美观目的可以把这些辅助功能放在侧边栏里。

2.7K70

Android开发之DrawerLayout实现抽屉效果

谷歌官方推出了一种滑菜单实现方式(抽屉效果),即 DrawerLayout,这个类是在Support Library里,需要加上android-support-v4.jar这个包。...使用注意点 1、DrawerLayout第一个子元素必须是默认内容,即抽屉没有打开时显示布局(如FrameLayout),后面紧跟子元素是抽屉内容,即抽屉布局(如ListView)。...抽屉菜单宽度应该不超过320dp,这样用户可以在菜单打开时候看到部分内容界面。...解决办法:在include进那个布局里面,添加clickable=true 2、除了抽屉布局视图之外视图究竟放哪里 左、右抽屉和中间内容视图默认是不显示,其他布局视图都会直接显示出来,但是需要将其放在...3、去除左右抽屉划出后内容显示页背景灰色?

6.1K60

你见过微信滑返回联动效果,但开门效果、百叶窗效果见过吗?

如果已经了解SmartSwipe功能,只是想了解他实现原理 可跳过第一节,直接看第二原理介绍 一、 用法及演示 1.1 一行代码实现全局滑返回 //仿手机QQ手势滑动返回 SmartSwipeBack.activityStayBack...false,表示工作方向为纵向:下拉刷新&上拉加载更多 //如果第二个参数设置为true,则表示工作方向为横向:右拉刷新&左拉加载更多 SmartSwipeRefresh.drawerMode(view...4个方向 .addConsumer(new DrawerConsumer()) //设置横向(左右两)抽屉为同一个view(常见滑显示删除按钮功能) .setHorizontalDrawerView...在官方支持库中,滑动抽屉相关SlidingPaneLayout和DrawerLayout,以及CoordinatorLayout布局相关BottomSheetBehavior和SwipeDismissBehavior...(如:滑动抽屉) 拦截这个ViewGrouptouch事件,并将touch事件转换为滑距离交给SwipeConsumer进行消费 SwipeConsumer根据滑距离变化对控件布局进行相应改变

1.5K10

Android官方滑控件DrawerLayout示例代码

导语 滑控件,以前大家用可能是三方SlidingMenu控件,最近在看谷歌源码项目,意外看到一个 DrawerLayout 控件。上网一查,原来这个控件是官方给我们提供一个滑菜单控件。...官方中文简介大概如下: DrawerLayout作为窗口内容顶层容器,允许从窗口一个或两个垂直边缘拉出交互式“抽屉”视图。...抽屉定位和布局使用android:layout_gravity 子视图对应属性进行控制,对应于您希望抽屉从哪个侧面出现:左侧或右侧(或支持布局方向平台版本上开始/结束)。...请注意,您只能窗口每个垂直边缘一个抽屉视图。如果您布局在窗口每个垂直边缘配置多个抽屉视图,则会在运行时抛出异常。...以上就是本文全部内容,希望对大家学习有所帮助。

1.2K31

Android入门教程 | DrawerLayout 滑栏

DawerLayout 分为侧边菜单和主内容区两部分: 主内容区要放在侧边菜单前面,还有就是主内容区最好以 DrawerLayout 最好为界面的根布局,否则可能会出现触摸事件被屏蔽问题。...使用注意事项 主内容视图一定要是 DrawerLayout 第一个子视图 主内容视图宽度和高度需要 match_parent 必须显示指定滑视图 android:layout_gravity 属性...滑视图宽度以dp为单位,不建议超过320dp(为了总能看到一些主内容视图) 设置滑事件:mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListene...从左边滑出抽屉视图(滑栏) 一个简单从左边滑出滑栏例子。 滑栏滑出后,后面的视图会有个阴影。 layout 文件 <?xml version="1.0" encoding="utf-8"?...现在侧边栏放是RelativeLayout。 也可以放一个RecyclerView。 抽屉出来时推动页面 监听滑栏滑动事件,使用ActionBarDrawerToggle。

2.1K10

浅谈DrawerLayout(抽屉效果)

DrawerLayout是V4包下提供一种左滑右滑抽屉布局效果。 实现效果如下: 因为是官方提供,所以使用起来也相对比较简单。...DrawerLayout 提供 1、当界面弹出时候,主要内容区会自动背景变黑,当点击内容时候,抽屉布局会消失 2、在屏幕边缘手势滑动 会拉出抽屉布局 注意:当按后退键时候,如果抽屉布局正在显示...中间是APP显示主要内容区,然后看你个人需求来选择是要左边弹出布局,还是右边弹出布局。...* 抽屉打开时候,点击抽屉,drawer状态就会变成STATE_DRAGGING,然后变成STATE_IDLE */ @Override...解决方法: //这里设置clickable(true) 必须动态设置 静态设置没有效果 //解决问题 滑菜单出来时候 点击菜单上区域会有点击穿透问题

1.5K50

Android使用DrawerLayout仿QQ6.0双滑菜单

本文实例为大家分享了Android使用DrawerLayout仿QQ6.0双滑菜单具体代码,供大家参考,具体内容如下 ? 上面是效果图。...相关实现源码和文章网上已经很多了,比较流行做法分别是使用 FrameLayout, HorizontalScrollView或者是DrawerLayout 其实要实现QQ 6.X版本滑效果最好方案是使用...从这里我们可以看出,菜单栏一定是显示在主界面上面的,所以,QQ6.0菜单透视效果这里无法实现,因为菜单栏会覆盖掉主界面的一部分内容。...Override public void onDrawerStateChanged(int newState) { } } } 注意事项: 1.ViewHelper是nineoldandroids第三方库...这里对于当前操作是哪个菜单判断是通过TAG判断。 源码下载:使用DrawerLayout仿QQ6.0双滑菜单 以上就是本文全部内容,希望对大家学习有所帮助。

56531
领券