FloatingActionButton的简单使用

简介: FloatingActionButton是Support Design Library库中引入的一个新的控件,外观时尚新颖,受到很多开发者的好评。如何使用FloatingActionButton使用FloatingActionButton其实非常简单只需要在布局文件中引入控件即可,不过它的属性有点多,我们先来介绍一下它的属性。

FloatingActionButton是Support Design Library库中引入的一个新的控件,外观时尚新颖,受到很多开发者的好评。

如何使用FloatingActionButton

使用FloatingActionButton其实非常简单只需要在布局文件中引入控件即可,不过它的属性有点多,我们先来介绍一下它的属性。

  • android:src:FAB中显示的图标.
  • app:backgroundTint:正常的背景颜色 ,这里是ColorStateList类型
  • app:rippleColor:按下时的背景颜色
  • app:elevation:正常的阴影大小
  • app:pressedTranslationZ:按下时的阴影大小
  • app:layout_anchor:设置FAB的锚点,即以哪个控件为参照设置位置
  • app:layout_anchorGravity:FAB相对于锚点的位置
  • app:fabSize:FAB的大小,normal或mini(分别对应56dp和40dp)
  • app:borderWidth:边框大小,最好设置成0dp否则会有边框
  • android:clickable:一定要设置成true否则没有点击效果

讲完属性接下来实现一下效果

xml布局文件
<FrameLayout
    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">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_gravity="end|bottom"
        android:id="@+id/floatbutton"
        app:elevation="6dp"
        android:clickable="true"
        app:borderWidth="0dp"
        android:backgroundTint="@color/fabbg"
        app:rippleColor="#0097a7"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@drawable/ic_logo"
        app:pressedTranslationZ="12dp"
        android:layout_height="wrap_content" />

</FrameLayout>
color/fabbg.xml文件,这个需要在res目录下新建color文件夹
img_bce3b110232cde9ba343cb85ec71f2bf.png
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="false" android:color="#00b8d4"/>
    <item android:state_focused="true" android:color="#00e5ff"/>
</selector>
FloatingActionButton的点击事件与Button的实现方式一样,这里不予演示
运行效果
img_2685f33f1f556ffb4a7b26d3fd205eaf.gif
GIF.gif

个人博客:https://myml666.github.io

目录
相关文章
|
27天前
|
XML Java Android开发
Android实现自定义进度条(源码+解析)
Android实现自定义进度条(源码+解析)
55 1
|
6月前
|
Java Android开发
[笔记]Android 学习一之转场动画+ViewPager+ListView简单Demo
[笔记]Android 学习一之转场动画+ViewPager+ListView简单Demo
|
Android开发
DrawerLayout(官方侧滑菜单)的简单使用
本节给大家带来基础UI控件部分的最后一个控件:DrawerLayout,官方给我们提供的一个侧滑菜单控件,和上一节的ViewPager一样,3.0以后引入,低版本使用它,需要v4兼容包,说到侧滑,相信很多人都用过github上的SlidingMenu,不过好像有两个版本,一个是单独的,另一个需要依赖另一个开源项目:ActionBarSherlock;既然Google为我们提供了这个控件,为何不用咧,而且在Material Design设计规范中,随处可见的很多侧滑菜单的动画效果,大都可以通过Toolbar +DrawerLayout来实现。 1.使用的注意事项 1.主内容视图一定要是Dra
56 0
|
Android开发
侧滑菜单的简单使用
本节给大家带来基础UI控件部分的最后一个控件:DrawerLayout,官方给我们提供的一个侧滑菜单控件,和上一节的ViewPager一样,3.0以后引入,低版本使用它,需要v4兼容包,说到侧滑,相信很多人都用过github上的SlidingMenu,不过好像有两个版本,一个是单独的,另一个需要依赖另一个开源项目:ActionBarSherlock;既然Google为我们提供了这个控件,为何不用咧,而且在Material Design设计规范中,随处可见的很多侧滑菜单的动画效果,大都可以通过Toolbar +DrawerLayout来实现。
53 0
|
Android开发
ViewFlipper的基本使用
ViewFlipper,它是Android自带的一个多页面管理控件,且可以自动播放! 和ViewPager不同,ViewPager是一页页的,而ViewFlipper则是一层层的,和ViewPager一样,很多时候, 用来实现进入应用后的引导页,或者用于图片轮播。
99 0
|
Kotlin 容器
Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
314 0
Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
|
Android开发
Android Studio引入侧边栏SlidingMenu,配置及简单使用
Android Studio引入侧边栏SlidingMenu,配置及简单使用
843 0
Flutter基础widgets教程-FloatingActionButton篇
Flutter基础widgets教程-FloatingActionButton篇
145 0
|
XML Android开发 数据格式
Android RatingBar的基本使用和自定义样式
Android RatingBar的基本使用和自定义样式
Android RatingBar的基本使用和自定义样式

热门文章

最新文章