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

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

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

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

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

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

一、效果图

有图才有真相

二、项目结构图

三、代码详细编写

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

双击代码全选

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156

< 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