MicroStrategy ONE

Creating a tab bar to hold buttons

A tab bar is a bar of navigation buttons, displayed at the bottom of an iOS document. The tab bar is displayed all the time, even when a user changes panel stacks or layouts on a document, or switches to a different document. In effect, you are creating a navigation system for a set of Mobile documents.

You create the tab bar as a navigation document, which contains only the tab bar. You can customize the background tint of the tab bar, and the color of the selected button's icon (the highlight state). When the tab bar is displayed on a mobile device, the caption and icon colors use a generic iOS format to enhance readability. In the examples above, the background of the tab bar has a tint of black, with the selected button's icon highlighted in blue. The selected button's caption is automatically displayed in white, while the captions of the other buttons automatically remain gray.

You can add buttons to the tab bar, remove buttons from the tab bar, and move the buttons around on the tab bar. For each button on the tab bar, you define the link and the icon. If you define more than five buttons for an iPhone document or eight for an iPad document, a button labeled More is automatically added to the tab bar.

Take into account the height of the tab bar, which is 49 points, when you design a document that will be linked from a tab bar.

Best practices for creating the button image

The button's image is used by iOS to create the icon that is displayed in Mobile, so you do not need to create a full-color image for the button. Some best practices to create the image for the button include:

  • Use pure white with the appropriate alpha transparency.

  • Do not use a drop shadow.

  • Use anti-aliasing.

  • Bevels should be 90°. The bevel should look like a light source is positioned at the top of the image.

To ensure that the tab bar icon renders sharply on devices with different resolutions, follow these suggestions:

  • If you are designing the tab bar to be displayed on a high-resolution (retina display) device, design your button icon to be about 60 x 60 pixels. Add the text @2x as the suffix of the image name, for example, icon@2x.jpg. For devices with high-resolution screens, such as the iPhone 6 Plus and newer, use the suffix @3x. The image is shown as designed on a high resolution device, without any stretching or shrinking at the pixel level. On low resolution devices, the image is scaled to support the lower resolution.

  • If you are designing the tab bar for low-resolution devices, design your button icon to be about 30 x 30 pixels. Do not include the @2x suffix in the image name. The image is shown as designed on low resolution devices, without any stretching or shrinking at the pixel level. On high resolution devices, the image is scaled to four times its original size at the pixel level, causing the image to look blurry.

To add a tab bar for an iPad or iPhone document

  1. In MicroStrategy Web, click the MicroStrategy icon at the top of any page and select New Document. The Create Document page opens.

  2. Select either Navigation for iPad or Navigation for iPhone, and click OK. The Document Editor opens in Design Mode. A tab bar is already displayed in the document template, with two buttons, in the Document Footer. No other document sections are available.

    3. To select the tab bar's colors

  3. Right-click the tab bar (not a button) and select Properties and Formatting. The Properties and Formatting dialog box opens.

  4. From the left, select Color and Lines.

  5. From the Color drop-down list, select the tint of the tab bar's background.

  6. From the Highlight state color drop-down list, select the color of a button's icon after it is tapped. All buttons on the tab bar use the same color in their highlight state (after being tapped).

  7. Click OK to save your changes and return to the document.

The tab bar and buttons do not change color in Design Mode; the colors apply when the document is displayed in MicroStrategy Mobile.

Now you can add buttons to the tab bar, as described in Creating a button to link from a Mobile document below. You can add as many buttons as necessary. If you define more than five buttons for an iPhone document or eight for an iPad document, a button labeled More is automatically added to the tab bar.