浮动操作菜单，例如 Google 在 android 中环聊

Question

我正在尝试制作类似于 Google 视频群聊的浮动操作菜单。我试过了 https://github.com/Clans/FloatingActionButton 但我仍然无法实现这一目标。我想要图片中描述的浮动操作菜单。

当我点击过滤器按钮时，按钮应该出现并且背景也应该淡化。如果我们点击其他地方，菜单应该关闭。请帮忙。我一直在尝试设计过去 2 周的相同内容。

Answer 1

不知道能不能帮到你。 https://www.google.com/design/spec/components/buttons-floating-action-button.html#

也许如果这对你没有帮助，你可以看看这个视频（这不是我的） https://www.youtube.com/watch?v=m5AZvqJ1YFg

Answer 2

尝试使用 android 设计支持浮动操作按钮。您可以设计 3 个浮动操作按钮，并相应地为其分配相应的图像，并提供动画以实现浮动操作菜单，如 hangout

Answer 3

这正是您想要的。参见 this github project。

是的，集成非常容易，我从那里引用了基本集成部分。

将此添加到您的 build.gradle

dependencies {
    compile 'com.github.clans:fab:1.6.3'
}

在您的布局中添加此 FloatingActionMenu

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/menu_yellow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="80dp"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    fab:menu_labels_style="@style/MenuLabelsStyle"
    fab:menu_labels_showAnimation="@anim/jump_from_down"
    fab:menu_labels_hideAnimation="@anim/jump_to_down"
    fab:menu_animationDelayPerItem="0"
    fab:menu_shadowColor="#444"
    fab:menu_colorNormal="#FFB805"
    fab:menu_colorPressed="#F2AB00"
    fab:menu_colorRipple="#D99200">

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_edit"
        fab:fab_label="Menu item 1"
        style="@style/MenuButtonsStyle" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab22"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_edit"
        fab:fab_label="Menu item 2"
        style="@style/MenuButtonsStyle" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab32"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_edit"
        fab:fab_label="@string/lorem_ipsum"
        style="@style/MenuButtonsStyle" />

</com.github.clans.fab.FloatingActionMenu>

您可以自定义 FloatingActionMenu 的属性。详细见文档。

更新

要更改菜单标签，您可以在 styles.xml

中使用这样的自定义样式

<style name="MenuLabelsStyle">
    <item name="android:background">@drawable/fab_label_background</item>
    <item name="android:textColor">@color/theme_color</item>
    <item name="android:textSize">14sp</item>
    <item name="android:maxLines">2</item>
    <item name="android:ellipsize">end</item>
</style>

有关更改 fab_label 颜色的详细信息，请参阅 this issue。

浮动操作菜单，例如 Google 在 android 中环聊

Floating Action Menu like Google Hangout in android

android

android-layout

action-menu

android-fragments

android-studio