java - Android L - フローティングアクションボタン (FAB)

Question

Google はこの新しい円形の FAB ボタンの定義済みのスタイルまたはコンポーネントを既にリリースしていますか?それとも独自にデザインを実装する必要がありますか?

ボタンについては、次の場所で説明しています: Google Design | フローティングアクションボタン

編集 (2015 年 5 月): Lukas の回答/ Gabriele の回答を確認して、設計サポートライブラリを使用して簡単に実装する方法を示します。

score 57 · Accepted Answer

更新: 2021 年 8 月 26 日

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 はマテリアルスタイルを継承します。それ以外の場合は、スタイルを適用するだけです@style/Widget.MaterialComponents.FloatingActionButton

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

詳細はこちら。

Jetpack 構成を 使用する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'

このビューをレイアウトに追加します。

<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 ドキュメンテーション。

更新: 2014 年 2 月 12 日、Android 5 コード

また、ボタンにstateListAnimatorを追加することもできます。

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

ダニエレの答えを確認してください。

ダニエレが言及した概要について。ボタンに標高属性を追加し、コードでアウトラインを設定します。

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

ここに画像の説明を入力

score 24 · Accepted Answer

更新: FAB の公式ウィジェット: FloatingActionButton が追加されました。完全な情報については、Gabriele Mariotti の返信を参照してください。

Adam Powell と Chet Haase によると、FAB ボタンのウィジェットを作成しなかったのは、非常に簡単に再現できるコンポーネントだからです。

Google IO 2014 のスピーチ「Google I/O 2014 - Material science: Developing Android applications with material design」で質問がありましたが、スピーチの最後 (37:50 頃) に、まさにその質問がありました。ここにある: https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280

Chet Haase は、RoundedBitmapDrawable があり (その名前かどうかは確認していません)、アウトラインを定義する作業を既に行っていると述べています。

ただし、独自のドローアブルでそれを行うことができ、それに Elevation を設定し、円の Outline をプログラムで定義できます。

これにより、L リリースで影付きの丸いボタンが表示されます。しかし、Shadow pre-L を自分で構築する必要があると思います。

CardView のコードをチェックして、L より前のシャドウがどのように再現されるかを確認する必要があります。おそらくそうするでしょうが、今は時間がありません。だれも詳細を教えてくれなければ、時間を見つけて調べてみます。

編集：

Gabriele Mariotti (以下の彼の回答を参照してください。ありがとうございます) は、その方法を示すコードを追加しました。

@shomeser のコメントのおかげで、彼は fab ボタンを作成するためのライブラリを作成しました。

https://github.com/shamanland/floating-action-button

使用するには:

dependencies {
    compile 'com.shamanland:fab:0.0.3'
}

別の質問に対する彼の回答を読むこともできます: 2 つのウィジェット/レイアウトの間に新しい「フローティングアクションボタン」を追加するにはどうすればよいですか?

score 21 · Accepted Answer

Google は現在、デザインライブラリと呼ばれるFab Button を含む公式ライブラリを提供しています。次の Gradle 依存関係を追加するだけです。

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

その後、次のように fab ボタンを使用できます。

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

詳細については、発表を参照してください。

http://android-developers.blogspot.ch/2015/05/android-design-support-library.html

またはjavadocページ

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

score 7 · Accepted Answer

Labels FAB 機能 (Evernote や Inbox アプリなど) がこの素晴らしいライブラリに追加されたので、自由に使用してください。

Gradle の依存関係:

    compile 'com.getbase:floatingactionbutton:1.3.0'

レイアウト.xml:

     <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_labelStyle="@style/menu_labels_style"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action B"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

menu_labels_style.xml:

    <style name="menu_labels_style">
        <item name="android:background">@drawable/fab_label_background</item>
        <item name="android:textColor">@color/white</item>
    </style>

fab_label_background.xml:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/black_semi_transparent"/>
    <padding
        android:left="16dp"
        android:top="4dp"
        android:right="16dp"
        android:bottom="4dp"/>
    <corners
        android:radius="2dp"/>
</shape>

楽しみ！

java - Android L - フローティング アクション ボタン (FAB)

4 に答える 4

Related

Reference

java - Android L - フローティングアクションボタン (FAB)