《Android 用户界面设计课件》由会员分享,可在线阅读,更多相关《Android 用户界面设计课件(52页珍藏版)》请在金锄头文库上搜索。
1、智能手机应用开发,based on android 2011.7,内容包括:,1、Android 平台概述 2、搭建 Android 开发环境 3、第一个 Android 应用程序 4、Android 用户界面设计 5、Activity、Intent、Service、Broadcast Receiver 6、Android 中的数据存取 7、Android 的多媒体应用 8、应用实例:a、b、c、d,课程结构,开放手机联盟(OHA) Android 平台综述: 平台介绍、开发者社区 开发环境: 构建 Android 开发环境 应用程序: 应用程序结构 典型应用: 用户界面、图形编程 数据存取、
2、网络连接 硬件访问,获取 Android 资料的途径, 下载 sdk 等相关软件 查看文档、在线帮助 开发社区 需要代理才能访问或者需要 gmail 账号 news、sdk 下载 开发 FAQ、源码下载、移植,4、Android 用户界面设计,on android,User Interface:用户界面,UI 布局管理、事件响应机制:Java 的 UI 设计思想 布局管理 Layout 事件响应 Listener 图标 Icon 菜单 Menu 对话 Dialog 提示 Toast 风格和主题 定制组件 Widget,User Interface:用户界面,UI 布局管理、事件响应机制:Jav
3、a 的 UI 设计思想 布局管理 Layout 事件响应 Listener 图标 Icon 菜单 Menu 对话 Dialog 提示 Toast 风格和主题 定制组件 Widget,UI:布局管理 Layout,所有 UI 类均源于 View、ViewGroup, View 的子类称为组件(Widget), ViewGroup 的子类称为布局(Layout) ViewGroup 通过各种 Layout,控制所属 View 的显示位置,形成图示的组合设计 模式(Composite):,UI:布局管理 Layout,Layout:组件在 Activity 中的呈现方式即为”布局”, 布局中需要描述
4、组件的大小、间距、对齐方式等 Layout 的创建: 首先将需要呈现的组件在 xml 配置文件中进行声明 然后在程序中通过 setContentView(View) 方法将视图呈现在 Activity 中 最后在程序中通过 findViewById(Id) 方法获得各组件实例,UI:Layout 的种类,LinearLayout FrameLayout TableLayout RelativeLayout AbsoluteLayout ListLayout RadioGroup GridView ,实例:,TextView、Button、 ImageView 等各个组件按线性布局垂直摆放,线性
5、布局 LinearLayout,UI:LinearLayout,线性布局 LinearLayout 方向:android:orientation=vertical android:orientation=horizontal 对齐:android:gravity=top (bottom/left/right) 大小:android:layout_width=wrap_content android:layout_width=fill_parent ,UI:FrameLayout,从屏幕左上角 (0,0) 坐标开始布局 所有组件都钉到屏幕的左上角 不能为组件指定位置,所有组件均在 (0,0) 坐
6、标放置 多个组件层叠排序,后面的组件覆盖前面的组件,UI:TableLayout,以行、列表格的形式布局各组件 使用 TableRow 对象来定义多行 单元格不能横跨行 不显示行、列或是单元格边界线,UI:AbsoluteLayout,需明确指明各组件确切的屏幕坐标(X,Y) (0,0) 为左上角,组件下移或右移时,坐标值增加 注意: 通常不建议使用 AbsoluteLayout,因为绝对布局在不同尺寸和分辨率的设备显示中不能很好地工作 Android 2.0 API 文档中标示该布局已过时,UI:RelativeLayout,指明各组件相对于其他组件(通过 Id)或相对于父布局对象的位置,跟
7、 AbsoluteLayout 相反 在 RelativeLayout 布局里的各控件具备多种排列属性: Layout above:控件在指定控件的上方 Layout below:控件在指定控件的下方 Layout to left of 使用 RelativeLayout 布局的时候,程序运行时应尽量不去更改各组件的相对布局,以免组件间布局冲突,User Interface:用户界面,UI 布局管理、事件响应机制:Java 的 UI 设计思想 布局管理 Layout 事件响应 Listener 图标 Icon 菜单 Menu 对话 Dialog 提示 Toast 风格和主题 定制组件 Widg
8、et,UI:事件处理机制,延用了 Java 的事件处理机制,Android 中事件处理同样包括三个部分: 事件源:产生事件的组件、硬件、资源等 事件:单击事件、按键事件等 事件监听器:Listener,用于监听事件的发生,UI:Listener,常用的事件处理方法: OnClickListener() OnFocusChangeListener(),button0=(Button)findViewById(R.id.button0); button0.setOnClickListener(new View.OnClickListener() Override public void onCli
9、ck(View v) / TODO Auto-generated method stub Intent intent=new Intent(MainActivity.this, Common_Widget_Test.class); startActivity(intent); );,User Interface:用户界面,UI 布局管理、事件响应机制:Java 的 UI 设计思想 布局管理 Layout 事件响应 Listener 图标 Icon 菜单 Menu 对话 Dialog 提示 Toast 风格和主题 定制组件 Widget,UI:关于 Icon,应用程序需要各种各样的图标:icon
10、 文件 icons 要有多样化的形状和样式,但又要形成统一的视觉风格,其尺寸和定位也需要统一: 红色边框为图标尺寸 蓝色边框是图形尺寸,比图标尺寸稍小,图形之外的空间用于显示阴影和特殊效果 橙色边框是另外一种图形尺寸。两种类型的图形尺寸可以达到统一的视觉权重,UI:Icon 的风格,符合当下的流行趋势,避免过度使用隐喻 高度简化和夸张,小尺寸图标也能易于识别,不宜太复杂 尝试抓住程序的主要特征,比如音像作为音乐的 icon 使用自然的轮廓和形状,看起来几何化和有机化,不失真实感。 采用前视角,几乎没有透视,光源在顶部。 不光滑但富有质感。,User Interface:用户界面,UI 布局管理
11、、事件响应机制:Java 的 UI 设计思想 布局管理 Layout 事件响应 Listener 图标 Icon 菜单 Menu 对话 Dialog 提示 Toast 风格和主题 定制组件 Widget,UI:关于 Menu,Android 系统提供三种菜单: options menu(选项菜单)通过点击 MENU 键来显示 context menu(上下文菜单)在某 View 上长按 2s 后显示 sub menu(子菜单)显示为浮动列表,在以上两种菜单的菜单项被选中时显示出来; 前二者都有可以嵌套子菜单,而子菜单本身不能再嵌套 Android 系统具备对菜单项进行分组的功能,可以把相似功能
12、的菜单项分成同一个组;菜单项分组后,可以调用 setGroupCheckable、setGroupEnabled、setGroupVisible 等方法来统一设置整个菜单项分组的属性,而无须一个一个单独设置,UI:options menu 主菜单,options menu 显示在屏幕下方,最多只能显示 6 个菜单项,称为 icon menu(不支持 checkable 属性);其余菜单项会以 more icon menu 来调出,称为 expanded menu options menu 通过 Activity 的 onCreateOptionsMenu 方法来生成,这个函数只会在 menu
13、第一次生成时调用 可在 menu 显示前调用 onPrepareOptionsMenu 方法来实现对菜单的更改 onOptionsItemSelected 方法在选中菜单项后被调用,实现菜单项的响应,UI:sub menu 子菜单,一个浮动菜单列表,通过在选项菜单或上下文菜单选择菜单项显露出来 不支持嵌套子菜单, / 其他的 item 定义 / 其他的 item 定义 ,实例:Test_of_Widget,MainActivity.java 中指定主菜单 xml 文件 重写 onOptionsItemSelected() 方法,public boolean onCreateOptionsMen
14、u(Menu menu) menuInflater.inflate(R.menu.menu_filesystem, menu); return true; ,public boolean onOptionsItemSelected(MenuItem item) switch(item.getItemId() case R.id.about: aboutAlert(使用xml实现菜单);break; case R.id.exit: exitAlert(确认要退出吗?);break; return true; ,private void aboutAlert(String msg) private
15、 void exitAlert(String msg) ,resmenumenu_filesystem.xml 定义菜单, . ,运行结果:,运行结果:,UI:context menu 右键菜单,context menu 是跟某个具体的 View 绑定在一起的 在 Activity 中用 registerForContextMenu 方法来为某个 View 注册 context menu context menu 在显示前都会调用 onCreateContextMenu 方法来生成 menu,Override public void onCreateContextMenu(ContextMen
16、u menu, View v,ContextMenuInfo menuInfo) menu.add(0, ITME1, 0, 红色背景); menu.add(0, ITME2, 0, 绿色背景); menu.add(0, ITME3, 0, 蓝色背景); ,registerForContextMenu(textView00);,onContextItemSelected 方法处理菜单项选中事件,Override public boolean onContextItemSelected(MenuItem item) / TODO Auto-generated method stub switch(item.getItemId() case ITEM1: textView00.setBackgroundColor(Color.RED);break; case ITEM2: textView00.setBackgroundColor(Co