版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
AndroidUI设计与开发底部菜单AndroidUI设计与开发底部菜单/NUMPAGES87AndroidUI设计与开发底部菜单AndroidUI设计与开发底部菜单
【AndroidUI设计与开发】第09期：底部菜单栏（四）Fragment+PopupWindow仿QQ空间最新版底部菜单栏
\分类：AndroidUI设计与开发2013-06-0417:431996人阅读评论(30)\o"收藏"收藏举报FragmentPopupWindowAndroid底部菜单栏高仿QQ空间转载请注明出处：
在今天的这篇文章当中，我依然会以实战加理论结合的方式教大家如何设计出自己觉得很炫的UI界面。好的，话不多说，进入正题。今天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主，实现的效果有：<1>实现了点击按钮时的切换图片效果；<2>实现了点击按钮时的切换界面效果；<3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切换效果；<4>实现了点击空白处和返回键按钮来关闭弹出菜单。
有个地方需要注意的是，弹出菜单栏后，点击里面的选项按钮会导致中间的圆形按钮切换为普通状态，这是因为在实际的项目中，点击菜单选项按钮之后会进入别的界面，所以也就不存在点击了之后圆形的按钮切换为普通的状态效果了，所以这里也不需要太在意。为了实现效果，这里只适配了480x800hdpi的屏幕大小。一、效果图
有图才有真相二、项目结构图三、代码详细编写1、主布局界面，activity_main.xml：[html]viewplaincopyprint?
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>
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]viewplaincopyprint?<SPAN
style="FONT-SIZE:
12px"><?xml
version="1.0"
encoding="utf-8"?>
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"?>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"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_sign_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></Li
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 深度解析(2026)《GBT 524-2007平型传动带》：技术演进、市场应用与未来行业战略指南
- 暗盒生产工安全意识模拟考核试卷含答案
- 锅炉卷板工岗前复试考核试卷含答案
- 家畜饲养员安全意识模拟考核试卷含答案
- 木材保护与改性处理工安全实操水平考核试卷含答案
- 气烧立窑石灰煅烧工冲突管理竞赛考核试卷含答案
- 糖汁过滤工安全知识能力考核试卷含答案
- 木材加工厂木材干燥技术规范
- 汽车零部件装配作业准则
- 沈阳地区健康体检女性HPV感染现状、影响因素及防治策略探究
- 水利水电工程单元工程施工质量检验表与验收表（SLT631.5-2025）
- 2025年教学设计试题及答案解析
- 2024国控私募基金笔试真题及答案解析完整版
- 安徽省江南十校2026届高三下学期3月综合素质检测语文试题及答案
- 安全主管竞聘演讲
- 公司内部信件回复制度
- GB/T 32350.1-2025轨道交通绝缘配合第1部分：基本要求电工电子设备的电气间隙和爬电距离
- 水电站财务制度范本
- 蜜本南瓜种植技术
- 白酒质量安全监管课件
- 全面质量管理培训课件
评论
0/150
提交评论