支持库的FloatingActionButton示例


129

最近,我阅读了以下帖子:

Android设计支持库

Android支持库,版本22.2.0

FloatingActionButton

但是,它们都没有给我提供有关创建新实例的详细示例FloatingActionButton。很难理解,我问这个问题。

谁能给我一个例子吗?

任何帮助,不胜感激。提前致谢。

编辑

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


Answers:


274

因此,在build.gradle文件中添加以下内容:

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

AndroidX注意: Google引入了新的AndroidX扩展库来代替旧的支持库。要使用AndroidX,请首先确保已更新gradle.properties文件,将其编辑build.gradle为设置compileSdkVersion28(或更高),然后使用以下行代替上compile一行。

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

接下来,在你themes.xmlstyles.xml或什么,一定要设置这个-它是你的应用程序的口音color--和你的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_width="wrap_content"
            android:layout_height="wrap_content"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

您可以在文档 (此处为重要文档)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();
        }
    });

观察结果:

  • 如果您有一个位于“接缝”上的按钮之一,用于拆分两个视图(例如,使用RelativeLayout),并且底部边框的边距为负值以重叠边框,那么您会注意到一个问题:FAB的尺寸实际上是非常不同的棒棒糖与预棒棒糖。当您在API之间切换时,实际上可以在AS的视觉布局编辑器中看到它-当您切换到棒棒糖前时,它会突然“弹出”。额外尺寸的原因似乎是阴影在每个方向上都扩大了视图的尺寸。因此,如果要调整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放置在RelativeLayout中两个区域之间的“接缝”上,方法是抓住FAB的高度,除以2,然后将其用作边距偏移量。但是myFab.getHeight()返回零,即使在视图膨胀后也是如此。相反,我仅在布局后使用ViewTreeObserver来获取高度,然后设置位置。在这里看到这个技巧 。它看起来像这样:

        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_anchorlayout_anchorGravity下面是一个例子:

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        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中来自动使按钮跳开。

更多:


1
当然。只需将android:backgroundTint="#FF0000"示例添加到XML中的FloatingActionBar中。(添加答案)
胖子

1
嗯 好吧,我将在上面进行更改。谢谢!Dark Leonhart-我还没有看到关于内置快速返回的任何信息,但是在我认为仍然可以使用的Stackoverflow上的其他地方有一些示例。加上一些可用的库。
fattire

1
我认为从22.2.0开始,此组件尚未投入生产。顺便说一句,可能是一个错字,但不要sp在evelation属性中使用。应该是app:elevation="4dp"
Joao Sousa 2015年

1
请注意,如果您FloatingActionButton要向中添加a CoordinatorLayout,则可以使用app:layout_anchor="element_with_seam"app:layout_anchorGravity="bottom|right|end"将FAB正确地定位在接缝上-请参阅cheesesquare
ianhanniballake

2
@DarkLeonhart-查看我的示例,通过扩展FAB的行为来滚动显示/隐藏FAB
ianhanniballake 2015年

49

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


setRippleColor问题

因此,一旦您通过编程设置了波纹颜色(按下时的FAB颜色),就会出现问题setRippleColor。但是,我们还有另一种设置方式,即调用:

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_width="wrap_content"
    android:layout_height="wrap_content"
    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 -->

对于21级或更高级别的API,请将右边距和底部边距设置为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_marginToplayout_marginRight再次(仅前棒棒堂)。Android会将其自动放置在屏幕的右角,与Android Lollipop中的常规FAB相同。

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

或者,您可以在中使用它CoordinatorLayout

        android:layout_gravity="end|bottom"
  • 根据Google的此指南,您需要具有6dp elevation和12dp 。pressedTranslationZ

FAB规则


5
赞成参与的研究。加上1 pressedTranslationZ。我不知道
Joao Sousa 2015年

app:elevation =“ 6dp” app:pressedTranslationZ =“ 12dp”可以解决棒棒糖生产前的问题,但我的晶圆厂确实位于棒棒糖的屏幕角落
Thiago 2015年

1
您为“ pressedTranslationZ”使用了错误的值。这不是按下状态下的高程值。PressedElevation =高程+ PressedTranslationZ。因此正确的值是app:elevation =“ 6dp” app:pressedTranslationZ =“ 6dp”
e.shishkin

3
实际上,您不需要设置app:elevationapp:pressedTranslationZ值。它们的默认值是材料设计指南中定义的值。无论如何,e.shishkin是正确的,值是app:elevation:6dppressedTranslationZ:6dp。您可以在com.android.support.design检查它的源代码
克里斯蒂安·加西亚

12

FloatingActionButton延伸ImageView。因此,就像ImageView在布局中引入一样简单。这是一个XML示例。

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

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


4

适用于AndroidX

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

1

如果您已经添加了所有库,但仍然无法使用,请使用:

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

代替:

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

一切都会很好:)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.