Как сделать нижнюю панель с кнопкой нестандартной формы?

Я хочу сделать нижнюю панель с кнопкой прикрепления потрясающей, как показано ниже. Если кто-нибудь знает об этом типе библиотеки кнопок различной формы с дном с потрясающим, предложите мне.

Изображение приведено ниже. Создайте нижнюю панель с помощью fab, подобной этой.

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




Ответы (2)


Это всего лишь идея, что код можно улучшить.
Вы можете изменить форму FloatingActionButton с помощью атрибута shapeAppearanceOverlay:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:shapeAppearanceOverlay="@style/cutfab"
    ..>

с:

<style name="cutfab">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">15dp</item>
</style>

Затем вы можете определить BottomAppBar в своем макете:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    app:fabAlignmentMode="center"
    app:fabCradleVerticalOffset="14dp"
    app:fabCradleMargin="8dp" />

Наконец, вы можете подать заявку на BottomAppBar и TopEdgeTreatment. Что-то типа:

BottomAppBar bar = findViewById(R.id.bar);
BottomAppBarTopEdgeTreatment topEdge = new BottomAppBarCutCornersTopEdge(
        bar.getFabCradleMargin(),
        bar.getFabCradleRoundedCornerRadius(),
        bar.getCradleVerticalOffset());
MaterialShapeDrawable babBackground = (MaterialShapeDrawable) bar.getBackground();

babBackground.setShapeAppearanceModel(
  babBackground.getShapeAppearanceModel()
  .toBuilder()
  .setTopEdge(topEdge)
  .build());

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

Где BottomAppBarCutCornersTopEdge что-то вроде:

public class BottomAppBarCutCornersTopEdge extends BottomAppBarTopEdgeTreatment {

    private final float fabMargin;
    private final float cradleVerticalOffset;

    BottomAppBarCutCornersTopEdge(
            float fabMargin, float roundedCornerRadius, float cradleVerticalOffset) {
        super(fabMargin, roundedCornerRadius, cradleVerticalOffset);
        this.fabMargin = fabMargin;
        this.cradleVerticalOffset = cradleVerticalOffset;
    }

    @Override
    @SuppressWarnings("RestrictTo")
    public void getEdgePath(float length, float center, float interpolation, ShapePath shapePath) {
        float fabDiameter = getFabDiameter();
        if (fabDiameter == 0) {
            shapePath.lineTo(length, 0);
            return;
        }

        float diamondSize = fabDiameter / 2f;
        float middle = center + getHorizontalOffset();

        float verticalOffsetRatio = cradleVerticalOffset / diamondSize;
        if (verticalOffsetRatio >= 1.0f) {
            shapePath.lineTo(length, 0);
            return;
        }

        shapePath.lineTo(middle - (fabMargin + diamondSize), 0);    
        shapePath.lineTo(middle - fabDiameter/3, (diamondSize - cradleVerticalOffset + fabMargin) * interpolation);    
        shapePath.lineTo(middle + fabDiameter/3, (diamondSize - cradleVerticalOffset + fabMargin) * interpolation);    
        shapePath.lineTo(middle + (fabMargin + diamondSize), 0);    
        shapePath.lineTo(length, 0);
    }

}

Чтобы получить лучший результат, вы должны расширить CutCornerTreatment, реализовав в методе getCornerPath тот же путь, что и в BottomAppBar, и применить его к FloatingActionButton.

person Gabriele Mariotti    schedule 14.07.2020

Чтобы использовать последний стиль BottomAppBar в вашем приложении.

1) Включите репозиторий Google Maven в build.gradle.

allprojects {
repositories {
  jcenter()
  maven {
    url "https://maven.google.com"
   }
  }
}

2) Поместите зависимость компонентов материала в файл build.gradle. Имейте в виду, что версия материала регулярно обновляется.

implementation 'com.google.android.material:material:1.0.0-alpha1'

3) Убедитесь, что ваше приложение наследует тему Theme.MaterialComponents, чтобы BottomAppBar использовал последний стиль. В качестве альтернативы вы можете объявить стиль для BottomAppBar в объявлении виджета в XML-файле макета следующим образом.

style=”@style/Widget.MaterialComponents.BottomAppBar”

Вы можете включить BottomAppBar в свой макет следующим образом. BottomAppBar должен быть дочерним элементом CoordinatorLayout.

<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:navigationIcon="@drawable/baseline_menu_white_24"/>

Вы можете привязать плавающую кнопку действия (FAB) к BottomAppBar, указав идентификатор BottomAppBar в атрибуте app:layout_anchor FAB. BottomAppBar может содержать FAB с фигурным фоном или FAB может перекрывать BottomAppBar.

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />

СПАСИБО

person Digvijay    schedule 14.07.2020
comment
Да спасибо. Мы уже знаем, как добавить BottomAppBar в макет (а также есть документация), но ОП спрашивает о BottomAppBar с другой формой и внешним видом! - person ʍѳђઽ૯ท; 14.07.2020