如何设计底部导航栏，如自定义布局，中间有浮动按钮

问题描述

我正在尝试设计一个底部导航栏，如具有自定义背景颜色的布局和中间的添加按钮，如下所示：

问题是，我找不到关于如何为底部导航视图提供每个选项具有不同背景颜色的自定义布局的任何文档。其次，我的项目被限制为不能使用 Material Theme。所以我必须通过使用 Appcompat 主题以某种方式管理它。我尝试对每个元素使用带有嵌套相对布局的线性布局。虽然这适用于其他一切，但我无法完全像这样定位添加按钮。有什么建议吗？

解决方法

所以我在某种程度上使它尽可能接近。这就是我所做的

    <LinearLayout
            android:id="@+id/actJobBottomNav"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_50sdp"
            android:layout_gravity="bottom"
            android:baselineAligned="false"
            android:orientation="horizontal"
            android:visibility="visible">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="@dimen/_50sdp">


                <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/guideline2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:visibility="invisible"
                    app:layout_constraintGuide_percent="0.5" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="@dimen/_50sdp"
                    android:orientation="horizontal"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/guideline2"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:background="@color/colorDeepBlue"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/actJobImgvHome"
                            android:layout_width="@dimen/_24sdp"
                            android:layout_height="@dimen/_24sdp"
                            android:src="@drawable/home_white" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/home"
                            android:textAllCaps="true"
                            android:textColor="@color/colorWhite" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:background="@color/colorBlue"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/actJobImgvContact"
                            android:layout_width="@dimen/_24sdp"
                            android:layout_height="@dimen/_24sdp"
                            android:src="@drawable/contact_white" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/contact"
                            android:textAllCaps="true"
                            android:textColor="@color/colorWhite" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1.25"
                        android:background="@color/colorBlue"
                        android:orientation="horizontal" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="@dimen/_50sdp"
                    android:orientation="horizontal"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="@+id/guideline2"
                    app:layout_constraintTop_toTopOf="parent">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1.25"
                        android:background="@color/colorDeepBlue"
                        android:gravity="center"
                        android:orientation="vertical" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:background="@color/colorDeepBlue"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/actJobImgvSchedule"
                            android:layout_width="@dimen/_24sdp"
                            android:layout_height="@dimen/_24sdp"
                            android:src="@drawable/appointment_white" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/schedule"
                            android:textAllCaps="true"
                            android:textColor="@color/colorWhite" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:background="@color/colorDarkBlue"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/actJobImgvMore"
                            android:layout_width="@dimen/_24sdp"
                            android:layout_height="@dimen/_24sdp"
                            android:src="@drawable/more_white" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/more"
                            android:textAllCaps="true"
                            android:textColor="@color/colorWhite" />
                    </LinearLayout>
                </LinearLayout>

                <ImageView
                    android:id="@+id/imageView5"
                    android:layout_width="@dimen/_46sdp"
                    android:layout_height="@dimen/_46sdp"
                    android:background="@drawable/circle_solid_filled_deep_blue_white_stroke"
                    android:padding="@dimen/_5sdp"
                    android:onClick="@{clickHandler::addClicked}"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:srcCompat="@drawable/add_white" />

            </androidx.constraintlayout.widget.ConstraintLayout>
        </LinearLayout>

虽然这不是最好的解决方案，但它目前有效。感谢您的建议。