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

【问题标题】：How to design a bottom navigation bar like custom layout with floating button in middle如何设计底部导航栏，如自定义布局，中间有浮动按钮
【发布时间】：2021-01-20 14:38:43
【问题描述】：

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

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

【问题讨论】：

我认为您在构建自己的布局而不是使用底部导航视图方面走在正确的道路上，如果您在相对/线性方面遇到困难，您应该考虑使用约束布局以使其更容易
有一些接近你需要的东西，它是“底部应用栏”：material.io/components/app-bars-bottom#usage 之前朋友已经说过，如果你使用约束布局会更容易。如果选项和集中按钮视图，您可以为四个正方形创建水平链。这并不容易，因为您需要确保按钮不会在多种屏幕尺寸下与中间按钮重叠，但这可能是一个不错的起点。
是的，在转向线性布局之前，我一直在摆弄约束布局。我遇到的问题是使每个选项都统一大小。您可能会注意到，即使浮动添加按钮位于中间，环绕它的视图也具有统一的宽度。由于硬编码值使布局在不同设备中看起来不同，因此很难仅通过边距进行管理。我希望我可以放置一个锚定到浮动按钮的指南。那样的话事情会更容易。
@FilipeOliveira 虽然这是一个很好的建议，但由于我不能在我的项目中使用材质组件样式，所以应用栏看起来根本不像应用栏。

标签： java android android-layout android-custom-view android-xml

【解决方案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>

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

【讨论】：