今天是那个足球项目要求完工的一天,可我却连个测试文档都没写,其实也不想写.艾.日子过的真快.对工作已经开始失去了激情.不说这些了.
今天带给大家的将是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
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
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]
http://album.sina.com.cn/pic/4a17b6ad020005ws
[/img]
5 楼 wuhua 2006-10-16
[img]
http://album.sina.com.cn/pic/4a17b6ad020005ws
[/img]
http://album.sina.com.cn/pic/4a17b6ad020005ws
[/img]
6 楼 wuhua 2006-10-16
[img]
http://album.sina.com.cn/pic/4a17b6ad020005ws
[/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