Java進階08 GUI把你的孩子打造成為碼農

作者：Vamei 出處：http://www.cnblogs.com/vamei 歡迎轉載，也請保留這段聲明。謝謝！

 

GUI(Graphical User Interface)提供了圖形化的介面，允許使用者以圖形的方式與系統進行互動。在GUI推廣之前，使用者通常要以文本命令的方式來控制電腦。GUI直觀的將電腦的功能呈現給使用者，降低了使用者使用電腦的門檻。蘋果和微軟是GUI方面的先驅(雖然他們都一定程度上抄襲了Xerox)，GUI也為這兩位PC王者帶來了豐厚的市場回報。

早期Mac GUI

GUI需要作業系統和硬體的支援。因此，GUI編程往往要處理移植性的問題。Java的GUI編程有相對比較好的可移植性。然而，隨著GUI的重心向移動端轉移，Java的GUI部分地位有些尷尬。無論如何，我們還是可以通過Java來瞭解GUI編程的一些基本內容。

 圖形的理解

看下面一個圖片:

KTurtle繪製。參看把你的孩子打造成為碼農

可以看到，圖中有一個房子，房子上有窗戶和門，窗戶上有條紋，門上有把手，此外映像外還有一隻小烏龜。我們所提到的房子，窗戶，門，條紋，把手，都可以稱其為對象。不同的對象之間有組合(composition)關係，比如 窗戶和門屬於房子，而把手屬於門。烏龜和房子是相互獨立的兩個對象。此外，整個映像外有一個方框，用來表明可繪圖的範圍，所有上面提到的元素都依附於該方框。

另一方面，上述的對象有許多重複使用的圖形元素(component)。比如把手是一個圓，房子和門由直線構成。相同的圖形元素可以歸為一類(class)。我們可以重複使用直線類來產生(不同性質的)直線，並組合到不同的對象中。

這是用物件導向的方式來理解一個圖形。對象是描述圖形的自然方式。物件導向編程在電腦圖形方面應用非常成功。

 

一個簡單的GUI

Java的GUI功能主要集中在awt和swing兩個包中。awt是GUI底層包。swing包是高層的封裝，更容易移植。這裡將更側重於swing包。

import javax.swing.*;import java.awt.*;public class HelloWorldSwing {    private static void createAndShowGUI() {        JFrame frame = new JFrame("HelloWorld");        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);        // Pane's layout        Container cp = frame.getContentPane();        cp.setLayout(new FlowLayout());        // create button        JButton b1 = new JButton("click me");        JButton b2 = new JButton("shit");        // add buttons        cp.add(b1);        cp.add(b2);        // show the window        frame.pack();        frame.setVisible(true);    }    public static void main(String[] args) {        Runnable tr = new Runnable() {            public void run() {                createAndShowGUI();            }        };        javax.swing.SwingUtilities.invokeLater(tr);    }}

 上面程式中的main()方法中，我們使用匿名類(anonymous class)定義線程Runnable tr。匿名類是Java的一種嵌套類，它是在使用new建立對象時，使用一個{}來直接包含類的定義。在匿名類定義中，我們不需要說明類名。new後面跟隨 介面() 或者 類()，匿名類的定義將實施該介面或繼承該類。

 

運行結果如下:

圖形樹

我們利用add()方法，將一個圖形元素加入到另一個元素中。通過這樣的組合，所有的圖形元素構成一個樹狀資料結構，這棵樹表示了映像元素之間的隸屬關係(containment hierarchy)。一個圖形樹就代表了一個GUI圖形介面。

 

圖形樹

在程式中，我們首先建立了JFrame對象。JFrame是top-level container，也就是圖形樹的根。JFrame預設包含有Content Pane。Content Pane是一個Container對象，它一般包含有圖形(除菜單MenuBar外)的所有可見元素。Content Pane中包含有兩個按鈕，即JButton元素。

 

Content Pane的setLayout()方法決定了元素的布局(layout)方式。布局決定了元素的位置。最直接的布局是直接說明元素的座標位置(像素)。但GUI的裝置尺寸可能差別很大，硬性規定像素位置將大大減小程式的可移植性。Swing提供了更高層的一些布局方法，比如FlowLayout下，元素將從左向右排列，在排滿之後進入下一行。

更多的Java布局方式

 

圖形元素

除了按鈕之外，我們還可以在GUI中增加更多的元素，這些元素大都是JComponent的衍生類。比如:

import javax.swing.*;import java.awt.*;public class HelloWorldSwing {    private static void createAndShowGUI() {        JFrame frame = new JFrame("HelloWorld");        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);        // Pane's layout        Container cp = frame.getContentPane();        cp.setLayout(new GridLayout(0,2));        // JButton        JButton button = new JButton("click me");        JLabel label = new JLabel("OK");        // JPanel               JPanel panel1 = new JPanel(new BorderLayout());        JPanel panel2 = new JPanel(new BorderLayout());        panel2.setBackground(Color.red);        panel1.add(button, BorderLayout.CENTER);        cp.add(panel1);        panel2.add(label, BorderLayout.EAST);        cp.add(panel2);        // JList        String[] lines = {"a", "b", "c"};        JList list = new JList(lines);        cp.add(list);        // JCheckBox        cp.add(new JCheckBox());
// show the window        frame.pack();        frame.setVisible(true);    }    public static void main(String[] args) {        Runnable tr = new Runnable() {            public void run() {                createAndShowGUI();            }        };        javax.swing.SwingUtilities.invokeLater(tr);    }}

 

這裡使用了GridLayout，效果如下:

JComponent

更多元素

 

總結

這裡只是簡單的展示了GUI編程的一些例子，以便從概念上瞭解GUI編程。隨著使用的深入，我們很可能轉入IDE設計GUI，並自動產生GUI代碼。無論如何，概念的理解都是必不可少的。

GUI的知識有助於學習移動端開發。

 

歡迎繼續閱讀“Java快速教程”系列文章