带支持库的FloatingActionButton示例

Question

最近,我读了这些帖子:

Android设计支持库

Android支持库,修订版22.2.0

FloatingActionButton

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

谁能给我一个关于它的例子？

任何帮助都很值得赞赏.提前致谢.

编辑

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

Answer 1

所以在你的build.gradle文件中添加:

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

AndroidX注意: 谷歌正在推出新的AndroidX扩展库来取代旧的支持库.要使用AndroidX,首先要确保已更新gradle.properties文件,编辑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_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

您可以在文档(setRippleColor等)中看到更多选项,但需要注意的是:

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

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

    app:fabSize="mini"

(例如将其更改为红色)到上面的XML.

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

    app:backgroundTint="#FF0000"

观察:

• 如果你的其中一个按钮在"接缝"上分割两个视图(例如,使用RelativeLayout),例如,负底部布局边距与边框重叠,你会发现一个问题:FAB的大小实际上是棒棒糖与前棒棒糖非常不同.当您在API之间切换时,您实际上可以在AS的可视化布局编辑器中看到这一点 - 当您切换到棒棒糖前,它会突然"膨胀".额外尺寸的原因似乎是阴影在每个方向上扩展了视图的大小.因此,当你调整FAB的边距时,如果它接近其他东西,你必须考虑到这一点.

• 如果有太多的话,这是删除或更改填充的方法:

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

• 此外,我打算以编程方式将FAB放在RelativeLayout中两个区域之间的"接缝"上,方法是抓住FAB的高度,除以2,然后将其用作边距偏移量.但myFab.getHeight()返回零,即使在视图膨胀之后,它似乎也是如此.相反,我使用ViewTreeObserver只在它布局后才获得高度,然后设置位置.在这里看到这个提示 .它看起来像这样:

  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,你可以使用layout_anchor,layout_anchorGravity这是一个例子:

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

请记住,当Snackbar出现在CoordinatorLayout中时,您可以自动让按钮跳开.

更多:

• Google的设计支持库页面
• FloatingActionButton文档
• 来自Google I/O 2015的"Material Now"讲座 - 支持设计库于1730年代推出
• 设计支持库示例/展示

Answer 2

我刚刚在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 -->

对于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(仅在预棒棒糖)一次.Android会自动将其放置在屏幕右侧,这与Android Lollipop中的普通FAB相同.

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

或者,您可以在CoordinatorLayout以下位置使用:

        android:layout_gravity="end|bottom"

• 根据谷歌的这份指南,你需要有6dp elevation和12dp .pressedTranslationZ

Answer 3

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" 是作为高程问题的变通方法添加的.