Titanium Mobile

# Titanium.UI.iOS.SplitWindow

A SplitWindow is a window that manages the presentation of two side-by-side view controllers.

Availability
3.6.0
9.2.0
Extends
Titanium.UI.Window

# Overview

The Titanium.UI.iOS.SplitWindow.masterView and Titanium.UI.iOS.SplitWindow.detailView properties are required before the SplitWindow is opened.

You use this class to implement a master-detail interface, in which the left-side view presents a list of items and the right-side presents details of the selected item. The SplitWindow is supported for both iPhone and iPad idioms. Use the Titanium.UI.iOS.createSplitWindow method to create a SplitWindow object

By default, SplitWindow shows both master and detail views in landscape orientation. When the device switches into portrait orientation, the master is only shown if Titanium.UI.iOS.SplitWindow.showMasterInPortrait is set to true.

The property Titanium.UI.iOS.SplitWindow.masterIsOverlayed controls how the master is displayed in portrait mode. When masterIsOverlayed is set to true, the detailView occupies the full screen and and masterView is displayed overlayed on top to the left of the screen. When masterIsOverlayed is set to false, the available screen width is split between the masterView and detailView.

The width of the masterView can be controlled by the Titanium.UI.iOS.SplitWindow.portraitSplit and Titanium.UI.iOS.SplitWindow.landscapeSplit properties. These values are capped in the range 0.25 to 0.5. Any values outside this range are ignored.

To add a navigation bar to either the master or detail view of the split window, use a Titanium.UI.NavigationWindow.

The SplitWindow is a top-level window and cannot be contained within another window or view.

# Examples

# Split Window

This is an example of a Split Window.

var detail = Ti.UI.createWindow({ backgroundColor: 'white' });
var label1 = Ti.UI.createLabel({ text: 'Detail View' });
detail.add(label1);
var detailNav = Ti.UI.createNavigationWindow({ window: detail });

var master = Ti.UI.createWindow({ backgroundColor: 'gray' });
var label2 = Ti.UI.createLabel({ text: 'Master View' });
master.add(label2);
var masterNav = Ti.UI.createNavigationWindow({ window: master });

var splitWin = Ti.UI.iOS.createSplitWindow({
    detailView: detailNav,
    masterView: masterNav
});
splitWin.open();

# Alloy XML Markup

Below is an Alloy version of the previous example. The first window is the masterView and the second window is the detailView. You can also use the <Require> element to add a <Window> or <NavigationWindow>.

views/index.xml:

<Alloy>
  <SplitWindow backgroundColor="white" showMasterInPortrait="true">

    <!-- First window is the masterView -->
    <NavigationWindow>
      <Window title="Master View">
        <ListView>
          <ListSection headerTitle="Some items">
            <ListItem title="Item 1" />
            <ListItem title="Item 2" />
            <ListItem title="Item 3" />
          </ListSection>
        </ListView>
      </Window>
    </NavigationWindow>

    <!-- Second window is the detailView -->
    <NavigationWindow>
      <Window title="Detail View">
        <Label>I am the detail view.</Label>
      </Window>
    </NavigationWindow>
  </SplitWindow>
</Alloy>

controllers/index.js:

$.index.open();

# Properties

# detailView

Availability
3.6.0
9.2.0
detailView :Titanium.UI.Window

Window for the detail view section of the SplitWindow.

# landscapeSplit

Availability
3.6.0
9.2.0
landscapeSplit :Number

Determines the width of the masterView in landscape mode.

These values are capped in the range 0.25 to 0.5. Any values outside this range are ignored.

Default: The width of the master-view divided by the screen-height

# masterIsOverlayed

Availability
3.6.0
9.2.0
masterIsOverlayed :Boolean

Determines whether to show the master view is overlayed in portrait orientation.

Note that you need to set showMasterInPortrait to true if you want to use this property in portrait mode.

Default: false

# masterView

Availability
3.6.0
9.2.0
masterView :Titanium.UI.Window

Window for the master view section of the SplitWindow.

# masterViewVisible

Availability
3.6.0
9.2.0
masterViewVisible :Boolean

Determines whether to show the master view or hide.

Default: true

# portraitSplit

Availability
3.6.0
9.2.0
portraitSplit :Number

Determines the width of the masterView in portrait mode.

These values are capped in the range 0.25 to 0.5. Any values outside this range are ignored.

Default: The width of the master-view divided by the screen-width

# showMasterInPortrait

Availability
3.6.0
9.2.0
showMasterInPortrait :Boolean

Determines whether to show the master view in portrait orientation.

Default: false

# Methods

# setMasterIsOverlayed

Availability
3.6.0
9.2.0
setMasterIsOverlayed(masterIsOverlayed[, options]) → void

Sets the value of the masterIsOverlayed property.

Parameters

Name Type Description
masterIsOverlayed Boolean

Determines whether to show the master view is overlayed in portrait orientation.

options AnimatedOptions

Determines whether the scrollable region reposition should be animated. On iOS, use the optional property animated to animate changes to masterView display mode in portrait orientation. For example

setMasterIsOverlayed(true, { animated: true });

Note that the default here is equivalent to passing in { animated: false }

Returns

Type
void

# setShowMasterInPortrait

Availability
3.6.0
9.2.0
setShowMasterInPortrait(showMasterInPortrait[, options]) → void

Sets the value of the showMasterInPortrait property.

Parameters

Name Type Description
showMasterInPortrait Boolean

Determines whether to show the master view in portrait orientation.

options AnimatedOptions

Determines whether the scrollable region reposition should be animated. On iOS, use the optional property animated to animate changes to masterView display mode in portrait orientation. For example

setShowMasterInPortrait(true, { animated: true });

Note that the default here is equivalent to passing in { animated: false }

Returns

Type
void

Contents