GUI美化I

Java2D 基础
Graphics2D 对象
public void Paint (Graphics g) { Graphics2D g2 = (Graphics2D) g; ... }
Graphic2D 渲染上下文
Stroke
Fill
Composite Transform
Clip
Rendering hints
public void actionPerformed(ActionEvent ae) {
// 得到流逝时间
long currentTime = ae.getWhen(); long elapsedTime = currentTime - startTime;
// 利用得到的信息计算新的动画位置 }
图形合成
AlphaComposite 类包装了各种合成形式
AlphaComposite ac = AlphaComposite.getInstance(AlphaComposite.SRC); g2d.setComposite(ac);
SRC_OVER
SRC_IN
SRC_OUT
DST_OVER
DST_IN
SRC_OUT
CLEAR
定时器
javax.swing.Timer
// 创建并启动定时器
startTime = System.currentTime(); timer = new Timer(msBetweenCallbacks, actionListener); timer.start();
// 定时器回调 actionPerformed() 方法
UserTransferHandler(Cont.)
public Transferable createTransferable(JComponent c) { TreePath path = tree.getSelectionPath(); if (path == null) { return null; } Object obj = path.getLastPathComponent(); if (obj instanceof User) { return new UserTransferable((User)obj); } return null; }
整体的立体效果
正中的头像最近
> 位置定为 0.0
最43;1.0, -1.0
对于之间的任何一个头像
> 两个参数:头像大小,头像透明度 > 按照高斯分布计算权值,决定上述参数
步骤
1 - 人家闺女怎么打扮 ? 2 - 准备工作 :Java2D 简介 3 - 第一印象相当重要:美化登录界面 4 - 更温柔体贴:改变联系人列表 5 - 有趣也很重要:新的对话窗口
例子 - 圆长方形剪切椭圆
private Ellipse2D ellipse = new Ellipse2D.Float(); private Rectangle2D rect = new Rectangle2D.Float(); ellipse.setFrame(x, y, ew, eh); g2.setClip(ellipse); rect.setRect(x+5, y+5, ew-10, eh-10); g2.clip(rect);
演示
改善后的登录界面
万事大吉了?
大多数用户都会感到满意 界面看上去不错,简洁易用 但是 ...... 算得上有趣吗?
让我们做一下超级美容!
演示
超级登录界面
运用超级界面美容术
效果真的全是 Java 做出来的? Java2D API 的应用 > Gradients > AlphaComposites > 硬件加速 定制 JFC/Swing 控件 定制布局 定时器(动画效果)
操作上的问题
让管理联系人变得方便
利用 JSF/Swing 中的拖拽 (Drag&Drop) API
> 打开拖拽设置 tree.setDragEnabled(true); > 设置 Drop Mode ( 6.0 中的新特性) tree.setDropMode(DropMode.INSERT); > 自定义一个 TransferHandler 来管理节点 tree.setTransferHandler( new UserTransferHandler());
外观上的问题
似是而非的 Windows 界面
采用定制的 PasswordView
passwordField.setUI(new BasicPasswordFieldUI() { public View create(Element elem) { return new PasswordViewXP(elem); } }); private class PasswordViewXP extends PasswordView { protected int drawEchoCharacter(Graphics g, int x, int y, char c) { g.fillOval(x, y, width, width); } }
外观上的问题
> 似是而非的 Windows 外观
相当的无趣
操作上的问题
这是什么程序?
这是程序的第一个界面 需要
> 提示程序的名称 > 提示程序的用途
操作上的问题
我的账号在哪里?
按姓名对账号进行排序 利用 ListCellRenderer
> 对于奇数偶数行采用不同的背景色 > 为每一个账号设置图标
操作上的问题
我是使用快捷键的高级用户
为按钮设置快捷键
accountsButton.setMnemonic('A');
将登录按钮设置成缺省操作
frame.getRootPane().setDefaultButton(loginButton);
将焦点设在密码框
passwordField.requestFocusInWindow()
MediumTreeCellRenderer (Cont.)
public void paintComponent(Graphics g) { if (!isLeaf) { GradientPaint gp = new GradientPaint(0, 0, c1, 0, getHeight(), c2, true); ((Graphics2D)g).setPaint(gp); g.fillRect(0, 0, getWidth(), getHeight()); } ...... if (isLeaf) { Icon statusIcon = getStatusIcon(user.getStatus()); icon.paintIcon( this, g, getWidth() - icon.getIconWidth(), (getHeight() - icon.getIconHeight()) / 2); } }
步骤
1 - 人家闺女怎么打扮 ? 2 - 准备工作 :Java2D 简介 3 - 第一印象相当重要:美化登录界面 4 - 更温柔体贴:改变联系人列表 5 - 有趣也很重要:新的对话窗口
演示
素面朝天的登录界面
问题出在什么地方?
操作上的问题
> 这是什么程序? > 我的账号在哪里? > 我是使用快捷键的高级用户
步骤
1 - 人家闺女怎么打扮 ? 2 - 化妆品介绍 :Java2D 3 - 第一印象相当重要:美化登录界面 4 - 更温柔体贴:改变联系人列表 5 - 有趣也很重要:新的对话窗口
Gaim
Miranda
MSN Messenger
演示
咱们家闺女什么样?
步骤
1 - 人家闺女怎么打扮 ? 2 - 化妆品介绍 :Java2D 3 - 第一印象相当重要:美化登录界面 4 - 更温柔体贴:改变联系人列表 5 - 有趣也很重要:新的对话窗口
演示
平实的联系人列表
问题出在什么地方?
操作上的问题
> 所有的联系人看上去都差不多,甚至无法分清
联系人跟联系人组的区别 > 无法知道联系人的连线状态 > 管理联系人非常麻烦
同样相当的无趣
操作上的问题
定制的 TreeCellRenderer 可以
> > > >
给所有联系人组不同的外观 区分不同的联系人 为每个联系人绘制各自的图标 通过第二个图标表示联系人的在线信息
桌面上的 Java SE : GUI 超级美容术(一)
沈卓立 (Joey Shen) Technology Evangelist Sun Microsystems Inc.
步骤
1 - 人家闺女怎么打扮 ? 2 - 化妆品介绍 :Java2D 3 - 第一印象相当重要:美化登录界面 4 - 更温柔体贴:改变联系人列表 5 - 有趣也很重要:新的对话窗口
MediumTreeCellRenderer
扩展DefaultTreeCellRenderer
private User user = null; public Component getTreeCellRendererComponent(...) { super.getTreeCellRendererComponent(...); if (value instanceof User) { user = (User)user; } setIcon(user != null ? user.getBuddyIcon() : null); return this; }
分层组合
StackLayout 介绍
分层组合
使用 StackLayout