第7章 低级用户界面编程.ppt

第第7章章 低级用户界面编程低级用户界面编程郝玉龙E_mail：J2ME移动应用开发移动应用开发电子讲义电子讲义n n7.17.1低级用户界面编程概述低级用户界面编程概述n n7.2 Graphics7.2 Graphics绘图绘图n n7.37.3底层事件处理底层事件处理n n7.47.4高级高级CommandCommand命令处理命令处理 n n7.57.5高级事件与低级事件的并发高级事件与低级事件的并发n n7.67.6高级屏幕与低级屏幕的协同高级屏幕与低级屏幕的协同n n7.77.7屏幕事件处理屏幕事件处理n n7.87.8深入研究屏幕绘制深入研究屏幕绘制n n7.97.9开发自定义组件开发自定义组件n n小结小结7.1低级用户界面编程概述低级用户界面编程概述n n高级用户界面高级用户界面APIAPI使用起来比较简单，且具有较高使用起来比较简单，且具有较高的可移植性，但由于是通过底层的的可移植性，但由于是通过底层的MIDPMIDP实现来控实现来控制最终的制最终的UIUI显示，因此无法实现对屏幕显示，因此无法实现对屏幕UIUI组件外组件外观的精确控制。观的精确控制。n n在一些手机游戏等程序的实现中，要求开发人员在一些手机游戏等程序的实现中，要求开发人员必须对屏幕画面的每一个细节都要进行精确控制，必须对屏幕画面的每一个细节都要进行精确控制，这就需要用到低级用户界面这就需要用到低级用户界面APIAPI来进行界面开发。来进行界面开发。n n利用低级用户界面利用低级用户界面APIAPI，开发者可以对界面进行更，开发者可以对界面进行更精确的控制，但在获得更大的灵活性的同时也失精确的控制，但在获得更大的灵活性的同时也失去了可移植性。去了可移植性。7.1低级用户界面编程概述 MIDP为程序开发人员提供了一组低层API。低层API由Canvas类和一组辅助支撑类（例如图形、字体和图像）组成。用户利用这些低级API可对设备精确控制，如绘制像素、接收原始的用户输入事件等。与高级API相比，开发人员可以更加灵活地控制屏幕绘制，但同时开发的复杂程度也大大提高，并在一定程度上丧失了程序的移植性。n n低级用户界面编程必须使用两个关键类：低级用户界面编程必须使用两个关键类：CanvasCanvas类和类和GraphicsGraphics类。类。n nCanvasCanvas是个抽象类，代表要绘制的抽象屏幕。为是个抽象类，代表要绘制的抽象屏幕。为使用低层使用低层APIAPI建立用户界面，应用程序必须建立建立用户界面，应用程序必须建立CanvasCanvas的一个子类，并实现的一个子类，并实现paint()paint()方法。方法。n nGraphicsGraphics类的实例是作为参数传递给类的实例是作为参数传递给paint()paint()的，它的，它提供了设备绘图能力的入口，它允许在像素层面提供了设备绘图能力的入口，它允许在像素层面直接与显示设备交互操作。任何时候系统需要绘直接与显示设备交互操作。任何时候系统需要绘制屏幕时，都将调用制屏幕时，都将调用CanvasCanvas类的类的paint()paint()方法。方法。n n低级用户界面编程的核心任务在于在低级用户界面编程的核心任务在于在CanvasCanvas类的类的paintpaint()()方法中如何利用方法中如何利用GraphicsGraphics对象进行绘图操作。对象进行绘图操作。n n任何时候开发人员都可以用任何时候开发人员都可以用repaint()repaint()来产生重绘事来产生重绘事件，从而间接调用件，从而间接调用CanvasCanvas类的类的paint()paint()方法绘制屏幕。方法绘制屏幕。repaintrepaint()()一共有两个同名方法，其中一个需要四个参数，一共有两个同名方法，其中一个需要四个参数，分别是起始坐标（分别是起始坐标（x x，y y），还有宽度和高度，另），还有宽度和高度，另外一个不需要任何参数，它是代表整个屏幕全部外一个不需要任何参数，它是代表整个屏幕全部重新绘制，显然，前者的效率较后者要高，实际重新绘制，显然，前者的效率较后者要高，实际开发中也大多数是用前者而不是后者。开发中也大多数是用前者而不是后者。n n注意：在应用程序中永远不要自行调用注意：在应用程序中永远不要自行调用paint()paint()方方法，要重画屏幕或者重画屏幕中的一部分，应当法，要重画屏幕或者重画屏幕中的一部分，应当使用使用repaint()repaint()方法。方法。n n程序程序7 71 1：MyCanvas.javaMyCanvas.javan nimport import javax.microedition.lcdui.Canvasjavax.microedition.lcdui.Canvas;n nimport import javax.microedition.lcdui.Graphicsjavax.microedition.lcdui.Graphics;n npublic class public class MyCanvasMyCanvas extends Canvas extends Canvas n nprotected void protected void paint(Graphicspaint(Graphics g)g)n ng.setColor(255g.setColor(255，255255，255);255);n ng.fillRect(0g.fillRect(0，0 0，getWidthgetWidth()()，getHeightgetHeight();();n ng.setColor(0g.setColor(0，0 0，255);255);n n g.drawString(Hellog.drawString(Hello，worldworld，1010，1010，Graphics.TOP|Graphics.LEFTGraphics.TOP|Graphics.LEFT););n n n n n n程序程序7 72 2：CanvasTest.javaCanvasTest.javan nimport import javax.microedition.lcdui.Displayjavax.microedition.lcdui.Display;n nimport import javax.microedition.midlet.MIDletjavax.microedition.midlet.MIDlet;n nimport import javax.microedition.midlet.MIDletStateChangeExceptionjavax.microedition.midlet.MIDletStateChangeException;n npublic class public class CanvasTestCanvasTest extends extends MIDletMIDlet n n private Display private Display displaydisplay;n npublic public CanvasTestCanvasTest()()n nsuper();super();n n n nprotected void protected void startAppstartApp()throws()throws MIDletStateChangeExceptionMIDletStateChangeException n ndisplay=display=Display.getDisplay(thisDisplay.getDisplay(this););n nMyCanvasMyCanvas mc=new mc=new MyCanvasMyCanvas();();n ndisplay.setCurrent(mcdisplay.setCurrent(mc););n n n nprotected void protected void pauseApppauseApp()()n n n nprotected void protected void destroyApp(booleandestroyApp(boolean arg0)throws arg0)throws MIDletStateChangeExceptionMIDletStateChangeException n n n n 图图71 程序程序72运行结果画面运行结果画面7.2 Graphics绘图n n7.2.1Graphics绘图坐标图图72 绘图坐标系对比绘图坐标系对比XY笛卡儿坐标系XYGaphics绘图坐标系 7.2.2颜色操作颜色操作n n在绘制任何对象之前，必须首先为Graphics对象指定当前颜色，然后就能按照预先设定颜色显示绘制的各种对象。可以使用用如下方法进行颜色设定。n n void void setColor(intsetColor(int RGB)RGB)n nvoid void setColor(intsetColor(int red red，intint green green，intint blue)blue)n nvoid void setGrayScale(intsetGrayScale(int value)value)7.2.3绘图操作绘图操作表表表表7 71 Graphics1 Graphics常见绘图操作常见绘图操作常见绘图操作常见绘图操作方法说明void drawArc(int x，int y，int width，int height，int startAngle，int arcAngle)绘制弧形void drawChar(char character，int x，int y，int anchor)绘制特定字符void drawChars(char data，int offset，int length，int x，int y，int anchor)绘制字符数组Void drawImage(Image img，int x，int y，int anchor)绘制一幅图像void drawLine(int x1，int y1，int x2，int y2)绘制一条直线void drawRect(int x，int y，int width，int height)绘制一个矩形void drawRegion(Image src，int x_src，int y_src，int width，int height，int transform，int x_dest，int y_dest，int anchor)拷贝图像的一部分并经过转换后复制到一指定位置void drawRGB(int rgbData，int offset，int scanlength，int x，int y，int width，int height，boolean processAlpha)绘制一组设备独立的RGB和透明度值到一指定区域.void drawRoundRect(int x，int y，int width，int height，int arcWidth，int arcHeight)绘制一个圆角矩形void drawString(String str，int x，int y，int anchor)绘制字符串void drawSubstring(String str，int offset，int len，int x，int y，int anchor)绘制特定字符串的一部分void fillArc(int x，int y，int width，int height，int startAngle，int arcAngle)填充指定矩形内的圆或椭圆void fillRect(int x，int y，int width，int height)填充矩形void fillRoundRect(int x，int y，int width，int height，int arcWidth，int arcHeight)填充圆角矩形void fillTriangle(int x1，int y1，int x2，int y2，int x3，int y3)填充三角形7.2.4 绘制几何图形绘制几何图形n n程序程序7 74 4：GraphicsDemo.javaGraphicsDemo.javan nimport import javax.microedition.lcdui.Canvasjavax.microedition.lcdui.Canvas;n nimport import javax.microedition.lcdui.Graphicsjavax.microedition.lcdui.Graphics;n npublic class public class GraphicsDemoGraphicsDemo extends Canvas extends Canvas n nprotected void protected void paint(Graphicspaint(Graphics g)g)n ng.drawRect(20g.drawRect(20，3030，3030，30);30);n ng.setColor(0g.setColor(0，255255，0);0);n ng.fillRect(60g.fillRect(60，6060，3030，30);30);n ng.setColor(255g.setColor(255，255255，0);0);n ng.drawArc(100g.drawArc(100，100100，5050，5050，0 0，360);360);n ng.fillArc(160g.fillArc(160，160160，5050，5050，0 0，270);270);n ng.setColor(0 xff0000);g.setColor(0 xff0000);n ng.fillTriangle(10g.fillTriangle(10，100100，9090，160160，1010，140);140);n n n n 图图76 绘制各种几何图形绘制各种几何图形7.2.5线型线型n nGraphicsGraphics类中保留了绘制各种图形时使用的类中保留了绘制各种图形时使用的2 2个式个式样的线条类型：样的线条类型：DOTTEDDOTTED和和SOLIDSOLID。由于。由于fillfill方法方法绘制的是填充图形而绘制的是填充图形而drawdraw方法绘制的是线框图形，方法绘制的是线框图形，因此因此drawdraw方法下，线型的指定是有效的，而在方法下，线型的指定是有效的，而在fillfill方法中线型的设定是无效的。方法中线型的设定是无效的。n n可以利用以下方法设定线形：可以利用以下方法设定线形：n nvoid void setStrokeStyle(intsetStrokeStyle(int style)style)n n其中，若要指定其中，若要指定DOTTEDDOTTED时，时，GraphicsGraphics类的参数就是类的参数就是Graphics.DOTTEDGraphics.DOTTED，指定，指定SOLIDSOLID时，时，GraphicsGraphics类的参数类的参数就是就是Graphics.SOLIDGraphics.SOLID。n n程序程序7 75 5：StrokeStyleCanvas.javaStrokeStyleCanvas.javan nimport import javax.microedition.lcdui.Canvasjavax.microedition.lcdui.Canvas;n nimport import javax.microedition.lcdui.Graphicsjavax.microedition.lcdui.Graphics;n npublic class public class StrokeStyleCanvasStrokeStyleCanvas extends Canvas extends Canvasn nprotected void protected void paint(Graphicspaint(Graphics g)g)n ng.setStrokeStyle(Graphics.SOLIDg.setStrokeStyle(Graphics.SOLID););n ng.drawRect(10g.drawRect(10，1010，150150，150);150);n ng.setStrokeStyle(Graphics.DOTTEDg.setStrokeStyle(Graphics.DOTTED););n ng.drawRect(30g.drawRect(30，3030，120120，120);120);n nn n n n 图图77 不同线型下的图形绘制效果不同线型下的图形绘制效果7.2.6绘制文本绘制文本可以使用以下方法描绘Canvas上的文本：n n void drawChar(char character，int x，int y，int anchor)n n void drawChar(char data，int offset，int length，int x，int y，int anchor)n n void drawString(String string，int x，int y，int anchor)n n void drawSubString(String str，int offset，int length，int x，int y，int anchor)n n程序程序7 76 6：AnchorCanvas.javaAnchorCanvas.javan nimport import javax.microedition.lcdui.Canvasjavax.microedition.lcdui.Canvas;n nimport import javax.microedition.lcdui.Graphicsjavax.microedition.lcdui.Graphics;n npublic class public class AnchorCanvasAnchorCanvas extends Canvas extends Canvas n nprotected void protected void paint(Graphicspaint(Graphics graphics)graphics)n ngraphics.drawStringgraphics.drawString(小楼昨夜听春雨小楼昨夜听春雨，100100，1010，n nGraphics.TOP|Graphics.LEFTGraphics.TOP|Graphics.LEFT););n ngraphics.drawStringgraphics.drawString(小楼昨夜听春雨小楼昨夜听春雨，100100，4040，n nGraphics.TOP|Graphics.HCENTERGraphics.TOP|Graphics.HCENTER););n ngraphics.drawStringgraphics.drawString(小楼昨夜听春雨小楼昨夜听春雨，100100，7070，n nGraphics.TOP|Graphics.RIGHTGraphics.TOP|Graphics.RIGHT););n ngraphics.drawStringgraphics.drawString(明朝深巷卖杏花明朝深巷卖杏花，0 0，100100，n nGraphics.TOP|Graphics.LEFTGraphics.TOP|Graphics.LEFT););n n/graphics.drawStringgraphics.drawString(白日依山尽白日依山尽，9090，100100，n n/Graphics.VCENTER|Graphics.LEFTGraphics.VCENTER|Graphics.LEFT););n ngraphics.drawStringgraphics.drawString(明朝深巷卖杏花明朝深巷卖杏花，8080，100100，n nGraphics.BOTTOM|Graphics.LEFTGraphics.BOTTOM|Graphics.LEFT););n ngraphics.drawStringgraphics.drawString(明朝深巷卖杏花明朝深巷卖杏花，160160，100100，n nGraphics.BASELINE|Graphics.LEFTGraphics.BASELINE|Graphics.LEFT););n n n n 图图710 使用不同定位点显示文本使用不同定位点显示文本7.2.7 使用字体使用字体n n在应用中描绘在应用中描绘TEXTTEXT时，并不只是默认的文字，应该也有时，并不只是默认的文字，应该也有必要描绘粗体字和下划线文字吧？底层必要描绘粗体字和下划线文字吧？底层APIAPI中有表示字体中有表示字体的的FontFont类。每个类。每个GraphicsGraphics都有一个都有一个FontFont对象与其关联，来表对象与其关联，来表示当前指定的字体信息。可以使用以下方法来设置示当前指定的字体信息。可以使用以下方法来设置GraphicsGraphics的字体：的字体：n nvoid void setFont(FontsetFont(Font font)font)n n使用下面的方法来获取当前设置的字体：使用下面的方法来获取当前设置的字体：n nstatic Font static Font getFont(intgetFont(int face face，intint style style，intint size)size)n nFontFont中有外观、风格和大小中有外观、风格和大小 3 3个属性。各属性的取值范围个属性。各属性的取值范围如下：如下：n n字体大小：字体大小：SMALLSMALL、MEDIUMMEDIUM、LARGELARGEn n字体外观：字体外观：PROPORTIONALPROPORTIONAL、MONOSPACEMONOSPACE、SYSTEMSYSTEMn n字体风格：字体风格：PLAINPLAIN、BOLDBOLD、ITALICITALIC、UNDERLINEDUNDERLINEDn n 当开发人员不对当开发人员不对FontFont进行设定时，机器会自动从设备中选进行设定时，机器会自动从设备中选择最合适的择最合适的 FontFont属性。调用方法属性。调用方法setFont(nullsetFont(null)即可使字体恢即可使字体恢复到默认状态。复到默认状态。n n程序程序7 77 7：FontCanvas.javaFontCanvas.javan nimport import javax.microedition.lcdui.Canvasjavax.microedition.lcdui.Canvas;n nimport import javax.microedition.lcdui.Fontjavax.microedition.lcdui.Font;n nimport import javax.microedition.lcdui.Graphicsjavax.microedition.lcdui.Graphics;n npublic class public class FontCanvasFontCanvas extends Canvas extends Canvas n nprotected void protected void paint(Graphicspaint(Graphics g)g)n nFont Font fontfont=Font.getFont(Font.FACE_SYSTEMFont.getFont(Font.FACE_SYSTEM，Font.STYLE_ITALIC|Font.STYLE_BOLDFont.STYLE_ITALIC|Font.STYLE_BOLD，n n Font.SIZE_LARGEFont.SIZE_LARGE););n ng.setFont(fontg.setFont(font););n ng.drawStringg.drawString(你好！你好！J2MEJ2ME，1010，1010，Graphics.LEFT|Graphics.TOPGraphics.LEFT|Graphics.TOP););n nfont=font=Font.getFont(Font.FACE_MONOSPACEFont.getFont(Font.FACE_MONOSPACE，Font.STYLE_BOLDFont.STYLE_BOLD，Font.SIZE_MEDIUMFont.SIZE_MEDIUM););n ng.setFont(fontg.setFont(font););n ng.drawStringg.drawString(你好！你好！J2MEJ2ME，1010，5050，Graphics.LEFT|Graphics.TOPGraphics.LEFT|Graphics.TOP););n nfont=font=Font.getFont(Font.FACE_PROPORTIONALFont.getFont(Font.FACE_PROPORTIONAL，Font.STYLE_UNDERLINEDFont.STYLE_UNDERLINED，Font.SIZE_LARGEFont.SIZE_LARGE););n ng.setFont(fontg.setFont(font););n ng.drawStringg.drawString(你好！你好！J2MEJ2ME，1010，9090，Graphics.LEFT|Graphics.TOPGraphics.LEFT|Graphics.TOP););n ng.setFont(nullg.setFont(null););n ng.drawStringg.drawString(你好！你好！J2MEJ2ME，1010，130130，Graphics.LEFT|Graphics.TOPGraphics.LEFT|Graphics.TOP););n n n n 图图711 使用不同的字体来显示文字信息使用不同的字体来显示文字信息n n程序程序7 78 8：FontCanvas2.javaFontCanvas2.javan nimport import javax.microedition.lcdui.Canvasjavax.microedition.lcdui.Canvas;n nimport import javax.microedition.lcdui.Fontjavax.microedition.lcdui.Font;n nimport import javax.microedition.lcdui.Graphicsjavax.microedition.lcdui.Graphics;n npublic class FontCanvas2 extends Canvas public class FontCanvas2 extends Canvas n nprotected void protected void paint(Graphicspaint(Graphics graphics)graphics)n nString text1=String text1=你好你好 ;n nString text2=String text2=本章将详细介绍如何利用本章将详细介绍如何利用MIDPMIDP的低级用户界面的低级用户界面APIAPI进行程序开发进行程序开发;n ngraphics.setColor(255graphics.setColor(255，255255，255);255);n ngraphics.fillRect(0graphics.fillRect(0，0 0，getWidthgetWidth()()，getHeightgetHeight();();n ngraphics.setColor(0graphics.setColor(0，0 0，0);0);n ngraphics.drawString(text1graphics.drawString(text1，0 0，0 0，n nGraphics.TOP|Graphics.LEFT);Graphics.TOP|Graphics.LEFT);n nFont font=graphics.getFont();Font font=graphics.getFont();n nint fontHeight=font.getHeight();int fontHeight=font.getHeight();n nif(font.stringWidth(text2)getWidth()/if(font.stringWidth(text2)getWidth()/换行处理换行处理n nint cWidth=font.substringWidth(text2int cWidth=font.substringWidth(text2，0 0，1);1);n nint num=getWidth()/cWidth;int num=getWidth()/cWidth;n ngraphics.drawSubstring(text2graphics.drawSubstring(text2，0 0，numnum，0 0，fontHeightfontHeight，n nGraphics.TOP|Graphics.LEFTGraphics.TOP|Graphics.LEFT););n ngraphics.drawSubstring(text2graphics.drawSubstring(text2，numnum，text2.length()-numtext2.length()-num，0 0，2*2*fontHeightfontHeight，n nGraphics.TOP|Graphics.LEFTGraphics.TOP|Graphics.LEFT););n nelseelsen ngraphics.drawString(text2graphics.drawString(text2，0 0，fontHeightfontHeight，n nGraphics.TOP|Graphics.LEFTGraphics.TOP|Graphics.LEFT););n n n n 图图712 实现文本自动换行显示实现文本自动换行显示 7.2.8绘制图像绘制图像可以调用可以调用GraphicsGraphics类的以下方法来绘制图像：类的以下方法来绘制图像：n nvoid void drawImage(ImagedrawImage(Image imgimg，intint x x，intint y y，intint anchor)anchor)n n其中，参数其中，参数anchoranchor代表定位点属性，使用方法与代表定位点属性，使用方法与7.2.67.2.6节完节完全一致。全一致。n nImageImage分为可变和不可变两种类型的，不可变的分为可变和不可变两种类型的，不可变的ImageImage是从是从资源文件、二进制数据、资源文件、二进制数据、RGBRGB数值及其它数值及其它ImageImage直接创建直接创建的，一旦创建完成，的，一旦创建完成，ImageImage就无法再变化。不可变的就无法再变化。不可变的ImageImage通过通过Image.createImage(StringImage.createImage(String name)name)方法从指定的路径中读方法从指定的路径中读取需要创建取需要创建ImageImage所必须的数据，注意参数中的字符串必所必须的数据，注意参数中的字符串必须以须以“/”/”打头，并且包括完整的名称。打头，并且包括完整的名称。n n可变的可变的ImageImage以给定的大小创建，它是可以修改的，可变以给定的大小创建，它是可以修改的，可变的的ImageImage由由Image.createImage(intImage.createImage(int width width，intint height)height)方法来创方法来创建，需要指定代表宽度的参数建，需要指定代表宽度的参数widthwidth和代表长度信息的参数和代表长度信息的参数heightheight。n n程序程序7 79 9：ImageCanvas.javaImageCanvas.javan nimport import javax.microedition.lcduijavax.microedition.lcdui.*;.*;n npublic class public class ImageCanvasImageCanvas extends Canvas extends Canvas n nImage Image imgimg=null;=null;n nprotected void protected void paint(Graphicspaint(Graphics g)g)n nif(imgif(img=null)getImagenull)getImage();();n n g.drawImage(imgg.drawImage(img，0 0，0 0，Graphics.LEFT|Graphics.TOPGraphics.LEFT|Graphics.TOP););n n n nprivate void private void getImagegetImage()()n ntrytryn nimgimg=Image.createImage(/butterfly.pngImage.createImage(/butterfly.png););n n catch(Exceptioncatch(Exception e)e)n ne.printStackTracee.printStackTrace();();n n n n n n 图图713 显示显示Imagen nMIDP2.0中新增了Alpha混合特性，可以生成含有半透明的像素的图像，图像中的每个像素由4个字节表示，其中第一个字节用户表示像素的透明程序，其中0表示完全透明，255表示完全模糊。程序开发人员可以使用这个特性来对图片进行一些处理，实现一些特殊效果。nn程序程序7 71010：AlphaCanvas.javaAlphaCanvas.javannimport import javax.microedition.midletjavax.microedition.midlet.*;.*;nnimport javax.microedition.lcdui.*;import javax.microedition.lcdui.*;nnimport java.io.*;import java.io.*;nnpublic class public class AlphaCanvasAlphaCanvas extends Canvas extends Canvas nn private Image private Image backgroundImagebackgroundImage;nn private private intint maskArraymaskArray;nn p