Technical Support
Discussion Forum
Online Training
Read About Java
Java In-Depth
Product Discounts
Membership Information

Java Cup Logo

JDC Home Page


Top
Back
Next
Online Training
shadowSearchFAQFeedback

RatioLayout

The layout managers provided with the AWT cover most GUI designs that you are likely to build. However, there may be situations where you would like to specify the position of widgets as ratios of the Container width and height. For example, you might want a set of TextField objects with their left edges lined up down the middle of the Container. Further, you might want to specify that the TextFields extend to the right edge of the Container. In this section, we describe a simple layout manager that is not part of the JDK, but which handles this situation well. The RatioLayout manager is described in the Java In-Depth article How to Build a Layout Manager; which we use in some of the exercises. Here is our TextField column using RatioLayout:



Corresponding source code:

import java.awt.*;

public class RatioLayoutTest2 extends java.applet.Applet {
    public void init() {
        setLayout(new RatioLayout());
        TextField tf1 = new TextField("field 1");
        TextField tf2 = new TextField("field 2");
        TextField tf3 = new TextField("field 3");
        // place half way across at top, 50% width and 20% height
        add(".5,0;.5,.20", tf1);
        // place half way across, 30% down, 50% width and 20% height
        add(".5,.3;.5,.20", tf2);
        // place half way across, 60% down, 50% width and 20% height
        add(".5,.6;.5,.20", tf3);
    }
}
Components added to a Container managed by a RatioLayout must specify a modifier, in the form of a String, that indicates the position and size as ratios of the Container width and height. This implies that the Container must have a size; that is, if you create a Panel, you must call resize on it, to use RatioLayout (else ratios will be computed with a width,height of 0,0). If you want to use the preferred size of the Component, the modifier is as follows:
// example: ".25, .5" is 25% over and 50% down
"xratio, yratio"

If you want to specify the size of the Component:

// example: "0,0;.5,.5" is upper left quadrant"xratio, yratio; widthRatio, heightRatio"

Consider another example where you would like a TextArea that consumes the top 75% of a Container area, leaving room for a Button that consumes the bottom 25%.



Corresponding source code:

import java.awt.*;
import java.applet.Applet;
public class RatioLayoutTest extends Applet {
    public void init() {
        setLayout(new RatioLayout());
        TextArea ta = new TextArea();
        ta.setText("A TextArea");
        Button ok = new Button("OK");
        add("0,0;1,.75", ta);
        add("0,.75;1,.25", ok);
    }
}

Note that a BorderLayout could handle this except that you could not specify the ratios.

RatioLayout has another feature that is often useful--position ratios can be replaced with "c", indicating that the Component is to be centered in that direction. Consider centering a Label above a TextField without stretching the components (via BorderLayout or GridLayout):



Corresponding source code:

import java.awt.*;
import java.applet.Applet;

public class RatioLayoutTest3 extends Applet {
    public void init() {
        setLayout(new RatioLayout());
        add("c,.1", new Label("A Centered Title"));
        add("c,.5",
            new TextField("A non-stretched TextField"));
    }
}

Related exercises: