[Repost] Getting Started (10) Layout Management - From LinuxAid

Java Getting Started (10) Layout Management

Original 02-01-18 09:23 5769p fjxufeng

This chapter target: In Chapter 9, we learned many parts to build a GUI program, but until now, we can't let their "obedient" put these components according to our intentions. In this chapter, we have to learn how to make parts layout, that is, let components can "obey" in the position we want to place. We will learn the layout management of components through the four ways of border, grid, combination, and GridbagLayout. 10.1 Border layout teaches new knowledge We review in Chapter 9, we always use the following two statements in the program to define a container: JPanel Panel1 = (JPANEL) getContentPane (); panel1.setLayout (new flowLayout ()); With the kung fu of the reading procedures we have now accumulated, we should quickly know that we created a container JPanel class with a container JPanel class through the first statement. Next, we call Panel1.setLayout (New flowLayout ()), in the previous chapter, we have not analyzed it accordingly. It is time to uncover its veil. The word Layout means "layout", "arrangement", setlayout is set layout format. That is, the method setLayout of the container Panel1 is used to set the layout format. So, what model we have always used? Yes, it is flowLayout () in the posterior bracket. As the name suggests, it is the flow layout. This is a way to go through it. From left to right, one object is placed, and they can't put it. So, we can't control it. From this chapter, we must learn a method of controlling the layout. In Java language, various layout managers are provided so that you can achieve this. Usually our most common layout manager is: Border Layout, as shown in the following figure, the Border Layout Manager divides a screen into five parts: East, South, West, North, China. Figure 10-1 Border layout management schematic If you want to use this border layout management, we must first set the "container" to "Border layout control mode". Specifically, when calling the setLayout method is the container setting layout control When the mode is mode, the parameter is set to BorderLayout. For example: JPanel Panel1 = (JPANEL) getContentPane (); Panel1.setLayout (New BorderLayout ()); then, we can add the position parameters when we use the container's Add method, so that the part is displayed in the specified location on.

The position parameters are: borderLayout.North position is the North BorderLayout.South position is the South BorderLayout.EAST position to the either BorderLayout.west position is the West BorderLayout.North position as the center instance explanation, let's try it, use the button to discharge five Direction! Please create a TestBorder.java, enter the following source: Source: usextarea.javaimport java.awt. *; Import javax.swing. *; Import java.applet.applet; public class testborder extends japplet {public void init () { JPanel Panel1 = (JPANEL) getContentPane (); Panel1.setLayout (new borderLayout ()); jbutton north = new jbutton ("north"); jButton South = new jbutton ("South"); jButton EAST = New JButton ("East "); JButton West = New JButton (" West "); jbutton center = new jbutton (" center "); Panel1.add (North, BorderLayout.North); Panel1.add (South, borderLayout.South); panel1.add (East, BorderLayout.east); Panel1.add (West, BorderLayout.west); Panel1.add (center, borderLayout.center);}} then, we use Javac to compile this program, then edit a HTML showing this Java Applet page. Finally, the AppletViewer is called to observe this page, as shown below: Figure 10-2 Output of TestBorder.java (1) Figure 10-3 Program TestBorder.java Enter (2) In order to try, if it is not in each location Arrange a part, how would it? We modify the procedure, take Panel1.add (West, BorderLayout.west); This line comes out (just add "//"), which is not to show the buttons of the west, look at the results. As shown in the figure (Figure 10-3), since there is no component, "in the west," occupation "has its position. Similarly, if there is no north of the south side, as shown in the following picture (10-4), other components will occupy their position: Figure 10-4 Output of TestBorder.java (3) Figure 10-5 TestBorder.java Enter (4) and if we modify the program, let the middle buttons do not display, there will be as shown in Figure 10-5, the middle area is not occupied, but it is there! This is different from other locations, everyone must remember.

Some tips: In fact, this is very well understood that if the position of the middle of the middle is occupied by the components at other positions, it will not be able to distinguish "East", "South", "West", "North". Inverted into the "upper left corner", "left corner", "upper right corner", "lower right corner". Self-test practice 1) Use the ____________ position parameters, enabling a component to be located at the top of the container. A. Layout.top b. BorderLayout.top c. Layout.North D. BorderLayout.North 2) Use the ____________ position parameters to enable a component to be located on the right side of the container. A. BorderLayout.west B. BorderLayout.right d. BorderLayout.North 3) If there is no placement in eastern side, the other locations have placements, then the intermediate parts will be against ______. A. The left b. Top c. Right D. Below 4) In Chapter 9, the layout manager we use is ____________. A. Message Manager B. Flow Manager C. No Layout Manager D. Sequence Layout Manager 5) Border Layout Manager divides a "container" into __________. A.9 B.3 C.4 D.5 6) Write a program so that its interface is as follows: Figure 10-6 Exercise questions (1) Moreover, when we expand the width of this form, The OK button does not appear after the text box, but generates the output result as the following figure: Figure 10-7 Exercise question map (2) Database Answer 1) D On the Border Layout Manager, the top is north, so select BorderLayout. North. 2) C In the border layout manager, the right is east, so choose BorderLayout.east. 3) The C is on the right, so there is no component in the east, and the other components are squeezed to the right and occupy the right side. 4) B Although A, D is particularly like the results we get from the literal meaning, and C will feel like it is like it, but these are not correct answers. This layout manager is called a stream manager.

5) D is of course "East", "West", "South", "North", "in" 5 parts! 6) The following is an example of a program: source:. Lianxi10_1.javaimport java.awt *; import javax.swing *; import java.applet.Applet; public class lianxi10_1 extends JApplet {Label comment; JTextField username; JButton buttonOK; public. Void init () {jPanel panel1 = (jPanel) getContentPane (); Panel1.setLayout (New borderLayout ()); comment = new label ("please enter you name:"); username = new jtextfield (); buttonok = new jbutton ("OK"); Panel1.add (Comment, BorderLayout.North); Panel1.add (username, borderlayout.ceter); Panel1.add (Buttonok, BorderLayout.South);}} 10.2 Grid Layout Instance Description, we To look at a new program! First create a TestGrid.java file and enter the following source: Source: TestGrid.javaimport java.aw.javaimport java.aw.swing. *; Import java.applet.applet; public class testgrid extends japplet {string buttonlabels [] = {"No.1", "No.2", "No. 3", "No. 4", "No. 5", "No.6", "No.7", "No.8", "No.9"}; public void init () {jPanel panel1 = (jPanel) getContentPane (); Panel1.setLayout (New GridLayout (3, 3)); for (int x = 0; x

1) String ButtonLabels [] = {"No.1", "No.2", "No. 3", "No.4", "No.5", "No.6", "No.7", "No.8", "No.9"} I want everyone to easily read this statement, we define a string array buttonlabels, which has 9 string members, that is, we will define 9 button label text. It is worth noting that everyone must know that ButtonLabels [1] indicates which string! If your answer is "No.1", it is wrong! The correct answer is "No.2" because the index value in the array starts from 0, that is, if you want to use "No.1", you should use ButtonLabels [0]. This is important for better understanding of the procedures behind, and is one of the basic skills. 2) JPanel Panel1 = (JPANEL) getContentPane (); Panel1.setLayout (New GridLayout (3, 3)); in these two lines, we first defined a container part Panel1. Then call the SetLayout method to set the layout manager. Here we use a new layout manager: GridLayout, Grid Layout Manager. We noticed two parameters behind GridLayout: 3, 3. What is this? Let's take a look at the definition of the GridLayout method: public GridLayout (int Rows, int coLs) Let's take a look at these two parameters first, all of them are INT-integer. So what role does they play? We still use the asidi law! The meaning of row is line, and the Chinese meaning of column is column, and there is one S, which is the plural form of these two words. Ok, we are stringing now, we define a grid layout, then set it, the number of columns! Don't you draw this grid? If we are using GridLayout (5, 5), we will divide 25 units as shown below: Figure 10-9 GridLayout (5, 5) Figure 10-10 GridLayout (3, 3) We used GridLayout (3, 3) in the program, so it divided the entire container into nine parts as shown above (Figures 10-10). Note: This division is a logically, hidden division, without casting the lattice. In addition, the two examples of us will row, listed in the columns, etc., it can be completely else. 3) for (int x = 0; x

ButtonLabels.length is used to give the character string array ButtonLabels's length! That is, how many strings have this string array? We know that we define 9 in this array. From the program, we can be known that when X = ButtonLabels.Length, the loop will end, and it should not meet the condition x

a. the upper left corner b. the lower left corner c. top right d. the bottom right corner e. intermediate 6) according to the following screen, write a program that exercises 10-12 ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ FIG. 7), if we build a 5 * 5 Grid layout, but what happens only in this container to add 17 buttons? Please write a program to try a test effect. ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ to exercises 1) b nothing to explain, please remember! 2) A The first parameter is the number of rows, so it is 7 lines. 3) B The second parameter is the number of columns, so it is 5 columns. 4) B 7 rows 5 columns, its 7 * 5,35 parts. 5) The 5th part is the last one of the first line, of course, in the upper right corner.

6) The following is an implementation program example: source program: lianxi10_2.javaimport java.awt. *; Import javax.swing. *; Import java.applet.applet; public class lianxi10_2 extends japplet {string buttonLabels [] = {"1 "" 2 "," 3 "," 4 "," 5 "," 6 "," 7 "," 8 "," 9 "," * "," 0 "," # "}; public void init () {JPANEL PANEL1 = (JPANEL) getContentPane (); Panel1.setLayout (New GridLayout (4, 3, 10, 10)); for (int x = 0; x

10.3 Combined layouts to teach new knowledge, as we say when we ended on the previous section, all layout managers have their own shortcomings, no requirement that can truly fully meet our preparation of GUI programs. In the Java language, other containers are allowed to be added to the container, so that each container can use different layout managers according to their needs, combining the GUI program interface we need. This method, we call it a combination layout. Note: Unlike the flow layout, the border layout, the grid layout, the combined layout is not a new layout manager, which combines them in the development of the GUI program interface by combining the advantages of various layout managers. This is a method of layout management. It can also be said to be a development technique for the GUI program interface. When we design the GUI program interface, it is best to draw it on the paper and then "slightly solve". That is, the components that will be able to combine together, place them in a container and choose the appropriate layout manager for them. Then put these containers together and solve it. In designation, considering the change in the component body when the form size is changed. In this regard, please keep a few design techniques: 1) For those who require flat-shaped parts, we should place it in the south or north of the border layout; 2) We should will It is placed in the east or west of the border layout; 3) For those that can change the size as the form, we can place it in the middle of the border layout; 4) If we ask the part to keep the same size, then we Grid layout should be used. Below, we pass a few practical examples, let everyone understand and master this design ideas. Examples Let's first create a testcombination.java file, then enter the following source: Source: Testcombination.javaimport java.aw. *; Import javax.swing. *; Import java.applet.applet; public class testcombination1 extends japplet {public void init () {Frame frame1 = new Frame ( "testCombination1"); frame1.setLayout (new BorderLayout ()); TextArea text1 = new TextArea (); frame1.add (text1, BorderLayout.CENTER); JPanel panel1 = (JPanel GetContentPane (); Panel1.setLayout (New GridLayout (1, 3, 10, 5)); Panel1.Add (New JButton ("a")); Panel1.Add (New JButton ("B"); panel1. Add ("c"); frame1.add (panel1, borderlayout.south); frame1.pack (); frame1.show ();} then, we use Javac to compile this program, then edit a display of this The HTML page of the Java applet.

Finally, AppletViewer is called to observe this page, as shown below: Figure 10-14 The output of the program testcombination.java is shown in the figure above, the output of the program is different from previous, and the components are not displayed in the AppletViewer program box, but is shown. Another window. What is going on? Let's take a look at this program together! Toming new knowledge In the previous program, we have always used the container JPANEL, the panel. And we introduced a new container Frame in this program. After using this container, you will be created newly created. This is why the output of the program has such a big change. 1) frame frame1 = new frame ("testcombination"); this statement defines a Frame container Frame1, then use the New operator call constructor method, and the parameter "TestCombination" of the rear belt is the title of this frame. Some tips: In fact, you can find the effect of Frame is very familiar, it is equivalent to the form in Windows. The title of Frame is the title of the form. 2) frame1.setLayout (New BorderLayout ()); Like the JPanel container, we can call the SetLayout method to set the Frame's layout manager. Here, we set the layout manager of the FRAME container Frame1 into a border layout manager (that is, the layout manager we have learned in 10.1). 3) frame1.add (Text1, BorderLayout.center); followed, we call Frame1 Add method to add text area Text1 to the Frame1 container. Note We set its location: BorderLayout.center. This is because we want this text area to vary with the size of the form. So suitable placing it in the middle position. 4) Panel1.setLayout (New GridLayout (1, 3, 10, 5)); we have defined a JPanel container Panel1 and set it to grid layout manager. And by specifying parameters, the entire panel1 is divided into 1 row of 3 columns, the horizontal gap is 10 grid. 5) Frame1.add (Panel1, BorderLayout.South); this is the most important step in the combination layout method, we will add this container to Frame1. And specify the location of the container of Panel1 in the entire frame1: borderLayout.South, that is, the lower side. In this way, the three buttons contained in Panel1 will always be in the following sides of the text area (regardless of the form size), and the size of the three buttons changes according to the change in the size of the form. Some prompts: This is because the button in Panel1 is to use the grid layout. 6) frame1.pack (); frame1.show (); Different from JPANel, use the Frame container, can not be displayed directly. We must call the Frame container's Show method to make Frame display. And before using the Show method, we also need to use the Pack method to make a integration in Frame. Remember the usage method here. Self-test practice 1) ___________ not belong to the layout manager.

a. Border layout B. Combined layout c. Flow layout D. Grid layout 2) If you want to use a combination layout, you need to set the layout management of the container to __________. A.BorderLayout () B.GridLayout () c.combinationLayout () d. All above is not required: ____________________________________________________ 3) For the same container, can multiple layout management mode? ________ a. Pairing B. No 4) For the same container, can multiple layout management methods? ________ a. The method of putting a container Panel1 in the container FRAME1 is ___________. A.frame1.insert (Panel1) B.frame1.add (panel1) C.frame1.addjPanel (Panel1) D.frame1.insertJPanel (Panel1) 6) Write a program that simulates the keypad as shown below: Figure 10- 15 exercises FIG ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ to exercises 1) b is a combined layout to layout manager plurality in one application program, it does not belong to the layout manager. 2) The D combination layout is a method, so there is no need to specify the layout manager, and it is not possible to specify. 3) B In a program, a container can only have a layout management. 4) A For the same container in different procedures, it is of course possible to use different layout management. 5) B. Like the addition of a component on the Frame, you can use the Frame's Add method.

6) The following is an example of a program implemented: the source: lianxi10_4.javaimport java.awt *; import javax.swing *; import java.applet.Applet; public class lianxi10_4 extends JApplet {public void init () {Frame framePad.. = New Frame ("NumberPad"); framepad.setLayout (new borderLayout ()); jPanel paneltop = new jPanel (); Paneltop.setLayout (New GridLayout (1, 4, 5, 10)); Paneltop.Add (New JButton ("LOCK")); paneltop.add (new jbutton ("/")); paneltop.add (new jbutton ("*")); paneltop.add (New JButton ("-")); framepad.add ( Paneltop, borderLayout.North); JPanel Panelmid = new jPanel (); Panelmid.setLayout (new gridLayout (3, 3, 10, 5)); for (int x = 1; x <= 9; x ) panelmid.add ( New jbutton (String.Valueof (x))); jPanel Panelbot = new jPanel (); panelbot.set ()); panelbot.add (New jButton ("0"), borderlayout.center; panelbot.add (New JButton ("."), BorderLayout.east; JPanel Panelnum = new jPanel (); PanelNum.setLayout (New BorderLayout ()); PanelNum.Add (Panelmid, BorderLayout.center); Panel Nadd (Panel) Bot, BorderLayout.South; framepad.add (Panelnum, BorderLayout.center); JPanel Panelright = new jPanel (); PANELHT.SETLAYOUT (New GridLayout (2, 1, 10, 5)); PAneLight.Add (New JButton " ")); PANELHT.ADD (New JButton (")); framepad.add (panelright, borderlayout.east); framepad.pack (); framepad.show ();}} 10.4 Gridbag layout instance illustrate now So, we have learned the border layout, grid layout, and combination layout. Now everyone will try to write a program to show the interface as shown below: Figure 10-16 Challenge (1), very difficult Let's! Complete this GUI to spend a lot of mind to design a combination, very annoying, below we use a new layout manager GridbagLayout to solve this problem.

First, enter the following source: Source program: TestGridbag.javaimport java.awt. *; Import javax.swing. *; Import java.applet.applet; public class testgridbag outnds japplet {public void init () {jPanel panel1 = (JPanel ) getContentPane (); panel1.setLayout (new GridBagLayout ()); GridBagConstraints gbdc = new GridBagConstraints (); gbdc.fill = GridBagConstraints.BOTH; gbdc.weightx = 1; gbdc.weighty = 1; panel1.add (new JButton ( "No.1"), GBDC); Panel1.Add (New JButton ("No.2"), GBDC); Panel1.Add (New JButton ("No.3"), GBDC); GBDC.GridWidth = 2; GBDC.Gridx = 0; Panel1.Add (New JButton ("No.4"), GBDC); GBDC.Gridx = 2; GBDC.GridWidth = 1; GBDC.GridHeight = 2; Panel1.Add (New JButton ("no .5 "), GBDC); gbdc.gridx = 0; gbdc.gridHeight = 1; Panel1.add (New JButton (" No.6 "), GBDC); GBDC.Gridx = 1; Panel1.add (New JButton "No.7"), GBDC); GBDC.Gridx = 0; gbdc.gridWidth = 2; Panel1.Add (New JButton ("No.8"), GBDC); GBDC.Gridx = 2; GBDC.GridWidth = 1 Panel1.add (New JButton ("No.9"), GBDC);}} Teaching New Know Well, we used GridbagLayou t Easily completed the design of this interface, allowing the power to conveg its power. It can be said that GridbagLayout is the most powerful layout manager in the Java language. GridbagLayout, from the name, you know that it has certain origins with GridLayout, yes, GridbagLayout is indeed very similar to it, but also using grid to layout. However, in different from GridLayout (grid layout), GridbagLayout is not like a grid layout, and the size of all components is the same. Moreover, a part can be placed in a fixed position. Below, let's analyze the TestGridbag.java program. 1) Panel1.setLayout (New GridbagLayout ()); When calling the setLayout method, specify as GridbagLaoyout to make Panel1 use Gridbag layout management.

2) Gridbagconstraints GBDC = New Gridbagconstraints (); GridbagLayout Layout Manager is a magical effect through a GridbagConstraints class. So, we want to define an object of a GridbagConstraints class when you use. In this program, we defined a GridbagConstraints class object GBDC. 3) GBDC.FILL = Gridbagconstraints.both; Since the grid unit may be larger than the components in the unit, if so, there will be some extra spaces in the cell. By default, parts will not expand, that is, not populating this extra space. GridbagConstraints provides a Fill property that we can play different effects by setting it. ¨ Gridbagconstraints.none: Do not expand, is the default; ¨ Gridbagconstraints.horizontal: Parts level expansion, fill in the level of the horizontal direction; ¨ Gridbagconstraints.vertage: The part is vertically expanded, and the extra space in the vertical direction is filled; ¨ Gridbagconstraints .Both: The component expands in both directions and filled the cell. 4) gbdc.weightx = 1; gbdc.weighty = 1; Weightx and Weighty are another pair of properties provided by GridbagConstraints. Its value is integer, the default is 0. To set the "weight" of the weightx, the value is 0, all components will be tight, and the gather is gathered in the center, as shown in Figure 10-17. And if the value is other figures, the space will be allocated according to the value. 5) Panel1.Add (New JButton ("No.1"), GBDC); Panel1.Add (New JButton ("No.2"), GBDC); Panel1.Add (New JButton ("No.3"), GBDC); Add a button to the GBDC when there is no constraint, the effect is exactly the same as the effect of the grid layout. A end "occupation" cell. Figure 10-17 Recommodation Figure 6 when Weightx and Weighty is 0) GBDC.GridWidth = 2; gbdc.gridx = 0; Panel1.Add (New JButton ("No.4"), GBDC); Due to the fourth button (No.4) is the width of 2, in GridbagLayout, is controlled by the GridWidth property to control the width of the added components. We set it to 2 through GBDC.GridWidth = 2, so that the addition of the incoming components becomes the width of 2 cells. In addition, we use GBDC.Gridx = 0 to make it another line, start populating from the leftmost cell. Therefore, we found that the fourth button is added to the second line, the width is 2 cells.

7) gbdc.gridx = 2; gbdc.gridWidth = 1; gbdc.gridHeight = 2; Panel1.add (New JButton ("No.5"), GBDC); Next, we have to place the fifth button, this The button will be filled from the third unit, and its width is a cell, and the height is two cells. Therefore, we first use GBDC.Gridx = 2, so that the next added part (fifth button) is placed in the third cell (0 represents the first cell, so the third cell should be 2) . Because we have set the GridWidth to 2, we need to use GBDC.GridWidth = 1 to set its value to 1. Finally, GDBC.GridHeight = 2 is used, so that the cells of the added components are used across two cells. 8) GBDC.Gridx = 0; gbdc.gridheight = 1; Panel1.add (New JButton ("No.6"), GBDC); I think this section, everyone should not have any understanding questions. Let's! It mainly reminds everyone to note that we use GBDC.GridHeight = 1 to change the cell portrait to the default value 1. This is because we change it to 2 when we need it, so you need to change it here. An example shows that in order to better understand this powerful GridbagLayout layout manager, let's make an interesting experiment. First, we create a testGridBag2.java source: testGridBag2.javaimport java.awt *; import javax.swing *; import java.applet.Applet; public class testGridBag2 extends JApplet {public void init () {JPanel panel1 = (.. GetContentPane (); Panel1.setLayout (New GridbagLayout ()); Gridbagconstraints GBDC = New Gridbagconstros (); Panel1.Add (New JButton ("No.1"), GBDC); Panel1.Add ("NO .2 "), GBDC); Setsize (300, 200);}} Run this program, we will get the following results: Figure 10-18 Experimental results (1) Then we use the mouse to change the size of the window, look, these two What changes do you have? You will be surprised to find that the window changes the size, but the size of the two buttons has not changed, and it has always been in the center of the center. Some explanations: In this program, we used a previously used statement: Setsize (300.200), its function is to set the size of the window in the program.

Now we do some modifications to this program! Two statements for two buttons will be added: Panel1.add (New JButton ("No.1"), GBDC); Panel1.Add (New JButton ("No.2"), GBDC); expand them to: GBDC .weightx = 1; Panel1.add (New JButton ("No.1"), GBDC); GBDC.Weightx = 3; Panel1.Add (New JButton ("No.2"), GBDC); recompile, run This program, what changes do you want? Let's take a look at the results: Figure 10-19 Experimental results (2) Why do you get this effect? We add a sentence before the program adds a button: gbdc.fill = gridbagconstraints.horizontal; recompile the program, then look at what the program's output changes! Before getting the results, you can imagine the results, then look at the actual output of the program to match your idea. We were surprised to find that the second button suddenly became very wide (as shown in Figure 10-20). This is because the width of the cell of the second button is placed is 3, and the width of the first button is 1. Moreover, we let the second button transversely extended, so we got this output result. Figure 10-20 Program Experiment Results (3) I believe that the experiment does this, don't need me to say, everyone will have some experience. But GridbagLayout is far more than this, and everyone should do more tests to effectively master GridbagLayout in a real use environment. Self-test practice 1) If not set, the value of the Fill property of GridbagConstraint is _________. A.Gridbagconstraints.vertage B.Gridbagconstraints. Horizontal C.Gridbagconstros.both D.Gridbagconsts.both D.Gridbagconsts.None 2) The value of WeightX and Weightys of GridbagConstraints is _______ and _______. A. 1 0 B.0 0 C.0 1 D.1 1 3) If in the program, we set the gridx to 0, then _____________. A. The new part will add B from the new line. The new part will overwrite the first component 4) Write a program, using the GridbagLayout Layout Manager to simulate the keypad.