web-dev-qa-db-fra.com

FloatingActionButton, layout_anchor et layout_gravity

Un peu novice ici. Je suis environ deux mois après le développement de Android, mais j'ai des années d'expérience en développement dans d'autres environnements.

D'accord. J'ai un FloatingActionButton qui n'apparaissait pas là où je l'attendais ou le voulais. C'est à l'intérieur d'un CoordinatorLayout, avec un AppBarLayout/Toolbar, et à la suite d'un ListView.

Voici la mise en page:

<?xml version="1.0" encoding="utf-8"?>

<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:id="@+id/fragment_coordinator"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context=".ViewVehicleList">

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

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            Android:title="Vehicle List"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

    <ListView
        Android:id="@+id/Vehicle_ListView"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:paddingBottom="@dimen/activity_vertical_margin"
        Android:paddingLeft="@dimen/activity_horizontal_margin"
        Android:paddingRight="@dimen/activity_horizontal_margin"
        Android:paddingTop="@dimen/activity_vertical_margin"
        Android:background="#FFFFFF"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </ListView>

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab_AddVehicle"
        style="@style/FloatingAddButton"
        Android:src="@drawable/ic_green_add"
        Android:layout_gravity="bottom|end"
        app:layout_anchor="@id/Vehicle_ListView"
        Android:onClick="addVehicle"/>

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

Avec cette disposition, l'écran ressemble à ceci: FAB in wrong position

Ma layout_gravity dit "bottom|end". Je l'ai changé en "bottom|right", mais j'ai quand même obtenu le même résultat. J'ai lu de nombreux tutoriels et fait des recherches via Stack Overflow, et je n'ai pas eu de chance.

J'ai réussi à le résoudre en supprimant l'ancre répertoriée dans l'élément FAB app:layout_anchor="@id/Vehicle_ListView", ce qui semble aller à l'encontre de ce que j'ai lu: pour utiliser un FAB et le positionner correctement, vous devez utiliser layout_anchor et layout_gravity. Sans la balise d'ancrage, cela ressemble à ceci:

FAB in correct position

Voici donc ma question: pourquoi mon ancre gâche-t-elle le positionnement de mon FloatingActionButton? Qu'est-ce que je fais mal?

androidandroid-layoutfloating-action-buttonlayout-gravitylayout-anchor
10
C. Todd

Vous avez juste besoin d'ajouter layout_anchorGravity.

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_AddVehicle"
    style="@style/FloatingAddButton"
    Android:src="@drawable/ic_green_add"
    Android:onClick="addVehicle"
    app:layout_anchor="@id/Vehicle_ListView"
    app:layout_anchorGravity="bottom|end" />
17
Hussein El Feky

si vous utilisez la disposition des contraintes, vous devez définir la contrainte supérieure et inférieure de fab sur la disposition souhaitée Edge comme ceci. par exemple, j'ai une sorcière cardview je veux ancrer fab à elle

<androidx.cardview.widget.CardView
    Android:id="@+id/mix_video_cardView/>

<com.google.Android.material.floatingactionbutton.FloatingActionButto
    app:layout_constraintTop_toBottomOf="@+id/mix_video_cardView"
    app:layout_constraintBottom_toBottomOf="@+id/mix_video_cardView"
    app:layout_constraintStart_toStartOf="@+id/mix_video_cardView"
    app:layout_constraintEnd_toEndOf="@+id/mix_video_cardView"
    />
1
Reza