📄 box.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><html> <head> <title>How to Use BoxLayout (The Java™ Tutorials > Creating a GUI with JFC/Swing > Laying Out Components Within a Container)</title><style type="text/css"> .FigureCaption { margin-left: 1in; margin-right: 1in; font-family: sans-serif; font-size: smaller; text-align: justify; } #TopBar_bl { background: url(../../images/java_bar_bl.gif) 0 100% no-repeat; width: 100%; height: 60px; } #TopBar_br { background: url(../../images/java_bar_br.gif) 100% 100% no-repeat; width: 100%; height: 60px; } #TopBar_tl { background: url(../../images/java_bar_tl.gif) 0 0 no-repeat; width: 100%; height: 60px; } #TopBar_tr { background: url(../../images/java_bar_tr.gif) 100% 0 no-repeat; width: 100%; height: 60px; } #TopBar { background: #35556B url(../../images/java_bar.gif); margin: 10px 10px 0 10px; height:60px; min-width:700px; color: white; font-family: sans-serif; font-weight: bold; } @media print { #BreadCrumbs, #Download { display: none; } } #TopBar_right { line-height: 14px; float: right; padding-top: 2px; padding-right: 30px; text-align: center; } @media print { #TopBar_right { display: none; } } #TopBar_right a { font-size: 12px; margin: 3px; padding: 0; } #TopBar a:visited, #TopBar a:link { color: white; text-decoration: none; } #TopBar a:hover, #TopBar a:active { background-color: white; color: #35556B; } #BreadCrumbs { padding: 4px 5px 0.5em 0; font-family: sans-serif; float: right; } #BreadCrumbs a { color: blue; } #BreadCrumbs a:visited, #BreadCrumbs a:link { text-decoration: none; } #BreadCrumbs a:hover, #BreadCrumbs a:active { text-decoration: underline; } #PageTitle { margin: 0 5px 0.5em 0; color: #E76F00; font-family: sans-serif; font-weight: bold; font-size: 20px; } .LeftBar_shown { width: 13em; float: left; margin-left: 10px; margin-top: 4px; margin-bottom: 2em; } @media print { .LeftBar_shown { display: none; } } .LeftBar_hidden { display: none; } #Footer { padding-top: 10px; padding-left: 10px; margin-right: 10px; } .NavBit { padding: 4px 5px 0.5em 0; font-family: sans-serif; } @media print { .NavBit { display: none; } } #TagNotes { text-align: right; font-size: smaller; font-family: sans-serif; } @media print { #TagNotes a:visited, #TagNotes a:link { color: #35556B; text-decoration: none; } } #Contents a, .NavBit a, #TagNotes a { color: blue } #TagNotes a:visited, #TagNotes a:link, #Contents a:visited, #Contents a:link, .NavBit a:visited, .NavBit a:link { text-decoration: none; } #TagNotes a:hover, #TagNotes a:active, #Contents a:hover, #Contents a:active, .NavBit a:hover, .NavBit a:active { text-decoration: underline; } #Contents { float: left; font-family: sans-serif; } @media print { #Contents { display: none; } } @media screen { div.PrintHeaders { display: none; } } .linkLESSON, .nolinkLESSON { margin-left: 0.5em; text-indent: -0.5em } .linkAHEAD, .nolinkAHEAD, .linkQUESTIONS, .nolinkQUESTIONS { margin-left: 1.5em; text-indent: -0.5em } .linkBHEAD, .nolinkBHEAD { margin-left: 2.5em; text-indent: -0.5em } .linkCHEAD, .nolinkCHEAD { margin-left: 3.5em; text-indent: -0.5em } .nolinkLESSON, .nolinkAHEAD, .nolinkBHEAD, .nolinkCHEAD, .nolinkQUESTIONS { font-weight: bold; color: #E76F00; } .MainFlow_indented { margin-right: 10px; margin-left: 15em; margin-bottom: 2em; } .MainFlow_wide { margin-right: 10px; margin-left: 10px; margin-bottom: 2em; } @media print { .MainFlow_indented, .MainFlow_wide { padding-top: 0; margin-top: 10px; margin-right: 10px; margin-left: 0; } } h3, h4, h5 { color: #E76F00; font-family: sans-serif; } #ToggleLeft { display: none; } /t</style><script type="text/javascript"> function leftBar() { var nameq = 'tutorial_showLeftBar=' var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookieString = cookies[i]; while (cookieString.charAt(0) == ' ') { cookieString = cookieString.substring(1, cookieString.length); } if (cookieString.indexOf(nameq) == 0) { cookieValue = cookieString.substring(nameq.length, cookieString.length); return cookieValue == 'yes'; } } return true; } function showLeft(b) { var contents = document.getElementById("LeftBar"); var main = document.getElementById("MainFlow"); var toggle = document.getElementById("ToggleLeft"); if (b) { contents.className = "LeftBar_shown"; main.className = "MainFlow_indented"; toggle.innerHTML = "Hide the TOC"; document.cookie = 'tutorial_showLeftBar=yes; path=/'; } else { contents.className = "LeftBar_hidden"; main.className = "MainFlow_wide"; toggle.innerHTML = "Show the TOC"; document.cookie = 'tutorial_showLeftBar=no; path=/'; } } function toggleLeft() { showLeft(document.getElementById("LeftBar").className == "LeftBar_hidden"); document.getElementById("ToggleLeft").blur(); } function load() { showLeft(leftBar()); document.getElementById("ToggleLeft").style.display="inline"; } </script> </head><body onload="load()"> <div id=TopBar> <div id=TopBar_tr> <div id=TopBar_tl> <div id=TopBar_br> <div id=TopBar_bl> <div id=TopBar_right> <a target="_blank" href="http://java.sun.com/javase/6/download.jsp">Download the JDK</a> <br> <a href="../../search.html" target="_blank">Search the Tutorials</a> <br> <a href="javascript:toggleLeft()" id="ToggleLeft">Hide the TOC</a> </div> </div> </div> </div> </div> </div> <div class=PrintHeaders> <b>Trail:</b> Creating a GUI with JFC/Swing <br><b>Lesson:</b> Laying Out Components Within a Container </div> <div id=LeftBar class=LeftBar_shown> <div id=Contents> <div class="linkLESSON"><a href="index.html">Laying Out Components Within a Container</a></div><div class="linkAHEAD"><a href="visual.html">A Visual Guide to Layout Managers</a></div><div class="linkAHEAD"><a href="using.html">Using Layout Managers</a></div><div class="linkAHEAD"><a href="howLayoutWorks.html">How Layout Management Works</a></div><div class="linkAHEAD"><a href="layoutlist.html">How to Use Various Layout Managers</a></div><div class="linkAHEAD"><a href="border.html">How to Use BorderLayout</a></div><div class="nolinkAHEAD">How to Use BoxLayout</div><div class="linkAHEAD"><a href="card.html">How to Use CardLayout</a></div><div class="linkAHEAD"><a href="flow.html">How to Use FlowLayout</a></div><div class="linkAHEAD"><a href="gridbag.html">How to Use GridBagLayout</a></div><div class="linkAHEAD"><a href="grid.html">How to Use GridLayout</a></div><div class="linkAHEAD"><a href="group.html">How to Use GroupLayout</a></div><div class="linkBHEAD"><a href="groupExample.html">A GroupLayout Example</a></div><div class="linkAHEAD"><a href="spring.html">How to Use SpringLayout</a></div><div class="linkAHEAD"><a href="custom.html">Creating a Custom Layout Manager</a></div><div class="linkAHEAD"><a href="none.html">Doing Without a Layout Manager (Absolute Positioning)</a></div><div class="linkAHEAD"><a href="problems.html">Solving Common Layout Problems</a></div></div> </div> <div id=MainFlow class=MainFlow_indented> <span id=BreadCrumbs> <a href=../../index.html target=_top>Home Page</a> > <a href=../index.html target=_top>Creating a GUI with JFC/Swing</a> > <a href=index.html target=_top>Laying Out Components Within a Container</a> </span> <div class=NavBit> <a target=_top href=border.html>« Previous</a> • <a target=_top href=../TOC.html>Trail</a> • <a target=_top href=card.html>Next »</a> </div> <div id=PageTitle>How to Use BoxLayout</div> <blockquote>The Swing packages include a general purpose layout manager named<a class="APILink" target="_blank" href="http://java.sun.com/javase/6/docs/api/javax/swing/BoxLayout.html"><code>BoxLayout</code></a>. <code>BoxLayout</code>either stacks its componentson top of each otheror places them in a row —your choice.You might think of it as a full-featured version of<a href="flow.html"><code>FlowLayout</code></a>.Here is a picture of an applicationthat demonstrates using <code>BoxLayout</code>to display a centered column of components:<p><p><center><IMG SRC="../../figures/uiswing/layout/BoxLayoutDemo.png" WIDTH="203" HEIGHT="164" ALIGN="BOTTOM" ALT="A snapshot of BoxLayoutDemo"></center></p>You can<a href="http://java.sun.com/docs/books/tutorialJWS/uiswing/layout/examples/BoxLayoutDemo.jnlp">run BoxLayoutDemo</a>using<a class="TutorialLink" target="_top" href="../../information/javawebstart.html">Java<sup><font size=-2>TM</font></sup> Web Start</a>.Its code is in<a class="SourceLink" target="_blank" href="examples/BoxLayoutDemo.java"><code>BoxLayoutDemo.java</code></a>.<p>By creating one or more lightweight containersthat use <code>BoxLayout</code>,you can achieve some layoutsfor which the more complex<a href="gridbag.html"><code>GridBagLayout</code></a>is often used.<code>BoxLayout</code> is also useful in some situationswhere you might consider using<a href="grid.html"><code>GridLayout</code></a> or<a href="border.html"><code>BorderLayout</code></a>.One big difference between <code>BoxLayout</code>and many earlier layout managersis that <code>BoxLayout</code> respectseach component's maximum size and X/Y alignment.We'll discuss that later.<p>The following figure shows a GUIthat uses two instances of <code>BoxLayout</code>.In the top part of the GUI,a top-to-bottom box layoutplaces a label above a scroll pane.In the bottom part of the GUI,a left-to-right box layoutplaces two buttons next to each other.A <code>BorderLayout</code>combines the two parts of the GUIand ensures that any excess spaceis given to the scroll pane.<p><center><IMG SRC="../../figures/uiswing/layout/ListDialogMetal.png" WIDTH="186" HEIGHT="191" ALIGN="BOTTOM" ALT="Uses both left-to-right and top-to-bottom box layouts"></center></p>You can find links for running ListDialogand for its source files in the<a class="TutorialLink" target="_top" href="../components/examples/index.html#ListDialog">example index</a> for Using Swing Components.<p><font color=gray>[PENDING: add boxes and callouts:Draw a box that includes the buttons(aligned with the buttons' top edges,even with the inside edge of the window-frame on the bottom,and stretching between the inside edges of the window-framefrom side to side;in other words, 0 pixels above the buttons,10 pixels below and to the right of the buttons,and 10 pixels further left than the list).Label this box "left-to-right box layout".Draw a second box that has the same lower borders as the first boxand extends up to the window-frame's inner edge.Label this box "top-to-bottom box layout".]</font><p>The following code,taken from<a class="SourceLink" target="_blank" href="../components/examples/ListDialog.java"><code><code>ListDialog.java</code></a></code></a>, lays out the GUI.This code is in the constructor for the dialog,which is implemented as a <code>JDialog</code> subclass.The bold lines of codeset up the box layoutsand add components to them.<p><blockquote><pre>JScrollPane listScroller = new JScrollPane(list);listScroller.setPreferredSize(new Dimension(250, 80));listScroller.setAlignmentX(LEFT_ALIGNMENT);...//Lay out the label and scroll pane from top to bottom.JPanel listPane = new JPanel();<b>listPane.setLayout(new BoxLayout(listPane, BoxLayout.PAGE_AXIS));</b>JLabel label = new JLabel(labelText);...<b>listPane.add(label);</b><b>listPane.add(Box.createRigidArea(new Dimension(0,5)));</b><b>listPane.add(listScroller);</b>listPane.setBorder(BorderFactory.createEmptyBorder(10,10,10,10));//Lay out the buttons from left to right.JPanel buttonPane = new JPanel();<b>buttonPane.setLayout(new BoxLayout(buttonPane, BoxLayout.LINE_AXIS));</b>buttonPane.setBorder(BorderFactory.createEmptyBorder(0, 10, 10, 10));<b>buttonPane.add(Box.createHorizontalGlue());</b><b>buttonPane.add(cancelButton);</b><b>buttonPane.add(Box.createRigidArea(new Dimension(10, 0)));</b><b>buttonPane.add(setButton);</b>//Put everything together, using the content pane's BorderLayout.Container contentPane = getContentPane();contentPane.add(listPane, BorderLayout.CENTER);contentPane.add(buttonPane, BorderLayout.PAGE_END);</pre></blockquote><p>The first bold line creates a top-to-bottom box layoutand sets it up as the layout manager for <code>listPane</code>.The two arguments to the <code>BoxLayout</code> constructorare the container that it managesand the axis along with the components will be laid out.The next three bold linesadd the label and scroll pane to the container,separating them with a <em>rigid area</em> —an invisible lightweight component usedto add space between components.In this case, the rigid area has no widthand puts exactly 5 pixels between the label and scroll pane.Rigid areas are discussed later, in<a href="#filler">Using Invisible Components as Filler</a>.<p>The next chunk of bold codecreates a left-to-right box layoutand sets it up for the <code>buttonPane</code> container.Then the code adds two buttons to the container,using a rigid area to put 10 pixelsbetween the buttons.To place the buttons at the right side of their container,the first component added to the container is <em>glue</em>.This glue is an invisible lightweight componentthat grows as necessary to absorb any extra space in its container.Glue is discussed in<a href="#filler">Using Invisible Components as Filler</a>.⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -