Нижний лист с движущимися плавающими кнопками действий

Я хочу использовать Bottom -лист из библиотеки поддержки и две плавающие кнопки действий (FABS), как показано на рисунках. Дело в том, что я также хочу, чтобы обе FABS двигались вместе с нижним листом, как на рисунках 1 и 2. Каков основной макет, который я должен использовать, и как сделать так, чтобы FABS приклеивался к нижнему листу?

Изображение 1 Изображение 2

ОБНОВЛЕНИЕ

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

Based on Ruan_Lopes answer.

С этим макетом мой FABS работает так, как я хочу, но я все еще думаю, что делаю это не очень четко.

Мне интересно, возможно ли сделать это более официальным способом.


android android-layout floating-action-button bottom-sheet
person Thanassis    schedule 13.05.2016    source источник
comment
think that I am not doing it very clear. - ТАК не дискуссионная доска - вы задали свой вопрос, и @Ruan_Lopes ответил. Согласно вашим комментариям, это решает вашу проблему, и вы заставили свои FAB двигаться так, как хотели, поэтому вы должны принять его ответ сейчас и закрыть вопрос. Если у вас возникла другая проблема, вам следует задать другой вопрос.   -  person Marcin Orlowski    schedule 16.05.2016
comment
Я прошу перемещать фабы с промежутком между ними. У меня нет проблем с ответом, но это половина для меня.   -  person Thanassis    schedule 16.05.2016

Ответы (3)


arrow_upward
7
arrow_downward

Этот код работал для меня

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidsample.BottomSheetActivity">

    <!-- include app bar -->
    <include layout="@layout/app_bar" />

    <!-- include main content -->
    <include layout="@layout/activity_bottom_sheet_content" />

    <!-- include bottom sheet -->
    <include layout="@layout/bottom_sheet" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_vertical_margin"
        android:src="@drawable/ic_share_black_24dp"
        app:backgroundTint="#3F51B5"
        app:layout_anchor="@+id/text"
        app:layout_anchorGravity="top|end" />

    <TextView
        android:id="@+id/text"
        android:layout_width="50dp"
        android:layout_height="70dp"
        app:layout_anchor="@+id/b1"
        app:layout_anchorGravity="top|end" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_vertical_margin"
        android:src="@drawable/ic_share_black_24dp"
        app:backgroundTint="#3F51B5"
        app:layout_anchor="@+id/bottom_sheet_mapviewfinal"
        app:layout_anchorGravity="top|end" />

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

с идентификатором layout_anchor вы имеете в виду идентификатор нижнего_листа.

ссылка: Справочник по среде

Надеюсь, поможет.

person Petar Ceho    schedule 28.05.2019
comment
Спасибо за ваш ответ, но в настоящее время я не работаю над проектами Android и не могу подтвердить ваш ответ. - person Thanassis; 30.05.2019
comment
Как я вижу, ваш код касается только одной плавающей кнопки действия. Мой вопрос о двух плавающих кнопках действий. - person Thanassis; 30.05.2019
comment
Отредактировал ответ, просто добавьте пустое текстовое представление для пространства между кнопками, а layout_anchor для идентификатора плавающей кнопки текстового представления 1, затем для плавающей кнопки 2 идентификатор layout_anchor представляет собой текстовое представление, и для всех трех из них приложение: layout_anchorGravity тот же верх | низ. Это полный ответ, если вы примете его: D - person Petar Ceho; 31.05.2019
comment
Спасибо дружище! 'app:layout_anchorGravity=top|end', помогите мне! - person Kuldeep mourya; 17.11.2019
comment
Когда нижний лист занимает весь экран, исчезает только b1, а b2 — нет. Как можно добиться такого же эффекта для b2? - person nullmn; 15.01.2021

arrow_upward
15
arrow_downward

Вы пытались добавить app:layout_insetEdge="bottom" в представление с BottomSheetBehaviour? Что-то вроде этого, будучи FAB и братьями и сестрами BottomSheetBehaviour View внутри ConstraintLayout, работает для меня:

<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"
    />
person Antonio López    schedule 09.08.2018
comment
установка layout_insetEdge для поведения BottomSheet сработала для меня. Все это время я устанавливал insetEdge на FAB - person soan saini; 08.04.2019

arrow_upward
7
arrow_downward

Вы можете использовать макет, подобный этому:

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

Я использовал «include» в примере для ясности, но app:layout_anchor — это то, что заставит ваш FAB «прилипнуть» к нижнему листу, поэтому вы должны указать идентификатор вашего нижнего листа в качестве параметра там, и вы могли бы следуйте тому же принципу для второго FAB, используя layout_anchor, чтобы прикрепить его к первому FAB.

person Ruan_Lopes    schedule 13.05.2016
comment
Этот подход для одной кнопки - person Thanassis; 13.05.2016
comment
Я работаю над этим прямо сейчас. Ваш ответ не является для меня полностью решением, но дает мне некоторые подсказки. - person Thanassis; 14.05.2016
comment
Я работаю над это прямо сейчас, чтобы реализовать свое решение - person Thanassis; 14.05.2016
comment
Я дал вам базовую схему, чтобы помочь вам решить вашу проблему, прочитайте свой вопрос еще раз. - person Ruan_Lopes; 14.05.2016
comment
Почему мой ответ не полный? Ты пытался? Вы пытаетесь создать пользовательское поведение, чтобы сделать то же самое, что и комбинация app:layout_anchor и app:layout_anchorGravity. - person Ruan_Lopes; 14.05.2016
comment
Давайте продолжим обсуждение в чате. - person Thanassis; 14.05.2016