Android开发讲义(第二章 Android初级界面编程).ppt

1、Android开发讲义,主讲人:,Android开发环境的搭建 Android初级界面编程 事件处理 深入Activity Intent与IntentFilter Android高级界面编程 Android应用的资源,Android开发讲义,图形与图象处理 Android数据存储技术与数据共享 Service与Broadcast Receiver Android网络应用 多媒体应用开发 OpenGL与3D应用开发 传感器应用开发,Android开发讲义,GPS应用开发 Google Map服务 项目实战,Android开发讲义,界面编程与视图组件 布局管理器 基本界面组件,Android开发讲

2、义,Android开发讲义,一.界面编程与视图(View)组件,Android应用时运行在手机系统上的程序，这种程序给用户的第一印象就是用户界面。从市场角度来看，所有开发者都应充分重视Android应用的用户界面。 Android提供了非常丰富的用户界面组件，借助于这些用户界面组件，开发者可以非常方便地进行用户界面开发，而且可以开发出非常优秀的用户界面。,Android开发讲义,1.视图组件与容器组件,在Android程序中的按钮、文本框、菜单等都理解为视图组件，所有的视图组件都继承自View类，View组件非常类似于Swing编程中的Jpanel，代表了一个空白的矩形区域。 View类还有一

3、个重要的子类：ViewGroup通常作为其他组件的容器使用。也有部分的组件建立在ViewGroup基础之上。,Android开发讲义,2.使用XML布局文件控制UI界面,Android推荐使用XML布局文件来控制视图，这样不仅简单、明了，而且可以讲应用的视图控制逻辑从Java代码中分离出来，放入XML文件中控制，这样更好地体现MVC原则。 在Android应用的res/layout目录下定义一个文件名任意的XML布局文件之后(R.java会自动收录该布局资源)，Java代码可通过如下方法在Activity中显示该视图:setContentView(R.layout.); 当在布局文件中添加多个

4、UI组件时，都可以为该UI组件制定id属性，该属性值代表组件的唯一标识，在Java代码中访问制定UI组件，可以通过findViewById(R.id.ID属性值);,Android开发讲义,为了更好地管理Android应用的用户界面里的各个组件,Android提供了布局管理器.通过使用布局管理器,Android应用的图形用户界面具有良好的平台无关性。 通过布局管理器可以根据运行平台来调整组件的大小，避免让程序手动控制每个组件的大小、位置。,二.布局管理器,Android开发讲义,1.线性布局 线性布局由LinearLayout所代表，它会将容器里的组件一个挨着一个排列。LinearLayout

5、可以控制各个组件横向或纵向排列。 Android的线性布局不会自动换行，当组件一个挨着一个排列到头之后，剩下的组件将不会被显示出来。 注意：当属性中包含多个属性值时，将用“|”隔开，但竖线前后一定不要出现空格。,设置布局管理器内组件的排列方式，可以设置为horizontal(水平排列)、vertical(垂直排列、默认值),设置布局管理器内组件的对齐方式。也可以同时指定多种对齐方式的组合,线性布局 示例一 ,Android开发讲义,线性布局 示例二 ,Android开发讲义,超出范围的按钮将被截断,Android开发讲义,2.表格布局 表格布局由TableLayout所代表，表格布局采用行、列

6、德尔形式来管理UI组件，TableLayout并不需要明确地声明包含多少行、多少列，而是通过添加TableRow来控制表格的行数和列数。 每次向TableLayout中添加一个TableRow就是一个表格行，TableRow也是容器，因此它也可以不断地添加其他组件，每添加一个子组件该表格就增加一列。 如果直接向TableLayout中添加组件，那么这个组件将直接占用一行。 在表格布局中，列的宽度由该列中最宽的那个单元格决定，整个表格布局的宽度则取决于父容器的宽度。,Android开发讲义,2.表格布局 TableLayout的常用XML属性及相关方法,表格布局 示例一 ,Android开发讲义

7、,指定第二列允许收缩，第三列允许拉伸,指定第二列隐藏,指定第二、三列可以被拉伸,表格布局 示例二 ,Android开发讲义,如果元素独占一行，则可以省略标签,表格布局 示例二 ,Android开发讲义,在每一行中的每个控件独占一列，每行可以包含多列。 stretchColumns属性则控制该列的元素随内容拉伸尺寸； shrinkColumns属性则控制该列的元素随收缩其内容；,Android开发讲义,前面介绍了Android界面编程的有一些基础知识，接下来将要介绍Android基本界面组件。无论看上去多么美观的UI界面，开始都是先创建容器，然后不断地向容器中添加界面组件，最后形成一个美观的UI

8、界面。,三.基本界面组件,EditText,Button,TextView,标题栏,Android开发讲义,1.文本框(TextView)与编辑框(EditText)的功能与用法 TextView直接继承了View，它还是EditText、Button两个UI组件类的父类。 TextView的作用就是在界面上显示文本，从功能上来看，它就是一个文本编辑器，只是Android关闭了它的文字编辑功能。如果想要定义一个可以编辑内容的文本框，则可以使用它的子类：EditText。 TextView和EditText具有很多相似之处，它们之间的最大区别在于TextView不允许用户编辑文本内容，而Edit

9、Text则允许用户编辑文本内容。,文本框与编辑框 示例一(字号、中间省略、密码) ,Android开发讲义,定义TextView控件，并且设置了文本的字号,定义TextView控件，并且设置了中间省略,定义TextView控件，并且设置了密码框,文本框与编辑框 示例二(带边框图片的TextView) ,Android开发讲义,将背景设定为drawable文件夹下bg_border文件内所定义的图形,Icon为图片的名称,在bg_border.xml中定义的图形元素,文本框与编辑框 示例三(用户友好的输入界面) ,Android开发讲义,如果文本是可选的，让它获取焦点并将焦点定位在文本的开始位置

10、，而不是将焦点定位在文本选中的位置,设置当文字过长时，该控件将如何显示其内容 start省略号显示在开头 end省略号显示在结尾 middle省略号显示在中间,文本框与编辑框 示例三(用户友好的输入界面) ,Android开发讲义,设置这是一个密码框，用户在该文本框输入的字符会以“.”符号代替,文本框与编辑框 示例三(用户友好的输入界面) ,Android开发讲义,设置电话号码输入框,Android开发讲义,2.按钮(Button)与图片按钮(ImageButton)的功能与用法 Button继承了TextView，ImageButton继承了Button。不管是Button还是ImageBu

11、tton它们的功能都很单一，主要是在UI界面上生成一个按钮，当用户单击按钮时，按钮会触发一个OnClick事件。 Button与ImageButton的区别在于：Button生成的按钮上显示文字，而ImageButton上则是显示图片。 Button与ImageButton上的背景颜色或是背景图片是固定的，不会随着用户的动作而改变。为了定义图片随用户动作改变的按钮，可以考虑使用XML源文件来定义Drawable对象，再将Drawable对象设为Button的android:background属性值，或设为ImageButton的android:src属性值。,普通按钮、图片按钮、自定义按钮、

12、示例 ,Android开发讲义,普通按钮：android:background设置背景图片或是颜色； 图片按钮：android:src设置背景图片；,普通按钮、图片按钮、自定义按钮 示例 ,Android开发讲义, ,将样式指定为XML文件,Android开发讲义,3.使用9patch图片作为按钮背景 当按钮的内容太多时，Android会自动缩放整张图片，以保证背景图片能覆盖整个按钮。但这种缩放整张图片的效果可能并不好。可能需要的情况是我们只想缩放图片中某个部分，这样才能保证按钮的视觉效果。 为了实现只缩放图片中某个部分的效果，我们需要借助于9Patch图片来实现。9Patch图片是一种特殊的

13、PNG图片，这种图片以.9.png结尾。 9.png格式的图片是Android平台上新创的一种被拉伸却不失真的东西。 首先9.png图片的四周与普通的png图片相比多了一个像素位的白色区域，该区域只有在图片呗还原和制造的时候才能看到，当打包后无法看见，并且图片的总像素会缩小2个像素，比如2323像素的图片被打包后会变成2121像素。,具体操作步骤 1.运行android-sdk目录下tools文件夹下的draw9patch工具，将打开如下窗口,Android开发讲义,具体操作步骤 2.打开需要处理的图片,Android开发讲义,解释：中间黑红条纹部分标识不能编辑，边缘白色透明框就是上述介绍的增

14、加的一像素边框。,具体操作步骤 3.将鼠标放在白色边框，点住左键不放拖动，会出现黑色线条,Android开发讲义,解释：1号黑色条位置向下覆盖的区域表示图片横向拉伸时，只拉伸该区域 2号黑色条位置向右覆盖的区域表示图片纵向拉伸时，只拉伸该区域 3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域 4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域,1,2,3,4,具体操作步骤 4.实际对比效果,Android开发讲义,普通的png图片被拉伸时的效果，此时边角被放大，并且产生了失真的效果。,9.png的图片，在程序中被放大后，不会产生边角失真的现象。,Android开发讲义,4.单选按钮(

15、RadioButton)和复选框(CheckBox)的应用 单选按钮和复选框是所有用户界面中最普通的UI组件，Android中的RadioButton和CheckBox都继承了Button按钮，因此它们都可直接使用Button支持的各种属性和方法。 RadioButton和CheckBox都可额外指定一个android:checked属性，用于指定初始时是否被选中。,单选按钮、复选按钮 示例 ,Android开发讲义,必须加id属性，否则无法实现单选框的排他处理,单选按钮、复选按钮 示例 ,Android开发讲义,Android开发讲义,5.时钟(AnalogClock和DigitalCloc

16、k)的功能与用法 时钟UI组件是两个非常简单的组件，DigitalClock本身就继承了TextView，也就是说它本身就是文本框，只是它里面显示的内容是当前时间；AnalogClock则继承了View组件，它重写了View的OnDraw方法，它会在View上显示模拟时钟。 DigitalClock和AnalogClock都会显示当前时间。不同的是，DigitalClock显示数字时钟，可以显示当前的秒数；AnalogClock显示模拟时钟，不会显示当前秒数。,时钟(AnalogClock和DigitalClock)的功能与用法 示例 ,Android开发讲义,模拟时钟,数字时钟,Androi

17、d开发讲义,6.计时器(Chronometer)的功能与用法 计时器组件也是集成自TextView，因此它会显示一组文本。但该组件并不显示当前时间，它显示的是从某个起始时间开始，一共过去了多长时间。 该组件所提供的方法： setBase(long base)：设置计时器的起始时间。 seFormat(String format)：设置显示时间的格式。 start()：开始计时。 stop()：停止计时。 setOnChronometerTickListener()：为计时器绑定事件监听器，当计时器改变时触发该监听器。,计时器(Chronometer)的功能与用法 示例 ,Android开发讲义

18、,计时器定义,计时器(Chronometer)的功能与用法 示例 public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); final Chronometer ch = (Chronometer)findViewById(R.id.timer); Button start = (Button)findViewById(R.id.start); start.setOnClickListener(new OnClickListener() public void onClick(View v) ch.setBase(SystemClock.elapsedRealtime(); ch.start(); ); ch.setOnChronometerTickListener(new OnChro