带有支持库的 FloatingActionButton 示例

Posted 2023-02-23

【中文标题】带有支持库的 FloatingActionButton 示例

【英文标题】：FloatingActionButton example with Support Library

【发布时间】：2015-08-15 02:05:03

【问题描述】：

最近，我阅读了这些帖子：

android Design Support Library Android Support Library, revision 22.2.0 FloatingActionButton

但是，他们都没有给我一个有关创建新FloatingActionButton 的详细示例。太难理解了，所以才问这个问题。

谁能给我一个例子吗？

编辑

我刚刚在FloatingActionButton (FAB) 上发现了一些问题，我想改进另一个答案。请参阅下面的答案。

【问题讨论】：

***.com/questions/30483210/…

【参考方案1】：

FloatingActionButton 扩展 ImageView。因此，就像在布局中引入 ImageView 一样简单。这是一个 XML 示例。

<android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_
    android:layout_
    android:src="@drawable/somedrawable"
    android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

app:borderWidth="0dp" 被添加为提升问题的解决方法。

【参考方案2】：

所以在你的build.gradle 文件中，添加这个：

compile 'com.android.support:design:27.1.1'

AndroidX 注意：Google 正在引入新的 AndroidX extension libraries 来替换旧的支持库。要使用 AndroidX，首先确保 you've updated your gradle.properties file，编辑 build.gradle 以将 compileSdkVersion 设置为 28（或更高），并使用以下行代替之前的 compile 行。

implementation 'com.google.android.material:material:1.0.0'

接下来，在您的 themes.xml 或 styles.xml 或其他任何内容中，确保您设置了这个 - 这是您应用的强调色 - 以及您的 FAB 的颜色，除非您覆盖它（见下文）：

        <item name="colorAccent">@color/floating_action_button_color</item>

在布局的 XML 中：

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <android.support.design.widget.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_
            android:layout_
            android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

或者，如果您使用的是上面的 AndroidX 材质库，您可以改用这个：

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_
            android:layout_
            android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

您可以在docs(material docs here)（setRippleColor 等）中看到更多选项，但值得注意的是：

    app:fabSize="mini"

另一个有趣的——改变一个FAB的背景颜色，添加：

    app:backgroundTint="#FF0000"

（例如将其更改为红色）到上面的 XML。

无论如何，在代码中，在 Activity/Fragment 的视图被膨胀之后......

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() 
        public void onClick(View v) 
            doMyThing();
        
    );

观察：

如果您有一个位于“接缝”上的按钮将两个视图分开 （例如，使用相对布局）具有负底部 布局边距与边框重叠，您会注意到一个问题： FAB 的大小实际上在棒棒糖和棒棒糖上非常不同。 前棒棒糖。您实际上可以在 AS 的可视化布局编辑器中看到这一点 当您在 API 之间切换时——当您切换到 前棒棒糖。额外尺寸的原因似乎是 阴影在各个方向扩展视图的大小。所以你必须 当您调整 FAB 的边距时，如果它接近其他边距，请考虑到这一点 东西。

这是一种删除或 如果太多，请更改填充：

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) 
    RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
    p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
    myFab.setLayoutParams(p);

另外，我打算以编程方式将 FAB 放在“接缝”上 通过抓取 FAB 的高度，在 RelativeLayout 的两个区域之间， 除以二，并将其用作边距偏移量。但 myFab.getHeight() 返回零，即使在视图膨胀后，它 似乎。相反，我使用 ViewTreeObserver 仅获取高度 布置好后再设置位置。看到这个提示 here。它看起来像这样：

    ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
    if (viewTreeObserver.isAlive()) 
        viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() 
            @Override
            public void onGlobalLayout() 
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) 
                    closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                 else 
                    closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                
                // not sure the above is equivalent, but that's beside the point for this example...
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                closeButton.setLayoutParams(params);
            
        );
    

不确定这是否是正确的方法，但它似乎有效。

看来您可以通过以下方式缩小按钮的阴影空间 降低海拔。

如果您希望 FAB 位于“接缝”上，您可以使用 layout_anchor 和 layout_anchorGravity 这是一个示例：

<android.support.design.widget.FloatingActionButton
    android:layout_
    android:layout_
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/ic_discuss"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

请记住，当出现Snackbar 时，您可以通过将其包裹在CoordinatorLayout 中来自动让按钮跳出。

更多：

Google's Design Support Library Page the FloatingActionButton docs "Material Now" talk from Google I/O 2015 - 在 17m22s 引入的支持设计库 Design Support Library sample/showcase

【讨论】：

当然。例如，只需将 android:backgroundTint="#FF0000" 添加到 XML 中的 FloatingActionBar。 （添加到答案）

嗯。好的，我会在上面更改它。谢谢！ Dark Leonhart——我还没有看到任何关于内置快速返回的内容，但我认为在 *** 的其他地方有一些示例，我认为它们仍然可以工作。此外，还有一些库也可以做到这一点。

在我看来，从 22.2.0 开始，这个组件还没有准备好生产。顺便说一句，可能是错字，但不要在 evelation 属性中使用 sp。应该是app:elevation="4dp"

请注意，如果要将 FloatingActionButton 添加到 CoordinatorLayout，您可以使用 app:layout_anchor="element_with_seam" 和 app:layout_anchorGravity="bottom|right|end" 将 FAB 正确定位在接缝上 - 请参阅 activity_detail layout from cheesesquare

@DarkLeonhart - 通过扩展其行为来查看我的example of showing/hiding the FAB on scroll。

【参考方案3】：

我刚刚在 FAB 上发现了一些问题，我想加强另一个答案。

---

setRippleColor 问题

因此，一旦您通过setRippleColor 以编程方式设置波纹颜色（按下时的 FAB 颜色），问题就会出现。但是，我们还有另一种设置方法，即调用：

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

你的项目需要有这样的结构：

/res/color/fab_ripple_color.xml

fab_ripple_color.xml 的代码是：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/fab_color_pressed" />
    <item android:state_focused="true" android:color="@color/fab_color_pressed" />
    <item android:color="@color/fab_color_normal"/>
</selector>

最后，稍微改变你的 FAB：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_
    android:layout_
    android:src="@drawable/ic_action_add"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@android:color/transparent"/> <!-- set to transparent color -->

对于 API 级别 21 及更高级别，将左右边距设置为 24dp：

...
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp" />

FloatingActionButton 设计指南

正如您在上面的 FAB xml 代码中看到的那样，我设置了：

        ...
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...

通过设置这些属性，您无需再次设置layout_marginTop 和layout_marginRight（仅在Lollipop 之前）。 Android 会自动将其放置在屏幕的右角，这与 Android Lollipop 中的普通 FAB 相同。

    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"

或者，您可以在CoordinatorLayout 中使用它：

        android:layout_gravity="end|bottom"

根据来自 Google 的 this guide，您需要有 6dp elevation 和 12dp pressedTranslationZ。

【讨论】：

为所涉及的研究点赞。 pressedTranslationZ 加 1。我不知道。

您使用的“pressedTranslationZ”值不正确。这不是按下状态下的高度值。 PressedElevation = 高程 + PressedTranslationZ。所以正确的值是 app:elevation="6dp" app:pressedTranslationZ="6dp"

其实你不需要设置app:elevation和app:pressedTranslationZ的值。它们的默认值是在材料设计指南中定义的值。无论如何，e.shishkin 是对的，值为app:elevation:6dp 和pressedTranslationZ:6dp。您可以在 com.android.support.design source code

中查看

【参考方案4】：

AndroidX 使用类似

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_
    android:layout_
    app:srcCompat="@drawable/ic_add" />

【参考方案5】：

如果您已经添加了所有库，但仍然无法使用 使用：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_
    android:layout_
    app:srcCompat="@drawable/ic_add" 
/>

代替：

<android.support.design.widget.FloatingActionButton
   android:layout_
   android:layout_
   app:srcCompat="@drawable/ic_add"
 />

一切都会好起来的 :)