web-dev-qa-db-fra.com

Feuille de fond avec boutons d'action flottants

Je veux utiliser Bottom-sheet à partir de la bibliothèque de support et deux boutons d’action flottants (FABS) comme le montrent les images. Le fait est que je veux aussi que les deux FABS se déplacent avec la feuille de fond, comme dans les illustrations 1 et 2. Quelle est la présentation de base que je dois utiliser et comment rendre le FABS collant sur la feuille de fond?

 Picture 1  Picture 2

UPDATE

<LinearLayout
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:orientation="vertical"
tools:context=".MainActivity">

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/AppTheme.AppBarOverlay">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

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


<Android.support.design.widget.CoordinatorLayout
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

      <!-- my context here -->

    </LinearLayout>

      <!-- bottomsheet -->
    <FrameLayout
        Android:id="@+id/bottom_sheet"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="#ff0000"
        app:behavior_hideable="true"
        app:layout_behavior="Android.support.design.widget.BottomSheetBehavior">

        <include layout="@layout/navigation_info" />

    </FrameLayout>

    <!-- FABS -->

    <!-- wrap to primary fab to extend the height -->

    <LinearLayout
        Android:id="@+id/primary_wrap"
        Android:layout_width="wrap_content"
        Android:layout_height="88dp"
        app:layout_anchor="@id/bottom_sheet"
        app:layout_anchorGravity="top|end">

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/primary"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"

            Android:layout_margin="@dimen/fab_margin"
            Android:src="@Android:drawable/ic_delete"/>
    </LinearLayout>


    <!-- Pin secondary fab in the top of the extended primary -->
    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/secondary"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="top|end"
        Android:layout_margin="16dp"
        Android:src="@Android:drawable/ic_dialog_email"
        app:layout_anchor="@+id/primary_wrap"
        app:layout_anchorGravity="top|end"/>

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

Basé sur Ruan_Lopes answer.

Avec cette mise en page, mon FABS fonctionne comme je le veux mais je pense toujours que je ne le fais pas très clairement.

Je me demande s'il est possible de le faire de manière plus officielle.

androidandroid-layoutfloating-action-buttonbottom-sheet
9
thanassis

Vous pouvez utiliser une mise en page similaire à celle-ci:

<?xml version="1.0" encoding="utf-8"?>  
<Android.support.design.widget.CoordinatorLayout> 

    <Android.support.design.widget.AppBarLayout>
          <!-- Your code -->
    </Android.support.design.widget.AppBarLayout>

    <!-- Your content -->
    <include layout="@layout/content_main" />

    <!-- Bottom Sheet -->
    <include layout="@layout/bottom_sheets_main"/>

    <!-- First FAB -->
    <Android.support.design.widget.FloatingActionButton 
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" 
        app:layout_anchor="@id/bottomSheet"
        app:layout_anchorGravity="bottom|end"/>  

    <!-- Second FAB -->
    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="top|end"
        app:layout_anchor="@id/fab"
        app:layout_anchorGravity="top" />

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

J'ai utilisé "include" dans l'exemple pour des raisons de clarté, mais app: layout_anchor est ce qui va "coller" votre FAB sur la feuille inférieure. Vous devez donc placer l'identifiant de votre feuille inférieure en tant que paramètre et vous pouvez suivez le même principe pour votre deuxième FAB en utilisant le layout_anchor pour le coller sur le premier FAB.

7
Ruan_Lopes

Avez-vous essayé d'ajouter app: layout_insetEdge = "bottom" à la vue avec BottomSheetBehaviour? Quelque chose comme ça, être FAB et le BottomSheetBehaviour View frères et sœurs à l'intérieur d'une contrainteLayout fonctionne pour moi:

<Android.support.design.widget.FloatingActionButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="end|bottom"
    Android:layout_margin="16dp"
    app:backgroundTint="@color/white"
    app:fabSize="normal"
    app:layout_dodgeInsetEdges="bottom"
    app:srcCompat="@drawable/icon"
    />

<View
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:layout_insetEdge="bottom"
    app:layout_behavior="Android.support.design.widget.BottomSheetBehavior"
    />
4
Antonio López