本文实例讲述了Android开发之FloatingActionButton悬浮按钮基本使用、字体、颜色用法。...这里使用的是：com.getbase.floatingactionbutton.FloatingActionsMenu 先说下它的配置：在app/build.gradle 添加以下代码依赖： 圆形悬浮按钮...:1.10.1' title 字体以及颜色的设置： FloatingActionButton默认无法显示文字的情况，所以这里需要对其配置样式; 在res/value/style中添加： <!...-- 填充的颜色 -- <solid android:color="#FFffffff" /
Material Button Material Button 是一个小部件, 可用于在你的应用程序的用户界面中显示材质样式的按钮...." app:icon="@drawable/ic_android_white_24dp" /> 默认情况下, 此类将使用主题的 accent colour 填充按钮的背景颜色, 同时使用白色作为按钮的文字颜色...如果该按钮未被填充, 则主题的 accent colour 将作为按钮的文本颜色, 透明背景色....这样做时, 你需要将 ChipGroup 封装在滚动视图(如 HorizontalScrollView )中, 以便用户可以滑动正在显示的 Chip....除了这两个属性之外, 还可以使用最初可用的属性(如 app：cardBackgroundColor 等)设置卡片视图的样式.
我们来看一个使用系统窗口区域的例子。我们有一个悬浮操作按钮 (FAB)，它位于屏幕右下角，距离屏幕边缘 16dp (这符合设计指南中的要求)。...具体到本例中，FAB 位于底部右侧边缘附近，因此我们可以使用 systemWindowInsets.bottom 和 systemWindowInsets.right 值来增加 FAB 下方和右方的边距...Android 10 带来了新的手势导航模式，允许用户通过手势动作，而不是导航按钮来进行导航: 从屏幕左/右边缘向中间滑动，相当于后退按钮 (Back)。...处理边衬区冲突 希望您现在对不同类型的 insets 区域有了更深的了解，下面我们来看看您需要如何在应用中实际使用它们。...注意: 如果您要在 ViewGroup 上执行此操作，则可能要对其进行设置 android:clipToPadding="false"。这是因为默认情况下，所有视图都会在填充区域内裁剪图形。
在官方给出的示例中，最简单且最具代表性的立面设计就是悬浮按钮了，这种按钮不属于主界面平面的一部分，而是位于另外一个维度的，因此就会给人一种悬浮的感觉。...下面实战悬浮按钮的点击事件： 在MainActivity的onCreate()中添加以下代码： //悬浮按钮点击事件 FloatingActionButton fab = (FloatingActionButton...打个比方，如果我们在执行删除操作的时候只弹出一个Toast提示，那么用户要是误删了某个重要数据的话肯定会十分抓狂吧，但是如果我们增加一个Undo按钮，就相当于给用户提供了一种弥补措施，从而大大降低了事故发生的概率...可以看到，Snackbar从屏幕底部出现了，上面有我们所设置的提示文字，还有一个Undo按钮，按钮是可以点击的。 ? 过一段时间后Snackbar会自动从屏幕底部消失。...举个简单的例子，刚才弹出的Snackbar提示将悬浮按钮遮挡住了， 而如果我们能让CoordinatorLayout监听到Snackbar的弹出事件， 那么它会自动将内部的FloatingActionButton
前言悬浮操作按钮（Floating Action Button, FAB）是一种在 Android 和 Material Design 中使用的 UI 元素。它用于触发特定屏幕的主要操作。...尽管它来自 Android，但在一些 iOS 应用中也可以看到这种模式。以下是 Twitter 应用中悬浮操作按钮的示例。Twitter App 在最重要的操作步骤，发布推文时使用悬浮操作按钮。...，是需要实现需求中的第一步，悬浮按钮应该出现在屏幕的主要内容前面。...我们还在按钮周围添加了填充，以使其不会过于靠近边缘。示例运行截图如下：使悬浮按钮呈现圆形接着，是需要实现需求中的第三步，使悬浮按钮具有圆角形状，并在中心具有一个图标。...总结在本文中，我们学习了如何在 SwiftUI 中创建一个悬浮操作按钮，它是 Android 和 Material Design 中常用的 UI 元素。通过逐步实现悬浮按钮的各个特性来完成这个过程。
比如说根据Material Design的设计，许多应用程序主界面的右下角会放置一个Fab按钮。...这个Fab按钮可以提供一些常用的便捷操作，但同时也会遮盖一部分界面，如果一直显示的话对于用户来说并不友好。...因此最好的设计方案就是，当用户向下滚动列表时，我们就认为用户不再需要和Fab按钮交互，此时将按钮进行隐藏。 下面具体看一下如何在Compose中实现这种效果。...最后在MainLayout()函数中将以上两个函数都包含进去，并加了一个布尔变量，只有firstVisibleItemIndex为0，也就是列表中第一个子项元素可见的时候，Fab按钮才显示。...现在可以运行一下程序看看效果了： 正如我们所期待的那样，当A元素在屏幕上可见的时候，Fab按钮也是可见的。当A元素滑出了屏幕，Fab按钮也会随之消失。
Android 5.0 Android 5.0中Transition可以被用来实现Activity或者Fragment切换时的异常复杂的动画效果。...fab按钮的状态。...（所以动画是在第二个Activity中完成的，只是按钮的起始状态是以第一个Activity传过来的按钮的状态信息相同，然后到最终用户设置的位置。）...其他参考文章： 曲线运动－1 曲线运动 － 2 第三步fab按钮动画结束后出现注册界面： 我们上一步对fab按钮设置了过渡的动画。...第四步返回登录界面： 这里有二种方式： 按了手机上的返回键 按了那个fab按钮返回 我们的fab键从左边移动到了上边，然后如果你按返回键，你会发现自动fab键会先执行相应的自动回去动画，然后activity
通过模版创建一个工程 首先，我会展示如何在一个新应用中设定导航的基本元素。然后，我会展示我已经写好的甜甜圈记录应用，这样您可以大致了解这将是一个怎样的应用。(我叫这个为 Julia Child 技巧。...在 FirstFragment 的代码中，有一段代码 (Basic Activity 模版自动创建的) 处理了按钮点击事件并导航到 SecondFragment 目的地: view.findViewById...(剧透警告: 我会在接下来的文章中介绍这一主题，您也可以同时查阅 完整代码。) 运行该应用展示了它是如何工作的。如您所见，我已经预先在应用中输入了一些重要的甜甜圈数据: ?...点击任一甜甜圈会导航到编辑其信息的对话框 点击 DONE 按钮，将保存更改到数据库中并且返回更新的列表；而点击 CANCEL 按钮，将放弃掉所有的编辑并返回。...注意: 点击返回按钮，同样会返回甜甜圈列表，因为导航组件已经自动为我们设置好了返回栈。 总结 通过这篇文章我们了解了如何使用内置的导航组件快速地创建一个新应用，并且学习了如何导航到对话框目的地。
概述 浮动操作按钮是Material Design 中推出的控件之一 浮动操作按钮 (简称 FAB) 是: “一个特殊的promoted操作案例。...浮动操作按钮代表一个屏幕之内最基本的额操作。关于FAB按钮的更多信息和使用案例请参考谷歌的官方设计规范。 运行效果 ?...目前浮动操作按钮默认的behavior是为Snackbar让出空间，就如这个视频中的效果。...Kitkat 中的 FAB： ? Issues 1: Android 4.4 和 5.0 中边缘显示 很容易看出，Lollipop 中存在边缘显示的问题。...调整按钮类型 浮动操作按钮有两种大小：默认的，这应该是最常用的情况，以及mini的，这应该只用于衔接屏幕上的其他元素。 可以把FAB的按钮类型调整为“正常”或者“mini” ...
比较难实现的应该是左边的那条竖线，其实，一开始并没有什么思路，因为 shape 中的 line 只能画横线，而画不了竖线，最后在 Google 的帮助下，终于找到了实现这个竖线的思路，我是这样处理的，...定义一个 layer-list 设置在 TextView 中，将 TextView 的右边框进行描绘 <layer-list xmlns:android="http://schemas.android.com...'cc.trity.floatingactionbutton:library:1.0.0' } 然后在布局中设置我们想要的颜色和图案，最后在 Activity 中进行悬浮按钮点击事件的处理就行了...，我是使用 Android 自带的 SQLite 数据库进行保存的，做法也是比较简单的，这里附上一篇讲解 SQLite 的博客 Android中SQLite应用详解，先建立一个 DiaryDatabaseHelper...在这里我为了防止日记被误删，就做了一个对话框，当点击删除按钮的时候，便会跳出这个对话框询问用户是否真的要删除该日记 AlertDialog.Builder alertDialogBuilder
="match_parent" android:layout_height="match_parent"/> 我删除了TextView，改变了外部的父布局...按照下图进行改变，你可以将无用的代码删除掉。...myLocationStyle.strokeWidth(0); // 设置圆形的填充颜色 都为0则透明 myLocationStyle.radiusFillColor...private FloatingActionButton fabPOI; 然后在onCreate中 fabPOI = findViewById(R.id.fab_poi); 然后在onLocationChanged...[xw26e6e4b7.png] 然后添加一个queryPOI()方法，这个方法对应了xml中浮动按钮的onClick的值。
设计思路 既然玩那就干脆玩花一点，一步到位给中间按钮加了个简单的点击动画，点击后FAB在垂直方向上执行一次往返位移，同时底部导航栏上的凹槽大小跟随着FAB的凹陷深度动态变化，需要实现的功能点以及思路大体是下面的几个...的特性，设置底部导航栏作为FAB的参照物方便对齐停靠； FAB位移动画以及导航栏凹陷动态变化：自定义导航栏的形状，根据FAB的凹陷深度来动态绘制导航栏。...当然了实际上不用那么麻烦一点点手动创建，贴心的AS直接有提供一键生成以上文件的快捷方式，相关依赖也会自动导入，只需新建Activity时选择Bottom Navigation Views Activity... 到这一步底部导航栏跟页面的基本交互也算完成了 导航栏中间大按钮停靠 在之前已经在导航栏上留好了放置大按钮的位置，接下来就是想办法把这个按钮塞进去，并且设置按钮的中心点与导航栏的顶部居中对齐...，动画持续时长为4秒，在按钮运动的同时监听按钮的位移值，并根据当前位移值更新重绘导航栏凹槽。
，自动选择是隐藏还是显示。...为充分利用屏幕的空间，我们可以使用RecyclerView来填充MatenalTest项目的主界面部分。 这里参考一下郭神的demo——实现水果列表，首先需要准备许多张水果图片： ?...由于各张水果图片的长宽比例可能都不一致，为了让所有的图片都能填充满整个ImageView，这里使用了centerCrop模式，它可以让图片保持原有比例填充满ImageView，并将超出屏幕的部分裁剪掉。...FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab); fab.setOnClickListener...，自动选择是隐藏还是显示。
本系列文章致力于帮助开发者们打造更好的现代 Android 开发体验，敬请关注。 今天为大家发布本系列文章中的第三篇: 在应用中导航时使用 SafeArgs。...Donut Track: 就是这个 App，它又来了 Donut Tracker 会显示甜甜圈的列表，每个列表项含有名称、描述和评分信息，这些内容有些是我添加的，有些是通过在点击 悬浮操作按钮 (FAB...到这里，我们执行 build 操作，gradle 就会针对所输入的数据生成相应的代码。这一点很重要，因为不是这样的话，Android Studio 就无法知道想要调用的函数在自动生成代码中的位置。...所以代码里会监听 ViewModel 所提供的 LiveData 对象，并且异步处理请求，当数据返回时填充视图。 当用户点击对话框里的 Done 按钮时，就需要存储用户所输入的信息了。...其中一种是当用户点击 悬浮操作按钮 (FAB) 的时候: binding.fab.setOnClickListener { fabView -> fabView.findNavController
目前这个框架提供了几种不用写动画代码就能工作的方法，这些效果包括： 让浮动操作按钮上下滑动，为Snackbar留出空间 ? 扩展或者缩小Toolbar或者头部，让主内容区域有更多的空间。 ?...自动上移的效果，app:layout_behavior的为自定义的效果，当下滑时，fab消失，上滑时fab显示，详情请查看本人博客 Floating Action Button-Android M新控件..."> 当CoordinatorLayout发现RecyclerView中定义了这个属性，它会搜索自己所包含的其他view，看看是否有view与这个behavior相关联。...support.design.widget.CollapsingToolbarLayout> ---- Custom Behaviors （自定义Behavior） 在CoordinatorLayout 与浮动操作按钮中我们讨论了一个自定义...CoordinatorLayout的工作原理是搜索定义了CoordinatorLayout Behavior 的子view，不管是通过在xml中使用app:layout_behavior标签还是通过在代码中对
6.PullToZoomScrollView实现下拉自动放大头部View 7.materialdialog实现的对话框 8.MaterialSpinner实现的带效果的spinner 9.butterknife...3.主界面的悬浮按钮 悬浮按钮在github上有Demo， https://github.com/futuresimple/android-floating-action-button https...://github.com/makovkastar/FloatingActionButton 小编用的是第一个，然后重写了一下里面的滑动监听实现了listview滑动显示隐藏按钮。...> 下面是重写的ListView滑动监听实现显示隐藏悬浮按钮 public void attachToListView(@NonNull AbsListView listView,...hasHoneycombApi() { return Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB; } } 然后再activity中这样用
代码如下： <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android...="bottom|end" android:layout_margin="@dimen/fab_margin" android:src="@drawable/add"...那我们现在就研究改如何在滑动列表时隐藏和显示这个悬浮按钮FloatingActionButton。...其实我感觉你们可以还会想说，点击一下这个悬浮按钮，动画弹出多个按钮这个效果怎么实现，这里我就不讲了，github上有太多跟这个相关的例子了。...添加icon和改变Snackbar的位置 修改了背景色，文字按钮颜色，是不是还不过瘾？看看我们如何在Snackbar上添加上一个icon图片。其实也非常简单，和修改样式的过程差不多。
前言 悬浮按钮是我非常喜欢的, 可以把最关键的功能放入到悬浮按钮中. 比如日记app里的新建日记, 阅读类app里的喜欢. 稍微处理一下可以将悬浮按钮扩展成悬浮菜单, 来看下实现吧!...配合Snackbar 显示和隐藏 然后还有就是悬浮按钮的隐藏和显示函数....在xml中加入app:fabSize="mini"就变成mini尺寸的了. 所以在设置动画和位置的时候不是将按钮全部放置在同一位置, 需要修正位置..../ 开始动画 va1.start(); va2x.start(); va2y.start(); va3.start(); } 切换图标 然后就是在不同状态切换悬浮按钮的图标...R.drawable.ic_add : R.drawable.ic_close); ---- 最后 我本人还是很喜欢google的material design的, 这个悬浮按钮也非常实用.
请注意，我们将仅讨论规范类型的按钮（也称为简单按钮），不会涵盖切换按钮或单选按钮。 实心按钮 实心按钮是具有实心填充的按钮。大多数时候，设计师使用对比色，这样实心按钮自然会吸引很多注意力。...扁平按钮与加了阴影的按钮 2.幽灵按钮（空心按钮） 幽灵按钮，也称为空心按钮，是没有填充的按钮。只有按钮的轮廓可见。 什么时候使用？ 幽灵按钮适用于辅助号召性用语按钮。...主要的号召性用语按钮将引导用户进行我们希望他们采取的行动，而辅助按钮提供了一个合理的选择。 系统对话框中的空心按钮 对于我们不想分散用户注意力的用户界面，幽灵按钮也是一个不错的选择。...Google文档中的图标 当您需要呈现大量动作但由于某种原因不希望将它们堆叠在一起时，仅图标按钮可以很好地工作。 设计要点 确保图标的含义对用户来说是清楚的。图标的含义对用户来说应该是非常清楚的。...FAB 是一个只有图标的按钮，设计有微妙的阴影，通常位于屏幕的右下角。 何时使用 由于 FAB 是一个相对紧凑的按钮，它通常用作移动应用程序的主要操作。FAB 通常用于一项操作。
finish()，完了之后原始活动中的onReStart()中做揭露动画的收挽；另外我在在跳转的目标活动中完成揭露动画展开的时候，添加了一个AlphaAnimation； 这边的起始活动用的是button...或者直接作为两个Activity之间的转场动画，如本文第二个demo； 揭露动画怎么用？...， android:backgroundTint可以设置其背景色， android:src则给按钮设置图标， 这里用的图标资源来自于阿里的矢量图标库。...()， onClick()中我们调用一个自定义方法，在里面启动揭露动画； 这里通过变量flag实现点击按钮时揭露动画的交替开启显示以及关闭隐藏，效果图在下方代码之后； 关于揭露动画的逻辑以及具体实现的语法...onClick()：计算fab的中心坐标，用于作为揭露动画的圆心；同时把这对坐标put进intent中，然后startActivity(intent);跳转到下一个活动，同时把坐标对传过去；
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
