HeaderFooterLayout

HeaderFooterLayout is one of Famo.us’ most popular layout widgets. Many of the apps you see in the world today follow its layout structure: a top bar, a bottom bar, and a content area in the middle. Instead of manually building out the render tree for that, HeaderFooterLayout gives a simple interface for building these frequently used layouts.

Basic use

By default, the header and footer are both sized according to the size of their contents, while the content area is sized flexibly. Based on the parent size, and the sizes of the header and footer sections, the HeaderFooterLayout can correctly calculate the amount of remaining space for the content section.

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var HeaderFooterLayout = famous.views.HeaderFooterLayout;

var mainContext = Engine.createContext();

var layout = new HeaderFooterLayout();

layout.header.add(new Surface({
    size: [undefined, 100],
    content: "Header",
    properties: {
        backgroundColor: 'gray',
        lineHeight: "100px",
        textAlign: "center"
    }
}));

layout.content.add(new Surface({
    content: "Content",
    properties: {
        backgroundColor: '#fa5c4f',
        lineHeight: '400px',
        textAlign: "center"
    }
}));

layout.footer.add(new Surface({
    size: [undefined, 50],
    content: "Footer",
    properties: {
        backgroundColor: 'gray',
        lineHeight: "50px",
        textAlign: "center"
    }
}));

mainContext.add(layout);

Sizing options

In the prior example, the header and footer section were surfaces with an explicit height set. But let’s say we want the size of our header and footer to be controlled by the HeaderFooterLayout, and not by the content of the sections themselves. We can accomplish this by passing in size options.

As you can see, we end up with the same layout, but now we have the layout managing the size instead of the sections themselves.

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var HeaderFooterLayout = famous.views.HeaderFooterLayout;

var mainContext = Engine.createContext();

var layout = new HeaderFooterLayout({
    headerSize: 100,
    footerSize: 50
});

layout.header.add(new Surface({
    content: "Header",
    properties: {
        backgroundColor: 'gray',
        lineHeight: "100px",
        textAlign: "center"
    }
}));

layout.content.add(new Surface({
    content: "Content",
    properties: {
        backgroundColor: '#fa5c4f',
        lineHeight: '400px',
        textAlign: "center"
    }
}));

layout.footer.add(new Surface({
    content: "Footer",
    properties: {
        backgroundColor: 'gray',
        lineHeight: "50px",
        textAlign: "center"
    }
}));

mainContext.add(layout);

Horizontal layout

HeaderFooterLayouts can also be used to arrange renderables horizontally, with the header section being on the left and the footer section on the right. To render in a specific direction, we pass a direction parameter in along with the other constructor options. (A direction of 1 is vertical, and a direction of 0 is horizontal.)

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var HeaderFooterLayout = famous.views.HeaderFooterLayout;

var mainContext = Engine.createContext();

var layout = new HeaderFooterLayout({
    headerSize: 100,
    footerSize: 50,
    direction: 0
});

layout.header.add(new Surface({
    size: [undefined, 100],
    content: "Header",
    properties: {
        backgroundColor: 'gray',
        lineHeight: "100px",
        textAlign: "center"
    }
}));

layout.content.add(new Surface({
    content: "Content",
    properties: {
        backgroundColor: '#fa5c4f',
        lineHeight: '400px',
        textAlign: "center"
    }
}));

layout.footer.add(new Surface({
    size: [undefined, 50],
    content: "Footer",
    properties: {
        backgroundColor: 'gray',
        lineHeight: "50px",
        textAlign: "center"
    }
}));

mainContext.add(layout);

HeaderFooterLayout with modifiers

In the previous examples, we have been attaching the HeaderFooterLayout directly to the context. As a result, the layout has been taking over the entire area. Instead, if we attach the HeaderFooterLayout to a modifier with a set size, the HeaderFooterLayout will now be confined to the size given by that modifier.

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var HeaderFooterLayout = famous.views.HeaderFooterLayout;
var StateModifier = famous.modifiers.StateModifier;

var mainContext = Engine.createContext();

var layout = new HeaderFooterLayout({
    headerSize: 100,
    footerSize: 50
});

layout.header.add(new Surface({
    size: [undefined, 100],
    content: "Header",
    properties: {
        backgroundColor: 'gray',
        lineHeight: "100px",
        textAlign: "center"
    }
}));

layout.content.add(new Surface({
    content: "Content",
    properties: {
        backgroundColor: '#fa5c4f',
        lineHeight: '400px',
        textAlign: "center"
    }
}));

layout.footer.add(new Surface({
    size: [undefined, 50],
    content: "Footer",
    properties: {
        backgroundColor: 'gray',
        lineHeight: "50px",
        textAlign: "center"
    }
}));

var stateModifier = new StateModifier({
    size: [400, 400]
});

mainContext.add(stateModifier).add(layout);

Next: SequentialLayout »