FloatingToolbar 开源项目教程

FloatingToolbar 开源项目教程

FloatingToolbarA toolbar that morphs from a FloatingActionButton项目地址:https://gitcode.com/gh_mirrors/fl/FloatingToolbar

项目介绍

FloatingToolbar 是一个由 Ruben Sousa 开发的 Android 库，旨在提供一种优雅的方式来展示浮动工具栏。该组件模仿了 Google 自家应用中的设计模式，如 Google Photos 和 Drive，在需要时以非侵入性的方式呈现一系列操作按钮。通过这个库，开发者能够轻松地集成一个可自定义的浮动操作按钮（FAB）扩展菜单，增强应用的交互性和用户体验。

项目快速启动

添加依赖

首先，确保你的项目支持 AndroidX。接着，在你的 build.gradle(Module: app) 文件中添加以下依赖：

dependencies {
    implementation 'com.rubensousa:floatingtoolbar:latest.version'
}

替换 latest.version 为仓库中的最新版本号。

使用示例

在布局文件中，添加一个普通的 FAB，这将是触发浮 动工具栏的触点：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ...>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabCustomSize="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@android:drawable/ic_menu_moreoverflow_material" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后，在 Java 或 Kotlin 类中初始化并设置 FloatingToolbar 的行为：

import com.rubensousa.floatingtoolbar.FloatingToolbar

val fab = findViewById<FloatingActionButton>(R.id.fab)
val toolbarItems = listOf(
    ToolbarItem(iconResId = R.drawable.ic_example_1, label = "选项1"),
    ToolbarItem(iconResId = R.drawable.ic_example_2, label = "选项2")
)

fab.setOnClickListener { 
    FloatingToolbar.showFor(fab) {
        add(toolbarItems)
        // 可选配置项
        setExpandedAlpha(0.8f) // 设置展开时按钮的透明度
        setCollapsedFadeEnabled(true) // 启用收缩时的淡出效果
    }
}

应用案例和最佳实践

在设计界面时，考虑将 FloatingToolbar 用于那些需要展现多个相关操作但又不想过度拥挤屏幕的地方。例如，图片编辑器可以使用它来显示裁剪、旋转等选项。重要的是要保持操作简洁明了，避免过载用户。

最佳实践提示

• 适时出现: 确保 FloatingToolbar 在适当的情境下自动展开或收缩，增加其自然流畅的用户体验。
• 精简操作: 限制工具栏上的操作数量，一般不超过3到5个，以维持清晰的界面。
• 自定义样式: 根据品牌指南调整颜色和图标风格，使工具栏融入应用的整体设计中。

典型生态项目

虽然直接关联的“典型生态项目”通常指的是能与 FloatingToolbar 集成使用的其他开源库或框架，但在 Android 生态系统中，类似的设计模式常被广泛应用于各种应用开发中，特别是那些强调清洁设计和用户交互的应用。例如，结合使用 Material Design Components 进一步提升界面的一致性和专业感，或者与图片浏览库如 Glide 结合，优化用户的图片处理体验。

---

以上是关于 FloatingToolbar 的基本使用教程，希望对你在开发过程中集成这一功能有所帮助。记得查看官方 GitHub 页面获取最新的文档和示例，以适应任何更新或变化。

FloatingToolbarA toolbar that morphs from a FloatingActionButton项目地址:https://gitcode.com/gh_mirrors/fl/FloatingToolbar