AndroidUI设计及开发底部菜单

-.z.\【AndroidUI设计与开发】第09期：底部菜单栏（四）Fragment+PopupWindow仿QQ空间最新版底部菜单栏分类：AndroidUI设计与开发2013-06-0417:431996人阅读\o"举报"举报FragmentPopupWindowAndroid底部菜单栏高仿QQ空间请注明出处：/yangyu20121224/article/details/9023451

在今天的这篇文章当中，我依然会以实战加理论结合的方式教大家如何设计出自己觉得很炫的UI界面。好的，话不多说，进入正题。今天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主，实现的效果有：<1>实现了点击按钮时的切换图片效果；<2>实现了点击按钮时的切换界面效果；<3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切换效果；<4>实现了点击空白处和返回键按钮来关闭弹出菜单。有个地方需要注意的是，弹出菜单栏后，点击里面的选项按钮会导致中间的圆形按钮切换为普通状态，这是因为在实际的项目中，点击菜单选项按钮之后会进入别的界面，所以也就不存在点击了之后圆形的按钮切换为普通的状态效果了，所以这里也不需要太在意。为了实现效果，这里只适配了480*800hdpi的屏幕大小。一、效果图有图才有真相二、项目结构图三、代码详细编写1、主布局界面，activity_main.*ml：[html]viewplaincopyprint"<SPAN

style="FONT-SIZE:

12p*"><RelativeLayout

*mlns:android="schemas.android./apk/res/android"

*mlns:tools="schemas.android./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"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginBottom="6.0dip"

android:te*t="动态"

android:te*tColor="*ffffff"

android:te*tSize="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"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginBottom="6.0dip"

android:te*t="与我想关"

android:te*tColor="*ffffff"

android:te*tSize="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"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginBottom="6.0dip"

android:te*t="我的空间"

android:te*tColor="*ffffff"

android:te*tSize="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"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginBottom="6.0dip"

android:te*t="更多"

android:te*tColor="*ffffff"

android:te*tSize="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>

<RelativeLayout*mlns:android="schemas.android./apk/res/android"*mlns:tools="schemas.android./tools"android:layout_width="fill_parent"android:layout_height="fill_parent"><FrameLayoutandroid: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><FrameLayoutandroid: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"><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_marginTop="1dp"android:gravity="center_horizontal"><FrameLayoutandroid:id="+id/layout_friendfeed"android:layout_width="fill_parent"android:layout_height="48dp"android:layout_weight="1"android:background="drawable/tab_btn_background"><ImageViewandroid: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"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center"android:layout_marginBottom="6.0dip"android:te*t="动态"android:te*tColor="*ffffff"android:te*tSize="10sp"/></FrameLayout><FrameLayoutandroid:id="+id/layout_myfeed"android:layout_width="fill_parent"android:layout_height="48dp"android:layout_weight="1"android:background="drawable/tab_btn_background"><ImageViewandroid: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"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center"android:layout_marginBottom="6.0dip"android:te*t="与我想关"android:te*tColor="*ffffff"android:te*tSize="10sp"/></FrameLayout><FrameLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"></FrameLayout><FrameLayoutandroid:id="+id/layout_home"android:layout_width="fill_parent"android:layout_height="48dp"android:layout_weight="1"android:background="drawable/tab_btn_background"><ImageViewandroid: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"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center"android:layout_marginBottom="6.0dip"android:te*t="我的空间"android:te*tColor="*ffffff"android:te*tSize="10sp"/></FrameLayout><FrameLayoutandroid:id="+id/layout_more"android:layout_width="fill_parent"android:layout_height="48dp"android:layout_weight="1"android:background="drawable/tab_btn_background"><ImageViewandroid: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"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center"android:layout_marginBottom="6.0dip"android:te*t="更多"android:te*tColor="*ffffff"android:te*tSize="10sp"/></FrameLayout></LinearLayout></FrameLayout><ImageViewandroid: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"/><ImageViewandroid: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>我觉得这个布局界面是整个项目当中实现起来最复杂的地方，但是把思路理清楚了之后又觉得其实也没有则复杂，详细说一下我实现的步骤：

<1>最外层使用的是RelativeLayout，主要是为了容易摆放底部菜单栏的位置；

<2>然后是一个FrameLayout，主要用来存放显示Fragment的容，这里的ID取名为frame_content是用来替换Fragment对象的，在后面的代码中会用到；

<3>最下面的底部菜单栏中外层使用了FrameLayout，之所以使用FrameLayout是为了让底部菜单栏中间的按钮也可以摆放进来，实现一种叠加的效果；

<4>里面嵌套了LinearLayout，使用它是为了能够使用layout_weight属性，可以用来更好的摆放按钮，还可以实现自适应屏幕的效果（关于自适应屏幕的容后面会有专题详细讲解）

<5>最后里面又嵌套了一个FrameLayout，使用它可以很方便的实现图标在上文字在下的效果，最主要的原因是使用它可以很容易的再添加一个消息提醒的小图片（实际的开发中会用到，此项目中没有用到）2、弹出菜单的布局界面，popwindow_layout.*ml：[html]viewplaincopyprint"<SPAN

style="FONT-SIZE:

12p*"><"*ml

version="1.0"

encoding="utf-8"">

<RelativeLayout

*mlns:android="schemas.android./apk/res/android"

*mlns:tools="schemas.android./tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="drawable/popwindow_bg"

android:orientation="vertical"

tools:ignore="UselessParent"

>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="15dp"

android:orientation="horizontal"

>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:orientation="vertical"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="1.0dip"

android:src="drawable/popwindow_write_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="*ff000000"

android:shadowD*="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:te*t="说说"

android:te*tColor="*ffffffff"

android:te*tSize="13.0dip"

/>

</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:orientation="vertical"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="1.0dip"

android:src="drawable/popwindow_voice_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="*ff000000"

android:shadowD*="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:te*t="语音"

android:te*tColor="*ffffffff"

android:te*tSize="13.0dip"

/>

</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:orientation="vertical"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="1.0dip"

android:src="drawable/popwindow_camera_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="*ff000000"

android:shadowD*="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:te*t="照片"

android:te*tColor="*ffffffff"

android:te*tSize="13.0dip"

/>

</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:orientation="vertical"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="1.0dip"

android:src="drawable/popwindow_picture_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="*ff000000"

android:shadowD*="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:te*t="视频"

android:te*tColor="*ffffffff"

android:te*tSize="13.0dip"

/>

</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:orientation="vertical"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="1.0dip"

android:src="drawable/popwindow_sign_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="*ff000000"

android:shadowD*="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:te*t="签到"

android:te*tColor="*ffffffff"

android:te*tSize="13.0dip"

/>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</RelativeLayout></SPAN>

<"*mlversion="1.0"encoding="utf-8""><RelativeLayout*mlns:android="schemas.android./apk/res/android"*mlns:tools="schemas.android./tools"android:layout_width="fill_parent"android:layout_height="fill_parent"><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:background="drawable/popwindow_bg"android:orientation="vertical"tools:ignore="UselessParent"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="15dp"android:orientation="horizontal"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="1.0dip"android:src="drawable/popwindow_write_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="*ff000000"android:shadowD*="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:te*t="说说"android:te*tColor="*ffffffff"android:te*tSize="13.0dip"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="1.0dip"android:src="drawable/popwindow_voice_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="*ff000000"android:shadowD*="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:te*t="语音"android:te*tColor="*ffffffff"android:te*tSize="13.0dip"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="1.0dip"android:src="drawable/popwindow_camera_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="*ff000000"android:shadowD*="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:te*t="照片"android:te*tColor="*ffffffff"android:te*tSize="13.0dip"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="1.0dip"android:src="drawable/popwindow_picture_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="*ff000000"android:shadowD*="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:te*t="视频"android:te*tColor="*ffffffff"android:te*tSize="13.0dip"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="1.0dip"android:src="drawable/popwindow_sign_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="*ff000000"android:shadowD*="1.0"android:shadowDy="1.0"