FloatingActionButton例如与支持库 [英] FloatingActionButton example with Support Library

问题描述

最近，我读到这些职位：

Recently, I read these posts:

Android的设计支持库

Android的支持库，版本22.2.0

<一个href="http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html">FloatingActionButton

不过，他们没有给我一个详细的例子有关创建一个新的 FloatingActionButton 。所以不难理解，我问这个问题。

But, none of them give me a detail example about creating a new FloatingActionButton. So hard to understand, I ask this question.

谁能给我一个例子吧？

任何帮助非常被AP preciated。先谢谢了。

Any help much be appreciated. Thanks in advance.

修改

我刚刚发现的 FloatingActionButton 若干问题（FAB），我想提高另一种答案。见我的回答如下。

I just found some issues on FloatingActionButton (FAB), and I want to improve another answer. See my answer below.

推荐答案

因此​​，在你的 build.gradle 文件，补充一点：

So in your build.gradle file, add this:

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

在你的的themes.xml 或 styles.xml 或什么的，一定要设置这个 - 这是你的应用程序的口音color--和你的FAB，除非你覆盖它的颜色（见下图）：

In your themes.xml or styles.xml or whatever, make sure you set this- it's your app's accent color-- and the color of your FAB unless you override it (see below):

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

（注：在22.2.0版本中，应用：边框宽度=0dp还需要解决，其中阴影就不会没有它出现在棒棒糖/ M中的错误感谢为修复的解释<一个href="http://stackoverflow.com/questions/30532863/how-to-add-shadow-to-the-fab-provided-with-the-android-support-design-library">here.此错误是在22.2.1版本的修正。）

(Note: In version 22.2.0, app:borderWidth="0dp" was also required to address a bug where shadows would not appear in Lollipop/M without it. Thanks to the explanation for the fix here. This bug was corrected in version 22.2.1.)

您可以看到在<一个更多的选择href="http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html">docs （ setRippleColor 等），但值得注意的是：

You can see more options in the docs (setRippleColor, etc.), but one of note is:

    app:fabSize="mini"

另一个有趣的埃德蒙顿改变的背景颜色只是一个FAB，地址：

Another interesting one-- to change the background color of just one FAB, add:

    app:backgroundTint="#FF0000"

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

(for example to change it to red) to the XML above.

不管怎样，在code，活动结束后/碎片的观点充气....

Anyway, in code, after the Activity/Fragment's view is inflated....

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

意见：

• 如果你有这些按钮，这是一个缝分裂两种观点之一 （使用RelativeLayout的，例如）与，比如说，一个负底部 布局保证金重叠边界，你会发现一个问题： 在FAB的大小实际上是非常的不同的的棒棒糖上与 pre-棒棒糖。实际上，你可以看到这个在AS的可视化布局编辑器 当你APIs--之间翻转它突然喷了，当你切换到 pre-棒棒糖。其理由为额外的大小似乎是，该 阴影扩展在每个方向上的视图的大小。所以，你必须 考虑到这一点，当你调整FAB的利润，如果是靠近其他 的东西。

• 下面是一个方法，以消除或 改变填充，如果有太多：

• If you have one of those buttons that's on a "seam" splitting two views (using a RelativeLayout, for example) with, say, a negative bottom layout margin to overlap the border, you'll notice an issue: the FAB's size is actually very different on lollipop vs. pre-lollipop. You can actually see this in AS's visual layout editor when you flip between APIs-- it suddenly "puffs out" when you switch to pre-lollipop. The reason for the extra size seems to be that the shadow expands the size of the view in every direction. So you have to account for this when you're adjusting the FAB's margins if it's close to other stuff.

• Here's a way to remove or change the padding if there's too much:

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的高度之间， 除以二，并使用该作边缘偏移。但 myFab.getHeight（）返回0，认为是夸大，甚至后 似乎。相反，我用了一个ViewTreeObserver只能获得高度 之后，它的布局，然后设置位置。看到这个提示 <一href="http://stackoverflow.com/questions/3779173/determining-the-size-of-an-android-view-at-runtime">here.它看起来是这样的：

Also, I was going to programmatically place the FAB on the "seam" between two areas in a RelativeLayout by grabbing the FAB's height, dividing by two, and using that as the margin offset. But myFab.getHeight() returned zero, even after the view was inflated, it seemed. Instead I used a ViewTreeObserver to get the height only after it's laid out and then set the position. See this tip here. It looked like this:

    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);
            }
        });
    }

不知道这是正确的方式做到这一点，但它似乎工作。

Not sure if this is the right way to do it, but it seems to work.

如果你想在FAB上的缝，您可以使用 layout_anchor 和 layout_anchorGravity 这里是一个例子：

If you want the FAB on a "seam" you can use layout_anchor and layout_anchorGravity here is an example:

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

记住，你可以自动拥有该按钮跳出的方式，当一个<一个href="https://developer.android.com/reference/android/support/design/widget/Snackbar.html">Snackbar通过包装在一个<一上来href="http://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html">CoordinatorLayout.

Remember that you can automatically have the button jump out of the way when a Snackbar comes up by wrapping it in a CoordinatorLayout.

更多：

• 谷歌的设计支持库页
• <一个href="http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html">the FloatingActionButton文档
• 的资料，现在说话的谷歌I / O 2015 - 支持设计库起用的17m22s
• 设计支持库样品/展示

• Google's Design Support Library Page
• the FloatingActionButton docs
• "Material Now" talk from Google I/O 2015 - Support Design Library introduced at 17m22s
• Design Support Library sample/showcase

这篇关于FloatingActionButton例如与支持库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！