Как сделать Bottombar с кнопкой нестандартной формы? - PullRequest
Новая
       84

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

1 голос
/ 14 июля 2020

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

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

Ответы [ 2 ]

2 голосов
/ 14 июля 2020

Это просто идея, что код можно улучшить. Вы можете изменить форму 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 a 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.

0 голосов
/ 14 июля 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" />

СПАСИБО

...