Плавающие кнопки действий (FAB) и всплывающие окна в нижней части листа – это популярные компоненты пользовательского интерфейса, используемые при разработке мобильных приложений. FAB обеспечивают быстрый доступ к основным действиям, а нижние листы предлагают контекстную информацию или второстепенные действия. В этой статье мы рассмотрим различные методы объединения FAB со всплывающими окнами нижнего листа, а также приведем примеры кода.

Метод 1. Использование компонентов материалов для Android
Библиотека компонентов материалов обеспечивает встроенную поддержку FAB и нижних листов. Вот пример того, как реализовать это в Android с помощью Kotlin:

// XML layout
<android.support.design.widget.CoordinatorLayout>
    <!-- Other layout components -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/bottom_sheet"
        app:layout_anchorGravity="top|end" />
    <android.support.design.widget.BottomSheetBehavior
        android:id="@+id/bottom_sheet"
        app:behavior_hideable="true"
        app:behavior_peekHeight="80dp"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />
</android.support.design.widget.CoordinatorLayout>
// Kotlin code
val fab = findViewById<FloatingActionButton>(R.id.fab)
val bottomSheet = findViewById<LinearLayout>(R.id.bottom_sheet)
val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet)
fab.setOnClickListener {
    bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
}

Метод 2: использование пользовательской реализации
Если вы предпочитаете пользовательскую реализацию, вы можете добиться той же функциональности, обрабатывая событие щелчка FAB и анимируя нижний лист вручную. Вот пример использования JavaScript и CSS:

<!-- HTML -->
<button id="fab">Add</button>
<div id="bottom-sheet">Bottom Sheet Content</div>
<!-- CSS -->
#bottom-sheet {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 80%;
  background-color: #fff;
  transition: bottom 0.3s ease-in-out;
}
#bottom-sheet.active {
  bottom: 0;
}
/* JavaScript */
const fab = document.getElementById('fab');
const bottomSheet = document.getElementById('bottom-sheet');
fab.addEventListener('click', () => {
  bottomSheet.classList.toggle('active');
});

Метод 3: использование сторонних библиотек
Несколько сторонних библиотек упрощают реализацию FAB и нижних листов в различных средах. Например, в React Native вы можете использовать библиотеку React-native-paper:

import React, { useState } from 'react';
import { FAB, Portal, Provider } from 'react-native-paper';
import { View, Text } from 'react-native';
const App = () => {
  const [visible, setVisible] = useState(false);
  return (
    <Provider>
      <View>
        {/* Other components */}
        <Portal>
          <FAB
            icon="plus"
            onPress={() => setVisible(!visible)}
          />
          {visible && (
            <View style={{ backgroundColor: '#fff', padding: 16 }}>
              <Text>Bottom Sheet Content</Text>
            </View>
          )}
        </Portal>
      </View>
    </Provider>
  );
};
export default App;

Сочетание плавающих кнопок действий со всплывающими окнами внизу листа повышает удобство работы пользователя, предоставляя быстрый доступ к основным действиям и контекстной информации. В этой статье мы рассмотрели три метода реализации этой функции, включая использование компонентов материалов для Android, пользовательскую реализацию с помощью JavaScript и CSS, а также использование сторонних библиотек, таких как React-native-paper. Поэкспериментируйте с этими методами, чтобы создать привлекательные пользовательские интерфейсы для своих мобильных приложений.