web-dev-qa-db-ja.com

Android L-フローティングアクションボタン（FAB）

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

ボタンの説明は次のとおりです。 Googleデザイン|フローティングアクションボタン

EDIT（2015年5月）： Lukasの答え / Gabrieleの答え 設計サポートライブラリを使用して簡単に実装する方法を示しています。

javaandroidandroid-5.0-lollipopmaterial-designandroid-design-library
47
yannickpulver

[〜＃〜] update [〜＃〜]：FAB：FloatingActionButtonの公式ウィジェットがあります。詳細についてはGabriele Mariottiの返信を参照してください。

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

Google IO 2014スピーチ「Google I/O 2014-マテリアルサイエンス：開発Androidマテリアルデザインのアプリケーション」]の最後に、質問がありました。スピーチ（約37:50）にまさにその質問がありました。ここでそれを聞くことができます： https://www.youtube.com/watch?v=lSH9aKXjgt8#t=228

Chet Haaseは、RoundedBitmapDrawable（それが名前であるかどうかは確認しませんでした）によって、アウトラインを定義する作業が既に行われているはずだと言います。

ただし、独自のドロアブルでそれを実行し、それに高度を設定し、プログラムで円のアウトラインを定義できます。

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

CardViewのコードをチェックして、シャドウpre-Lを再現する方法を確認する必要があります。おそらくそうするでしょうが、今は時間がありません。誰も詳細を表示しない場合は、チェックインする時間を見つけてから行います。

編集：

Gabriele Mariotti（彼の回答を参照、ありがとう）は、それを行う方法を示すコードを追加しました。

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

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

使用するには：

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

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

23
Daniele Segato

更新：16/08/2019 Android library

新しい Androidのマテリアルコンポーネント をbuild.gradleに追加すると：

implementation 'com.google.Android.material:material:1.0.0'

次に、レイアウトを追加します。

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

もっと 情報はこちら 。

更新日：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
            }
        });

ドキュメンテーション：

更新：2014年2月12日Android 5 code）

また、ボタンにandstateListAnimatorを追加できます。

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

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

ダニエルが言及した概要について。ボタンにelevation属性を追加し、コードを介して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);
    }

}

enter image description here

57
Gabriele Mariotti

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

20
Lukas

Labels FAB機能（EvernoteやInboxアプリなど）がこの素晴らしいものに追加されたので library 自由に使用してください：

Gradle依存関係：

    compile 'com.getbase:floatingactionbutton:1.3.0'

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

楽しい！

7
Roman