滑动菜单方案之四：Fragment+PopupWindow仿QQ空间最新版底部菜单栏

<1>实现了点击按钮时的切换图片效果；

<2>实现了点击按钮时的切换界面效果；

<3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切换效果；

<4>实现了点击空白处和返回键按钮来关闭弹出菜单。

         有个地方需要注意的是，弹出菜单栏后，点击里面的选项按钮会导致中间的圆形按钮切换为普通状态，这是因为在实际的项目中，点击菜单选项按钮之后会进入别的界面，所以也就不存在点击了之后圆形的按钮切换为普通的状态效果了，所以这里也不需要太在意。为了实现效果，这里只适配了480x800 hdpi的屏幕大小。

一、效果图

有图才有真相

二、项目结构图

三、代码详细编写

1、主布局界面，activity_main.xml：

< span style = "font-size:12px;" >< 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 = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_above = "@+id/frameLayout1"
        android:layout_alignParentLeft = "true"
        android:layout_alignParentRight = "true"
        android:layout_alignParentTop = "true"
        android:background = "#ffffff" >
    </ FrameLayout >

    < FrameLayout
        android:id = "@+id/frameLayout1"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_alignParentBottom = "true"
        android:layout_alignParentLeft = "true"
        android:background = "@drawable/toolbar_bg_normal" >

        < LinearLayout
            android:layout_width = "fill_parent"
            android:layout_height = "fill_parent"
            android:layout_marginTop = "1dp"
            android:gravity = "center_horizontal" >

            < FrameLayout
                android:id = "@+id/layout_friendfeed"
                android:layout_width = "fill_parent"
                android:layout_height = "48dp"
                android:layout_weight = "1"
                android:background = "@drawable/tab_btn_background" >

                < ImageView
                    android:id = "@+id/image_friendfeed"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:layout_gravity = "top|center"
                    android:layout_marginTop = "1.0dip"
                    android:src = "@drawable/tab_friendfeed_btn" />

                < TextView
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:layout_gravity = "bottom|center"
                    android:layout_marginBottom = "6.0dip"
                    android:text = "动态"
                    android:textColor = "#ffffff"
                    android:textSize = "10sp" />
            </ FrameLayout >

            < FrameLayout
                android:id = "@+id/layout_myfeed"
                android:layout_width = "fill_parent"
                android:layout_height = "48dp"
                android:layout_weight = "1"
                android:background = "@drawable/tab_btn_background" >

                < ImageView
                    android:id = "@+id/image_myfeed"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:layout_gravity = "top|center"
                    android:layout_marginTop = "1.0dip"
                    android:src = "@drawable/tab_myfeed_btn" />

                < TextView
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:layout_gravity = "bottom|center"
                    android:layout_marginBottom = "6.0dip"
                    android:text = "与我想关"
                    android:textColor = "#ffffff"
                    android:textSize = "10sp" />
            </ FrameLayout >

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

            < FrameLayout
                android:id = "@+id/layout_home"
                android:layout_width = "fill_parent"
                android:layout_height = "48dp"
                android:layout_weight = "1"
                android:background = "@drawable/tab_btn_background" >

                < ImageView
                    android:id = "@+id/image_home"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:layout_gravity = "top|center"
                    android:layout_marginTop = "1.0dip"
                    android:src = "@drawable/tab_home_btn" />

                < TextView
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:layout_gravity = "bottom|center"
                    android:layout_marginBottom = "6.0dip"
                    android:text = "我的空间"
                    android:textColor = "#ffffff"
                    android:textSize = "10sp" />
            </ FrameLayout >

            < FrameLayout
                android:id = "@+id/layout_more"
                android:layout_width = "fill_parent"
                android:layout_height = "48dp"
                android:layout_weight = "1"
                android:background = "@drawable/tab_btn_background" >

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

                < TextView
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:layout_gravity = "bottom|center"
                    android:layout_marginBottom = "6.0dip"
                    android:text = "更多"
                    android:textColor = "#ffffff"
                    android:textSize = "10sp" />
            </ FrameLayout >
        </ LinearLayout >
    </ FrameLayout >

    < ImageView
        android:id = "@+id/toggle_btn"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_alignParentBottom = "true"
        android:layout_centerHorizontal = "true"
        android:src = "@drawable/toolbar_btn_normal" />

    < ImageView
        android:id = "@+id/plus_btn"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_alignTop = "@+id/frameLayout1"
        android:layout_centerHorizontal = "true"
        android:layout_marginTop = "6dip"
        android:src = "@drawable/toolbar_plus" />

</ RelativeLayout ></ span >

我觉得这个布局界面是整个项目当中实现起来最复杂的地方，但是把思路理清楚了之后又觉得其实也没有那么复杂，详细说一下我实现的步骤：

来源： csdn   作者：yangyu20121224