(8 Android) 用户界面UI设计
(8 Android) 用户界面UI设计
3.1.1 Android界面视图类
Android 图形化的用户界面(Graphical User Interface , GUI) 采用了结构清晰的MVC模型(Model-View-Controller) ,其具体含义:
·提供了处理用户输入的控制器(Controller) ;
·显示用户界面的视图(View) ;
·保存数据和代码的模型(Model) 。
在Android MVC中,控制器是由Activity组件完成的,它能够接受并响应程序的外部动作,如按键动作或触摸屏动作等,每个外部动作作为一个对立的事件被加入队列中,按照"先进先出"的规则从队列中获取事件,并将这个事件分配给所对应的事件处理函数。
控制器负责接受并响应程序的外部动作;通过视图反馈应用程序给用户的信息(通常是手机屏信息反馈) ;模型是应用程序的核心,用于保存数据和代码。
Android视图类android.view.View提供了用于处理屏幕事件的多个内部接口(如OnClickListener等)及常用方法(如setVisibility()等)。
3.1.2 Android用户界面事件
在Android系统中,各种屏幕手势的相关信息(如操作类别、发生时间等)被自动封装成一个KeyEvent对象,供应用程序使用。因此,在Activity的事件处理方法中,需要使用表示手势事件对象的事件参数event。
Activity提供了响应各种屏幕手势的方法,如按键方法onKeyDown()、松开按键方法onKeyUp()、长按键方法onKeyLongPress()等。
除了使用界面事件外,还有键盘事件。类KeyEvent定义了分别对应于Back键、Home键和Menu键的键盘扫描码(实质上是静态常量)。
Activity提供的方法onKeyDown(keyCode,event)用来捕捉手机键盘被按下(短按,不是长按)的事件。其中, 参数keyCode 表示键盘扫描码,通常使用类KeyEvent的静态常量表示。
Android程序通常需要侦昕用户和应用程序之间交互的事件。对于用户界面中的事件,侦听方法就是从与用户交互的特定视图对象中截获这些事件。
事件侦昕器(Event Listener)是视图View类的内部接口,包含一个单独的回调方法。这些方法将在视图中注册的侦听器被用户界面操作触发时由Android框架调用。下面这些回调方法被包含在事件侦听器接口中:
• onClick()包含于View.OnClickListener中,单击时调用;
• onLongClick()包含于View.OnLongClickListener中,长按时调用;
• onTouch()包含于View.OnTouchListener中,当用户执行的动作被当作一个触摸事件时被调用,包括按下、释放和在屏幕上进行的任何移动手势。
3.1.3 界面与布局
res/layout目录下存放定义UI设计的XML文件。UI设计有两种方式: 一种是Text视图方式,在XML文件中,可以直接写布局及控件代码:另一种是Design视图方式,可以直接拖曳控件至设计区域。
布局相当于一个容器控件,其属性android:padding(或android:paddingLeft等)用于控制该容器内第一个元素与父布局(容器)之间的间隔,而属性android:layout_margin等用于设置同一布局内各元素之间的间隔。布局内控件的常用布局属性还有以下几个。
• android:layout_width表示控件的宽度。
• android:layout_height表示控件的高度。
• android:id表示控件的标识。
• android:layout_below表示将该控件的底部置于给定ID控件之下。
布局类型分为如下几种:
1 .线性布局
线性布局使用成对的< LinearLayout >
标签,必须指定分别表示容器宽度和高度的两个属性android:layout_width和android:layout_height,它们的取值为match_parent(匹配父容器)、wrap_content(自适应控件大小)或具体值(以dp为单位)。
线性布局可选属性主要是android:orientation,当取值为vertical时称为垂直线性布局,当取值为horizontal时称为水平线性布局,且以vertical为默认值。
垂直线性布局时,每个控件占一行;水平线性布局时,控件自左向右排列,控件太多时也不会转行。
注意:调整线性布局内的各个控件之间的间距,使用android:layout_weight属性比较方便。
线性布局也可以嵌套使用。例如,在垂直线性布局里嵌套一个水平线性布局时,就可以在一行内水平放置多个控件。
2.相对布局
相对布局在布局文件中使用< RelativeLayout >
标签,除了第一个元素外,其他元素需要参考另一个元素进行相对定位(含方向、偏移和对齐方式) ,常用属性如下。
• android:layout_below表示位于下方。
• android:layout_above表示位于上方。
• layout_toRightOf表示位于右方。
• layout_toLeftOf表示位于左方。
• android:layout_marginTop表示偏移(正值向下,负值向上)。
• android:layout_marginLeft表示偏移(正值向右,负值向左)。
• android:layout_alignLeft表示左对齐(默认)。
• android:layout_alignRight 表示右对齐。
• android:layout_alignTop 表示顶部对齐(默认)。
• android:layout_alignBottom 表示底部对齐。
• android:layout_alignBaseline 表示垂直居中。
3.约束布局
传统的Android开发,其界面基本都是靠编写XML代码完成的。约束布局是Android Studio 2.3之后推荐且默认使用的布局,完全使用可视化的操作方式,在布局文件中使用<android.support.constraint.ConstraintLayout>标签声明约束布局。
当拖曳某个控件至界面时,系统提示缺少约束的红色警告,表明程序运行时该控件将出现在屏幕左上角(0,0)位置。解决方法有如下两种:
(1)单击该控件,使用魔术棒工具来自动添加用于确定控件位置的约束线。此时,该控件至少存在两条约束线;
(2)单击该控件,从出现的四个圆点中,任选一个圆点并拖曳到四周的边线或控件圆点来建立位置约束。重复此操作,直到红色警告消失。
选中某个己经添加约束的控件,若使用清除工具,将删除己经建立的所有约束线;若单击其中的某条约束线的圆点端,将删除本约束线。
4.帧布局
帧布局像一层层画布,添加的控件一层层地放上去。帧布局添加的各个控件默认都将对齐到屏幕的左上角。
在一个有两层的帧布局中,如果浮于上面的第二层可以看到下层,是因为background属性设置包含了透明度参数,有如下两种实现方式。
方法一是设置控件的背景色,使用如下属性:
android:background="#aarrggbb"
其中, aa表示透明度参数(十六进制) 。
方法二是在程序里使用如下方法:
v.getBackground().setAlpha(a); / /透明度参数a取值范围为0--255
其中,v为View对象,a为十进制数。