漂浮按钮即上图中红色虚线圈出的圆形按钮。漂浮按钮通常被设计用来实现当前页面上常用的全局操作。在这里我们用它作为新建笔记操作的入口。
Android SDK提供了FloatingActionButton组件来实现漂浮按钮。
1. 修改全部笔记页面布局
由于漂浮按钮在页面所有其它元素上方，因此，需要修改NoteListActivity的布局文件：
- 由于用漂浮按钮替换原“新建”按钮，那么将原来的新建按钮删除
- 将页面布局根元素改为FrameLayout
修改之后如下：
<?xml version="1.0" encoding="utf-8"?>
<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="com.jing.app.sn.NoteListActivity">
<Button
android:id="@+id/btn_read_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onReadNote"
android:text="阅读"/>
</FrameLayout>
2. 添加按钮图标
我们用一个“+”图标表示新建操作，将对应的png格式图片拷贝到"res->drawable-xxhdpi"目录。此目录面向主流高分辨率手机屏幕。如果目录不存在，请手动创建。这里我们假设图片名字叫ic_add.png：
ic_add.png（看不清，请点击图片区域，选择“查看原图”，可以保存下来直接使用）
3. 在app/build.gradle中导入漂浮按钮对应支持项
找到"app"目录下的build.gradle文件（注意：不是项目根目录下的build.gradle），这是负责应用程序项目相关编译相关工作的脚本文件。漂浮按钮的使用，需要在这里添加相关的依赖。找到文件末尾类似如下的部分：
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.1'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}
在花括号内部末尾添加一行：
implementation 'com.android.support:design:26.1.0'
在主菜单选择“Build->Rebuild Project”重新构建项目。在这个过程中，对应的模块将被下载下来。
注意末尾的版本号，应当随你自己的Android Studio版本进行调整，否则将发生编译错误。
4. 在布局中添加漂浮按钮
我们借助Android Studio提供的操作添加组件：
- 打开activity_note_list.xml，切换到设计视图。
- 找到“Palette”栏目，选中其中的“Design”项，右侧区域会列出其中包含的组件：
- 找到FloatingActionButton组件，将其拖入布局中：
在弹出的对话框中为按钮选择前景图标。我们选择刚才添加的ic_add图标：
- 确认后，观察设计视图，发现按钮缺省状态下位于视图左上角：
按钮默认在左上角
5. 调整漂浮按钮位置
进入XML视图，修改布局参数以实现：
a. 将按钮对齐到视图右下角：通过设置android:layout_gravity属性实现
b. 为按钮设置合适边距使其更美观：通过设置android:layout_marginXxxx（按钮外边距）实现
修改后的标签如下：
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_add_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
app:srcCompat="@drawable/ic_add" />
查看设计视图，效果如图：
6. 为按钮添加操作
方法类似任务1中为按钮添加响应方法，同样为漂浮按钮添加android:onClick属性，直接选择之前创建onNewNote()方法：
<android.support.design.widget.FloatingActionButton
...
android:onClick="onNewNote"
... />
7. 运行程序效果如下：
小结：在任务1的基础上，我们仅仅修改了触发操作的控件，而并没有重复编写实质性的操作代码，即实现了UI的修改以及相关操作的连接。
网友评论