Новый нижний макет от Google

Прежде всего, мне жаль задавать такой вопрос, но после того, как я скачал последнее Google IO приложение,

Мне просто нравится нижний макет, как показано на следующем снимке экрана.

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

Будучи новичком в разработке Android, я понятия не имею, с чего начать. Любая идея, как добиться этого нижнего макета с круговой звездой в XML? Кто-нибудь знает, как называется эта конструкция?


android material-design floating-action-button material-components-android layout
person Ali    schedule 03.05.2018    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Вы можете использовать новые материальные компоненты для Android и BottomAppBar компонент .

Используйте что-то вроде:

 <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_gravity="bottom"
      app:fabCradleMargin="8dp"
      app:fabCradleRoundedCornerRadius="8dp"
      app:fabCradleVerticalOffset="0dp"
      ... />

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      app:layout_anchor="@id/bar"
      ../>

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

Вы должны использовать эти атрибуты:

  • Атрибут fabCradleMargin. Увеличивает или уменьшает расстояние между FloatingActionButton и BottomAppBar
  • Атрибут fabCradleRoundedCornerRadius. Указывает округлость угла вокруг выреза.

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

СТАРАЯ БИБЛИОТЕКА ПОДДЕРЖКИ

С библиотекой поддержки 28.0.0 Библиотека дизайна содержит файл BottomAppBar.

Ты можешь использовать

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

Вы можете настроить компонент, используя следующие атрибуты:

  • app:fabAlignmentMode: Объявляет положение FAB, прикрепленного к нижней панели приложения. Это может быть либо end, либо center

  • app:fabCradleVerticalOffset: Объявляет вертикальное смещение, которое будет использоваться для присоединенной фабрики. По умолчанию это 0dp.

  • app:backgroundTint: Используется для применения оттенка к фону вида.

Также вы можете прикрепить fab, используя app:layout_anchor на компоненте FAB, который вы хотите прикрепить, используя идентификатор нижней панели приложения.

person Gabriele Mariotti    schedule 03.05.2018

arrow_upward
2
arrow_downward

Я полагаю, что это BottomAppBar, входящий в библиотеку поддержки 28.0.0. Вы можете прочитать больше здесь: https://medium.com/@lupajz/the-place-for-bottomappbar-31e0db8f70b1

person stkent    schedule 03.05.2018
comment
Спасибо, есть идеи, когда будет выпущена библиотека поддержки 28? :) - person Ali; 03.05.2018
comment
Вы можете использовать альфа-версию прямо сейчас и следить за разработчиком. .android.com/topic/libraries/support-library/ для полной версии. Пока не знаю, когда это будет :/ - person stkent; 03.05.2018
comment
развеселить - я использую xamarin, поэтому я не думаю, что xamarin еще поддерживает 28 alpha - person Ali; 03.05.2018

arrow_upward
0
arrow_downward

Панели приложений: внизу

Нижние панели приложений обеспечивают доступ к нижней панели навигации и до четырех действий, включая плавающую кнопку действия.

Нижние панели приложений могут содержать действия, применимые к контексту текущего экрана. Они включают элемент управления меню навигации в крайнем левом углу и плавающую кнопку действия (если она присутствует). Если он включен в нижнюю панель приложения, элемент управления дополнительным меню размещается в конце других действий.

Информация введите здесь описание ссылки

<android.support.design.widget.FloatingActionButton
    android:id="@+id/FloatingActionButtonAddEmp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal"
    app:srcCompat="@drawable/ic_save_black_24px"
    app:layout_anchor="@+id/bottom_appbar"/>

<android.support.design.bottomappbar.BottomAppBar
    android:id="@+id/bottom_appbar"
    android:elevation="4dp"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:fabAttached="true"
    app:backgroundTint="@color/io15_grey"/>
person Adriano J. P. Nascimento    schedule 11.06.2018