The layout managers provided with the AWT cover most GUI designs that you would be 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 TextField objects extend to the right edge of the Container. This section describes a simple layout manager that is not part of the JDK, but which handles this situation well. The RatioLayout manager is described in the tips-n-techniques article "How to Build a Layout Manager"; you will use it in the solution of some of the Magercises. Here is the 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; i.e., if you create a Panel, you must call resize on it in order to use RatioLayout (else ratios will be computed with a width,height of 0,0). The modifier is of the form: // example: ".25, .5" is 25% over and 50% down "xratio, yratio"

if you want to use the preferred size of the Component and

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

if you want to specify the size of the Component.

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 one final 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 Magercise(s):