BT4 Menu Buttons Plus is based on the original Menu Buttons concept, Plus a little bit more. You can select if a menu item is displayed for iOS or Android. Buttons are assumed to be square and then sized automatically, catering reactively for different Android and Apple screen sizes. There are vertical, horizontal and centred grid button menu layouts, with button click transitions (iOS only), text label effects, auto-fit header images with full support for device rotation. One of the main design aims of Menu Buttons Plus is to be able to achieve similar results on Android and Apple devices without worrying about screen sizes.
Android/iOS
-----------
You can select if a menu itme is shown for iOS, Android, both or neither. This is useful if you have a menu item that needs one plugin for Android and a different one for iOS. Or if you want to hide an item without permanantly removing it from the menu, select none.
Button Layouts
--------------
Buttons can be arranged in three different ways:
1) In a vertical column, left, right or centred.
2) In a horizontal row, at the top or bottom of the screen. Menu items display in a centred row, unless there are more than fit on the screen; then the buttons are left justified and scrollable.
3) In a centred grid. The grid can resize on rotation, or if you prefer the number of buttons across to not change on rotation, the grid can be locked.
Buttons are assumed to be square (e.g. same width and height). Specify how many buttons you want across the screen, and they are sized accordingly - particularly useful for Android devices to support the large variety of screen sizes. On rotation, buttons stay the same size. You can set also set padding percentage values for the gaps between the buttons and tweak their vertical starting point to further control the button layout. Buttons can be images or just text. There are transitions for iOS buttons when they are clicked (fade, spin, swing, shake, shrink, grow).
The button items can be individually entered in the control panel or they may be defined in a remote JSON text file.
Header Image
------------
You supply the image and the plugin fits it to the full width of the screen, setting the height dynamically. This shows the header without 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 header image samples are included in the project (all 1536px wide) to help demonstrate how this can work.
Text Labels
-----------
You choose the size and color of the label text, which can be displayed above, below or inside a button. Font style can be normal, italic, bold, or bold+italic.
For android, text inside a button can wrap to a second line. For all other scenarios there is one line of text.
URL / Local Images
-----------------
Images for headers or buttons can be added to the Android project, or they may be downloaded from a URL. JPG and PNG formats are supported. PNG format supports transparency and is usually preferred.
Remote Data
-----------
You can provide screen data from a remote file instead of entering items in the control panel. The following is an example of JSON to load menu items form a remote file. It loads four menu items with buttons 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) and link to it from the Screen Data URL field in your project control panel.
{
"childItems": [
{
"itemId": "CFC9220F7437FC688114E1F",
"itemType": "BT_menuItem",
"loadScreenWithItemId": "B22BAE8C60436D14CAF8B00",
"titleText": "Btn 0",
"imageNameSmallDevice":"amg_round_button_cyan_200.png",
"imageNameLargeDevice":"amg_round_button_cyan_200.png"
},
{
"itemId": "10C85D0E29FB3265050E0BE",
"itemType": "BT_menuItem",
"loadScreenWithItemId": "B22BAE8C60436D14CAF8B00",
"titleText": "Btn 1",
"imageNameSmallDevice":"amg_round_button_green_200.png",
"imageNameLargeDevice":"amg_round_button_green_200.png"
},
{
"itemId": "3394684DB1C21879E26E857",
"itemType": "BT_menuItem",
"loadScreenWithItemId": "B22BAE8C60436D14CAF8B00",
"titleText": "Btn 2",
"imageNameSmallDevice":"amg_round_button_pale_200.png",
"imageNameLargeDevice":"amg_round_button_pale_200.png"
},
{
"itemId": "1F1F8034684A979C75252E6",
"itemType": "BT_menuItem",
"loadScreenWithItemId": "B22BAE8C60436D14CAF8B00",
"titleText": "Btn 3",
"imageNameSmallDevice":"amg_round_button_red_200.png",
"imageNameLargeDevice":"amg_round_button_red_200.png"
}
]
}
--------------------------------------------------------------------------------------------------
iOS Project files
-----------------
2 Objective-C classes (a total of 4 files) are needed.
AMG_menuButtons.m and .h
AMG_button_view.m and .h
Android Project files
---------------------
AMG_ButtonPlus.java is the Activity class that displays the buttons. The layout is handled by amg_screen_menubuttons.xml. Each button is represented in the amg_screen_menubuttons_item.xml file.
Sample header and button images are include in the /res/drawable-nodpi folder.
A modified version of BT_fileManager.java is included to fix a BT3.0 problem with PNG transparency.
JSON
----
The following is an example of the editable JSON Configuration Data
{
"itemId": "E6D00F9D83767121B858406",
"itemType": "AMG_ButtonPlus",
"itemNickname": "ButtonsPlus 12 remote buttons",
"navBarTitleText": "ButtonsPlus 12 remote buttons",
"dataURL": "
http://www.mydomainl.co.uk/documents/12_Button_Json.txt",
"headerImageNameSmallDevicePortrait": "header720.png",
"headerImageNameSmallDeviceLandscape": "header180.png",
"headerImageNameLargeDevicePortrait": "header720.png",
"headerImageNameLargeDeviceLandscape": "header180.png",
"buttonAutoLsizeSmallDevice": "4",
"buttonPaddingSmallDevice": "3.0",
"buttonVTweakSmallDevice": "0.0",
"buttonCornerRadiusSmallDevice": "0",
"buttonLabelFontSizeSmallDevice": "16",
"buttonAutoLsizeLargeDevice": "4",
"buttonPaddingLargeDevice": "3.0",
"buttonVTweakLargeDevice": "0.0",
"buttonCornerRadiusLargeDevice": "0",
"buttonLabelFontSizeLargeDevice": "16",
"buttonLayoutStyle": "grid",
"buttonLabelLayoutStyle": "middle",
"buttonTransitionStyle": "fade",
"buttonBackgroundColor": "#CC3399",
"buttonOpacity": "50",
"buttonLabelFontColor": "#000033",
"buttonLabelFontStyle": "Normal",
"backgroundImageURLSmallDevice": "
http://www.mydomainl.co.uk/images/wallpaper_small.png",
"backgroundImageURLLargeDevice": "
http://www.mydomainl.co.uk/images/wallpaper_large.png",
"backgroundImageScale": "fullScreen"
}
--------------------------------------------------------------------------------------------------
Apple / Android plugin differences
----------------------------------
Vertical tweak does not adjust the positioning of the bottom horizontal layout for Android.
For iOS you can have a background color behind a button image. For android, you can have an image or background color, not both.
For Android only, in common with all other menu's, 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.
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.