web-dev-qa-db-ja.com

1つのレイアウトに2つのフローティングボタン

マテリアルデザインを使ったシンプルなアプリを作成しています。そして、1つのレイアウトに2つのフローティングボタンを配置したいと思います。

Material design documents example

そして、スナックバーが表示されているときに、それらを一緒に動かしたいと思います。しかし、layout_marginが機能しないため、これを間違って正しい方法で行うことはできません。これらは、アプリとマークアップのスクリーンショットです。私たちを手伝ってくれますか？

Before showing a snackbarAfter showing a snackbar

                  <Android.support.design.widget.AppBarLayout
                    Android:id="@+id/addProductsAppBar"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                    <Android.support.design.widget.TabLayout
                        Android:id="@+id/addProductsTabs"
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content" />

                  </Android.support.design.widget.AppBarLayout>

                  <Android.support.v4.view.ViewPager
                    Android:id="@+id/addProductsViewpager"
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

                  <Android.support.design.widget.FloatingActionButton
                    Android:id="@+id/addProductFab"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_gravity="end|bottom"
                    Android:layout_margin="16dp"
                    Android:src="@drawable/ic_add_white_36dp" />

                  <Android.support.design.widget.FloatingActionButton
                    Android:id="@+id/searchFab"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    app:layout_anchor="@id/addProductFab"
                    app:layout_anchorGravity="top|right|end"
                    Android:layout_marginBottom="80dp"
                    Android:layout_marginRight="16dp"
                    Android:src="@drawable/ic_search_white_36dp"/>

                </Android.support.design.widget.CoordinatorLayout>
androidmaterial-designfloating-action-button
17
Egorikas

コードを機能させるためにコードを微調整してみましたが、その過程でアンカーの機能についてある程度理解できました。

最初に気付くのは、CoordinatorLayoutがビューの境界に基づいて子ビューを整列させることです。したがって、要素間にマージンを追加しても、動作中はまったく役に立ちません。レイアウトでは問題なく見えますが、動きはあきらめます。

したがって、ダミービューを追加すると、問題なく適切に固定するのに役立ちます。また、layout_gravitiesを適切に設定する必要があります。

レイアウト内の2つのFABのコードを次のスニペットに置き換えるだけです。

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/addProductFab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="end|bottom"
    Android:layout_margin="16dp"
    Android:src="@drawable/ic_add_white_36dp" />

<View
    Android:id="@+id/dummy"
    Android:layout_width="1dp"
    Android:layout_height="16dp"
    app:layout_anchor="@id/addProductFab"
    app:layout_anchorGravity="top|right|end" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/searchFab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="end|top"
    Android:layout_margin="16dp"
    Android:src="@drawable/ic_search_white_36dp"
    app:layout_anchor="@id/dummy"
    app:layout_anchorGravity="top|right|end" />

お役に立てれば！それがうまくいくなら、この答えを受け入れてください。 :)

34
Awanish Raj

サポートライブラリバージョン24.2.0では、CoordinatorLayoutに新しい属性layout_dodgeInsetEdgesがあり、2つのFABを含むLinearLayout（またはその他のビュー）に追加できます。Snackbarはそのビュー全体を移動します。道の！

したがって、たとえば：

    <Android.support.design.widget.CoordinatorLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:clipChildren="false"
        Android:fitsSystemWindows="true"
        tools:context=".Activities.MainActivity">

    <LinearLayout
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:orientation="vertical"
            Android:layout_gravity="bottom|right"
            Android:layout_marginRight="@dimen/fab_margin"
            Android:layout_marginBottom="@dimen/fab_margin"
            app:layout_dodgeInsetEdges="bottom"> //THIS IS THE LINE THAT MATTERS

        <Android.support.design.widget.FloatingActionButton
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="@dimen/fab_margin"
                Android:src="@drawable/icon"
                Android:tint="@color/colorTextAndIcons"
                app:backgroundTint="@color/colorPrimary"/>

        <Android.support.design.widget.FloatingActionButton
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="@dimen/fab_margin"
                Android:src="@drawable/icon"
                Android:tint="@color/colorTextAndIcons"
                app:backgroundTint="@color/colorPrimary"/>
    </LinearLayout>
</Android.support.design.widget.CoordinatorLayout>
7
vanshg

正しいとマークされた解決策は微調整であり、画面のdpiが異なるさまざまなデバイスで問題になるため、正しい解決策は https://stackoverflow.com/a/33900363/5740236

1
Niroj Shr

パディングを追加するためだけにビューを追加するのは好きではありませんでした。代わりに、FabをFrameLayoutでラップしました。

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">
    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab_directions"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginEnd="@dimen/fab_margin"
        Android:src="@Android:drawable/ic_menu_directions"
        Android:visibility="gone"/>

    <!-- We need the frame layout to set the margin between FABs-->
    <FrameLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="top|end"
        app:layout_anchor="@id/fab_directions"
        app:layout_anchorGravity="top|end">

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/fab_search"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_marginBottom="@dimen/fab_margin"
            Android:layout_marginEnd="@dimen/fab_margin"
            Android:src="@Android:drawable/ic_menu_search"
            app:elevation="@dimen/fab_elevation"/>
    </FrameLayout>

</Android.support.design.widget.CoordinatorLayout>
1
JavierSP1209

正しい応答コードを使用すると、Android 5.0未満では、上位FABがシフトするため、機能しません。何よりも、コード内の多くの追加属性に基づいて、以下に回答を記述します。あなたの、これはすべてのデバイスで正しく動作し、理解しやすくなります。

<Android.support.design.widget.CoordinatorLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:padding="10dp"
Android:background="#e2022068">

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_down"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="end|bottom"
    Android:src="@Android:drawable/arrow_down_float" />

<ImageView
    Android:id="@+id/divider"
    Android:layout_width="1dp"
    Android:layout_height="40dp"
    app:layout_anchor="@id/fab_down"
    app:layout_anchorGravity="end" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_up"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="end"
    Android:src="@Android:drawable/arrow_up_float"
    app:layout_anchor="@id/divider"
    app:layout_anchorGravity="right|end" />

 </Android.support.design.widget.CoordinatorLayout>
0
Shwarz Andrei