java - Android L - float 操作按钮 (FAB)

Question

Google 是否已经为这个新的圆形 FAB 按钮发布了定义的样式或组件，还是我应该自己实现设计？

这里描述了按钮:Google Design | Floating Action Buttons

编辑 (05/2015):检查 Lukas' answer/Gabriele's answer展示了一种使用设计支持库实现它的简单方法。

Answer 1

更新日期:26/08/2021

使用 Material components for android添加到您的 build.gradle:

implementation 'com.google.android.material:material:1.x.x'

然后添加你的布局:

<com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/floating_action_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom|right"
      android:layout_margin="16dp"
      app:srcCompat="@drawable/ic_plus_24"/>

并使用它:

FloatingActionButton floatingActionButton =
    (FloatingActionButton) findViewById(R.id.floating_action_button);    
floatingActionButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Handle the click.
    }
});

如果您使用的是 Theme.MaterialComponents.* 主题，您的 FAB 将继承 Material 样式。否则只需应用样式 @style/Widget.MaterialComponents.FloatingActionButton

<com.google.android.material.floatingactionbutton.FloatingActionButton
    style="@style/Widget.MaterialComponents.FloatingActionButton"
    ../>

更多 info here .

---

使用 Jetpack compose 1.0.x 使用:

//Simple FAB
FloatingActionButton(onClick = { /* .. */ } ) {
    Icon(Icons.Filled.Add,"contentDescription")
}

//FAB custom color
FloatingActionButton(
    onClick = { /* .. */ },
    backgroundColor = Color.Blue,
    contentColor = Color.White
){
    Icon(Icons.Filled.Add,"contentDescription")
}

---

更新:2015 年 5 月 30 日，官方设计支持库

现在有一个官方小部件。

只需将此依赖项添加到您的 build.gradle

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

将此 View 添加到您的布局中:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@drawable/ic_done" />

并使用它:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               //TODO
            }
        });

文档 Android documentation .

---

更新日期:2014 年 2 月 12 日，使用 Android 5 代码

您还可以将 stateListAnimator 添加到您的 Button:

<Button
 android:stateListAnimator="@anim/anim"
/>

anim.xml 在哪里:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/button_elevation"
            android:valueTo="@dimen/button_press_elevation"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/button_press_elevation"
            android:valueTo="@dimen/button_elevation"
            android:valueType="floatType" />
    </item>
</selector>

Dimens.xml 是

<resources>
    <dimen name="fab_size">56dp</dimen>
 
    <dimen name="button_elevation">2dp</dimen>
    <dimen name="button_press_elevation">4dp</dimen>
</resources>

查看 Daniele 的答案。

关于 Daniele 提到的大纲。 将 elevation 属性添加到您的 Button，并通过代码设置 Outline:

   <ImageButton
        android:background="@drawable/ripple"
        android:stateListAnimator="@anim/anim"
        android:src="@drawable/ic_action_add"
        android:elevation="4dp"
        />

关于大纲:

public class MainActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layoutfab);
        
        //Outline: OLD METHOD IN L-PREVIEW
        //int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
        //Outline outline = new Outline();
        //outline.setOval(0, 0, size, size);
        //findViewById(R.id.fab).setOutline(outline);

        Button fab = (Button) findViewById(R.id.fab);
        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
           @Override
           public void getOutline(View view, Outline outline) {
              // Or read size directly from the view's width/height
              int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
              outline.setOval(0, 0, size, size);
           }
        };
        fab.setOutlineProvider(viewOutlineProvider);
    }
    
}