设计自定义导航栏

Question

目前，我正在尝试使一个自定义导航栏，如给出的图像。

​

​

我创建这个导航栏的代码现在看起来像这样：

<?xml version="1.0" encoding="utf-8"?>


<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav"
    android:layout_width="match_parent"
    android:layout_height="110dp"
    android:background="@android:color/transparent"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:alpha="0.8"
        android:background="#0089BA"
        app:layout_constraintBottom_toBottomOf="@+id/linearLayout3"
        app:layout_constraintEnd_toEndOf="parent"></View>


    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="match_parent"
        android:layout_height="110dp"
        android:background="@android:color/transparent"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/floatingActionButton"
                android:layout_width="100dp"
                android:layout_height="70"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:clickable="true"
                app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#0089BA"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/home_img"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/googleg_standard_color_18" />

            <ImageView
                android:id="@+id/home_img2"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/googleg_standard_color_18" />

            <ImageView
                android:id="@+id/home_img3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/googleg_standard_color_18" />

            <ImageView
                android:id="@+id/home_img4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/googleg_standard_color_18" />
        </LinearLayout>

    </LinearLayout>


</android.support.constraint.ConstraintLayout>

但是因为我真的不擅长用xml进行设计，所以我希望能得到一些帮助。如何实现这种设计，以及如何更好地使用xml进行设计？Color:#0089BA透明度: 80 %我正在使用相同的谷歌图标来测试这个设计。

Answer 1

我推荐使用底部导航视图。声明该对象将如下所示

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_gravity="start"
    android:layout_alignParentBottom="true"
    android:background="@android:color/white"
    app:elevation="16dp"
    app:menu="@menu/bottom_navigation_main" /> 

和bottom_navigation_main：

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_1"
        android:enabled="true"
        android:icon="@drawable/someImage"
        android:title="@string/tab1_title"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_1"
        android:enabled="true"
        android:icon="@drawable/someImage"
        android:title="@string/tab2_title"
        app:showAsAction="ifRoom" />
</menu>