Java圖形化使用者介面布局控制Layout練習

標籤：java   layout   

嘗試搭建登入對話方塊，包含兩個文字標籤（使用者名稱、伺服器IP），兩個文本輸入條（使用者名稱、伺服器IP），一個按鈕（登入），按照自己認為合適的方式布局。 
　　我把GridLayout（網格布局）、BorderLayout（邊界布局）、FlowLayout（流式布局）三種布局進行了比較並且做了嘗試。 
　　終於到了使用Java得到圖形反饋的結果，心裡還有些小激動呢。雖然只是完成了介面的展示，沒有功能的實現，但是成就感還是蠻大的，而且查詢JDK文檔真的非常有收穫。

package gui;import java.awt.*;import javax.swing.*;public class Dialog {    public static void main(String[] args) {        JDialog dialog=new JDialog();        dialog.setTitle("登入");        TextField text1 = new TextField(10);        TextField text2 = new TextField(15);        JLabel label1 = new JLabel("暱稱");        JLabel label2 = new JLabel("伺服器");        JButton button1 = new JButton("登入");        JPanel panel1 = new JPanel();        JPanel panel2 = new JPanel();        JPanel panel3 = new JPanel();        GridLayout gl = new GridLayout(3, 1);        dialog.setLayout(gl);        panel1.add(label1);        panel1.add(text1);        panel2.add(label2);        panel2.add(text2);        panel3.add(button1);        dialog.add(panel1);        dialog.add(panel2);        dialog.add(panel3);        dialog.setSize(300, 200);        dialog.setLocationRelativeTo(null);        dialog.setVisible(true);    }}

　　這個是我們製作的聊天軟體的登入介面部分，在gui包下，這一部分用來顯示圖形介面。首先，匯入對應的Java包，把人家“寫”好的容器、組件拿來使用。 
　　實際形介面的設計說白了也是類的關係，這也就是Java是物件導向的原因。Swing類對AWT類進行了擴充。布局管理器分為容器類和組件類，我們需要做的就是在容器中添加不同組件，完成布局。 
　　建立一個Dialog類，在主方法中，用JDialog類來創造一個Dialog的對象，這樣實際上就建立了一個對話方塊，這樣之後，只需要往其中加入相應的組件就好了。設定對話方塊的大小，用setSize方法設定長為300px，寬為200px。 
　　對話方塊有了，然後用JDialog類添加三個容器。 
　　創造兩個標籤，label取名為“使用者名稱”，label2取名為“IP”，創造兩個輸入條,test1、test2根據需求最大容量為10、15。最後創造一個按鈕，button1按鈕對應的名稱“登入”。 
　　把相應的組件放到指定的容器中。 
　　既然GridLayout是一個類，那麼就找到Gridlayout()構造方法，然後構造一個三行一列的布局對象g1。布局也是對象，很奇妙有木有。接著找到了對應的setLayout方法，然後設定布局。 
　　根據順序的不同，把一個個容器用add方法添加到對話方塊中。 
　　對話方塊設定後，希望展現的位置在螢幕置中，setter方法設定為null。 
　　目前介面布置好了，可是架構還不能顯示，於是把可見度的setVisible法設為真值，如假包換的聊天工具介面就展現出來了。 
　　還有一種布局格式主要使用的邊界布局。

package gui;import java.awt.*;import javax.swing.*;public class LoginDialogDemo {    public static void main(String[] args) {        JDialog loginDialog=new JDialog();        loginDialog.setTitle("登入");        JLabel usernameLabel=new JLabel("暱稱");        JLabel ipLabel=new JLabel("伺服器");        JTextField usernameField=new JTextField(10);        JTextField ipField=new JTextField(10);        JButton loginButton=new JButton("登入");        JPanel centerPanel=new JPanel(new GridLayout(2, 1));        JPanel upPanel=new JPanel(new FlowLayout());        upPanel.add(usernameLabel);        upPanel.add(usernameField);        JPanel downPanel=new JPanel();//JPanel預設用流式布局FlowLayout        downPanel.add(ipLabel);        downPanel.add(ipField);        centerPanel.add(upPanel);        centerPanel.add(downPanel);        loginDialog.add(centerPanel,BorderLayout.CENTER);        JPanel southPanel =new JPanel();        southPanel.add(loginButton);        loginDialog.add(southPanel, BorderLayout.SOUTH);        loginDialog.setSize(300, 200);        loginDialog.setLocationRelativeTo(null);        loginDialog.setVisible(true);    }}

　　組件上大同小異，布局上需要CETER和SOUTH部分，CETER部分中建立一個centerPanel容器嵌套一個2行一列的網格布局，網格布局中加入兩個容器，upPanel和downPanel兩部分，第一行upPanel使用流式布局，添加相應的標籤和文本輸入條，第二行downPanel沒有表示出來，但是使用了預設的流式布局，同樣加入組件。 
　　centerPanel在邊框布局中預設放置於中部，所以不設定後面的屬性BorderLayout.CENTER作用是一樣的。因為只設定了中部地區和南部地區，所以中部會把未使用的地區佔滿，西、北、東地區將被中部佔據位置。 
　　南部地區加入southPanel組件，然後加入loginButton按鈕，大功告成。 
　　兩種方式都完成了同樣的效果，但是在實踐中卻有了不同的收穫。我熟悉了FlowLayout、GridLayout、BorderLayout三種配置樣式，就像原來學習《HTML5與CSS3基礎教程》的時候學會了布局的搭配，掌握了有效率的查詢JDK文檔，更重要的是理解布局管理器的類別關係，對於理解Java物件導向的概念又上升了一個台階。

Java圖形化使用者介面布局控制Layout練習