day 2 Android应用程序开发教程 - Android UI 介绍


Android应用程序开发教程 陈操(Kelvin Chan) chencao0524@gmail.com 关于本教程 Day 1 Day 2 Day 3 Day 4 Android入门基础 Android User Interface Android Data Storage Android Network & Graphics Practice First Android Application/Debug/ Log Practice Advanced User Interface Practice File/SQLite Data Storage Practice HTTP GET/POST XML/JSON Graphics ANDROID USER INTERFACE Day 2 议程  Android资源  Android UI简介  Android UI事件处理  Android UI常用布局  Android UI常用控件  Android UI设计工具  实战:人员分组列表 Android应用程序资源   资源包括:文件、图片、音频、视频、文本字符串等   资源都保存在res目录下   对于任何资源类型,可以为应用程序提供默认或多种可选的资源   资源个性化需要   不同的国家   不同的屏幕大小   不同的语言(国际化)   不同的屏幕状态(横屏、竖屏) 不同的的设备,使用相同的资源 不同的的设备,使用不同的资源 资源类型及其存放目录 目录  资源类型 res/anim  XML文件编译为桢序列动画或者自动动画对象。 res/menu XML文件定义应用中的目录 res/drawable png,9.png,jpg文件被编译为Drawable资源子类型:使用Resources.getDrawable(id)可以获得资源类型     * 位图文件     * 9-patchs(可变位图文件) res/layout  资源编译为屏幕布局器 res/values XML 文件可以被编译为多种资源 注意:不像其他res下的目录,这个目录可以包含多个资源描述文件。XML文件元素类型控制着这些资源被R类放 置在何处。 这些文件可以自定义名称。这里有一些约定俗成的文件。     * arrays.xml 定义数组。     * colors.xml 定义可绘制对象的颜色和字符串的颜色。使用Resources.getDrawable()和Resources.getColor()都 可以获得这些资 源。     * dimens.xml 定义尺寸和大小。使用Resources.getDimension()可以获得这些资源     * strings.xml 定义字符串(使用Resources.getString()或者更适合的Resources.getText()方法获得这些资源。 Resources.getText()方法将保留所有用于描述用户界面样式的描述符,保持复杂文本的原貌。     * styles.xml 定义样式风格 res/xml  自定义的XML文件。这些文件将在运行时编译近应用程序,并且使用Resources.getXML()方法可以在运行时获取。 res/raw  自定义的原生资源,将被直接拷贝入设备。这些文件将不被压缩近您的应用程序。使用带有ID参数的 Resources.getRawResource() 方法可以获得这些资源,比如R.raw.somefilename。 6 提供可选个性化资源  指定可供选择的个性化资源集合  在res下创建新目录  形式:- resource_name是默认的资源目录名  qualifier指下页的配置限定名词表中的值  多个qualifier之间用“-”连结  在新目录下保存各自的资源,名称必须和默认目录中的一致  Android会按照限定名的顺序进行匹配,选择最合适的资源 默认 高分辨率 配置限定名词表 qualifier value(范例) 描述 MCC和MNC mcc310、mcc310-mnc004、 mcc208-mnc00 手机国家代码或手机网络代 码 语言和区域 en、fr、en-rUS、fr-rFR、fr-rCA 屏幕大小 small、normal、large、xlarge QVGA 、HVGA、WVGA 屏幕外形 long、notlong 长屏幕WQVGA等、非长屏 幕VGA等 屏幕方向 port、land 竖屏、横屏 除上述qualifier以外,还有很多配置:是否夜间模式,分辨率大小,触摸屏类型,是否 有键盘,系统API版本等等 详细见:docs/guide/topics/resources/providing-resources.html 国际化和横竖屏个性化配置   范例(国际化、横竖屏)   Day2.Lab/src/com/smartphone/ui/most/Controls.java   Day2.Lab/res/layout/controls_1.xml   Day2.Lab/res/layout-land/controls_1.xml   Day2.Lab/res/values/strings.xml   Day2.Lab/res/values-en/strings.xml 中文 英文 横屏 访问资源   所有资源都以整型ID形式被引用,都定义在R类里   当应用程序编译时,aapt把res目录下所有资源ID生成到R类   比如res/drawable目录下的icon.png的ID为R.drawable.icon   资源ID的组成   资源类型:string、drawable、layout   资源名称:文件名(不包括扩展名)或者XML文件中android:name的简单值   两种方式访问资源   代码中:[.]R..   XML中:@[:]/ 代码中访问资源 XML中访问资源 处理运行时变化   设备的配置在运行时会改变   屏幕方向   键盘是否可用   语言   Android会在变化发生时重启运行中的Activity onDestroy()àonCreate()   Activity重启有可能丢失数据 onSaveInstanceState()只适合保存小量数据,比如简单数据类型键值对   网络连接、大图片、视频大数据对象需要保存   两种方式保存Activity重启时状态   当配置改变时,保留数据:onRetainNonConfigurationInstance()保存数据, getLastNonConfigurationInstance()获取数据   手动处理变化:Activity不重启,通过onConfigurationChanged()接收配置改变时回调, Activity的改变需要手动处理(系统个性化资源不会起作用,不推荐) 当配置改变时,保留数据   范例(横竖屏)   Day2.Lab/src/com/smartphone/ui/most/Controls.java onStop()和onDestroy() 之间调用,保存数据 重新取回数据状态 手动处理变化 1、在manifest中声明感 应响应的配置变化 2、在回调函数中处 理响应的变化 Android UI介绍  View和ViewGroup  View对象是UI基本单元,是widgets的基础。比如文本框、按钮 ViewGroup是layouts的基础,提供了各种不同的layout架构,比如线形、 相对布局 ViewGroup能装载和管理下一层的View和ViewGroup setContentView()中传入根节点对象,Android便可测距和绘制界面 ViewGroup负责绘制 直接子节点 Android UI事件处理  事件是用户与UI交互所触 发的动作  如何处理事件?  在View中注册并定义事件 监听器 View.OnClickListener View.OnTouchListener View.OnKeyListener View.OnLongClickListener  重写View中已经存在的回 调方法 onTouchEvent() onKeyDown() onKeyUp() onTrackballEvent() Android UI事件处理  Touch Mode   当用户用手触摸“有touch功能的设备”,则进入Touch Mode   只有isFocusableInTouchMode()为true的View才能获得焦点,比如文本编辑框   按钮在Touch Mode下不能获取焦点,仅触发on-click监听器   当用户按键或滚动轨迹球时,退出Touch Mode   Touch Mode是整个系统的状态,可通过isInTouchMode()查询  处理焦点   isFocusable()指示当前View是否可以获得焦点(非Touch Mode)   可以设置焦点移动的方位是指向某个具体的View:nextFocusDown, nextFocusLeft, nextFocusRight, 以及nextFocusUp   View可以通过调用requestFocus()来获取焦点   监听获得或失去焦点事件的方法是onFocusChange() Android UI常用布局 LinearLayout(线性布局)   有垂直和水平两个属性   垂直属性的每行只有一个元素   水平属性只有一个行高 FrameLayout(单帧布局)   最简单的布局,控件都放置在左上角,且覆盖前一个控件 TableLayout(表格布局)   由TableRow组成   每个row拥有0或多个cell   每个cell不能跨列,可包含View对象   子元素被分配在行或列中 AbsoluteLayout(绝对布局)   给子元素指定精确的x/y坐标值 RelativeLayout(相对布局)   允许子元素指定他们相对其他元素或父元素的位置 17 17 LinearLayout(线性布局)   范例一:垂直属性布局 ApiDemos/src/com/example/android/apis/view/LinearLayout1.java ApiDemos/res/layout/linear_layout_1.xml   范例二:水平属性布局 ApiDemos/src/com/example/android/apis/view/LinearLayout4.java ApiDemos/res/layout/linear_layout_4.xml   范例三:嵌套布局SimpleForm ApiDemos/src/com/example/android/apis/view/LinearLayout5.java ApiDemos/res/layout/linear_layout_5.xml 18 18 RelativeLayout(相对布局) 19 19   范例一:相对布局 ApiDemos/src/com/example/android/apis/view/RelativeLayout1.java ApiDemos/res/layout/relative_layout_1.xml   范例二:SimpleForm ApiDemos/src/com/example/android/apis/view/RelativeLayout2.java ApiDemos/res/layout/relative_layout_2.xml TableLayout(表格布局) 20 20  范例一:表格布局 ApiDemos/src/com/example/android/apis/view/TableLayout10.java ApiDemos/res/layout/table_layout_10.xml 其他重要的ViewGroup 21 21   Gallery   水平滚动显示有序图片列表 GridView   显示一个可滚动的m列n行表格 ListView   显示一个可滚动单列列表 ScorllView   垂直滚动的元素列   Spinner   下拉框 SurfaceView   提供一个可画图的界面 TabHost   提供一个页签选择列表,单击切换屏幕 Android UI常用控件   文本框(TextView)   编辑框(EditText)   按钮(Button)   提示(Toast)   对话框(Dialog)   目录(Menu)   列表(ListView)   单选框(RadioGroup、RadioButton)   多选框(CheckBox)   下拉列表(Spinner)   日期和时间(DatePicker、TimePicker)   菜单(Menu)   图片视图(ImageView)   图标按钮(ImageButton) 文本框(TextView) public class MyActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.textview); TextView textview = (TextView) this.findViewById (R.id.textView1); String string = "TextView示例!"; /* 设置文本的颜色 */ textview.setTextColor(Color.GREEN); /* 设置字体大小 */ textview.setTextSize(20); /* 设置文字背景 */ textview.setBackgroundColor(Color.WHITE); /* 设置TextView显示的文字 */ textview.setText(string); } } 通过findViewById来 获取TextView 在布局文件中指定 TextView组件的id 文本框(TextView) 24 24 文本框(TextView) 25 25 TextView对象方法 XML属性 setTextColor android:textColor setTextSize android:textSize setText android:text setBackgroundResource android:background setHeight android:height setWidth android:width 提示(Toast)   Toast在当前窗口表面弹出提示 26 26   基本运用 提示(Toast)   Toast定位(左上角显示) 27 27   自定义Toast视图 对话框(Dialog) AlertDialog   警告框由0-3个按钮,可供选择的checkboxes或radio buttons集合组成 ProgressDialog   显示一个进度盘或者进度条,是AlertDialog子类,支持按钮 DatePickerDialog   日期的对话框 TimePickerDialog   时间的对话框 对话框(Dialog) onCreateDialog(int)回调方法创建对话框 showDialog(int)方法将参数传入回调方法中,进而展示对话框 onPrepareDialog(int, Dialog)方法能动态更新对话框 dismiss()方法关闭对话框   对话框范例: ApiDemos/src/com/example/android/apis/app/AlertDialogSamples.java ApiDemos/res/layout/alert_dialog.xml 菜单(Menu)   Options Menu(选项菜单)   当点击Menu键时展现   最多只能有6个带图标选项菜单,多于6个则只显示5个带图标菜 单;右下角第6个为More菜单项,点击弹出不带图标的扩展菜单 onCreateOptionsMenu()方法中构造菜单(调用一次) onOptionsItemSelected()方法响应用户行为   动态更新菜单调用onPrepareOptionsMenu()方法(每次调用), 在Android SDK 3.0中采用的时Action Bar,需先调用 invalidateOptionsMenu(),这是由于Menu一直开启状态 Context Menu(上下文菜单)   当长按某个View时 registerForContextMenu()方法中要传入View注册,比如 registerForContextMenu(getListView()); onCreateContextMenu()方法构造菜单(每次调用) onContextItemSelected()方法响应用户行为 Submenu(子菜单) addSubMenu()方法用于添加子菜单   子菜单下不能再添加子菜单 Options Menu(选项菜单)   通过res/menu/menu.xml配置菜单   Activity类中相应代码 Context Menu(上下文菜单)   重用res/menu/menu.xml,在Activit中注册上下文所需要的View   Activity类中相应代码 Submenu(子菜单) 其他常用控件   范例一:菜单   Day2.Lab/src/com/smartphone/ui/menu/MyMenu.java   Day2.Lab/res/layout/mymenu.xml   Day2.Lab/res/menu/menu.xml   范例二:其他常用控件 ApiDemos/src/com/example/android/apis/view/Controls2.java ApiDemos/res/layout/controls_1.xml 选项菜单 上下文菜单 常用控件 列表控件   范例一:简单列表 ApiDemos/src/com/example/android/apis/view/List1.java   范例二:自定义Adapter和View ApiDemos/src/com/example/android/apis/view/List4.java   范例三:自定义Adapter和View ApiDemos/src/com/example/android/apis/view/List5.java 范例一 范例二 范例三 Android UI设计工具 36 36 大纲视图 绘制界面 属性设置界面 控件区域 源码 设计登录界面 37 37 设计登录界面  界面布局层次设计 38 38 线性布局(根) 线性布局 1 图片视图 ImageView 线性布局 2 编辑框 EditView 编辑框 EditView 线性布局 3 多选框 CheckBox 线性布局 4 按钮 Button 按钮 Button 新建根布局文件 39 39 新建根布局文件 40 40 文件名称 资源类型选择,这里选layout 个性化配置,如国际化, 分辨率等 布局下拉框,多种布局 可供选择 新建根布局文件 41 41 线性布局(根) 右键绘图区域中的 组件,可弹出菜单 进行属性设置 线性布局(根) 的属性设置 绘制区域 1-布局文件 42 42 拖拽 绘制区域 1-布局文件 43 43 区域一已添加 设置区域一 宽度设置:match_parent 高度设置:wrap_content 绘制区域 1-布局文件 44 44 根布局 区域一布局 纵向布局 高度填满整个屏幕 宽度填满整个屏幕 高度为自身内容 宽度填满父容器 绘制区域 1-添加图片 45 45 绘制区域 1-添加图片 46 46 拖拽 ImageView应该为区域一的子 元素,因此点击Move Up 绘制区域 1-添加图片 47 47 设置图片src有三种途径: 在Properties View中设置 右键图片在弹出菜单设置 右键大纲视图的图片设置 绘制区域 1-添加图片 48 48 设置图片居中显示: 修改图片父容器linearLayout1的 属性android:gravity="center" 设置区域一距上部和下部距离为20dip: 修改图片父容器linearLayout1的属性 android:layout_marginTop="20dip » android:layout_marginBottom="20dip" 绘制区域 2-输入框 49 49 拖拽 绘制区域 2-输入框 50 50 拖拽 绘制区域 2-输入框 51 51 1、设置区域二中组件居中 修改父容器linearLayout2的属性 android:gravity=“center” 2、设置区域二内部为纵向布局 修改父容器linearLayout2的属性 android:orientation="vertical” 绘制区域 2-输入框 52 52 设置编辑框的长度为200dip 右键编辑框进行设置 绘制区域 2-输入框 53 53 清空编辑框中的值,设置hint值为:用户名 1. 选中第一个编辑框,在Properties视图中, 清空Text的Value值 2. 在Properties视图中,设置hint属性 绘制区域 2-输入框 54 54 设置的值会写入此文件 绘制区域 2-输入框 55 55 同理设置第二个编辑框 练习  完成剩下的两个区域绘制 56 56 新建Java类使用布局login.xml 57 57 在manifest中定义 58 实现按钮“清空”逻辑 59 59 点击“确定”判断输入非空 60 60 为“确定”按钮设置监听器 如果用户名和密码为空,则弹出警告对话框,否则,弹出提示框。 警告框 提示框 练习:构造人员分组列表 61 61 ANY QUESTION?
还剩61页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 5 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

huangqj83

贡献于2013-10-27

下载需要 5 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf