【Android UI设计与开发】6.底部菜单栏（三）使用Fragment+PopupWindow仿QQ空间最新版底部菜单栏

直接看栗子吧，效果基本实现，界面微调和弹窗的优化，去做的话会很耗时说，暂时就酱紫了。上传效果动态图太大了，直接手机截图的效果图如下：

 

至于代码的实现主要就是自定义的菜单栏，和用 PopupWindow 实现弹窗了。仔细看代码很好懂的。

1.主界面布局代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <FrameLayout
        android:id="@+id/frame_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/frameMenu"
        android:layout_alignParentTop="true" >
    </FrameLayout>

    <FrameLayout
        android:id="@+id/frameMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/skin_tabbar_bg"
            android:orientation="horizontal" >

            <!-- 动态 -->

            <FrameLayout
                android:id="@+id/layout_at"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_at"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_auth_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_auth"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>

            <!-- 与我相关 -->

            <FrameLayout
                android:id="@+id/layout_auth"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_auth"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_at_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_at"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>

            <!-- 留白 -->

            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >
            </FrameLayout>

            <!-- 我的空间 -->

            <FrameLayout
                android:id="@+id/layout_space"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_space"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_space_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_space"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>

            <!-- 玩吧 -->

            <FrameLayout
                android:id="@+id/layout_more"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_more"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_more_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_more"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="@android:color/black" >
        </LinearLayout>
    </FrameLayout>

    <!-- 中间按钮背景 -->

    <ImageView
        android:id="@+id/toggle_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignTop="@+id/frameMenu"
        android:layout_centerInParent="true"
        android:src="@drawable/skin_tabbar_btn" />

    <!-- 中间按钮 -->

    <ImageView
        android:id="@+id/plus_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignTop="@+id/frameMenu"
        android:layout_centerInParent="true"
        android:src="@drawable/skin_tabbar_icon_select" />

</RelativeLayout>

activity_main.xml