链接：https://juejin.cn/post/7337354931480199208 本文由作者授权发布 前言 底部导航栏相信大部分的Androider都不陌生，毕竟对于绝大多数的应用来说底部导航栏是首页的标配...，也不缺各种花里胡哨不按常理出牌的底部导航栏。...设计思路 既然玩那就干脆玩花一点，一步到位给中间按钮加了个简单的点击动画，点击后FAB在垂直方向上执行一次往返位移，同时底部导航栏上的凹槽大小跟随着FAB的凹陷深度动态变化，需要实现的功能点以及思路大体是下面的几个...的特性，设置底部导航栏作为FAB的参照物方便对齐停靠； FAB位移动画以及导航栏凹陷动态变化：自定义导航栏的形状，根据FAB的凹陷深度来动态绘制导航栏。...的值，由此一来可以达到凹槽收缩的效果，按钮向下运动时同理： 另外还需要考虑按钮完全位于导航栏上方时的情况，这种情况下直接使用直线来代替原来的曲线部分。
向上偏移，从而确保不会被Snackbar遮挡到。...)findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override...//悬浮按钮点击事件 FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab); fab.setOnClickListener...可以看到，Snackbar从屏幕底部出现了，上面有我们所设置的提示文字，还有一个Undo按钮，按钮是可以点击的。 ? 过一段时间后Snackbar会自动从屏幕底部消失。...向上偏移，从而确保不会被Snackbar遮挡到。
Snackbars & Toasts Snackbars是通过屏幕底部的消息对操作进行的简短反馈。 Snackbar包含与所执行的操作直接相关的单行文本。 它们可能包含操作文本，但不包含icon。...它们也显示在屏幕的底部，但不能从屏幕中滑走。 用法 一次只能显示一个snackbar。 每个snackbar可能包含一个单独的操作，但不会是“关闭”或“取消”。...行为 Snackbars激活后从屏幕的底部向上滑出。 ---- 用法 一次只能在屏幕上显示一个Snackbar。 位置 Snackbars出现在屏幕上的大多数元素的上方，与浮动操作按钮的高程相同。...但高程低于提示框，底部动作条和导航抽屉。 行为 入口时，Snackbars激活时从屏幕底部向上出现。 出现时不会阻碍用户输入。...当显示第一个Snackbar时第二个就该做准备，在第二个Snackbar开始出现前第一个Snackbar应该开始向下收缩。 （今天的好短～开心～）
App bars: bottom Material Design链接：App Bars：bottom Bottom app bar 在手机屏幕底部展示导航和关键操作。...向上滚动显示 bottom app bar，如果有FAB，则重新附着 FAB。 Bottom app bar 可以改变其边缘的形状，例如凹口以容纳FAB。...当与 FAB 配合时，FAB 的静止和凸起高度应该增加，以便在 bottom app bar 上方保持可见。 ?...底部的导航抽屉从底部的应用栏打开。 抽屉在底部应用程序栏前打开，并显示顶部应用程序栏以在达到完整高度时关闭抽屉。...---- 位置 导航 Bottom app bar 可显示 navigation menu icon 以打开 bottom navigation drawer，但该 bar 本身不包含任何导航操作（例如向上导航至主屏幕或一个关闭图标
使用 Snackbar，可以在屏幕底部快速的显示一条消息，大体与 Toast 相同，但多了几分灵活性： 一小段时间之后、或者用户与屏幕触发交互，Snackbar 会自动消失； 可以包含一个可选的操作；...把 Snackbar 划出屏幕，可以弃用； 作为一条上下文敏感的消息，也是 UI 的一部分，并在屏幕内所有元素的上层显示，而不是像 Toast 消息一样位于屏幕中央； 一个时刻只能有唯一一个 Snackbar...> 点击 FAB 以查看结果： ?...可以正常运行，但是并不符合标准的 UX，应该按照下图所示，FAB 适当上移： ?...同时按照文档中描述： 在项目的 view 中添加 CoordinatorLayout，可以支持 snackbar 的更多特性，比如滑动消失，和 FAB 的自动移动。
SnackBar是 Android Support Library 22.2.1 里面新增提供的一个控件,我们可以简单的把它理解成一个加强版的Toast，或者是一个轻量级的Dialog。...特点： 1.SnackBar和Toast的用途一样，都是用来提示用户操作后的结果的。 2.SnackBar显示时位置一般是在屏幕底部，较大的设备就显示在左下角。...3.SnackBar同一时间只有一条 4.SnackBar可以自动消失，也可以手动取消（在完成某个操作的时候） 5.在Activity结束的时候，SnackBar会消失，这点Toast不会 （避免...另外SnackBar的显示时长的设置值可以为： Snackbar.LENGTH_SHORT// 短时间显示，然后自动取消 Snackbar.LENGTH_LONG// 长时间显示，然后自动取消 Snackbar.LENGTH_INDEFINITE...="match_parent"> <android.support.design.widget.FloatingActionButton android:id="@+id/fab
fab的属性.png 颜色 android:backgroundTint="@color/jietelan" 图片 android:src="@drawable/icon_t" 厚度...fab的挂接.gif ---- 二、Snackbar和FloatingActionButton联动 Snackbar感觉就像下面出来的Toast,只是可以交互而已 ?...fab_sna.gif 1.代码实现： public class FabSnaActivity extends AppCompatActivity { @BindView(R.id.fab)..., false); view.addView(child);//添加自己的View snackbar.show(); }); ---- 三、底部抽屉：bottom_sheet 个人感觉向抽屉...isOpen; }); ---- 四、BottomSheetDialog和BottomSheetDialogFragment 1.BottomSheetDialog 这个非常简单就三行,就是一个底部出来的
无论是单一的控件还是图文布局，Google都给出了明确的设计说明，有兴趣的同学可以去上方提到的官方链接处做进一步了解。 RecyclerView的使用 写条目布局： <?...(); Snackbar的Duration有三种： Snackbar.LENGTH_SHORT Snackbar.LENGTH_LONG Snackbar.LENGTH_INDEFINITE—无限长...Toolbar的高度与ScrollView上方内边距都使用系统的actionBarSize。...用TabLayout实现底部导航（相对于传统的TabHost，它是可滑动的） 只需要三个步骤： 1.在布局中就把TabLayout放在布局底部 2。...去掉底部的indicator，app:tabIndicatorHeight=”0dp” 3.实现自己的效果，自定义的标签布局 代码如下： for (int i = 0; i < tabLayout.getTabCount
下面是使用anchor方式定义子视图方位的截图，其中红色方块位于整个页面的右上方： ?...，有关Snackbar的说明参见《Android开发笔记（一百二十七）活用提示窗Toast和Snackbar》； 下面是悬浮按钮自隐藏和显示时的动画效果截图： ?... <android.support.design.widget.FloatingActionButton android:id="@+id/fab_btn...BottomSheetBehavior design库提供了Snackbar在页面底部弹出提示条，可是Snackbar着实简单，如果我们想在底部弹出一组菜单，Snackbar就无能为力了。...下面是底部弹窗的演示截图： ?
自 API 1 以来，它们就以各种形式存在着，并且每当系统 UI 重叠显示在您的应用上方时，这个方法就会被调用。常见的例子是下拉状态栏和导航栏，或者弹出屏幕软键盘 (IME)。...在系统使用手势导航模式时 (即导航栏变成屏幕底部的一条粗线，也就是导航条)，由于导航条有动态色彩调整功能，这个冲突可能不会那么明显。...具体到本例中，FAB 位于底部右侧边缘附近，因此我们可以使用 systemWindowInsets.bottom 和 systemWindowInsets.right 值来增加 FAB 下方和右方的边距...这里让我们仍然使用 FAB 来举例: 注意看上图，在导航栏模式下，FAB 不会进入导航栏占据的高度 (48dp)。...从屏幕底部开始向上滑动，可以让用户切换最近使用的应用 (Recent)。 在系统手势区域中，系统手势操作优先于应用自己的手势操作。您可能已经注意到系统手势区域有两个获取方法。
Flutter 中的操作提示主要有这么几种 SnackBar、BottomSheet、Dialog，因为 Dialog 样式比较多，放最后讲好了 SnackBar SnackBar 的源码相对简单 const...还有就是 SnackBar 可以和 floatingActionButton 完美的配合，弹出的时候不会遮挡住 fab class _PromptDemoPageState extends State<...BottomSheet BottomSheet 看命名就知道是从底部弹出的菜单，展示 BottomSheet 有两种方式，分别是 showBottomSheet 和 showModalBottomSheet...，两种方式只有在展示类型上的差别，方法调用无差，而且 showBottomSheet 和 fab 有组合动画，showModalBottomSheet 则没有，看下实际的例子吧。...可以看到 showBottomSheet 会充满整个屏幕，然后 fab 会跟随一起到 AppBar 的底部位置，而 showModalBottomSheet 展示的高度不会超过半个屏幕的高度，但是 fab
浏览器将向上滚动以使输入框在键盘上方，因此粘性标题和浮动按钮将消失。 它看起来与以下内容相似： 这是移动浏览器中的默认行为。...VirtualKeyboard API 的使用案例 底部固定操作 在较小的视口上，您可能需要一个固定在界面底部的呼叫行动按钮或页脚。 考虑下面的图示，我们有一个固定在底部的CTA按钮。...请看下图： 帖子表单和导航固定在底部。当用户激活输入字段时，它会显示如下： 注意垂直空间太小。怎么办？通过混合比较功能和虚拟键盘API，我们可以在键盘显示时隐藏导航。...当键盘激活时， max() 的第二部分将起作用， bottom 的值将变为键盘的高度。 Navigation 导航 导航位于 bottom: 0 。...max() 功能的第一部分是当前活动的部分。 当键盘激活时，我们将导航移动到键盘下方。这里的 100px 是一个随机数，重点是添加一个比导航高度更大的元素。
如果该按钮未被填充, 则主题的 accent colour 将作为按钮的文本颜色, 透明背景色....: FAB (Floating Action Button) 是否已经附加到底部应用栏....你可以使用底部应用栏的 ID, 在你希望附加 FAB 组件上使用 app:layout_anchor 来附加一个 FAB....如果附加了 FAB, 它将插入底部应用栏, 否则 FAB 将保持在底部应用栏上方. ? app:fabAlignmentMode: 声明已附加到底部应用栏的FAB的位置....app:fabCradleVerticalOffset: 声明要用于附加 FAB 的垂直偏移量. 默认情况下为0dp: ? 但是设置值会允许 FAB 垂直向上移动. ?
内容的话就是 定义了ImageView用于显示水果的图片， 定义了TextView用于显示水果的名称，并让TextView在水平方向上居中显示。...= (FloatingActionButton)findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener...clickes", Toast.LENGTH_SHORT).show(); //Snackbar Snackbar.make(v,"Data...这里要改动的其实也就这一行代码而已，重新运行一下程序，并向上滚动RecyclerView，效果如图： ?...又会根据当前滚动的距离情况，做出消失或者重新出现的反应； 这其实也是MaterialDesign中的一项重要设计思想，因为当用户在向上滚动RecyclerView的时候，其注意力肯定是在RecyclerView
目前这个框架提供了几种不用写动画代码就能工作的方法，这些效果包括： 让浮动操作按钮上下滑动，为Snackbar留出空间 ? 扩展或者缩小Toolbar或者头部，让主内容区域有更多的空间。 ?...the button above the height of the Snackbar....Code activity_fab__snackar.xml "1.0" encoding="utf-8"?...，fab自动上移的效果，app:layout_behavior的为自定义的效果，当下滑时，fab消失，上滑时fab显示，详情请查看本人博客 Floating Action Button-Android...可以使用的其他flag有： enterAlways: 一旦向上滚动这个view就可见。 ?
当渲染一个 Snackbar 时，它通常出现在可见屏幕的底部。Floating action button 必须上移以便腾出空间。 ?...Float action button 有一个默认的 behavior 可以在检测到 Snackbar 被加入的同时将这个 button 向上移动 Snackbar 的高度。...此标志在从一个列表的底部滑动并且希望只要一向上滑动 Toolbar 就显示这种情况下是很有用的。...Ps：这里所说的 scrolling up 应该指的是 list 的滚动条向上滑动而不是上滑的手势。 ? 通常，只有当 list 滑到顶部的时候 Toolbar 才会显示，如下所示： ?...属性，认为这样就可以将 pager 中的滚动事件向上传递然后就可以被CoordinatorLayout 管理。
，SnackBar。...例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开。...作为基本布局，将自动产生向上移动的动画。...浮动操作按钮有一个 默认的 behavior来检测Snackbar的添加并让按钮在Snackbar之上呈现上移与Snackbar等高的动画。...可以使用的其他flag有： enterAlways: 一旦向上滚动这个view就可见。
FAB和BottomAppBar之间的间距； FabCradleRoundedCornerRadius指定切口周围角的圆度； FabCradleVerticalOffset指定FAB和BottomAppBar...Bottom Navigation BottomNavigationView创建底部导航栏，用户只需轻点一下即可轻松浏览和切换顶级内容视图。 ...当项目有3到5个顶层（底部）目的地导航到时，可以使用此模式。...下面着撸起实现： Step 1：搞个布局玩玩 外层使用CoordinatorLayout包裹，底部导航栏采用BottomNavigationView，中间内容区域，很Easy咯~ 底部工作表的“静止位置”。
一个显示在应用底部的材质小部件，用于在少量视图中进行选择，通常介于3到5之间。 底部导航栏由文本标签，图标或两者的多个项目组成，并放置在一块材料的顶部。 它提供了应用程序顶级视图之间的快速导航。...对于更大的屏幕，侧面导航可能更适合。 底部导航栏通常与Scaffold结合使用，在Scaffold.bottomNavigationBar参数中提供它。 底部导航栏的type会更改其条目的显示方式。...final items → List 放置在底部的导航栏内的互动条目....AlertDialog 警报是需要确认的紧急中断，通知用户有关情况。 AlertDialog小部件实现了这个组件。 ? BottomSheet 底部工作表从屏幕底部向上滑动以显示更多内容。...SnackBar 带有可选操作的轻量级消息，简要显示在屏幕底部。 ? 信息显示 Image 一个显示图像的小部件。 ? Icon 材质设计图标。 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
