Android UI设计与开发 底部菜单

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

在今天的这篇文章当中，我依然会以实战加理论结合的方式教大家如何设计出自己觉得很炫的UI界面。好的，话不多说，进入正题。今天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主，实现的效果有：<1>实现了点击按钮时的切换图片效果；<2>实现了点击按钮时的切换界面效果；<3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切换效果；<4>实现了点击空白处和返回键按钮来关闭弹出菜单。

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

有图才有真相二、项目结构图三、代码详细编写1、主布局界面，activity_main.xml：[html]\o"viewplain"viewplain\o"copy"copy\o"print"print\o"?"?<SPAN

style="FONT-SIZE:

12px"><RelativeLayout

xmlns:android="/apk/res/android"

xmlns:tools="/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>

<RelativeLayoutxmlns:android="/apk/res/android"xmlns:tools="/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"/><TextViewandroid: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><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"/><TextViewandroid: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><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"/><TextViewandroid: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><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"/><TextViewandroid: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><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.xml：[html]\o"viewplain"viewplain\o"copy"copy\o"print"print\o"?"?<SPAN

style="FONT-SIZE:

12px"><?xml

version="1.0"

encoding="utf-8"?>

<RelativeLayout

xmlns:android="/apk/res/android"

xmlns:tools="/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"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="#ff000000"

android:shadowDx="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:text="说说"

android:textColor="#ffffffff"

android:textSize="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"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="#ff000000"

android:shadowDx="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:text="语音"

android:textColor="#ffffffff"

android:textSize="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"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="#ff000000"

android:shadowDx="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:text="照片"

android:textColor="#ffffffff"

android:textSize="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"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="#ff000000"

android:shadowDx="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:text="视频"

android:textColor="#ffffffff"

android:textSize="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"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="#ff000000"

android:shadowDx="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:text="签到"

android:textColor="#ffffffff"

android:textSize="13.0dip"

/>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</RelativeLayout></SPAN>

<?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="/apk/res/android"xmlns:tools="/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"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="#ff000000"android:shadowDx="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:text="说说"android:textColor="#ffffffff"android:textSize="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"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="#ff000000"android:shadowDx="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:text="语音"android:textColor="#ffffffff"android:textSize="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"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="#ff000000"android:shadowDx="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:text="照片"android:textColor="#ffffffff"android:textSize="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"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="#ff000000"android:shadowDx="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"