Android自定义View之实现流行的底部菜单栏中间突起：高仿“咸鱼APP”的底部菜单。

自定义View之实现流行的底部菜单栏中间突起：高仿“咸鱼APP”的底部菜单。

---

博主一份努力，转载请支持原创：http://blog.csdn.net/xh870189248/article/details/75808341

---

一、好奇心在作怪。

• 今天纳闷地看了看咸鱼，看见其底部的菜单栏效果还不错，中间那个按钮是凸起来的！

---

---

• 再看看我撸的界面：

---

---

2、何谓重要的属性 android:clipChildren=”false”。

• 上网查询 ，该属性解释为，可以允许其子控件超过父控件，于是乎，按照一般的想法，都是以下的代码，但是发现中间那个按钮有点缺陷的！

---

---

• 但是，我们把这个 android:clipChildren=”false” 代码撸上之后，就下图了，是不是很神秘！

---

---

3、完整的代码。

---

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false">

    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/dd"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_tab_home_normal" />

            <TextView
                android:padding="2dp"
                android:textSize="10sp"
                android:layout_centerInParent="true"
                android:text="首页"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd"/>

        RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/dd2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_tab_var_normal" />
            <TextView
                android:padding="2dp"
                android:textSize="10sp"
                android:layout_centerInParent="true"
                android:text="鱼塘"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd2"/>

        RelativeLayout>

        <RelativeLayout
            android:layout_width="100dp"
            android:layout_height="90dp"
            android:layout_gravity="bottom">

            <ImageView
                android:id="@+id/dd5"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_tab_add" />
            <TextView
                android:padding="2dp"
                android:textSize="10sp"
                android:layout_centerInParent="true"
                android:text="添加"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd5"/>

        RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/dd3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/ici_tab_scence_normal" />
            <TextView
                android:padding="2dp"
                android:textSize="10sp"
                android:layout_centerInParent="true"
                android:text="消息"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd3"/>

        RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/dd4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_tab_mine_normal" />
            <TextView
                android:padding="2dp"
                android:textSize="10sp"
                android:layout_centerInParent="true"
                android:text="我的"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd4"/>

        RelativeLayout>>

    LinearLayout>

RelativeLayout>

---

• 后期还会显示该APP的弹出效果，如下：

---

---

• 敬请期待~