android– 如何将BottomAppBar FAB与BottomNavigationView相结合

android– 如何将BottomAppBar FAB与BottomNavigationView相结合,第1张

概述我想在BottomNavigationView之上使用FloatingActionButton,以及锚定在BottomAppBar上时的行为.我想出了一个相当“hacky”的技巧,只是将BottomNavigationView置于BottomAppBar之上而不提供背景,从而使其透明.这看起来似乎很有效,但我发现只有在触摸按钮的上半部分时才能点击制作

我想在BottomNavigationVIEw之上使用floatingActionbutton,以及锚定在BottomAppbar上时的行为.

我想出了一个相当“Hacky”的技巧,只是将BottomNavigationVIEw置于BottomAppbar之上而不提供背景,从而使其透明.

这看起来似乎很有效,但我发现只有在触摸按钮的上半部分时才能点击制作按钮(所以顶部没有透明的BottomNavigationVIEw).

<androIDx.constraintlayout.Widget.ConstraintLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"    xmlns:app="http://schemas.androID.com/apk/res-auto"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent">    <androIDx.coordinatorlayout.Widget.CoordinatorLayout        androID:layout_wIDth="match_parent"        androID:layout_height="120dp"        androID:layout_gravity="bottom"        app:layout_constraintBottom_toBottomOf="parent">        <com.Google.androID.material.floatingactionbutton.floatingActionbutton            androID:ID="@+ID/fab"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:clickable="true"            androID:focusable="true"            app:layout_anchor="@ID/bar" />        <com.Google.androID.material.bottomappbar.BottomAppbar            androID:ID="@+ID/bar"            androID:layout_wIDth="match_parent"            androID:layout_height="58dp"            androID:layout_gravity="bottom"            androID:backgroundTint="@color/colorPrimaryDark" />        <com.Google.androID.material.bottomnavigation.BottomNavigationVIEw            androID:ID="@+ID/bottomNavigation"            androID:layout_wIDth="match_parent"            androID:layout_height="wrap_content"            androID:layout_gravity="bottom"            app:itemIconTint="@androID:color/darker_gray"            app:itemTextcolor="@androID:color/white"            app:labelVisibilityMode="labeled"            app:menu="@menu/navigation" />    </androIDx.coordinatorlayout.Widget.CoordinatorLayout></androIDx.constraintlayout.Widget.ConstraintLayout>

有没有办法实现这个想法,我可以完全点击floatingActionbutton?

解决方法:

First Way

试试这个你可以创建一个CustomBottomNavigationVIEw

这是CustomBottomNavigationVIEw的好文章

How I draw custom shapes in BottomNavigationView

示例代码

import androID.content.Context;import androID.graphics.*;import androID.support.design.Widget.BottomNavigationVIEw;import androID.support.v4.content.ContextCompat;import androID.util.AttributeSet;public class CustomBottomNavigationVIEw extends BottomNavigationVIEw {    private Path mPath;    private Paint mPaint;    /** the CURVE_CIRCLE_RADIUS represent the radius of the fab button */    private final int CURVE_CIRCLE_RADIUS = 128 / 2;    // the coordinates of the first curve    private Point mFirstCurveStartPoint = new Point();    private Point mFirstCurveEndPoint = new Point();    private Point mFirstCurveControlPoint1 = new Point();    private Point mFirstCurveControlPoint2 = new Point();    //the coordinates of the second curve    @SuppressWarnings("FIEldCanBeLocal")    private Point mSecondCurveStartPoint = new Point();    private Point mSecondCurveEndPoint = new Point();    private Point mSecondCurveControlPoint1 = new Point();    private Point mSecondCurveControlPoint2 = new Point();    private int mNavigationbarWIDth;    private int mNavigationbarHeight;    public CustomBottomNavigationVIEw(Context context) {        super(context);        init();    }    public CustomBottomNavigationVIEw(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public CustomBottomNavigationVIEw(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    private voID init() {        mPath = new Path();        mPaint = new Paint();        mPaint.setStyle(Paint.Style.FILL_AND_stroke);        mPaint.setcolor(ContextCompat.getcolor(getContext(),R.color.colorAccent));        setBackgroundcolor(color.transparent);    }    @OverrIDe    protected voID onLayout(boolean changed, int left, int top, int right, int bottom) {        super.onLayout(changed, left, top, right, bottom);    }    @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        // Navigation bar bounds (wIDth & height)        mNavigationbarWIDth = getWIDth();        mNavigationbarHeight = getHeight();        // the coordinates (x,y) of the start point before curve        mFirstCurveStartPoint.set((mNavigationbarWIDth / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3), 0);        // the coordinates (x,y) of the end point after curve        mFirstCurveEndPoint.set(mNavigationbarWIDth / 2, CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4));        // same thing for the second curve        mSecondCurveStartPoint = mFirstCurveEndPoint;        mSecondCurveEndPoint.set((mNavigationbarWIDth / 2) + (CURVE_CIRCLE_RADIUS * 2) + (CURVE_CIRCLE_RADIUS / 3), 0);        // the coordinates (x,y)  of the 1st control point on a cubic curve        mFirstCurveControlPoint1.set(mFirstCurveStartPoint.x + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4), mFirstCurveStartPoint.y);        // the coordinates (x,y)  of the 2nd control point on a 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);        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();    }    @OverrIDe    protected voID onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.drawPath(mPath, mPaint);    }}

现在使用这样的

<?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"    xmlns:app="http://schemas.androID.com/apk/res-auto"    androID:ID="@+ID/coordinatorlayout"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    androID:orIEntation="vertical">    <androID.support.design.Widget.floatingActionbutton        androID:ID="@+ID/fab"        androID:layout_wIDth="wrap_content"        androID:layout_height="wrap_content"        androID:layout_alignParentBottom="true"        androID:layout_centerInParent="true"        androID:layout_marginBottom="30dp"        androID:clickable="true"        androID:focusable="true" />    <neel.com.demo.CustomBottomNavigationVIEw        androID:ID="@+ID/customBottombar"        androID:layout_wIDth="match_parent"        androID:layout_height="wrap_content"        androID:layout_alignParentBottom="true"        androID:background="@color/colorAccent"        app:labelVisibilityMode="labeled" /></relativeLayout>

Activity

import androID.support.v7.app.AppCompatActivity;import androID.os.Bundle;public class MainActivity extends AppCompatActivity {    @OverrIDe    protected voID onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentVIEw(R.layout.activity_main);        CustomBottomNavigationVIEw curvedBottomNavigationVIEw = findVIEwByID(R.ID.customBottombar);        curvedBottomNavigationVIEw.inflateMenu(R.menu.bottom_menu);    }}

OUTPUT

Second Way

    <androIDx.coordinatorlayout.Widget.CoordinatorLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"    xmlns:app="http://schemas.androID.com/apk/res-auto"    androID:layout_wIDth="match_parent"    androID:layout_height="120dp"    androID:layout_gravity="bottom">    <com.Google.androID.material.floatingactionbutton.floatingActionbutton        androID:ID="@+ID/fab"        androID:layout_wIDth="wrap_content"        androID:layout_height="wrap_content"        androID:clickable="true"        androID:focusable="true"        app:layout_anchor="@ID/bar" />    <com.Google.androID.material.bottomappbar.BottomAppbar        androID:ID="@+ID/bar"        androID:layout_wIDth="match_parent"        androID:layout_height="58dp"        androID:layout_gravity="bottom"        androID:backgroundTint="@color/colorPrimaryDark">        <linearLayout            androID:layout_wIDth="match_parent"            androID:layout_height="wrap_content"            androID:orIEntation="horizontal">            <TextVIEw                                androID:layout_wIDth="0dp"                androID:layout_height="wrap_content"                androID:layout_weight="1"                androID:background="?androID:attr/selectableItemBackground"                androID:drawabletop="@drawable/ic_favorite"                androID:gravity="center"                androID:orIEntation="vertical"                androID:text="Personal"                androID:textcolor="#FFFFFF">            </TextVIEw>            <TextVIEw                                androID:layout_wIDth="0dp"                androID:layout_height="wrap_content"                androID:layout_weight="1"                androID:background="?androID:attr/selectableItemBackground"                androID:drawabletop="@drawable/ic_favorite"                androID:gravity="center"                androID:orIEntation="vertical"                androID:text="Personal"                androID:textcolor="#FFFFFF">            </TextVIEw>            <TextVIEw                                androID:layout_wIDth="0dp"                androID:layout_height="wrap_content"                androID:layout_weight="1"                androID:background="?androID:attr/selectableItemBackground"                androID:drawabletop="@drawable/ic_favorite"                androID:gravity="center"                androID:orIEntation="vertical"                androID:textcolor="#FFFFFF"                androID:visibility="invisible">            </TextVIEw>            <TextVIEw                                androID:layout_wIDth="0dp"                androID:layout_height="wrap_content"                androID:layout_weight="1"                androID:background="?androID:attr/selectableItemBackground"                androID:drawabletop="@drawable/ic_favorite"                androID:gravity="center"                androID:orIEntation="vertical"                androID:text="Personal"                androID:textcolor="#FFFFFF">            </TextVIEw>            <TextVIEw                                androID:layout_wIDth="0dp"                androID:layout_height="wrap_content"                androID:layout_weight="1"                androID:background="?androID:attr/selectableItemBackground"                androID:drawabletop="@drawable/ic_favorite"                androID:gravity="center"                androID:orIEntation="vertical"                androID:text="Personal"                androID:textcolor="#FFFFFF">            </TextVIEw>        </linearLayout>    </com.Google.androID.material.bottomappbar.BottomAppbar></androIDx.coordinatorlayout.Widget.CoordinatorLayout>

OUTPUT

总结

以上是内存溢出为你收集整理的android – 如何将BottomAppBar FAB与BottomNavigationView相结合全部内容,希望文章能够帮你解决android – 如何将BottomAppBar FAB与BottomNavigationView相结合所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1111517.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存