文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Material Design — 底部导航（Bottom Navigation）

超过6个就不要放在底部导航里了，太挤了 底部导航和标签 当组合底部导航和tabs时要注意，因为这样的组合可能会因为用户不知道二者的优先级而在导航时引起混乱。...底部导航栏可以从一个主题中的n级页面移动到另一个主题的一级页面。当用户去往下级页面时要保持底部导航可用，可通过持续展示，或者通过滚动隐藏和显示。...底部导航栏不应用于： ·专注于单一任务的观点，如电子邮件“撰写”页面。 ·包含用户首选项或设置的页面 在Android上，后退按钮不在底部导航栏视图之间导航。...底部导航icon 点击底部导航icon将直接带你到相关页面，或刷新当前页面。每个icon必须指向目的地，并且不能打开菜单或对话框。...滚动 底部导航栏滚动时可以动态地出现和消失： ·向下滚动隐藏底部导航栏 ·向上滚动显示 手势 在内容区域上使用左右滑动手势不会在一级页面之间切换。

4.1K90

【软件开发规范七】《Android UI设计规范》

以下是一些常见的尺寸与距离： 顶部状态栏高度：24dp Appbar最小高度：56dp 底部导航栏高度：48dp 悬浮按钮尺寸：56x56dp/40x40dp 用户头像尺寸：64x64dp/40x40dp...使用悬浮按钮要遵循以下规则： 建议只用一个悬浮按钮 悬浮按钮可以贴在纸片边缘或者接缝处，但不要贴在对话框、侧边抽屉和菜单的边缘 悬浮按钮不能被其他元素盖住，也不能挡住其他按钮 列表滚动至底部时，悬浮按钮应该隐藏...，数据集含有各种相关信息，例如，关于单一主题的照片，文本，和链接。...卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。卡片不会翻转以展示其背后的信息。 ​...编辑 侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。 ​编辑 ​编辑 列表较短不需要滚动时，设置和帮助反馈跟随在列表后面。 ​

5.1K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Android开发笔记（序）写在前面的目录

    Android开发笔记（一百二十七）活用提示窗Toast和Snackbar 第六章 复杂控件 Android开发笔记（十九）底部标签栏 Android开发笔记（二十）顶部导航栏 Android...Android开发笔记（一百三十五）应用栏布局AppBarLayout 嵌套滚动视图 NestedScrollView Android开发笔记（一百三十五）应用栏布局AppBarLayout 可折叠工具栏布局...TabActivity Android开发笔记（十九）底部标签栏TabBar 页面组 ActivityGroup Android开发笔记（十九）底部标签栏TabBar 碎片页面 FragmentActivity...Android开发笔记（十七）GIF动画的实现 书籍翻页动画 PageWidget Android开发笔记（十八）书籍翻页动画 底部标签页（三种） TabBar Android开发笔记（十九）底部标签栏...开发笔记（一百四十八）自定义输入法软键盘 沉浸式状态栏 StatusBarUtil Android开发笔记（一百六十三）高仿京东的沉浸式状态栏 下拉滚动视图 PullDownScrollView Android

    2.9K40

    【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )

    AppBar , 底部导航栏 BottomNavigationBar , 侧边栏 的组件 , 使用该组件可以很容易实现一个复杂的导航页面 ; AppBar : 顶部导航栏 ; BottomNavigationBar...: 底部导航栏 ; RefreshIndicator : 刷新指示器 ; Image : 图片组件 ; TextField : 输入框组件 ; PageView : 可滚动翻页的组件 , 类似于 Android..., 该弹窗有一个自动圆角和阴影 AlertDialog( // 对话框标题 title: Text("AlertDialog..., 侧边栏组件 , 使用该组件可以很容易实现一个复杂的导航页面 ; Scaffold 组件常用设置选项 : 顶部标题栏设置 : appBar ; 界面主体子组件设置 : body ; 悬浮按钮设置 :..., this.drawer,// 侧边栏 this.endDrawer, this.bottomNavigationBar,// 底部导航栏 this.bottomSheet

    2K01

    Material Design — 提示框（ Dialogs）

    按钮文案要明确说明接下来将发生的操作 带有标题的警告 仅对高风险情况使用带标题的警告，例如连接可能丢失。 用户应该能够仅根据标题和按钮文本来理解选择。...不该有明确的取消按钮 明确说明 ·在简单提示框中，行高可以变化； ·简单的对话框在屏幕上垂直和水平都居中显示； ·提示框与屏幕左右边缘的距离应该至少为40dp，距离顶部和底部至少为24dp； ·该对话框的内容距离提示框边缘为...点击确认对话框中的“取消”，或按Android的“后退”，取消操作，放弃所有更改并关闭对话框。 ?...确认按钮将被禁用，直到满足对话框中的所有必填字段都完成时，确认操作才会被激活 丢弃（离开） 丢弃操作（屏幕左上角的“X”）和后退按钮均会关闭全屏对话框并放弃之前所做的更改。...如果全屏对话框使用长度可变的标题或预期到可能会有长标题（例如，因为某些单词在不同的语言中较长），请将标题文本置于对话框的内容区域而不是最上面的导航栏。 ? 不该在导航栏中使用长标题

    5.2K101

    Android开发笔记（六十六）自定义对话框

    setCustomTitle : 设置自定义的标题视图。 --以上方法用于设置标题部分。注意setTitle和setCustomTitle只能设置其一，不能重复设置。...窗口显示与对话框模式的Spinner极为相似，没有底部的按钮，一旦选中某项就立即关闭对话框。 setSingleChoiceItems : 设置单选列表的内容视图。...与setItems的区别在于有显示底部的交互按钮，并且每项右边有单选按钮。 setMultiChoiceItems : 设置多选列表的内容视图。底部有交互按钮，并且每项右边有复选按钮。...下面是Dialog的常用方法： Dialog构造函数 : 可定义对话框的主题样式（样式在styles.xml中定义）。如是否有标题、是否为半透明、对话框的背景等等。...一个运用例子参见《Android开发笔记（十九）底部标签栏TabBar》。 getCurrentFocus : 获取当前焦点所在的视图。

    2.6K20

    腾讯开源超实用的UI轮子库，我是轮子搬运工

    QMUI_Android 功能特性 全局 UI 配置 只需要修改一份配置表就可以调整 App 的全局样式，包括组件颜色、导航栏、对话框、列表等。一处修改，全局生效。...QMUIBottomSheet 在 Dialog 的基础上重新定制了 show() 和 hide() 时的动画效果, 使 Dialog 在界面底部升起和降下。...使用不同的 Builder 来构建不同类型的对话框，这些 Builder 都拥有设置 title 和添加底部按钮的功能，不同的 Builder 特有的作用如下： MessageDialogBuilder...快速设置状态栏为黑色或白色字体图标（支持 4.4 以上版本 MIUI 和 Flyme，以及 6.0 以上版本的其他 Android）。...提供多个常用的 View 相关工具方法，如对 View 设置单个方向的 padding、从 ViewStub 中获取一个 View、判断 ListView 是否已经滚动到底部等等。

    4.8K30

    Flutte部件目录-Material Components 顶

    实现Material Design指南的视觉，行为和运动丰富的小部件。 应用程序结构和导航 按钮 输入和选择 对话框，弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...应用程序结构和导航 Scaffold Appbar 上面两个在基本部件中已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。...一个显示在应用底部的材质小部件，用于在少量视图中进行选择，通常介于3到5之间。 底部导航栏由文本标签，图标或两者的多个项目组成，并放置在一块材料的顶部。 它提供了应用程序顶级视图之间的快速导航。...底部导航栏通常与Scaffold结合使用，在Scaffold.bottomNavigationBar参数中提供它。 底部导航栏的type会更改其条目的显示方式。...SnackBar 带有可选操作的轻量级消息，简要显示在屏幕底部。 ? 信息显示 Image 一个显示图像的小部件。 ? Icon 材质设计图标。 ?

    9.5K40

    Android开发笔记（一百六十四）仿京东首页的下拉刷新

    鉴于App首页基本采用滚动视图ScrollView实现页面滚动功能，故而该问题就变成了如何监听该视图滚到顶部或者滚到底部。...然而成功监听页面是否到达顶部或底部，仅仅解决了状态栏和工具栏的变色问题。因为页面到顶时继续下拉，ScrollView要怎么处理？...不管ScrollView是惊慌失措，还是不知所措，恰恰说明它是真正的束手无策了，为此还要一个和事佬来摆平下拉布局和滚动视图之间的纠纷。...这个和事佬必须是下拉布局和滚动视图的上级布局，考虑到下拉布局在上，而滚动视图在下，故它俩的上级布局继承线性布局LinearLayout比较合适。...新的上层视图需要完成以下三项任务： 一、在下层视图的最前面自动添加一个下拉刷新头部，保证该下拉头部位于整个页面的最上方； 二、给前面自定义的滚动视图注册滚动监听器和触摸监听器，其中滚动监听器用于处理到达顶部

    2.9K40

    界面无小事(九): 做个好看的伸缩头部

    阶段效果图 发现两个问题, 由于背景是白色, 标题栏字体颜色要变成黑色, 默认就是黑色, 所以就是删除xml中的主题设置. 当然, 如果你是深色背景, 这里就无需动它....的底部 parallax 视图将以视差方式滚动 是不是该怎么懵还是怎么懵, 来看效果图: ?...也就是说, pin模式下, 下面的滚动视图和图片是同步滑动的, 但是这样的观感其实不好. parallax则改进了这一点, 看起来很和谐, 尽管两者不再同步, 这就是翻译后说的以视差方式滚动了. -...一旦滚动视图到达其滚动范围的末尾, 该视图的其余部分将滚动到视图中. 折叠高度由视图的最小高度定义....默认效果 不让悬浮按钮吸附在Toolbar上, 将它放置到底部, 再看下效果: android:layout_gravity="end|bottom" ?

    98920

    原创插件：WordPress博客友好对话框+文章随机推荐滚动条插件（附代码版）

    修复在部分主题下滚动条不显示文字或错乱问题； 修复底部滚动文字在宽度变窄时会消失的问题； 修改为当宽度小于 480px 底部滚动条自动隐藏； 新增宽度小于 720px 时，不会自动弹出欢迎框；  新增...Ver 1.24 版本更新说明： 修复了在 IE 下复制文字无法弹出版权提醒的 BUG； 新增宽度小于 900px 时隐藏底部公告栏的特性。...①、新增网页嗨一下功能，首次启动请到插件设置界面填写歌曲 url 地址 ②、后台新增邮件订阅设置，可自定义滚动条右侧的博客订阅按钮地址 ③、后台新增留言地址设置，让对话框中显示留言板超链接 ④、修复可能从...很直白的设置说明，一看就懂，其中手动呼出对话框是指底部随机文章滚动条右侧的笑脸按钮，其他的就不多说了。下一版本将在设置项目里面新增是否开启欢迎对话框设置功能，让插件的功能更加灵活！...针对纯代码版（WordPress 插件版已自带底部手动呼出功能）： ②、如果想和张戈博客一样，在右下角增加一个手动呼出对话框的功能，你可以如下操作： i.

    3.7K120

    CollapsingToolbarLayout使用

    所以，CollapsingToolbarLayout 的使用一定离不开 AppBarLayout 和 Toolbar，并且作为 AppBarLayout 的直接子视图使用。...注意，没有设置这个属性时，默认使用Toolbar的标题；statusBarScrim顶部视图折叠状态下，状态栏的遮罩色。通常这样设置：app:statusBarScrim="?...attr/colorPrimary"，即显示为Toolbar颜色，应用的主题色；layout_collapseMode折叠模式，设置其他控件滚动时自身的交互行为，有两种取值：parallax，折叠视差效果...:fitsSystemWindows和values-v21中style样式的statusBarColor和windowDrawsSystemBarBackgrounds属性来完成状态栏的背景色变化，详情参考源码即可...；通过layout_anchor和layout_anchorGravity可以控制FloatingActionButton的behavior和位置，如上图所示，当滚动列表是，FAB按钮会随着AppBarLayout

    2.5K60

    android 设置标题栏背景颜色_状态栏菜单栏都在哪

    下面是同一个activity切换不同fragment时，状态栏文字颜色跟着变化的效果图： 下图是同一个Activity向上滚动时，标题栏和状态栏文字颜色根据变化的效果： 1....:fitsSystemWindows属性，故在实现上面效果时带有底部导航栏手机上就会存在一个大坑，解决办法见第3章节。...带有底部导航栏手机底部导航按钮会和navigationbar重叠 如下图所示： 全屏时，由于视图布局会填充到状态栏和导航栏下方，如果不使用android:fitsSystemWindows=”true...”属性，就会使底部导航栏和应用底部按钮重叠，导视按钮点击失效，这该怎么办？...计算底部的NavigationBar高度； 3. 最后设置视图边距。

    2.3K10

    2021 最新 IntelliJ IDEA 详细配置步骤演示（图文版）

    User contrast scrollbars: 使编辑器滚动条更加可见。...(左侧并排布局) 被附连到顶部和底部边缘中的两列，而不是堆叠在彼此的顶部上显示垂直工具窗口。...Menus and Toolbars(菜单和工具栏管理) 自定义菜单和工具栏，使其仅包含所需的操作，对其进行重新组合并配置其图标。 在可用菜单和工具栏列表中，展开要自定义的节点，然后选择所需的项目。...Use in project view(在项目视图中使用) 例如，在“在文件中查找”对话框中Ctrl+Shift+F，开启前效果 开启后效果: 5....1.单击添加按钮或Alt+Insert按左窗格以创建新的快速列表。 2.将此快捷方式分配一个kyeMap ,在“设置/首选项”对话框中Ctrl+Alt+S，选择“键盘映射”。

    97110

    【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

    2.4 ToolbarAndroid         React组件，包装了Android Toolbar小工具。工具栏可以显示一个标志，导航图标(如汉堡包菜单)，标题 和副标题和操作列表。...3.4.1 Props alwaysBounceHorizontal 布尔型         当为真时，滚动视图到达内容底部时，水平反弹，即使该内容小于滚动视图。...alwaysBounceVertical 布尔型         当为真时，滚动视图到达内容底部时，垂直反弹，即使该内容小于滚动视图。...automaticallyAdjustContentInsets 布尔型 bounces 布尔型         当为真时，当滚动视图到达内容底部时，反弹，如果内容比滚动视图是大，那么滚动视图沿着轴滚动方向反...布尔型         当为真时，轻击状态栏滚动视图会滚动到顶部。

    58440

    华为鸿蒙 HarmonyOS 开发资料全面汇总

    xrecyclerview - 一个实现了下拉刷新，滚动到底部加载更多以及添加 header 功能的的 RecyclerView。...FancyToast-ohos - 一个库，它将标准的 android 吐司带到一个新的层次，有各种样式选择。根据代码来做吐司。 WaveSideBar - 带有波浪效果的索引侧栏。...BottomNavigationViewEx - 底部导航栏切换页面的实现。 DraggableView - 具有旋转和倾斜/缩放效果的可拖动图像。...material-dialogs - 它具有几乎所有带有多个测试用例的 UI 组件，其中包括带有文本，图像，按钮，ListContainer 项目，调色板，自定义视图和进度栏的对话框。...BottomSheet 可以替代对话框和菜单，但可以保留任何视图，因此用例无穷无尽。 该存储库不仅包括 BottomSheet 组件本身，还包括一组在底部表单中显示的通用视图组件。

    3.3K40

    PyQT模块、类、控件介绍

    QMenuBar控件 提供了一个横向菜单栏 QStatusBar控件 提供了一个适合呈现状态信息的水平条，通常放在QMainWindow的底部 QToolBar控件 提供了一个工具栏，可以包含多个命令按钮...对话框按钮盒 Item Views(Model-Based)——项目视图 ListView 列表视图 TreeView 树视图 TableView 表格视图 ColumnView 列视图 UndoView...QComboBox：下拉框类 QDialog：对话框类 QCheckBox：复选框类 QMenuBar：它作用就是在窗口顶部生成菜单类栏 QMenu：菜单栏选项类，它的作用就是生成选项 QTabWidget...：图形视图 QToolButton：工具按钮 QTreeWidgetItem： QTableView：TableView QTreeView：树视图 QDockWidget： QFileDialog：文件对话框...QListView：列表视图 QButtonGroup：按钮组 QScrollBar：滚动区域 QDateEdit：日期编辑框 QFontComboBox：字体选择框 QFileSystemModel

    64331

    绝对想尝试的创意 Android 库，你关注了吗？| 码云周刊第 43 期

    还集成了各种炫酷的 Header 和 Footer。 特点功能： 支持多点触摸。 支持嵌套多层的视图结构。...支持自定义并且已经集成了很多炫酷的 Header 和 Footer。 支持和 ListView 的无缝同步滚动 和 CoordinatorLayout 的嵌套滚动。...支持自动刷新、自动上拉加载（自动检测列表惯性滚动到底部，而不用手动上拉）。 支持自定义回弹动画的插值器，实现各种炫酷的动画效果。 支持设置主题来适配任何场景的 App，不会出现炫酷但很尴尬的情况。...支持所有可滚动视图的越界回弹。 项目地址： https://gitee.com/scwang90/SmartRefreshLayout 2. 项目名称：基于 Android 的点赞特效 ?...项目简介： 这是一个 Material Design 的控件，实现了类似 Google inbox 中带有多个子按钮的 FloatingActionButton 的效果。

    1.3K90
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券