Java圖形用戶界面佈局控制Layout練習

時間 2020-05-27

原文原文鏈接

嘗試搭建登陸對話框，包含兩個文字標籤（用戶名、服務器IP），兩個文本輸入條（用戶名、服務器IP），一個按鈕（登陸），按照本身認爲合適的方式佈局。
　　我把GridLayout（網格佈局）、BorderLayout（邊界佈局）、FlowLayout（流式佈局）三種佈局進行了比較而且作了嘗試。
　　終於到了使用Java獲得圖形反饋的結果，內心還有些小激動呢。雖然只是完成了界面的展現，沒有功能的實現，可是成就感仍是蠻大的，並且查詢JDK文檔真的很是有收穫。css

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」，創造兩個輸入條,test一、test2根據需求最大容量爲十、15。最後創造一個按鈕，button1按鈕對應的名稱「登陸」。
　　把相應的組件放到指定的容器中。
　　既然GridLayout是一個類，那麼就找到Gridlayout()構造方法，而後構造一個三行一列的佈局對象g1。佈局也是對象，很奇妙有木有。接着找到了對應的setLayout方法，而後設置佈局。
　　根據順序的不一樣，把一個個容器用add方法添加到對話框中。
　　對話框設置後，但願展示的位置在屏幕居中，setter方法設置爲null。
　　目前界面佈置好了，但是框架還不能顯示，因而把可見性的setVisible法設爲真值，如假包換的聊天工具界面就展示出來了。
　　還有一種佈局格式主要使用的邊界佈局。html

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面向對象的概念又上升了一個臺階。html5