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

Question

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

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

Answer 1

所以我在某种程度上让它尽可能地相似。 这就是我所做的

    <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>

虽然它不是目前适用的最佳解决方案。 感谢您的建议。