如何在 BottomAppBar 的开始/左侧对齐 FAB

Posted 2023-04-18

【中文标题】如何在 BottomAppBar 的开始/左侧对齐 FAB

【英文标题】：How to align FAB at start/left in the BottomAppBar

【发布时间】：2021-05-19 09:59:50

【问题描述】：

我想在左边使用FloatingActionButtonlike this

在BottomAppBar 中，我们使用fabAlignmentMode 来对齐FloatingActionButton。 模式是 center 和 end。 但我需要开始。

我找到了一篇文章How I drew custom shapes in bottom bar。这里贝塞尔曲线用于创建曲线。

我试图将FloatingActionButton 向左对齐。

public class CurvedBottomNavigationView extends BottomNavigationView 

    //Declare variable
    private Path mPath;
    private Paint mPaint;

    // The radius of fab button
    public final int CURVE_CIRCLE_RADIUS = 90;

    // The coordinates of the first curve
    public Point mFirstCurveStartPoint = new Point();
    public Point mFirstCurveEndPoint = new Point();
    public Point mFirstCurveControlPoint1 = new Point();
    public Point mFirstCurveControlPoint2 = new Point();

    //The coordinates of the second curve
    public Point mSecondCurveStartPoint = new Point();
    public Point mSecondCurveEndPoint = new Point();
    public Point mSecondCurveControlPoint1 = new Point();
    public Point mSecondCurveControlPoint2 = new Point();

    public int mNavigationBarWidth,mNavigationBarHeight;


    public CurvedBottomNavigationView(Context context) 
        super(context);
        initView();
    

    public CurvedBottomNavigationView(Context context, AttributeSet attrs) 
        super(context, attrs);
        initView();
    

    public CurvedBottomNavigationView(Context context, AttributeSet attrs, int defStyleAttr) 
        super(context, attrs, defStyleAttr);
        initView();
    

    private void initView() 
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setColor(Color.WHITE);
        setBackgroundColor(Color.TRANSPARENT);


    

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) 
        super.onSizeChanged(w, h, oldw, oldh);

        //Get width and height of navigation bar
        mNavigationBarWidth = getWidth();
        mNavigationBarHeight = getHeight();

        // the coordinates(x,y) of the start point before curve
        mFirstCurveStartPoint.set((mNavigationBarWidth/9)
                -(CURVE_CIRCLE_RADIUS*2)
                -(CURVE_CIRCLE_RADIUS/3),0);

        // the coordinates (x,y) of the end point after curve
        mFirstCurveEndPoint.set((mNavigationBarWidth/9),CURVE_CIRCLE_RADIUS+(CURVE_CIRCLE_RADIUS/4));

        //same for second curve
        mSecondCurveStartPoint = mFirstCurveEndPoint;

        mSecondCurveEndPoint.set((mNavigationBarWidth/9)+(CURVE_CIRCLE_RADIUS*2)+(CURVE_CIRCLE_RADIUS/3)
                ,0);

        // The coordinates (x,y_ of the first control point on cubic curve
        mFirstCurveControlPoint1.set(mFirstCurveStartPoint.x + (CURVE_CIRCLE_RADIUS)+(CURVE_CIRCLE_RADIUS/4),
                mFirstCurveStartPoint.y);
        // // The coordinates (x,y_ of the second control point on cubic curve
        mFirstCurveControlPoint2.set(mFirstCurveEndPoint.x-(CURVE_CIRCLE_RADIUS*2)+CURVE_CIRCLE_RADIUS,
                mFirstCurveEndPoint.y);

        mSecondCurveControlPoint1.set(mSecondCurveStartPoint.x+(CURVE_CIRCLE_RADIUS*2)-CURVE_CIRCLE_RADIUS,mSecondCurveStartPoint.y);
        mSecondCurveControlPoint2.set(mSecondCurveEndPoint.x-(CURVE_CIRCLE_RADIUS+(CURVE_CIRCLE_RADIUS/4)),mSecondCurveEndPoint.y);

    

    @Override
    protected void onDraw(Canvas canvas) 
        super.onDraw(canvas);
        mPath.reset();
        mPath.moveTo(0,0);
        mPath.lineTo(mFirstCurveStartPoint.x,mFirstCurveStartPoint.y);

        mPath.cubicTo(mFirstCurveControlPoint1.x,mFirstCurveControlPoint1.y,
                mFirstCurveControlPoint2.x,mFirstCurveControlPoint2.y,
                mFirstCurveEndPoint.x,mFirstCurveEndPoint.y);

        mPath.cubicTo(mSecondCurveControlPoint1.x,mSecondCurveControlPoint1.y,
                mSecondCurveControlPoint2.x,mSecondCurveControlPoint2.y,
                mSecondCurveEndPoint.x,mSecondCurveEndPoint.y);

        mPath.lineTo(mNavigationBarWidth,0);
        mPath.lineTo(mNavigationBarWidth,mNavigationBarHeight);
        mPath.lineTo(0,mNavigationBarHeight);
        mPath.close();

        canvas.drawPath(mPath,mPaint);

    

但是the output 不不如我们使用BottomAppBar 对齐FloatingActionButton 时的好。

还有其他方法可以将fabAlignmentMode 添加到开始 吗？？

【参考方案1】：

在其他中将 FAB 与 BottomAppbar 的开头对齐。这就是你所做的

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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_
    android:layout_
    android:layoutDirection="rtl"
    tools:context=".MainActivity">


    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/appBar"
        android:layout_
        android:layout_
        android:layout_gravity="bottom"
        app:fabAlignmentMode="end" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabHome"
        android:layout_
        android:layout_
        android:src="@drawable/ic_home"
        app:layout_anchor="@id/appBar" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

然后在 Design Mode 中选择 AppBar 并将 layoutDirection 设置为 rtl

【讨论】：

它从左到中或从右到中，反之亦然，但不从左到右，反之亦然