如何在 BottomAppBar 的開始/左側對齊 FAB

Question

我想像這樣在左側使用FloatingActionButton

在BottomAppBar我們使用fabAlignmentMode來對齊FloatingActionButton 。 模式是center和end 。 但我需要開始。

我找到了一篇文章How I draw 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);

    }
}

但是output不如我們使用BottomAppBar對齊FloatingActionButton時的效果。

有沒有其他方法可以添加fabAlignmentMode來啟動？

Answer 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_width="match_parent" android:layout_height="match_parent" android:layoutDirection="rtl" tools:context=".MainActivity"> <com.google.android.material.bottomappbar.BottomAppBar android:id="@+id/appBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:fabAlignmentMode="end" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fabHome" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/ic_home" app:layout_anchor="@id/appBar" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>

然后 select 在設計模式下的 AppBar 並將layoutDirection設置為 rtl