带支持库的FloatingActionButton示例

时间：2015-06-01 14:42:05

标签： android android-support-library floating-action-button android-design-library

最近，我读了这些帖子：

Android Design Support Library

Android Support Library, revision 22.2.0

FloatingActionButton

但是，他们都没有给我一个关于创建新change的详细示例。很难理解，我问这个问题。

有谁可以举个例子呢？

任何帮助都值得赞赏。提前谢谢。

修改

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

5 个答案:

答案 0 :(得分：266)

因此，在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（或更高），并使用以下行而不是之前的{{1}一个。

compile

接下来，在您的implementation 'com.google.android.material:material:1.0.0' 或themes.xml或其他任何内容中，请确保设置此项 - 这是您应用的强调颜色 - 以及FAB的颜色，除非您覆盖它（见下文）：< / p> 

styles.xml

在布局的XML中：

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

您可以在docs（<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> 等）中看到更多选项，但需要注意的是：

setRippleColor

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

    app:fabSize="mini"

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

无论如何，在代码中，在Activity / Fragment的视图被夸大后...... 

    app:backgroundTint="#FF0000"

观察：

  • 如果你有一个按钮在“接缝”上分割两个视图 （例如，使用RelativeLayout），例如，负底部 布局边距重叠边框，你会发现一个问题： 棒棒糖对FAB的大小实际上非常不同 预棒棒糖。您可以在AS的可视布局编辑器中看到这一点 当你在API之间切换时 - 当你切换到它时，它会突然“膨胀” 预棒棒糖。额外尺寸的原因似乎是 shadow会在每个方向上扩展视图的大小。所以你必须这样做 如果你正在调整FAB的边距，如果它接近其他边缘，则说明这一点 东西。

  • 这是删除或删除的方法 如果太多则更改填充：

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

  • 另外，我打算以编程方式将FAB放在“接缝”上 通过抓住FAB的高度，在RelativeLayout的两个区域之间， 除以2，并将其用作保证金抵消。但 即使在视图膨胀之后，myFab.getHeight（）也返回零 看起来。相反，我使用ViewTreeObserver来获取高度 在它布局之后然后设定位置。看到这个提示 here。它看起来像这样：

    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处于“接缝”状态，您可以使用 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); } }); } 和layout_anchor这是一个示例：

    layout_anchorGravity

请记住，Snackbar将CoordinatorLayout包裹在Google's Design Support Library Page时，您可以自动将按钮跳开。

更多：

答案 1 :(得分：47)

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

setRippleColor issue

因此，一旦您通过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

enter image description here

来自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 -->

对于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。

FAB rules

答案 2 :(得分：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"被添加为高程问题的解决方法。

答案 3 :(得分：3)

对于AndroidX的使用方式

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

答案 4 :(得分：0)

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

<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"
 />

一切都会很好：）

相关问题
最新问题