ANDROID用户界面.ppt

ANDROID用户界面,英蓓特培训中心2012.07,主要内容,用户界面基础用户界面初探用户界面布局用户界面控件用户界面菜单,用户界面基础,内容一,用户界面,界面如同人的面孔，具有吸引用户的直接优势,用户界面,用户界面（UserInterface，UI）是系统和用户之间进行信息交换的媒介，实现信息的内部形式与人类可以接受形式之间的转换在计算机出现早期，批处理界面（1945-1968）和命令行界面（1969-1983）得到广泛的使用目前，流行图形用户界面（GraphicalUserInterface，GUI），采用图形方式与用户进行交互的界面未来的用户界面将更多的运用虚拟现实技术，使用户能够摆脱键盘与鼠标的交互方式，而通过动作、语言，甚至是脑电波来控制计算机,手机用户界面,设计手机用户界面应解决的问题:需要界面设计与程序逻辑完全分离，这样不仅有利于他们的并行开发，而且在后期修改界面时，也不用再次修改程序的逻辑代码根据不同型号手机的屏幕解析度、尺寸和纵横比各不相同，自动调整界面上部分控件的位置和尺寸，避免因为屏幕信息的变化而出现显示错误能够合理利用较小的屏幕显示空间，构造出符合人机交互规律的用户界面，避免出现凌乱、拥挤的用户界面Android已经解决了前两个问题：使用XML文件（布局文件）描述用户界面；资源资源文件独立保存在资源文件夹中；对界用户面描述非常灵活，允许不明确定义界面元素的位置和尺寸，仅声明界面元素的相对位置和粗略尺寸,手机用户界面,设计手机用户界面应特别注意的问题:手机的显示区域小，不能有太丰富的展示效果，因此要求设计精简而不失表达能力。手机的操作主要依赖拇指，所以交互过程不能设计得太复杂，交互步骤不能太多，尽量设计多点快捷方式。不同型号的手机支持的图片格式、声音格式、动画格式不一样，需要选择尽可能通用的格式，或者针对不同的型号进行配置选择。不同型号的手机屏幕大小不一致，设置形状不一致，因此需要考虑图片的自适应问题和界面元素的布局问题。,ANDROID用户界面,Android用户界面框架采用MVC（Model-View-Controller）模型提供了处理用户输入的控制器（Controller）显示用户界面和图像的视图（View），以及保存数据和代码的模型（Model）,ANDROID用户界面,MVC模型MVC模型中的控制器能够接受并响应程序的外部动作，如按键动作或触摸屏动作等控制器使用队列处理外部动作，每个外部动作作为一个独立的事件被加入队列中，然后Android用户界面框架按照“先进先出”的规则从队列中获取事件，并将这个事件分配给所对应的事件处理函数,ANDROID用户界面框架,Android用户界面框架采用视图树（ViewTree）模型Android用户界面框架中的界面元素以一种树型结构组织在一起，称为视图树Android系统会依据视图树的结构从上至下绘制每一个界面元素。每个元素负责对自身的绘制，如果元素包含子元素，该元素会通知其下所有子元素进行绘制,ANDROID视图树,视图树视图树由View和ViewGroup构成View是界面的最基本的可视单元，存储了屏幕上特定矩形区域内所显示内容的数据结构，并能够实现所占据区域的界面绘制、焦点变化、用户输入和界面事件处理等功能View也是一个重要的基类，所有在界面上的可见元素都是View的子类ViewGroup是一种能够承载含多个View的显示单元ViewGroup功能：一个是承载界面布局；另一个是承载具有原子特性的重构模块,单线程用户界面,单线程用户界面在单线程用户界面中，控制器从队列中获取事件和视图在屏幕上绘制用户界面，使用的都是同一个线程优点：处理函数具有顺序性，能够降低应用程序的复杂程度，同时也能减低开发的难度缺点：如果事件处理函数过于复杂，可能会导致用户界面失去响应,用户界面初探,内容二,ANDROID应用程序模型,Activity,如何实现ANDROID界面,Android界面布局Layout定义了界面中所有的元素、结构和相互关系：使用XML文件描述界面布局在程序运行时动态添加或修改界面布局布局对象在程序中的调用：setContentView()从布局文件加载布局及控件findViewById()从资源中找到控件,ANDROIDXML布局文件,使用XML文件声明界面布局的特点将程序的表现层和控制层分离在后期修改用户界面时，无需更改程序的源代码用户还能够通过可视化工具直接看到所设计的用户界面，有利于加快界面设计的过程，并且为界面设计与开发带来极大的便利性,简单的XML布局文件,线性布局,布局方向,控件,命名空间,控件资源ID,控件显示内容,android:id属性：声明了控件对象的ID，这个ID主要用于在代码中引用这个控件对象“+id/button1”表示所设置的ID值表示后面的字符串是ID资源加号（+）表示需要建立新资源名称，并添加到R.java文件中斜杠后面的字符串（button1）表示新资源的名称如果资源不是新添加的，或属于Android框架的ID资源，则不需要使用加号（+），但必须添加Android包的命名空间，例如android:id=android:id/empty,界面对象的常规属性,android:id=+id/button1,android:layout_width属性：用来设置控件对象的宽度，fill_parent表示控件对象的宽度将等于父控件的宽度android:layout_height属性：用来设置控件对象的高度，wrap_content表示控件对象的宽度只要能够包含所显示的字符串即可,界面对象的常规属性,android:layout_width=fill_parentandroid:layout_height=wrap_content,界面对象的常规属性,Android中使用的单位(在布局文件中使用ddxx)px：表示屏幕实际的像素数。例如，320*480的屏幕在横向有320个象素，在纵向有480个象素。in：表示英寸，是屏幕的物理尺寸。每英寸等于2.54厘米,形容手机屏幕大小用的是屏幕的对角线长度。mm：表示毫米，是屏幕的物理尺寸。pt：表示一个点，是屏幕的物理尺寸,大小为1英寸的1/72。dp（密度独立像素）:也作dip,是一种基于屏幕密度的抽象单位。基本密度是160dpi，如果屏幕密度提高，则dp对应的实际px数也会相应的提高。sp（scale独立像素）：用于字体的一种基于屏幕密度的抽象单位。,android:layout_width=“120dp,界面对象的常规属性,android:text属性：用来设置控件对象上显示的文字内容,android:text=Button,引入资源,引入资源：将download.png文件拷贝到/res/drawable文件夹下在/res目录上选择Refresh新添加的文件将显示在/res/drawable文件夹下R.java文件内容也得到了更新否则提示无法找到资源的错误,程序加载XML资源,通过调用方法：setContentView()可以实现对Layout布局资源的调用：,publicvoidonCreate(BundlesavedInstanceState)super.onCreate(savedInstanceState);setContentView(R.layout.main);,程序创建对象及引用,通过调用方法：findViewById()可以实现对控件对象的引用：,ButtonmyButton=(Button)findViewById(R.id.button1);myButton.setText(test);,可视化编辑器,作业：在界面中添加一个按钮，并且在程序中调用该按钮资源，显示文字“test”,用户界面布局,内容三,ANDROID界面布局,Android界面布局Layout定义了界面中所有的元素、结构和相互关系。,常用的布局对象,Android操作系统提供下列5种窗体布局：线性布局（LinearLayout）框架布局（FrameLayout）表格布局（TableLayout）相对布局（RelativeLayout）绝对布局（AbsoluteLayout）,线性布局-LinearLayout,线性布局LinearLayout在线性布局中，所有的子元素都按照垂直或水平的顺序在界面上排列如果垂直排列，则每行仅包含一个界面元素如果水平排列，则每列仅包含一个界面元素,Android:orientation=“vertical”或Android:orientation=“horizontal”,线性布局实例,线性布局控件常用属性,框架布局-FrameLayout,框架布局FrameLayout框架布局（FrameLayout）是最简单的界面布局，是用来存放一个元素的空白空间，且子元素的位置是不能够指定的，只能够放置在空白空间的左上角如果有多个子元素，后放置的子元素将遮挡先放置的子元素使用AndroidSDK中提供的层级观察器（HierarchyViewer）进一步分析界面布局,能够对用户界面进行分析和调试，并以图形化的方式展示树形结构的界面布局,框架布局-FrameLayout,在层级观察器中获得示例界面布局的树形结构图,框架布局实例,表格布局-TableLayout,表格布局TableLayout表格布局（TableLayout）也是一种常用的界面布局，它将屏幕划分网格，通过指定行和列可以将界面元素添加的网格中网格的边界对用户是不可见的表格布局还支持嵌套，可以将另一个表格布局放置在前一个表格布局的网格中，也可以在表格布局中添加其他界面布局，例如线性布局、相对布局等等,表格布局-TableLayout,表格布局TableLayout,表格布局示意图,表格布局效果图,表格布局实例,表格布局常用属性,相对布局-RelativeLayout,相对布局RelativeLayout相对布局（RelativeLayout）是一种非常灵活的布局方式，能够通过指定界面元素与其他元素的相对位置关系，确定界面中所有元素的布局位置特点：能够最大程度保证在各种屏幕类型的手机上正确显示界面布局,相对布局实例,相对布局常用属性,绝对布局-AbsoluteLayout,绝对布局AbsoluteLayout绝对布局（AbsoluteLayout）能通过指定界面元素的坐标位置，来确定用户界面的整体布局绝对布局是一种不推荐使用的界面布局，因为通过X轴和Y轴确定界面元素位置后，Android系统不能够根据不同屏幕对界面元素的位置进行调整，降低了界面布局对不同类型和尺寸屏幕的适应能力,布局的嵌套,布局的嵌套是指相同或者不同类型的布局之间可以嵌套使用，其目的是为了利用不同布局的特性，方便构建我们想要得到的图案,布局嵌套实例,用户界面控件,内容四,ANDROID用户界面控件,Android系统的界面控件有两种：系统控件：是Android系统提供给用户已经封装的界面控件。提供在应用程序开发过程中常见功能控件。系统控件更有利于帮助用户进行快速开发，同时能够使Android系统中应用程序的界面保持一致性定制控件：是用户独立开发的控件，或通过继承并修改系统控件后所产生的新控件。能够为用户提供特殊的功能或与众不同的显示需求方式常见的系统控件包括TextView、EditText、Button、ImageButton、Checkbox、RadioButton、Spinner、Progress、ListView和TabHost、Dialog、Toast、Notification等,ANDROID控件类型分类,常用控件：TextView、EditText、Button选择控件：CheckBox、RadioButton、Spinner进度条控件：Progress对话框控件：Dialog消息提示控件：Toast,常用控件：TextView、EditText,TextView和EditTextTextView是一种用于显示字符串的控件EditText则是用来输入和编辑字符串的控件,TextView,EditText,程序名,EditText实际上是一个具有编辑功能的TextView,控件布局实例,常用函数：setText();getText();,常用控件：Button、ImageButton,Button和ImageButtonButton是一种按钮控件，用户能够在该控件上点击，随后引发相应的事件处理函数ImageButton用以实现能够显示图像功能的控件按钮,控件布局实例,也可以通过程序实现ImageButton上图片的显示：myImageButton.setImageResource(R.drawable.download);,按钮控件的监听,按钮响应点击事件：添加点击事件的监听器,finalButtonmyButton=(Button)findViewById(R.id.button1);myButton.setOnClickListener(newView.OnClickListener()publicvoidonClick(Viewv)/TODOAuto-generatedmethodstubmyButton.setText(我按了Button一下););,监听器,消息响应函数,按钮控件的监听,finalButtonmyButton=(Button)findViewById(R.id.button1);finalImageButtonmyImageButton=(ImageButton)findViewById(R.id.imagebutton1);View.OnClickListenerbuttonListener=newView.OnClickListener()publicvoidonClick(Viewv)/TODOAuto-generatedmethodstubswitch(v.getId()caseR.id.button1:myButton.setText(我按了Button一下);return;caseR.id.imagebutton1:myButton.setText(我按了ImageButton一下);return;myButton.setOnClickListener(buttonListener);myImageButton.setOnClickListener(buttonListener);,选择控件：CheckBox、RadioButton,CheckBox和RadioButtonCheckBox：多选控件RadioButton：单选控件RadioGroup是RadioButton的承载体，程序运行时不可见，在每个RadioGroup中，用户仅能够选择其中一个RadioButton,CheckBox控件实例,finalCheckBoxmyCheckBox=(CheckBox)findViewById(R.id.checkbox01);myCheckBox.setText(我的状态是：+myCheckBox.isChecked();myCheckBox.setOnClickListener(newView.OnClickListener()publicvoidonClick(Viewv)/TODOAuto-generatedmethodstubmyCheckBox.setText(我的状态是：+myCheckBox.isChecked(););,RadioButton控件实例,RadioButton控件实例,finalTextViewmyTextView=(TextView)findViewById(R.id.TextView01);finalRadioGroupmyRadioGroup01=(RadioGroup)findViewById(R.id.RadioGroup01);finalRadioButtonmyRadioButton=(RadioButton)findViewById(myRadioGroup01.getCheckedRadioButtonId();myTextView.setText(myRadioButton.getText().toString();myRadioGroup01.setOnCheckedChangeListener(newOnCheckedChangeListener()publicvoidonCheckedChanged(RadioGroupgroup,intcheckedId)/TODOAuto-generatedmethodstubmyTextView.setText(RadioButton)findViewById(checkedId).getText().toString(););,选择控件：Spinner,SpinnerSpinner是一种能够从多个选项中选一选项的控件，类似于桌面程序的组合框（ComboBox），但没有组合框的下拉菜单，而是使用浮动菜单为用户提供选择,Spinner控件实例,Spinner控件实例,finalSpinnermySpinner=(Spinner)findViewById(R.id.Spinner01);Listlist=newArrayList();list.add(Spinner1);list.add(Spinner2);list.add(Spinner3);ArrayAdapteradapter=newArrayAdapter(this,android.R.layout.simple_spinner_item,list);adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);mySpinner.setAdapter(adapter);,进度条控件：Progress,ProgressProgress可以用于某些操作的可视化指示器。显示给用户一个代表操作进行了多少的进度条。用户可以随着进度向前推进改变进度条的量。,Progress控件实例,Progress控件实例,privatebooleanstate=false;privatestaticintcount=0;finalButtonmyButton1=(Button)findViewById(R.id.button1);finalButtonmyButton2=(Button)findViewById(R.id.button2);finalProgressBarmyProgressBar1=(ProgressBar)findViewById(R.id.progressBar1);finalProgressBarmyProgressBar2=(ProgressBar)findViewById(R.id.progressBar2);myProgressBar1.setMax(100);myProgressBar2.setVisibility(View.GONE);View.OnClickListenerbuttonListener=newView.OnClickListener()publicvoidonClick(Viewv)/TODOAuto-generatedmethodstubswitch(v.getId()caseR.id.button1:count+;if(count=100)count=0;myProgressBar1.setProgress(0);myProgressBar1.setProgress(count);break;caseR.id.button2:state=!state;if(state)myButton2.setText(停止);myProgressBar2.setVisibility(View.VISIBLE);elsemyButton2.setText(运行);myProgressBar2.setVisibility(View.GONE);break;myButton1.setOnClickListener(buttonListener);myButton2.setOnClickListener(buttonListener);,对话框控件：Dialog,Dialog是android开发过程中最常用到的组件之一，通常是在当前activity前面出现的小窗口。Dialog通常是用来通知打断用户，执行直接跟应用程序进度相关的短暂任务(比如进度条或者登录框)。Dialog可分为以下几种类型：警告对话框：Alertialog进度对话框：ProgressDialog日期选择对话框：DatePickerDialog时间选择对话框：TimePickerDialog自定义对话框：从Dialog继承,各种Dialog,AlertDialog,AlertDialog是对Dialog的扩展，它有能力构建绝大多数的对话框用户界面，建议使用这种类型的对话框。它不需要在XML中定义，用代码生成。,AlertDialog控件实例,myButton1.setOnClickListener(newOnClickListener()publicvoidonClick(Viewv)/TODOAuto-generatedmethodstubAlertDialog.Builderbuilder=newAlertDialog.Builder(HelloWorldActivity.this);builder.setMessage(确认退出吗？);builder.setTitle(提示);builder.setPositiveButton(确认,newDialogInterface.OnClickListener()publicvoidonClick(DialogInterfacedialog,intwhich)/TODOAuto-generatedmethodstubHelloWorldActivity.this.finish(););builder.setNegativeButton(取消,newDialogInterface.OnClickListener()publicvoidonClick(DialogInterfacedialog,intwhich)/TODOAuto-generatedmethodstubdialog.cancel(););builder.create().show(););,消息提示控件：Toast,Toast是在窗口表面弹出的通知消息。它仅仅是填充消息需要的空间大小，用户当前的activity保留可见性和可交互性。通知会自动的褪掉，它不会接受用户交互事件。,Toast控件实例,myButton1.setOnClickListener(newOnClickListener()publicvoidonClick(Viewv)/TODOAuto-generatedmethodstubContextcontext=getApplicationContext();CharSequencetext=HelloToast!;intduration=Toast.LENGTH_SHORT;Toasttoast=Toast.makeText(context,text,duration);/toast.setGravity(Gravity.TOP|Gravity.LEFT,0,0);toast.show(););,用户界面菜单,内容五,菜单,菜单是应用程序中非常重要的组成部分，能够在不占用界面空间的前提下，为应用程序提供了统一的功能和设置界面，并为程序开发人员提供了易于使用的编程接口Android系统支持三种菜单选项菜单（Menu类）子菜单（SubMenu类）快捷菜单（ContextMenu类）,菜单,选项菜单选项菜单是一种经常被使用的Android系统菜单打开方式：通过“菜单键”（MENUkey）打开选项菜单分类图标菜单（IconMenu）扩展菜单（ExpandedMenu）,菜单,图标菜单图标菜单能够同时显示文字和图标的菜单，最多支持6个子项图标菜单不支持单选框和复选框,菜单,扩展菜单扩展菜单是在图标菜单子项多于6个时才出现，通过点击图标菜单最后的子项“More”才能打开扩展菜单是垂直的列表型菜单,不能够显示图标支持单选框和复选框,菜单,重要函数,菜单,选项菜单使用重载Activity的onCreateOptionMenu()函数，才能够在Android应用程序中使用选项菜单初次使用选项菜单时，会调用onCreateOptionMenu()函数，用来初始化菜单子项的相关内容,设置菜单子项自身的子项的ID和组ID菜单子项显示的文字和图片等,选项菜单,选项菜单,finalstaticintMENU_DOWNLOAD=Menu.FIRST;finalstaticintMENU_UPLOAD=Menu.FIRST+1;OverridepublicbooleanonCreateOptionsMenu(Menumenu)menu.add(0,MENU_DOWNLOAD,0,下载设置);menu.add(0,MENU_UPLOAD,1,上传设置);returntrue;,Menu.FIRST（整数类型，值为1）定义第一个菜单子项，以后的菜单子项仅需在Menu.FIRST增加相应的数值即可第7行代码是onCreateOptionsMenu()函数返回值，函数的返回值类型为布尔型返回true将显示在函数中设置的菜单，否则不能够显示菜单,选项菜单,Menu:add()添加菜单子项add()函数的语法,groupId：组ID，用以批量的对菜单子项进行处理和排序itemId：子项ID，是每一个菜单子项的唯一标识，通过子项ID使应用程序能够定位到用户所选择的菜单子项order：定义菜单子项在选项菜单中的排列顺序title：菜单子项所显示的标题,MenuItemandroid.view.Menu.add(intgroupId,intitemId,intorder,CharSequencetitle),选项菜单,添加菜单子项的图标和快捷键：setIcon()函数setShortcut()函数,MENU_DOWNLOAD菜单设置图标和快捷键的代码第2行代码中使用了新的图像资源，用户将需要使用的图像文件拷贝到/res/drawable目录下setShortcut()函数第一个参数是为数字键盘设定的快捷键setShortcut()函数第二个参数是为全键盘设定的快捷键，且不区分字母的大小写,menu.add(0,MENU_DOWNLOAD,0,下载设置).setIcon(R.drawable.download).setShortcut(0,d);,选项菜单,Activity:onPrepareOptionsMenu()动态的添加、删除菜单子项，或修改菜单的标题、图标和可见性等内容onPrepareOptionsMenu()函数的返回值的含义与onCreateOptionsMenu()函数相同返回true则显示菜单返回false则不显示菜单,选项菜单,Activity:onOptionsItemSelected()菜单选择事件，且该函数在每次点击菜单子项时都会被调用下面的代码说明了如何通过菜单子项的子项ID执行不同的操作,publicbooleanonOptionsItemSelected(MenuItemitem)switch(item.getItemId()caseMENU_DOWNLOAD:Toast.makeText(getApplicationContext(),DOWNLOAD,Toast.LENGTH_SHORT).show();returntrue;caseMENU_UPLOAD:Toast.makeText(getApplicationContext(),UPLOAD,Toast.LENGTH_SHORT).show();returntrue;returnfalse;,子菜单,子菜单(二级菜单)子菜单是能够显示更加详细信息的菜单子项菜单子项使用了浮动窗体的显示形式，能够更好适应小屏幕的显示方式,子菜单,子菜单重要函数,子菜单,子菜单Android系统的子菜单使用非常灵活，可以在选项菜单或快捷菜单中使用子菜单，有利于将相同或相似的菜单子项组织在一起，便于显示和分类子菜单不支持嵌套,不支持图标(快捷键支持的不好)子菜单的添加是使用addSubMenu()函数实现,SubMenuuploadMenu=(SubMenu)menu.addSubMenu(0,MENU_UPLOAD,1,上传设置).setIcon(R.drawable.upload);uploadMenu.setHeaderIcon(R.drawable.upload);uploadMenu.setHeaderTitle(上传参数设置);uploadMenu.add(0,SUB_MENU_UPLOAD_A,0,上传参数A);uploadMenu.add(0,SUB_MENU_UPLOAD_B,0,上传参数B);,快捷菜单,快捷菜单(contextmenu)快捷菜单同样采用了动态窗体的显示方式，与子菜单的实现方式相同，但两种菜单的启动方式却截然不同启动方式：快捷菜单类似于普通桌面程序中的“右键菜单”，当用户点击界面元素超过2秒后，将启动注册到该界面元素的快捷菜单不支持快捷键和图标(实际支持数字快捷键)使用方法：与使用选项菜单的方法非常相似，需要重载onCreateContextMenu()函数和onContextItemSelected()函数onCreateContextMenu()函数主要用来添加快捷菜单所显示的标题、图标和菜单子项等内容,快捷菜单,快捷菜单重要函数,快捷菜单,publicvoidonCreate(BundlesavedInstanceState)super.onCreate(savedInstanceState);setContentView(R.layout.main);TextViewmyTextView=(TextView)findViewById(R.id.textView1);registerForContextMenu(myTextView);finalstaticintCONTEXT_MENU_1=Menu.FIRST;finalstaticintCONTEXT_MENU_2=Menu.FIRST+1;publicvoidonCreateContextMenu(ContextMenumenu,Viewv,ContextMenuInfomenuInfo)menu.setHeaderTitle(快捷菜单标题);menu.add(0,CONTEXT_MENU_1,0,菜单项1);menu.add(0,CONTEXT_MENU_2,1,菜单项2);publicbooleanonContextItemSelected(MenuItemitem)switch(item.getItemId()caseCONTEXT_MENU_1:Toast.makeText(getApplicationContext(),菜单项1,Toast.LENGTH_SHORT).show();returntrue;caseCONTEXT_MENU_2:Toast.makeText(getApplicationContext(),菜单项2,Toast.LENGTH_SHORT).show();returntrue;returnfalse;,菜单（布局）,菜单在布局中定义在Android系统中，菜单不仅能够在代码中定义，而且可以像界面布局一样在XML文件中进行定义使用XML文件定义界面菜单，将代码与界面设计分类，有助于简化代码的复杂程度，并且更有利于界面的可视化,菜单（布局）实例,在/res目录下建立子目录menu，并在menu下建立context_menu.xml文件，代码如下,菜单（布局）实例,publicvoidonCreate(BundlesavedInstanceState)super.onCreate(savedInstanceState);setContentView(R.layout.main);TextViewmyTextView=(TextView)findViewById(R.id.textView1);registerForContextMenu(myTextView);OverridepublicvoidonCreateContextMenu(ContextMenumenu,Viewv,ContextMenuInfomenuInfo)MenuInflaterinflater=getMenuInflater();inflater.inflate(R.menu.context_menu,menu);,谢谢大家！,英蓓特培训中心培训讲师：卢斯lusi13327906618,