Swing製作高仿QQ界面包含主界面、聊天窗口、系統設置窗口|圓角界面|透明|顏色|渲染|換膚

最近幾天閒着沒事，練習了一下。編寫了一個模仿QQ的界面，主要是練習Swing。呵呵，基本上使用到了我博客前面講的各種技術，在這裏跟大家分享了。我們先來看看主界面：

 

     

左邊的界面是用Swing編寫的，右邊的QQ的原界面,大致的界面已經很像了但qq的按鈕的確很難做試了幾種方法但效果都不好。還有就是QQ的發光文字用Swing挺難實現的，界面並沒有細化。像搜索欄可以再加上一層漸變，聯繫人列表中的熱度和羣很簡單這裏就不實現了。

先來看看菜單按鈕的實現：

第一種狀態：

第二種狀態：

這裏使用了兩個圖片：和

來看看按鈕的代碼：

package com.flyingwind.tutorial; import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Image; import java.awt.Paint; import java.awt.RadialGradientPaint; import java.awt.Shape; import java.awt.geom.Ellipse2D; import java.awt.geom.Point2D; import javax.swing.JButton; public class RButton extends JButton { Image image; boolean flag=false; boolean isheight=false; public boolean isIsheight() { return isheight; } public void setIsheight(boolean isheight) { this.isheight = isheight; } public boolean isFlag() { return flag; } public void setFlag(boolean flag) { this.flag = flag; } public Image getImage() { return image; } public void setImage(Image image) { this.image = image; } Image rimage; int xs,ys,widths,heights; public RButton(Image im,Image old,int sizes) { super(""); image=im; rimage=old; // 這些聲明把按鈕擴展爲一個圓而不是一個橢圓。 setPreferredSize(new Dimension(sizes,sizes)); //這個調用使JButton不畫背景，而允許我們畫一個圓的背景。 setContentAreaFilled(false); //this.setBackground(Color.GRAY); } // 畫圓的背景和標籤 protected void paintComponent(Graphics g) { Graphics2D g2d = (Graphics2D) g; if (getModel().isArmed()) { // 你可以選一個高亮的顏色作爲圓形按鈕類的屬性 //g.setColor(Color.lightGray); if(rimage!=null){ g.drawImage(rimage, xs, ys, widths, heights, null); } } else { /*Paint f=new GradientPaint(0.0f, 0.0f, new Color(255, 255, 255, 100), 0,getSize().height,new Color(255, 255, 255, 0),false);*/ Paint p; if(isheight){ p = new RadialGradientPaint(new Point2D.Double(getWidth() / 2.0f, getHeight() / 2.0f), getWidth() / 2.0f, new float[] { 0.0f, 1.0f }, new Color[] { new Color(51, 153, 255), new Color(255, 255, 255, 200) }); }else{ p = new RadialGradientPaint(new Point2D.Double(getWidth() / 2.0f, getHeight() / 2.0f), getWidth() / 2.0f, new float[] { 0.0f, 1.0f }, new Color[] { new Color(51, 153, 255), new Color(255, 255, 255, 100) }); } g2d.setPaint(p); g2d.fillOval(0, 0, getSize().width - 1, getSize().height - 1); if(image!=null){ if (flag) { AlphaComposite ac2 = AlphaComposite.getInstance( AlphaComposite.SRC_OVER, 0.5f); g2d.setComposite(ac2); } g2d.drawImage(image, xs, ys, widths, heights, null); } //g.setColor(getBackground()); } //這個調用會畫一個標籤和焦點矩形。 super.paintComponent(g); } public void setPoints(int x,int y,int width,int height){ this.xs=x; this.ys=y; this.widths=width; this.heights=height; } // 用簡單的弧畫按鈕的邊界。 protected void paintBorder(Graphics g) { g.setColor(new Color(0,0,0,30)); g.drawOval(0, 0, getSize().width - 1, getSize().height - 1); } // 偵測點擊事件 Shape shape; public boolean contains(int x, int y) { // 如果按鈕改變大小，產生一個新的形狀對象。 if (shape == null || !shape.getBounds().equals(getBounds())) { shape = new Ellipse2D.Float(0, 0, getWidth(), getHeight()); } return shape.contains(x, y); } }

對於按鈕我們也進行了封裝：

package com.flyingwind.tutorial; import java.awt.Color; import java.awt.Dimension; import java.awt.GradientPaint; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Image; import java.awt.Paint; import javax.swing.Icon; import javax.swing.JLabel; public class GnButton extends JLabel { private boolean flag=false; private Image image; public Image getImage() { return image; } public void setImage(Image image) { this.image = image; } public GnButton(Icon icon){ super(icon); } public GnButton(Image image){ super(""); } public GnButton(int size){ super(""); setPreferredSize(new Dimension(size,size)); } public boolean isFlag() { return flag; } public void setFlag(boolean flag) { this.flag = flag; } protected void paintComponent(Graphics g) { Graphics2D g2d = (Graphics2D) g; if (isFlag()) { Paint f = new GradientPaint(0.0f, 0.0f, new Color(255, 255, 255, 100), 0, 50, new Color(255, 255, 255, 200), true); g2d.setPaint(f); // g2d.fillRect(0, 0, this.getWidth(), this.getHeight()); g2d.fillRoundRect(1, 1, this.getWidth() - 2, this.getHeight() - 2, 3, 3); f=null; } g2d.drawImage(image, 5, 5, 18, 20, null); } }

在鼠標懸停在按鈕上時按鈕就會發光。

接下來看看這個按鈕，在按鈕的邊緣使用了黑色邊緣調整了透明度，再用一個白色的邊框表現出高光。中間使用了線性漸變。

package com.flyingwind.tutorial; import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Image; import java.awt.LinearGradientPaint; import java.awt.Paint; import java.awt.Shape; import java.awt.geom.RoundRectangle2D; import javax.swing.JButton; public class BaseButton extends JButton { Image image; boolean flag=false; boolean isheight=false; int xs,ys,widths,heights; public boolean isIsheight() { return isheight; } public void setIsheight(boolean isheight) { this.isheight = isheight; } public boolean isFlag() { return flag; } public void setFlag(boolean flag) { this.flag = flag; } public Image getImage() { return image; } public void setImage(Image image) { this.image = image; } public BaseButton(Image im,String text,int width,int height){ super(""); if(text!=null){ setText(text); } image=im; setPreferredSize(new Dimension(width,height)); //這個調用使JButton不畫背景， setContentAreaFilled(false); } // 畫圓的背景和標籤 protected void paintComponent(Graphics g) { Graphics2D g2d = (Graphics2D) g; if (getModel().isArmed()) { // 你可以選一個高亮的顏色作爲圓形按鈕類的屬性 //g.setColor(Color.lightGray); if(image!=null){ g.drawImage(image, xs, ys, widths, heights, null); } if (!getText().equals("")) { g2d.drawString(getText(), xs+widths+4, ys+heights-heights/4); } } else { /*Paint f=new GradientPaint(0.0f, 0.0f, new Color(255, 255, 255, 100), 0,getSize().height,new Color(255, 255, 255, 0),false);*/ if (isheight) { //畫出多點線性漸變 Paint oldPaint = g2d.getPaint(); LinearGradientPaint p; p = new LinearGradientPaint(0.0f, 0.0f, 0.0f, 20.0f, new float[] { 0.0f, 0.5f, 0.501f, 1.0f }, new Color[] { new Color(255,255,255,200), new Color(255,255,255,0), new Color(255,255,255,0), new Color(255,255,255,200) }); g2d.setPaint(p); //g2d.fillRect(0, 0, getWidth(), 21); g2d.fillRoundRect(1, 1, getWidth()-4, getHeight()-4, 1, 1); g.setColor(new Color(255, 255, 255, 200)); /* * g.drawOval(0, 0, getSize().width - 1, getSize().height - 1); */ //畫出高光部分 g.drawRoundRect(1, 1, getSize().width-4, getSize().height-4, 1, 1); g2d.setPaint(oldPaint); } if(image!=null){ if (flag) { AlphaComposite ac2 = AlphaComposite.getInstance( AlphaComposite.SRC_OVER, 0.5f); g2d.setComposite(ac2); } g2d.drawImage(image, xs, ys, widths, heights, null); if (!getText().equals("")) { g2d.drawString(getText(), xs+widths+4, ys+heights-heights/4); } } //g.setColor(getBackground()); } //這個調用會畫一個標籤和焦點矩形。 //super.paintComponent(g); } public void setPoints(int x,int y,int width,int height){ this.xs=x; this.ys=y; this.widths=width; this.heights=height; } // 用簡單的弧畫按鈕的邊界。 protected void paintBorder(Graphics g) { if (isheight) { g.setColor(new Color(0, 0, 0, 100)); /* * g.drawOval(0, 0, getSize().width - 1, getSize().height - 1); */ g.drawRoundRect(0, 0, getSize().width-2, getSize().height-2, 1, 1); } } // 偵測點擊事件 Shape shape; public boolean contains(int x, int y) { // 如果按鈕改變大小，產生一個新的形狀對象。 if (shape == null || !shape.getBounds().equals(getBounds())) { /*shape = new Ellipse2D.Float(0, 0, getWidth(), getHeight());*/ shape=new RoundRectangle2D.Double(0, 0, this.getWidth(), this.getHeight(), 3, 3); } return shape.contains(x, y); } }

我們再來看看發光的文字是怎麼實現的例如這樣的效果，就是調用以下方法實現的。

private void drawText(Graphics2D g2, int size, float opacity) { Composite oldComposite = g2.getComposite(); float preAlpha = 1.0f; if (oldComposite instanceof AlphaComposite && ((AlphaComposite) oldComposite).getRule() == AlphaComposite.SRC_OVER) { preAlpha = ((AlphaComposite) oldComposite).getAlpha(); } g2.setFont(getFont()); FontMetrics metrics = g2.getFontMetrics(); int ascent = metrics.getAscent(); int heightDiff = (metrics.getHeight() - ascent) / 2; g2.setColor(new Color(255,255,255,150)); double tx = 2.0; double ty = 2.0 + heightDiff - size; g2.translate(tx, ty); for (int i = -size; i <= size; i++) { for (int j = -size; j <= size; j++) { double distance = i * i + j * j; float alpha = opacity; if (distance > 0.0d) { alpha = (float) (1.0f / ((distance * size) * opacity)); } alpha *= preAlpha; if (alpha > 1.0f) { alpha = 1.0f; } g2.setComposite(AlphaComposite.SrcOver.derive(alpha)); g2.drawString(this.getText(), i + size-3, j + size + ascent-3); } } g2.setComposite(oldComposite); g2.setColor(Color.BLACK); g2.drawString(this.getText(), size-3, size + ascent-3); g2.translate(-tx, -ty); }

好友列表的實現很簡單，使用JTree來實現的。有人要問這樣的效果是怎樣實現的，其實也不難主要是利用了樹的樣式將樹平行化

 package com.flyingwind.tutorial; import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; import javax.swing.plaf.*; import javax.swing.plaf.basic.*; import javax.swing.tree.*; public class TreeUI extends BasicTreeUI { private static JTree tree; private JViewport parentViewport; private VariableLayoutCache layoutCache; public static ComponentUI createUI(JComponent c) { return new TreeUI(); } public void installUI(JComponent c) { if ( c == null ) throw new NullPointerException( "null component passed to BasicTreeUI.installUI()" ); tree = (JTree)c; tree.addTreeSelectionListener(new TreeSelectionListener() { public void valueChanged(TreeSelectionEvent e) { layoutCache.invalidatePathBounds(e.getOldLeadSelectionPath()); layoutCache.invalidatePathBounds(e.getNewLeadSelectionPath()); updateSize(); tree.repaint(); } }); tree.addHierarchyListener(new HierarchyListener() { public void hierarchyChanged(HierarchyEvent e) { if (e.getID() == HierarchyEvent.HIERARCHY_CHANGED && (e.getChangeFlags() & HierarchyEvent.PARENT_CHANGED) != 0 && e.getChangedParent() instanceof JViewport) { parentViewport = (JViewport) e.getChangedParent(); } } }); super.installUI(c); } /** * 安裝樣式 */ protected void installDefaults() { super.installDefaults(); if(tree.getBackground() == null || tree.getBackground() instanceof UIResource) { tree.setBackground(UIManager.getColor("Tree.background")); } if(getHashColor() == null || getHashColor() instanceof UIResource) { setHashColor(UIManager.getColor("Tree.hash")); } if (tree.getFont() == null || tree.getFont() instanceof UIResource) tree.setFont( UIManager.getFont("Tree.font") ); setExpandedIcon(null); setCollapsedIcon(null); setLeftChildIndent(0); setRightChildIndent(0); LookAndFeel.installProperty(tree, "rowHeight", UIManager.get("Tree.rowHeight")); largeModel = (tree.isLargeModel() && tree.getRowHeight() > 0); Object scrollsOnExpand = UIManager.get("Tree.scrollsOnExpand"); if (scrollsOnExpand != null) { LookAndFeel.installProperty( tree, "scrollsOnExpand", scrollsOnExpand); } UIManager.getDefaults().put("Tree.paintLines", false); UIManager.getDefaults().put("Tree.lineTypeDashed", false); } protected AbstractLayoutCache createLayoutCache() { layoutCache = new VariableLayoutCache(); return layoutCache; } private class VariableLayoutCache extends VariableHeightLayoutCache { public Rectangle getBounds(TreePath path, Rectangle placeIn) { Rectangle rect = super.getBounds(path, placeIn); if (rect != null && parentViewport != null) { rect.width = parentViewport.getWidth() - 2; } return rect; } } }

至於圓角界面的實現大家可以看我以前寫的博客，裏邊有介紹圓角界面的實現，還有靠邊自動停靠等內容。爲了實現顏色變換界面底層使用了單一的顏色。而上邊的組件都是透明的，實現換色就很簡單了，如果要換膚功能，也只需要在界面上多花一層透明的圖片就可以了。

下面是聊天窗口：

 

 

上面的界面是Swing的，下面的是QQ的，效果已經很接近了。按鈕部分沒有做調整，大家可以自己發揮。聊天窗口製作很簡單主要是窗口的佈局比較麻煩左邊的分割區用到了JSplitPane是下面的部分可以上下拖動。

來看看分割部分的代碼：

JSplitPane topSplitPane = new JSplitPane(JSplitPane.VERTICAL_SPLIT); topSplitPane.setBorder(null); // 刪除缺省邊界 topSplitPane.setOneTouchExpandable(false); topSplitPane.setOpaque(false); topSplitPane.setResizeWeight(0.7D); topSplitPane.setDividerSize(1);//設置分隔條大小 topSplitPane.setLeftComponent(messageShow); topSplitPane.setRightComponent(message); messagePanel.add(topSplitPane,BorderLayout.CENTER);

分割高度不能設置爲0不然鼠標會找不到焦點。

然後是基本設置界面：

 

上面的界面是Swing的，下面的是QQ的，面板右邊的區域製作很簡單只需要加載一個CardLayout就可以了我在這裏就不實現了，左邊的面板使用了一個自己編寫的組件，呵呵！自我覺得還挺像的，來看看代碼吧!

class JGroupContainer extends JPanel { private JButton bttGroupTitle = new JButton(); private JPanel pMembers = new JPanel(); private JScrollPane sp; public JGroupContainer() { this(""); } public JGroupContainer(String name) { this(name, UIManager.getColor("Desktop.background")); } /** * @param name String 組名 * @param background Color 成員組件所在面板背景色 */ public JGroupContainer(String name, Color background) { bttGroupTitle.setText(name); bttGroupTitle.setFocusable(false); pMembers.setLayout(new GroupLayout(5, 5)); this.setLayout(new BorderLayout()); this.add(bttGroupTitle, BorderLayout.NORTH); pMembers.setBackground(background); Color thumbColor = UIManager.getColor("ScrollBar.thumb"); Color trackColor = UIManager.getColor("ScrollBar.track"); Color trackHighlightColor = UIManager.getColor( "ScrollBar.trackHighlight"); UIManager.put("ScrollBar.thumb", background); UIManager.put("ScrollBar.track", background); UIManager.put("ScrollBar.trackHighlight", background); sp = new JScrollPane(pMembers); sp.setHorizontalScrollBarPolicy( JScrollPane.HORIZONTAL_SCROLLBAR_NEVER); this.add(sp, BorderLayout.CENTER); collapse(); UIManager.put("ScrollBar.thumb", thumbColor); UIManager.put("ScrollBar.track", trackColor); UIManager.put("ScrollBar.trackHighlight", trackHighlightColor); } /** * 設置間距 * @param hgap int 橫間距 * @param vgap int 豎間距 */ public void setMemberGap(int hgap, int vgap) { pMembers.setLayout(new GroupLayout(hgap, vgap)); } /** * 取得組的標題按鈕 * @return JButton */ public JButton getTitleButton() { return bttGroupTitle; } /** * 取得組的成員組件面板 * @return JPanel */ public JPanel getMembersContainer() { return pMembers; } /** * 收縮組 */ public void collapse() { sp.setVisible(false); this.revalidate(); } /** * 展開組 */ public void expand() { sp.setVisible(true); this.revalidate(); } /** * 設置組名 * @param name String 組名 */ public void setName(String name) { bttGroupTitle.setText(name); } /** * 取得組名 * @return String */ public String getName() { return bttGroupTitle.getText(); } /** * 添加一個成員組件 * @param index int 順序號 * @param c Component 成員組件 */ public void addMember(int index, Component c) { pMembers.add(c, index); pMembers.doLayout(); } /** * 刪除一個成員組件 * @param index int 順序號 */ public void removeMember(int index) { pMembers.remove(index); pMembers.doLayout(); } /** * 取得一個成員組件 * @param index int 順序號 * @return Component 成員組件 */ public Component getMember(int index) { return pMembers.getComponent(index); } /** * 取得全部成員組件 * @return Component[] 成員組件 */ public Component[] getMembers() { Component coms[] = new Component[getMemberCount()]; for (int i = 0; i < coms.length; i++) { coms[i] = pMembers.getComponent(i); } return coms; } /** * 取得成員組件總數 * @return int 總數 */ public int getMemberCount() { return pMembers.getComponentCount(); } /** * 重寫的toString方法 * @return String */ public String toString() { return getName(); } } }

大致的QQ界面已經能實現的八九成了，如果大家有什麼問題可以給我留言。

如果對java界面方面有興趣的朋友歡迎加入4601398QQ羣。