Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Android:最新版浮动按钮的制作

Android:最新版浮动按钮的制作

作者头像
zstar
发布于 2022-06-14 02:31:27
发布于 2022-06-14 02:31:27
1.1K00
代码可运行
举报
文章被收录于专栏:往期博文往期博文
运行总次数:0
代码可运行

UI设计给我出了个难题:在一个界面上设计一个始终位于屏幕右下角的浮动按钮 翻阅好多博客(几乎都是几年前的):都是说要导入这么一个依赖 compile ‘com.getbase:floatingactionbutton:1.10.1’,结果发现放在2021年早已失效。 几经摸索,也没找到最新版Floatactionbutton的正确依赖。

突然想到,新建项目有个Basic Activity,里面正好有这么个玩意,如图可见

于是新建项目,研究源码,果然适用SDK最新版本。 当然还有各种各样的坑,也顺便记录一下。

首先需要导入依赖:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.getbase:floatingactionbutton:1.10.1'

之后在xml文件里添加:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:srcCompat="@drawable/dui"
        app:fabSize="normal"
        app:maxImageSize="57dp" />

其中 app:srcCompat用来更换默认按钮的icon, app:maxImageSize用来调节该icon的大小,注意图片必须长宽一致,否则错位很难看。 app:fabSize条件浮动按钮的大小,normal正常大小,mini迷你大小。 android:layout_gravity:控制按钮的位置。

最后一个问题,如何将按钮浮动到其他页面上,Basic项目是这么做的。 先设计按钮界面,然后通过 include引入底层页面,完美解决。

示例源码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <include layout="@layout/activity_xuechang" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:srcCompat="@drawable/dui"
        app:fabSize="normal"
        app:maxImageSize="57dp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_margin="16dp"
        app:fabSize="normal"
        app:maxImageSize="63dp"
        app:srcCompat="@drawable/jia" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left"
        android:layout_margin="16dp"
        app:srcCompat="@drawable/cuo"
        app:fabSize="normal"
        app:maxImageSize="63dp"/>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

查看效果:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-03-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
❤️【Android精进之路-03】创建第一个Android应用程序竟然如此简单❤️
上一篇文章我们介绍了Android Studio的安装以及Android SDK的目录结构。这篇文章将介绍如何使用Android Studio创建第一个Android应用,重点介绍Android Studio的目录结构。
玖柒的小窝
2021/09/20
8060
❤️【Android精进之路-03】创建第一个Android应用程序竟然如此简单❤️
CoordinatorLayout使用全解析
CoordinatorLayout是在 Google IO/15 大会发布的,遵循Material 风格,包含在 support Library中,结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果,本篇博客就将介绍CoordinatorLayout的各种酷炫效果。
老马的编程之旅
2022/06/22
2.4K0
CoordinatorLayout使用全解析
动画必须有(二):悬浮菜单了解一下!
前言 悬浮按钮是我非常喜欢的, 可以把最关键的功能放入到悬浮按钮中. 比如日记app里的新建日记, 阅读类app里的喜欢. 稍微处理一下可以将悬浮按钮扩展成悬浮菜单, 来看下实现吧! github直
sean_yang
2018/09/04
1.8K0
动画必须有(二):悬浮菜单了解一下!
Floating Action Button-Android M新控件
浮动操作按钮 (简称 FAB) 是: “一个特殊的promoted操作案例。因为一个浮动在UI之上的圆形图标而显得格外突出,同时它还具有特殊的手势行为”
小小工匠
2021/08/16
1.5K0
Material Design 实战 之第三弹—— 悬浮按钮和可交互提示
下面开始来具体实现。首先仍然需要提前准备好一个图标,这里放置了一张ic_done.png到drawable-xxhdpi目录下。然后修改activity-mam.xml中的代码,如下所示:
凌川江雪
2018/10/09
1.9K0
Material Design 实战 之第三弹—— 悬浮按钮和可交互提示
CoordinatorLayout与滚动的处理
本博文专门讲解和CoordinatorLayout相关的知识点,这也是Design Support Library中最重要与最难的部分。
小小工匠
2021/08/16
8910
Android之FloatingActionButton使用
app:backgroundTint="@color/blue" //背景颜色 app:elevation="0dp" //默认状态下的阴影大小 app:pressedTranslationZ="0dp" //点击状态下的阴影大小 app:borderWidth="0dp" //边宽,上下兼容,设置0dp app:rippleColor="@color/gray" //点击时的背景颜色 app:layout_anchor //设置锚点,即以哪个控件为参照点设置位置。 app:layout_anchorGravity //设置相对锚点的位置,值有 bottom、center、right、left、top等。 app:fabSize //按钮大小,normal和mini
yechaoa
2022/06/10
5230
Android之FloatingActionButton使用
CoordinatorLayout使用浅析
CoordinatorLayout是design包中的控件,作为外层控件可以协调子控件从而实现炫酷的效果等。
yechaoa
2022/06/10
3880
CoordinatorLayout使用浅析
一款基于Material Desgin设计的APP
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/50413625
Hankkin
2018/09/06
7740
一款基于Material Desgin设计的APP
浅谈SnackBar(Toast大兄弟)
SnackBar是 Android Support Library 22.2.1 里面新增提供的一个控件,我们可以简单的把它理解成一个加强版的Toast,或者是一个轻量级的Dialog。 特点: 1.SnackBar和Toast的用途一样,都是用来提示用户操作后的结果的。 2.SnackBar显示时位置一般是在屏幕底部,较大的设备就显示在左下角。 3.SnackBar同一时间只有一条 4.SnackBar可以自动消失,也可以手动取消(在完成某个操作的时候) 5.在Activity结束的时候,Snac
听着music睡
2018/05/18
8000
kotlin--SharedFlow运用
Flow为上流发射,下流接收,是一对一的,而SharedFlow可以一对多,发射一次,多端接收 效果: 1.定义一个类,来对MutableSharedFlow对象作操作 package com.aruba.flowapplyapplication.common import kotlinx.coroutines.flow.MutableSharedFlow /** * Created by aruba on 2021/9/21. */ object LocalEventBus { val
aruba
2021/12/06
4760
kotlin--SharedFlow运用
Android材料设计之FloatingActionButton+Snackbar+SheetX3
本文把几个小东西讲一下 FloatingActionButton:浮动按钮 Snackbar:底弹框 BottomSheet:底抽屉 BottomSheetDialog :抽屉对话框 Bot
张风捷特烈
2018/12/19
9820
Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
这是一个比较常见的APP首页的结构,侧边栏+主页,侧边栏里是一些菜单,主页由底部菜单控制内容区,内容区是可滑动的子页面。整体比较舒服合理,各自为阵,却又能关联在一起,加上又是大众喜爱的Material Design风格,所以成为了当下APP首页的主流结构。
yechaoa
2022/06/10
1.4K0
Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
第14章 使用Kotlin 进行 Android 开发(2)
我们使用 fastjson 来解析这个数据。在 app 下面的 build.gradle中添加依赖
一个会写诗的程序员
2018/08/17
1.2K0
第14章 使用Kotlin 进行 Android 开发(2)
使用CoordinatorLayout打造各种炫酷的效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/52858598
程序员徐公
2018/09/18
5.1K0
使用CoordinatorLayout打造各种炫酷的效果
Android 一款十分简洁、优雅的日记 APP
先来一波日记的展示吧,虽然内容比较简单,但还是设计的非常用心的,因此这款 APP 还是非常简洁和优雅的
developerHaoz
2019/02/22
6980
Android  一款十分简洁、优雅的日记 APP
Android开发笔记(一百三十四)协调布局CoordinatorLayout
Android自5.0之后对UI做了较大的提升,一个重大的改进是推出了MaterialDesign库,而该库的基础即为协调布局CoordinatorLayout,几乎所有的design控件都依赖于该布局。协调布局的含义,指的是内部控件互相之前的动作关联,比如在A视图的位置发生变化之时,B视图的位置也按照某种规则来变化,仿佛弹钢琴有了协奏曲一般。 使用CoordinatorLayout时,要注意以下几点: 1、导入design库; 2、根布局采用android.support.design.widget.CoordinatorLayout; 3、CoordinatorLayout节点要添加命名空间声明xmlns:app="http://schemas.android.com/apk/res-auto"; CoordinatorLayout继承自ViewGroup,实现效果类似于RelativeLayout,若要指定子视图在整个页面中的位置,有以下几个办法: 1、使用layout_gravity属性,指定子视图在CoordinatorLayout内部的对齐方式。 2、使用app:layout_anchor和app:layout_anchorGravity属性,指定子视图相对于其它子视图的位置。其中app:layout_anchor表示当前以哪个视图做为参照物,app:layout_anchorGravity表示本视图相对于参照物的对齐方式。 3、使用app:layout_behavior属性,指定子视图相对于其它视图的行为,当对方的位置发生变化时,本视图的位置也要随之相应变化。 下面是使用anchor方式定义子视图方位的截图,其中红色方块位于整个页面的右上方:
aqi00
2019/01/18
2.3K0
探索 Android Design Support Library v28 新增内容
作者:TonnyL 链接:https://www.jianshu.com/p/e9357355ccf7 著作权归作者所有,欢迎投稿 Android Support Library v28 版本最近被宣布推出 -- 在当前的 alpha 版本中, 我们又有了一系列令人兴奋的新组件. 在这篇文章中, 我想要看看以 Material 视图组件形式添加进入 Support Library 的新增部分. Material Button Material Button 是一个小部件, 可用于在你的应用程序的用户界面中
用户1269200
2018/06/22
2K0
Android 高德地图API(详细步骤+源码)三
实际开发中都会对地图的点击和长按做处理,比如点击某一个地方获取经纬度,下面来操作一下吧。
晨曦_LLW
2021/02/24
4K0
Android 高德地图API(详细步骤+源码)三
Snackbar-Android M新控件
Snackbar 是 Android design support library 中的另一个组件。使用 Snackbar,可以在屏幕底部快速的显示一条消息,大体与 Toast 相同,但多了几分灵活性:
小小工匠
2021/08/16
8110
相关推荐
❤️【Android精进之路-03】创建第一个Android应用程序竟然如此简单❤️
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验