Question

我正在尝试设计底栏，其中包含5个项目，其中有3个文本视图，2个微调器位于底栏。但是，我无法调整相同的设计 - 请查看图像。

第一张图片是我想要的方式，第二张图片是我得到的。另一个问题是我在某些设备的过滤器右侧有空间。

这是我的布局设计

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/checkindate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/calender"
        android:text="CHECK IN DATE"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#fff" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:background="#30000000" />


    <TextView
        android:id="@+id/checkintime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/timer"
        android:text="CHECK IN TIME"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#fff" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:background="#30000000" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/hrs"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/clock" />

        <Spinner
            android:id="@+id/hrspinner"
            android:layout_width="wrap_content"
            android:layout_height="20dp" />
    </LinearLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:background="#30000000" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/rooms"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/roomshr" />

        <Spinner
            android:id="@+id/roomspinner"
            android:layout_width="wrap_content"
            android:layout_height="20dp" />
    </LinearLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:background="#30000000" />

    <TextView
        android:id="@+id/filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/filterr"
        android:text="FILTER"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#fff" />

</LinearLayout>

Answer 1

这是一个糟糕的设计。底部导航应该用于屏幕更改。这里有一些图书馆 https://github.com/aurelhubert/ahbottomnavigation

这里是google的设计文档 https://material.google.com/components/bottom-navigation.html#

在我看来，过滤器最好放在ToolBar或ActionBar上。

编辑：

如果你想要实现相同的设计，首先你需要使文字更小。第二个微调器项不应该是真正的微调器。只需用三角形图标制作文字。按下它时显示自定义视图，其中包含工具栏上方的项目

底部栏中的微调器

1 个答案: