如何設計底部導航欄，如自定義布局，中間有浮動按鈕

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>

雖然它不是目前適用的最佳解決方案。 感謝您的建議。