BT4 Menu Flexi Rows shows row items with text or images as clickable items in a single column, aiming to achieve similar results on Android and Apple devices across different screen sizes. Each row item is padded & auto-sized based on a width to height ratio that you specify. You can have non clickable labels to separate rows and, for any item, you can select if it is displayed for iOS or Android (or neither). Includes header support with rotation allowing different image sizes for portrait or landscape. And more...

Android/iOS
-----------

You can select if a menu item is shown for iOS, Android, both or neither. This is useful if you have a feature that needs one plugin for Android and a different one for iOS. Or if you want to hide an item without permanently removing it from the menu, select none.


Row Layouts
-----------

Rows are shown in a single vertical column. The height of a row is defined as a ratio of its width - e.g. a ratio of 4:1 means the row height is a quarter of its width. This approach accommodates multiple device screen sizes. The row width stays the same for portrait and landscape, e.g. if you rotate the device, the row width remains constant, based on the portrait setting. And you can apply image corner rounding to the rows.

Row Label
---------

You may set a row to be non-clickable, which allows you to define a row header or a separator that is not linked to a plugin. This can be useful for dividing up your menu.

Row Images
----------

If you use an image, this is stretched to the portrait width of the device (less any horizontal padding value) and the height decided by the ratio. E.g. on a device screen 1920px tall and 1080px wide with zero horizontal padding, a ratio of 4:1 produces a row image that is 1080px wide and 270px high. On a device screen that is 320px wide (e.g. iPhone 4), the same row would be 320px wide and 80px high.

You choose the image and the plugin will stretch it to fit. Several image samples are included in the project (all 1536px wide) to help demonstrate how this can work. If the image you choose is too small, it may look grainy.


Text for Rows
-------------

As an alternative to using an image for a row, you can use just text. You choose the size and colour of the label text. Font style can be normal, italic, bold, or bold+italic. For android, text inside a row can wrap to a second line. For iOS there is one line of text. Text can be centered, left or right justified. There are options for colours and font sizes. If you also use an image with less than 100% image opacity, you will see any text you create through the image.


Row Padding
-----------

Horizontal Row Padding sets the spacing between the Rows and the device edge. Enter a percentage value (without the % symbol), representing a percentage of the screen width.

Vertical Row Padding sets the spacing between the Rows. Enter a percentage value (without the % symbol), representing a percentage of the screen width.

Vertical Tweak adjusts the vertical starting position of the Rows. Enter a percentage value (without the % symbol), representing a percentage of the screen height.


Header Images
-------------
You supply the image and the plugin fits it to the full width of the screen, setting the height dynamically. This shows the header with minimal distortion, even when the screen is rotated. You can use a different header image for portrait and landscape, which helps to make best use of the viewable screen space when rotating. Use png files and you can set the opacity of the header and apply rounding to the corners. Several image samples are included in the project (all 1536px wide) to help demonstrate how this can work.


URL / Local Images
------------------
Images for headers or rows can be added to the project, or they may be downloaded from a URL. JPG and PNG formats are supported. PNG format supports transparency and is usually preferred.


Remote Menu Data
----------------

The menu items can be individually entered in the control panel or they may be defined in a remote JSON text file instead. The following is an example of JSON to load four menu items from a remote file using images that are included with the plugin. Cut and paste from the first "{" to the last "}" into a text file, save that in a location that can be accessed (e.g. as a .txt file in your control panel documents folder) and link the full url for the json file as the Screen Data URL field in your project control panel.

{
"childItems": [
{
"itemId": "CFC9220F7437FC688114E1F",
"itemType": "BT_menuItem",
"loadScreenWithItemId": "B22BAE8C60436D14CAF8B00",
"titleText": "Row 0",
"imageNameSmallDevice":"amgheader120.png",
"imageNameLargeDevice":"amgheader120.png"
},
{
"itemId": "10C85D0E29FB3265050E0BE",
"itemType": "BT_menuItem",
"loadScreenWithItemId": "B22BAE8C60436D14CAF8B00",
"titleText": "Row 1",
"imageNameSmallDevice":"amgheader180.png",
"imageNameLargeDevice":"amgheader180.png"
},
{
"itemId": "3394684DB1C21879E26E857",
"itemType": "BT_menuItem",
"loadScreenWithItemId": "B22BAE8C60436D14CAF8B00",
"titleText": "Row 2",
"imageNameSmallDevice":"amgheader240.png",
"imageNameLargeDevice":"amgheader240.png"
},
{
"itemId": "1F1F8034684A979C75252E6",
"itemType": "BT_menuItem",
"loadScreenWithItemId": "B22BAE8C60436D14CAF8B00",
"titleText": "Row 3",
"imageNameSmallDevice":"amgheader360.png",
"imageNameLargeDevice":"amgheader360.png"
}
]
}


-------------------------------------------------------------------------------------------------


iOS Project files
-----------------
2 Objective-C classes (a total of 4 files) are needed.
AMG_MenuFlexiRows.m and .h
AMG_row_view.m and .h


Android Project files
---------------------
AMG_MenuFlexiRows.java is the Activity class that displays the rows. The layout is handled by amg_menuflexirows.xml. Each row is represented in the amg_menuflexirows_item.xml file.
Sample header images are include in the /res/drawable-nodpi folder.
A modified version of BT_fileManager.java is also included to fix a BT3.0 problem with PNG transparency.


JSON
----
The following is an example of the editable JSON Configuration Data

{
"itemId": "6DA0EF0DF2EBCE60F4FE690",
"itemType": "AMG_MenuFlexiRows",
"itemNickname": "Flexi Test",
"headerImageNameSmallDevicePortrait": "amgheader240.png",
"headerImageNameSmallDeviceLandscape": "amgheader120.png",
"headerImageNameLargeDevicePortrait": "amgheader240.png",
"headerImageNameLargeDeviceLandscape": "amgheader120.png",
"headerOpacity": "100",
"buttonPaddingSmallDevice": "0.5",
"buttonVPaddingSmallDevice": "1",
"buttonLabelFontSizeSmallDevice": "18",
"buttonPaddingLargeDevice": "2.5",
"buttonVPaddingLargeDevice": "1",
"buttonCornerRadiusLargeDevice": "20",
"buttonLabelFontSizeLargeDevice": "22",
"buttonRatio": "7",
"buttonLabelLayoutStyle": "middle",
"buttonBackgroundColor": "clear",
"buttonLabelFontColor": "#6666CC",
"navBarTitleText": "Flexi Test",
"backgroundColor": "#CCCCCC"
}

--------------------------------------------------------------------------------------------------


Apple / Android plugin differences
----------------------------------

For iOS you can have a background colour behind a row image. For android, you can have an image or background colour, not both.

For Android only, in common with other Buzztouch menus, using a lot of images from a URL can lead to an eventual app crash (BT 3.0), due to a memory leak. For this reason, it is highly recommended that the images you use be in the project. Also, when working with Android, it is best to use the smallest viable images as multiple images can cause memory difficulties on certain devices.

Points to Note
--------------
This plugin only works for Buzztouch 3.0 and higher projects.

The Android build includes a modified BT_FileManager.java (a bt core fragment), to overcome a bug in the way transparency of png files is handled in BT 3.0.