Как правильно закрепить плавающую кнопку действия с помощью CoordinatorLayout?

Я использую CoordinatorLayout в качестве корневого представления. Он содержит RelativeLayout и FloatingActionButton. Когда я установил layout_anchor и layout_anchorGravity для FloatingActionButton, он не центрировался на краю RelativeLayout (оранжевая область на экране), как я ожидал.

Я попробовал решение этого вопроса Как я могу добавить новую кнопку плавающего действия между двумя виджетами/макетами, но безуспешно.

Вот мой макет:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/primary_area"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:paddingBottom="30dp">

        <com.vocabularyminer.android.android.view.view.FloatingEditText
            android:id="@+id/edittext_package_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="32dp"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp"
            android:layout_marginTop="16dp"
            android:hint="Test fab button"/>

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done_white_24dp"
        app:elevation="4dp"
        app:layout_anchor="@id/primary_area"
        app:layout_anchorGravity="bottom|right|end"/>

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

Экран результатов: Экран результатов в соответствии с файлом макета выше

Что я ожидал:

введите здесь описание изображения


android android-layout material-design floating-action-button android-coordinatorlayout
person Seid    schedule 21.08.2015    source источник
comment
В чем именно заключается ваш вопрос? Где вы хотите его разместить?   -  person Hussein El Feky    schedule 21.08.2015
comment
я думаю, что ваш код правильный, попробуйте один раз с EditText вместо вашего пользовательского edittext.   -  person Ravi    schedule 21.08.2015
comment
Я пробовал ваш код с EditText, и он отлично работает   -  person Ravi    schedule 21.08.2015
comment
Я добавил экран, чего и ожидал от макета выше. Если вы посмотрите на ответ на этот вопрос ссылка, вы увидите, что центр потрясающего находится точно на нижнем краю фиолетовой области.   -  person Seid    schedule 21.08.2015

Ответы (2)


arrow_upward
0
arrow_downward

Я привык сам делать привязку с помощью этого кода, чтобы добавить в прослушиватель addOnLayoutChangeListener вашего основного представления:

// fabGap is the right margin from the CoordinatorLayout
// container is your CoordinatorLayout  

final FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.TOP);
    layoutParams.setMargins(mAppBarLayout.getRight() - (2 * fabSize) - (2 * fabGap), mAppBarLayout.getBottom() - (fabSize / 2), 0, fabPadding);

    mFavoriteActionButton = new FloatingActionButton(getActivity());
person fab    schedule 21.08.2015
comment
Решение с CoordinatorLayout и app:layout_anchor должно работать без этих обходных путей. Наконец-то я нашел, где была моя проблема, и теперь она работает именно так, как я ожидал. - person Seid; 24.08.2015

arrow_upward
0
arrow_downward

Я нашел, в чем была моя проблема. Решение этого вопроса: Как могу ли я добавить новую плавающую кнопку действия между двумя виджетами/макетами правильно. Но я поместил свой фрагмент в FrameLayout, который был определен в соответствии с этим xml:

<FrameLayout
        android:id="@+id/floating_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

И поскольку я использовал wrap_content, кнопка FAB была размещена внутри RelativeLayout, а не на краю RelativeLayout.

Когда я также использовал в layout_heigh параметр match_parent, все работало как положено.

person Seid    schedule 24.08.2015