日期:2014-05-20  浏览次数:20839 次

J2ME UI之边框
今天是那个足球项目要求完工的一天,可我却连个测试文档都没写,其实也不想写.艾.日子过的真快.对工作已经开始失去了激情.不说这些了.
  今天带给大家的将是j2me UI设计的第一篇比较有用的文章,我是这么认为的.哈
  这篇文章的要说的是,UI的风格跟边框.
  多说无用,我把代码贴出来,大家看看把.^_^

package org.wuhua.ui;
import javax.microedition.lcdui.Graphics;
/**
* <b>类名:Border.java</b> </br>
* 编写日期: 2006-8-11 <br/>
* 程序功能描述:UI的边框,抽象类,具体怎么画,画什么由子类实现. <br/>
* Demo: <br/>
* Bug: <br/>
*
* 程序变更日期 :<br/>
* 变更作者 :<br/>
* 变更说明 :<br/>
*
* @author wuhua </br> <a href="mailto:rrq12345@163.com">rrq12345@163.com</a>
*/
public abstract  class Border {

protected int borderWidth;
protected int borderColor;
/**
  * 创建Border.<br/>
  * 边框宽度默认为1.<br/>
  * 边框颜色默认为黑色.<br/>
  */
public Border() {
  this.borderWidth = 2;
  this.borderColor = 0x000000;
}

public Border(int borderWidth, int borderColor) throws IllegalArgumentException {
  if(borderWidth<0)
   throw new IllegalArgumentException("BoderWidth isn't less than 0 ");
  this.borderWidth = borderWidth;
  this.borderColor = borderColor;
}

/**
  * 返回默认风格的椭圆边框
  * @return
  */
public static Border getRoundRectBorder(){
  return new RoundRectBorder();
}
/**
  * 返回指定边框大小,边框颜色的椭圆边框
  * @return
  */
public static Border getRoundRectBorder(int borderWidth, int borderColor){
  return new RoundRectBorder(borderWidth,borderColor);
}
/**
  * 返回默认风格的长方形边框
  * @return
  */
public static Border getRectBorder(){
  return new RectBorder();
}

/**
  * 返回指定边框大小,边框颜色的长方形边边框
  * @return
  */
public static Border getRectBorder(int borderWidth, int borderColor){
  return new RectBorder(borderWidth,borderColor);
}


/**
  * 绘制边框
  *
  * @param x  起始水平线x
  * @param y  起始垂直线y
  * @param width  边框的宽度
  * @param height  边框的高度
  * @param g  绘制此边框的图形
  */
public abstract void paint( int x, int y, int width, int height, Graphics g );

}

package org.wuhua.ui;
import javax.microedition.lcdui.Graphics;
/**
* <b>类名:RectBorder.java</b> </br>
* 编写日期: 2006-8-11 <br/>
* 程序功能描述:方型边框 <br/>
* Demo: <br/>
* Bug: <br/>
*
* 程序变更日期 :<br/>
* 变更作者 :<br/>
* 变更说明 :<br/>
*
* @author wuhua </br> <a href="mailto:rrq12345@163.com">rrq12345@163.com</a>
*/
public class RectBorder extends Border {
public RectBorder() {
  super();
 
}
public RectBorder(int borderWidth, int borderColor) {
  super(borderWidth,borderColor);
}
public void paint(int x, int y, int width, int height, Graphics g) {
  g.setColor( 0x5565656);
  g.setColor(borderColor);
  g.fillRect(x, y, width, borderWidth); //绘制上边框水平线
  g.fillRect(x, y,  borderWidth, height); //绘制左边框垂直线
  g.fillRect(x, height+x, width+borderWidth,  borderWidth); //绘制下边框水平线
  g.fillRect(width+y, y,   borderWidth, height); //绘制右边框垂直线
}

}


package org.wuhua.ui;
import javax.microedition.lcdui.Graphics;
/**
* <b>类名:RoundRectBorder.java</b> </br>
* 编写日期: 2006-8-11 <br/>
* 程序功能描述: 带圆角边框<br/>
* Demo: <br/>
* Bug: <br/>
*
* 程序变更日期 :<br/>
* 变更作者 :<br/>
* 变更说明 :<br/>
*
* @author wuhua </br> <a href="mailto:rrq12345@163.com">rrq12345@163.com</a>
*/
public class RoundRectBorder extends Border{

public RoundRectBorder() {
  super();
}
public RoundRectBorder(int borderWidth, int borderColor) {
  super(borderWidth,borderColor);
}

public void paint(int x, int y, int width, int height, Graphics g) {
  g.setColor(borderColor);
  int arcWidth = 0;
  int arcHeight = 0;
  //判断边框大小然后调整员角度
  if(borderWidth<=1){
   arcHeight = borderWidth+2;
   arcWidth = borderWidth +2; 
  }else{
   arcHeight = arcWidth = borderWidth+5;
  }
  g.fillRoundRect(x,y,width,height,arcWidth,arcHeight);
  g.setColor(0xFFFFFFF);
  g.fillRect(x+borderWidth,y+borderWidth,
     width-2*borderWidth, height-2*borderWidth);
}
}


package test;
import javax.microedition.lcdui.Display;
import javax.microedition.midlet.MIDlet;
import javax.microedition.midlet.MIDletStateChangeException;
/**
* <b>类名:Test.java</b> </br>
* 编写日期: 2006-8-11 <br/>
* 程序功能描述: 测试类<br/>
* Demo: <br/>
* Bug: <br/>
*
* 程序变更日期 :<br/>
* 变更作者 :<br/>
* 变更说明 :<br/>
*
* @author wuhua </br> <a href="mailto:rrq12345@163.com">rrq12345@163.com</a>
*/
public class Test extends MIDlet {
public Test() {
  super();
  // TODO 自动生成构造函数存根
}
protected void startApp() throws MIDletStateChangeException {
  TestCanvas test = new TestCanvas();
  Display.getDisplay(this).setCurrent(test);
}
protected void pauseApp() {
  // TODO 自动生成方法存根
}
protected void destroyApp(boolean unconditional)
   throws MIDletStateChangeException {
  // TODO 自动生成方法存根
}


}


package test;
import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
import org.wuhua.ui.Border;
/**
* <b>类名:TestCanvas.java</b> </br>
* 编写日期: 2006-8-11 <br/>
* 程序功能描述: <br/>
* Demo: <br/>
* Bug: <br/>
*
* 程序变更日期 :<br/>
* 变更作者 :<br/>
* 变更说明 :<br/>
*
* @author wuhua </br> <a href="mailto:rrq12345@163.com">rrq12345@163.com</a>
*/
public class TestCanvas extends Canvas {
protected void paint(Graphics g) {
  //可按照自己的意思,绘制大小,颜色绘制边框
  Border b = Border.getRectBorder(3,0x7899999);// TODO 自动生成方法存根
  b.paint(5,5,70,30,g);
}

}
上面的只是边框,接下来,我会设计一些其他的东西(呵呵)
运行效果如下.


1 楼 jianyu 2006-10-16  
lz,这样的ui有用在什么地方?我看基本上没什么用嘛
2 楼 wuhua 2006-10-16  
这些UI是作为组件用在一个足球项目的。
http://album.sina.com.cn/pic/4a17b6ad020005ws


http://album.sina.com.cn/pic/4a17b6ad020005yw

http://album.sina.com.cn/pic/4a17b6ad020005yx
3 楼 wuhua 2006-10-16  
这些UI是作为组件用在一个足球项目的。
http://album.sina.com.cn/pic/4a17b6ad020005ws


http://album.sina.com.cn/pic/4a17b6ad020005yw

http://album.sina.com.cn/pic/4a17b6ad020005yx
4 楼 wuhua 2006-10-16  
[img]
http://album.sina.com.cn/pic/4a17b6ad020005ws


[/img]



5 楼 wuhua 2006-10-16  
[img]
http://album.sina.com.cn/pic/4a17b6ad020005ws


[/img]



6 楼 wuhua 2006-10-16  
[img]
http://album.sina.com.cn/pic/4a17b6ad020005ws


[/img]



7 楼 jianyu 2006-10-16  
明白了,不过俺觉得为这些个边框些这么多代码不划算。
另外,貌似这几个界面没有请专业美工设计嘛,这配色也太强烈了点
8 楼 wuhua 2006-10-16  
呵呵。谢谢。
本来这些可以很简单的写的。但涉及到重用。所以写的麻烦点
而上头也老说我写代码重用性不够,索性就来个彻底的。

这些是没经过美工的。所以。。。。。。。
9 楼 为你而来 2006-11-14  
呵呵,原来做过一段时间的足球比分的网站,只是没有想过用手机来展示,真是一个好意思!!!
10 楼 williamcomm 2006-11-14  
cxCX