Android UI设计与开发 底部菜单

合集下载

使用Android的Layout Editor设计Android用户界面

使用Android的Layout Editor设计Android用户界面

使用Android的Layout Editor设计Android用户界面在当今移动应用开发领域,Android操作系统占据着重要的地位。

而在Android 应用的设计中,用户界面起着至关重要的作用。

一个优秀的用户界面能够提供良好的用户体验,使得用户能够轻松地使用应用程序,并且感到舒适和满意。

而为了方便开发者设计出符合用户期望的用户界面,Android提供了Layout Editor的工具。

Layout Editor是Android Studio的一个重要组件,它允许开发者通过可视化的方式设计和编辑Android应用的用户界面。

使用Layout Editor,开发者可以轻松地拖拽组件、调整它们的位置和大小以及编辑它们的属性。

这样一来,即使对于没有设计经验的开发者来说,也可以快速地创建出令人满意的用户界面。

使用Layout Editor设计用户界面的第一步是创建一个新的布局文件。

在Android Studio中,可以通过选择"New"->"XML"->"Layout XML"来创建一个新的布局文件。

接着,Layout Editor会自动打开,并展示一个空的用户界面画布。

在画布上,开发者可以开始绘制应用程序的用户界面。

首先,可以通过左侧的组件面板,选择要添加到界面中的组件。

常见的组件包括按钮、文本框、图片等等。

在选择组件后,只需要简单地在画布上拖拽一下,组件就会自动添加到界面中。

一旦组件添加到界面中,开发者可以通过点击它们来进行编辑。

在弹出的属性编辑器中,可以为组件设置各种属性,比如宽度、高度、字体大小、颜色等等。

这样一来,开发者可以根据应用程序的需求来定制每个组件的外观和行为。

在Layout Editor中,还有一些常用的功能可以帮助开发者更好地设计用户界面。

例如,布局管理器可以帮助开发者更好地控制组件的位置和排列方式。

通过选择不同的布局管理器,开发者可以实现不同的布局风格,比如线性布局、相对布局和网格布局等等。

安卓ui规范

安卓ui规范

安卓ui规范安卓UI规范旨在为开发者提供一套统一且一致的设计规范,确保用户在不同应用中能够获得相似的界面和交互体验。

本文将介绍一些常见的安卓UI规范,包括布局、颜色、字体、图标、按钮等。

一、布局规范:1. 使用LinearLayout、RelativeLayout或ConstraintLayout等布局管理器,确保界面能够适应不同屏幕尺寸和方向。

2. 使用间距和对齐等属性来调整视图之间的间隔和位置,使布局更加整齐和统一。

二、颜色规范:1. 使用Material Design中的颜色,确保界面与其他应用一致。

2. 避免使用过多的颜色,保持简洁和一致性。

3. 使用透明度来突出重要或活动状态的元素,而不是改变颜色本身。

三、字体规范:1. 使用Roboto字体作为默认字体,确保文字的清晰和可读性。

2. 使用不同的字体大小和样式来区分标题、正文和按钮等不同类型的文字。

3. 避免使用过大或过小的字体,保持合适的尺寸。

四、图标规范:1. 使用矢量图标,以适应不同屏幕密度和分辨率。

2. 使用Material Design中的图标,以确保与其他应用保持一致。

3. 避免使用过多或过大的图标,保持简洁和可读性。

五、按钮规范:1. 使用标准尺寸的按钮,以便用户轻松点击。

2. 使用合适的颜色和字体来突出按钮,以增加点击的可视性。

3. 使用Ripple效果来提供点击反馈,以增加用户的操作信心。

六、导航规范:1. 使用底部导航栏或侧滑菜单来提供主要导航功能,确保用户能够轻松访问不同的界面。

2. 使用导航图标或标签来区分不同的导航选项,以增加用户的可识性。

3. 避免过多的导航选项,以保持界面的简洁和清晰。

七、交互规范:1. 使用动画和过渡效果来提高用户界面的可见性和可理解性。

2. 使用Toast、Snackbar等提示工具来向用户提供操作结果和反馈。

3. 避免过多的弹窗和询问,以减少用户的操作疲劳。

总结:通过遵循安卓UI规范,开发者可以创建出一致和易用的应用界面,提高用户的满意度和体验。

如何使用Android Studio进行布局设计和界面编写(十)

如何使用Android Studio进行布局设计和界面编写(十)

如何使用Android Studio进行布局设计和界面编写Android Studio是一款专门用于Android应用开发的集成开发环境(IDE),它提供了许多强大的工具和功能,使开发者可以更轻松地设计应用程序的布局和界面。

本文将介绍如何使用Android Studio进行布局设计和界面编写的步骤和技巧。

一、创建新的布局文件在Android Studio中,可以使用XML文件来定义应用程序的布局。

首先,我们需要创建一个新的布局文件。

在项目视图中,右键单击“res”文件夹,选择“New” -> “Android resource file”。

在弹出的对话框中,填写文件名和文件类型(在这里我们选择“layout”类型),然后点击确定。

二、使用布局编辑器进行设计创建好布局文件后,我们可以使用布局编辑器来设计应用程序的界面。

点击“Design”选项卡,即可进入布局编辑模式。

接下来,我们将介绍布局编辑器中的一些常用功能。

1. 布局容器布局容器用于定义和管理界面上的视图组件的排列方式。

Android Studio提供了各种类型的布局容器,如线性布局(LinearLayout)、相对布局(RelativeLayout)和帧布局(FrameLayout)等。

通过拖拽和调整组件的位置和大小,我们可以在布局容器中创建所需的布局结构。

2. 视图组件视图组件是应用程序界面的基本单元,如按钮、文本框和图片等。

在布局编辑器中,我们可以从左侧的“Palette”面板中选择不同类型的视图组件,并在布局容器中进行布局设置。

3. 属性面板属性面板用于编辑和设置视图组件的属性。

在布局编辑器中,选中一个视图组件后,右侧的属性面板将显示该组件的属性列表。

我们可以通过修改属性值,调整组件的外观和行为。

三、编写界面逻辑和事件处理设计好界面的布局后,我们需要为视图组件添加逻辑和事件处理。

在Android Studio中,可以通过编写Java代码来实现这些功能。

《2024年Android手机界面管理系统的设计与实现》范文

《2024年Android手机界面管理系统的设计与实现》范文

《Android手机界面管理系统的设计与实现》篇一一、引言随着移动互联网的飞速发展,Android手机作为一款便携式智能设备,其用户界面(UI)管理系统的重要性日益凸显。

为了满足用户日益增长的使用需求,提高用户体验,本文将详细介绍Android手机界面管理系统的设计与实现过程。

二、系统需求分析1. 用户需求:Android手机界面管理系统应具备高效、易用、美观的特点,能够满足用户对手机界面的个性化定制需求。

2. 功能需求:系统应支持界面元素的添加、删除、修改等操作,支持界面主题的切换与定制,同时具备兼容性,可适配不同型号的Android手机。

三、系统设计1. 系统架构设计:采用分层架构设计,包括数据层、业务逻辑层和表示层。

数据层负责数据的存储与访问,业务逻辑层负责处理业务逻辑,表示层负责用户界面的展示。

2. 界面设计:遵循Android系统设计规范,采用扁平化设计风格,提供丰富的界面元素供用户选择与定制。

3. 主题定制:支持用户自定义主题,包括颜色、字体、图标等,以满足用户的个性化需求。

四、系统实现1. 数据层实现:采用SQLite数据库存储用户界面数据和主题数据,提供数据访问接口供业务逻辑层调用。

2. 业务逻辑层实现:负责处理用户界面管理相关的业务逻辑,如界面元素的添加、删除、修改等操作,以及主题的切换与定制。

3. 表示层实现:采用Android开发技术栈,包括Java语言和XML布局文件,实现用户界面的展示。

同时,利用Android提供的API实现界面元素的动态添加与修改。

五、系统功能实现细节1. 界面元素管理:通过自定义的View类或布局文件实现界面元素的管理,包括按钮、文本框、图片等。

系统支持动态添加、删除和修改界面元素,以满足用户的个性化需求。

2. 主题定制功能:提供丰富的主题颜色、字体和图标供用户选择与定制。

用户可在系统设置中切换主题,同时保存用户的个性化设置。

3. 兼容性设计:考虑不同型号的Android手机屏幕尺寸和分辨率差异,采用自适应布局技术,确保系统在不同设备上都能良好地运行。

Android开发中的通知栏和后台任务管理技术(一)

Android开发中的通知栏和后台任务管理技术(一)

Android开发中的通知栏和后台任务管理技术在Android应用开发中,通知栏和后台任务管理技术是非常重要的组成部分。

通知栏可以帮助用户及时获取应用的相关信息,并保持应用在后台运行;后台任务管理技术则可以提高应用的性能和用户体验。

本文将针对这两种技术进行详细的探讨与论述。

一、通知栏的作用和使用通知栏是Android系统中一种重要的用户界面组件,它可以在手机的状态栏中显示应用的相关信息,比如新消息、更新通知、定时提醒等。

通过通知栏,应用可以及时向用户传递重要的消息,让用户能够在任何时候都能够得知应用的最新动态。

在Android应用开发中,我们可以通过NotificationManager类来创建和管理通知栏。

首先,我们需要创建一个Notification对象,并设置相关的属性,比如图标、标题、内容等。

然后,将该Notification对象通过NotificationManager的notify方法发送到系统,系统会将该通知显示在手机的状态栏中。

用户可以通过下拉状态栏查看通知的详细内容,或者通过点击通知跳转到应用的相关页面。

除了基本的通知功能外,Android还提供了一些其他的通知功能,比如进度条通知、BigTextStyle通知等。

这些功能可以帮助应用更好地向用户展示信息,并提升用户的体验。

二、后台任务管理技术的重要性在Android应用开发中,后台任务管理技术是非常重要的一部分。

在应用运行的过程中,可能存在一些需要在后台执行的任务,比如网络数据的下载、数据的同步等。

如果这些任务都在主线程中执行,会导致应用的响应速度变慢,用户体验较差。

因此,合理利用后台任务管理技术可以提高应用的性能和用户体验。

Android提供了AsyncTask和IntentService两种常用的后台任务管理技术。

1. AsyncTaskAsyncTask是Android中用于在后台执行一些短时间耗时的任务的类。

它可以在后台线程中执行任务,并将执行结果返回到UI线程。

如何使用Android Studio进行布局设计和界面编写(二)

如何使用Android Studio进行布局设计和界面编写(二)

I. 简介在移动应用开发中,界面设计与布局是非常重要的环节。

使用Android Studio作为开发工具,可以轻松实现布局设计和界面编写。

本文将介绍如何使用Android Studio进行布局设计和界面编写的一些基本步骤和技巧。

II. 安装和设置首先,确保你已经在计算机上成功安装了Android Studio。

安装完成后,打开Android Studio,并选择新建项目。

接下来,选择适合你项目的最低API级别和目标API级别。

一般情况下,选择较高的最低API级别可以兼容更多的设备。

III. 布局设计在Android Studio中,布局设计使用的是XML语言来描述界面的结构和样式。

最常用的布局类型是LinearLayout和RelativeLayout,它们可以实现不同的屏幕布局。

布局文件可以通过拖拽和预览的方式进行设计。

1. 创建布局文件在项目的res目录下找到layout文件夹,右键点击选择“New -> Layout resource file”,然后命名文件并选择布局类型。

创建完成后,就可以在布局文件中添加和编辑各种视图组件。

2. 添加组件在布局文件中,可以通过在XML中添加组件来构建界面。

例如,可以使用TextView显示文本内容,使用Button添加按钮操作,使用ImageView显示图像等。

在XML中为每个组件设置ID和属性,以定义其在界面布局中的样式和位置。

3. 约束布局Android Studio还支持约束布局,它可以更灵活地定位和调整视图组件的位置。

通过拖拽和连接各个视图组件之间的边界和约束,可以进行更自由的布局。

约束布局的使用需要一些练习和对视图关系的理解。

IV. 界面编写在完成布局设计后,需要对界面进行编写,即为各个组件添加相应的功能和逻辑。

界面编写主要使用Java语言来实现。

1. 创建活动在项目的Java目录下,找到包名,右键点击选择“New -> Activity -> Empty Activity”,然后命名新的活动。

Android UI设计指南

Android UI设计指南

会取代你的启动器图标。 如何更容易的将高精度图标缩放到 512*512 的提示和建议, 在设计师建议章 节中有讲。 对于高精度的应用程序图标,在 Android Market 的信息和规格,请参阅下面 的文章: 应用程序图形资源(Android Marker 帮助说明) � Android2.0 以后版本
高精度屏幕的启动图标尺寸: 外框:72x72px 图标:60x60px 方形图标:56x56px 中精度屏幕的启动图标尺寸: 外框:48x48px 图标:40x40px 方形图标:38x38px 低精度屏幕启动图标尺寸: 外框:36x36px 图标:30x30px 方形图标:28x28px
材质和颜色 启动图标要有触感、明亮和有质感的材质,即使图标只是简单的形状,但也要尝试一些 取之于现实世界的材质来表现。 Android 启动图标通常由一个大的基本形状,一个中立和主色调组成的较小的形状。图 标可能使用一个保持有相当对比度的中性色。 如果可能的话, 每个图标不使用一个以上的主 色。 图标应该使用包括一系列暗淡的和基本的的色调。不能用太饱和的色调。 启动图标推荐使用的色调如图 3,你可以从中选择元素的基础色和高亮色。也可以使用
24w x 38h px (preferred, width may vary)
状态栏图标 (Android 2.2 及之前版本 )
19 x 19 px
25 x 25 px
38 x 38 px
Tab 图标
24 x 24 px
32 x 32 px
48 x 48 px
对话图标
24 x 24 px
32 x 32 px
Android UI 设计指南(自译) 一、图标设计指南
创建一个统一的外观和整体的用户界面效果以增加产品的价值, 精简的图形样式还能让 用户觉得 UI 更专业。 本文提供的信息能帮助你为应用的用户界面的各个部分创建的图标与 Android2.X 框架 的一般样式相匹配。以下的指南将帮助你创建一个完美而且统一的用户体验。 下面文档讨论关于 Android 应用程序常见类型图标的使用详细指南: 启动图标 启动图标是您的应用程序在设备的主界面和启动窗口的图形表现。 菜单图标 菜单图标是当用户按菜单按钮时放置于选项菜单中展示给用户的图形元素。 状态栏图标 状态栏图标用于应用程序在状态栏中的通知。 Tab 图标 Tab 图标用来表示在一个多选项卡界面的各个选项的图形元素。 对话框图标 对话框图标是在弹出框中显示,增加互动性。 列表视图图标 使用列表视图图标是用图形表示列表项,比如说设置这个程序。 想更快的创建你的图标,可以导向 Android 图标模板包。

Android实验报告—UI设计

Android实验报告—UI设计

Android UI设计实验目的:本实验的目的是使学生深入了解Android程序框架结构、了解和掌握Android 界面设计和界面编程。

通过程序设计,掌握常用界面控件、菜单、以及界面事件的响应。

实验要求:设计程序实现一个电子菜单,应具有显示菜单功能和选菜功能。

通过选择,将选中的菜单选项在界面做显示,如下图:[实现提示]1、建立Android工程,其中工程名称:MenuSelect579应用名称:MenuSelect579包名称:.bistu.dj1001. MenuSelect579Activity名称:MenuSelect5792、工程建立完毕后,进行相应界面设计,再编写Java文件程序源码package .bistu.dj1001.MenuSelect579;import android.app.Activity;import android.os.Bundle;import android.view.ContextMenu;import android.view.ContextMenu.ContextMenuInfo; import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.TextView;public class MenuSelect579 extends Activity {/** Called when the activity is first created. */TextView LabelView = null;public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);setContentView(yout.main);LabelView = (TextView)findViewById(bel);registerForContextMenu(LabelView);}final static int CONTEXT_MENU_1 = Menu.FIRST;final static int CONTEXT_MENU_2 = Menu.FIRST+1;final static int CONTEXT_MENU_3 = Menu.FIRST+2;@Overridepublic void onCreateContextMenu(ContextMenu menu, View v,ContextMenuInfo menuInfo){menu.setHeaderTitle("今日菜单");menu.add(0, CONTEXT_MENU_1, 0,"宫保鸡丁");menu.add(0, CONTEXT_MENU_2, 1,"干煸豆角");menu.add(0, CONTEXT_MENU_3, 2,"鱼香肉丝");}@Overridepublic boolean onContextItemSelected(MenuItem item){ switch(item.getItemId()){case CONTEXT_MENU_1:LabelView.setText("宫保鸡丁");return true;case CONTEXT_MENU_2:LabelView.setText("干煸豆角");return true;case CONTEXT_MENU_3:LabelView.setText("鱼香肉丝");return true;}return false;}}程序运行结果:实验心得体会:(可选)通过本次实验熟悉了android的界面设计简单方法和界面编程,锻炼了实际动手能力,熟悉了Android程序框架结构、Android界面设通过程序设计,掌握了常用界面控件、菜单、以及界面事件的响应。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

\【Android UI设计与开发】第09期:底部菜单栏(四)Fragment+PopupWindow仿QQ 空间最新版底部菜单栏分类:Android UI设计与开发2013-06-04 17:43 1996人阅读评论(30) 收藏举报FragmentPopupWindowAndroid底部菜单栏高仿QQ空间转载请注明出处:/yangyu20121224/article/details/9023451在今天的这篇文章当中,我依然会以实战加理论结合的方式教大家如何设计出自己觉得很炫的UI界面。

好的,话不多说,进入正题。

今天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主,实现的效果有:<1>实现了点击按钮时的切换图片效果;<2>实现了点击按钮时的切换界面效果;<3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切换效果;<4>实现了点击空白处和返回键按钮来关闭弹出菜单。

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

为了实现效果,这里只适配了480x800 hdpi的屏幕大小。

一、效果图有图才有真相二、项目结构图三、代码详细编写1、主布局界面,activity_main.xml:[html] view plaincopyprint?<SPAN style="FONT-SIZE: 12px"><RelativeLayout xmlns:android="/ap k/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></SPAN><RelativeLayout xmlns: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] view plaincopyprint?<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" ><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></LinearLayout></LinearLayout></RelativeLayout></SPAN><?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" ><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></LinearLayout></LinearLayout></RelativeLayout>3、其中一个Fragment布局页面,fragment_1.xml:[html] view plaincopyprint?<SPAN style="FONT-SIZE: 12px"><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent" ><ImageViewandroid:id="@+id/imageview"android:layout_width="fill_parent"android:layout_height="fill_parent"android:scaleType="fitCenter"android:src="@drawable/xianjian01" ></ImageView></LinearLayout></SPAN><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent" ><ImageViewandroid:id="@+id/imageview"android:layout_width="fill_parent"android:layout_height="fill_parent"android:scaleType="fitCenter"android:src="@drawable/xianjian01" ></ImageView></LinearLayout>4、自定义按钮的资源文件,由于比较简单,就列出其中一个,tab_friendfeed_btn.xml:[html] view plaincopyprint?<SPAN style="FONT-SIZE: 12px"><?xml version="1.0" encoding="utf-8"?><selector xmlns:android="/apk/res/android"><item android:drawable="@drawable/toolbar_friendfeed_pressed" android:state_selected="tr ue"/><item android:drawable="@drawable/toolbar_friendfeed_normal"/></selector></SPAN><?xml version="1.0" encoding="utf-8"?><selector xmlns:android="/apk/res/android"><item android:drawable="@drawable/toolbar_friendfeed_pressed"android:state_selected="true"/><item android:drawable="@drawable/toolbar_friendfeed_normal"/></selector>5、主Activity界面,MainActivity.java:[java] view plaincopyprint?<SPAN style="FONT-SIZE: 12px">package com.yangyu.mycustomtab03;import android.content.Context;import android.graphics.drawable.BitmapDrawable;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentTransaction;import android.view.Gravity;import youtInflater;import android.view.MotionEvent;import android.view.View;import android.view.View.OnClickListener;import android.view.View.OnTouchListener;import android.widget.FrameLayout;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.PopupWindow;import android.widget.PopupWindow.OnDismissListener;public class MainActivity extends FragmentActivity implements OnClickListener{ //定义Fragment页面private FragmentPage1 fragmentPage1;private FragmentPage2 fragmentPage2;private FragmentPage3 fragmentPage3;private FragmentPage4 fragmentPage4;//定义布局对象private FrameLayout friendfeedFl,myfeedFl,homeFl,moreFl;//定义图片组件对象private ImageView friendfeedIv,myfeedIv,homeIv,moreIv;//定义按钮图片组件private ImageView toggleImageView,plusImageView;//定义PopupWindowprivate PopupWindow popWindow;。

相关文档
最新文档