Hi
I want to create grid of 3X3 matrix, I found titanium widget com.appcelerator.buttongrid.
Below is the URL for the buttongrid code.
https://github.com/appcelerator/alloy/tree/master/widgets/com.appcelerator.buttongrid/docs
I Integrated with my application. which is working fine for ios IPhone/IPad.
When I run it on android it I do have an issue, Its created only one button at center. rest or 8 button are not visible at all.
Any one advice me what i need to do? It will be good thing for me to go forward.
Below is code.
var TEXTSIZE = (Ti.Platform.osname == 'ipad')?'24':'12'; var defaults = { buttonWidth: Alloy.isTablet ? '220dp': '106dp', buttonHeight: Alloy.isTablet ? '220dp' : '106dp', textSize: TEXTSIZE, }; exports.init = function ButtonGridInit(args) { $._buttons = args.buttons; $._params = _.defaults(args, defaults); _.each($._buttons, function (button, index) { Ti.API.info('Buttongrid: creating button ' + button.id); var buttonProps = _.defaults(button, { center: { x: "50%", y: "50%" }, // image: $._params.assetDir + button.id + '.png', backgroundColor: $._params.backgroundColor || 'transparent', backgroundSelectedColor: $._params.backgroundSelectedColor || 'transparent', width: $._params.buttonWidth, height: $._params.buttonHeight, click: $._params.click }); if (OS_ANDROID || OS_MOBILEWEB) { if (button.title) { // On Android we can add a label to a button and align it to the bottom. The vertical align doesn't work on iOS. buttonProps.font = { fontSize: $._params.textSize }; buttonProps.color = $._params.textColor; buttonProps.selectedColor = $._params.textSelectedColor; } } // Create and add the button to the scroll view. $._buttons[index].b = Ti.UI.createView(buttonProps); $._buttons[index].b.borderRadius = Alloy.isTablet ? '8dp': '4dp', $._buttons[index].b.borderWidth = Alloy.isTablet ? '2dp' : '1dp', $._buttons[index].b.borderColor = '#DDEDDE'; if (button.click) { $._buttons[index].b.addEventListener('click', function (e) { // Fixes a bug due to removing the title in iOS because // the text field cannot handle Ti.UI.TEXT_VERTICAL_ALIGNMENT_BOTTOM // We still want this accessible to the click function, though. var source = _.clone(e.source); var temp = e.source; source.title = e.source.title || e.source._title; e.source = source; button.click(e); e.source = temp; }); } $.scrollview.add($._buttons[index].b); if ( button.title) { // Add button to the button view Grid var btn_Images = Ti.UI.createButton({ top : Alloy.isTablet?'20dp':'10dp', backgroundImage: button.btn_Image, touchEnabled: true, width : Alloy.isTablet?'88dp':'42dp', height : Alloy.isTablet?'96dp':'45dp', }); $._buttons[index].b.add(btn_Images); // On iOS we need to place the text label into the button view proper. var lbl_Plan = Ti.UI.createLabel({ width: $._params.buttonWidth, height: Ti.UI.SIZE, bottom : Alloy.isTablet ? '30dp' : '15dp', font: { fontSize: $._params.textSize }, text: button.title, textAlign: 'center', touchEnabled: false }); $._buttons[index].b.add(lbl_Plan); var lbl_infoNotifcation = Ti.UI.createLabel({ color: 'lightGray', width: $._params.buttonWidth, height: Ti.UI.SIZE, bottom : Alloy.isTablet ? '10dp' : '5dp', font: { fontSize: (Ti.Platform.osname == 'ipad')?'20':'10' }, text: button.infoNotification, textAlign: 'center', touchEnabled: false }); $._buttons[index].b.add(lbl_infoNotifcation); } }); var autoLayout = $._params.autoLayout || typeof $._params.autoLayout === 'undefined'; if (autoLayout) { Ti.Gesture.addEventListener("orientationchange", exports.relayout); } exports.relayout(); }; exports.destroy = function() { Ti.Gesture.removeEventListener('orientationchange', exports.relayout); _.each($._buttons, function(button) { if (button.click) { button.b.removeEventListener('click', button.click); } $.scrollview.remove(button.b); button.b = null; }); }; exports.relayout = function ButtonGridRelayout(e) { Ti.API.info("ButtonGrid: relayout"); var duration = $._params.duration || 300; // Modify the width of the overall scroll view to reflect the rotation. $.scrollview.contentWidth = Ti.Platform.displayCaps.getPlatformWidth(); $.scrollview.contentHeight = 'auto'; // Calculate the new gutter. var w = Ti.Platform.displayCaps.getPlatformWidth(); var n = Math.floor(w / $._params.buttonWidth); Ti.API.info('value in n'+n); var gutter = (w - n * $._params.buttonWidth)/(n+1) ; Ti.API.info('value in gutter'+gutter); var left = gutter; var top = gutter; // Animate the buttons into place. _.each($._buttons, function (button) { button.b.animate({ left: left, top: top, duration: duration }); left += gutter + $._params.buttonWidth; if (left >= w) { Ti.API.info('width'+w); left = gutter; top += gutter + $._params.buttonHeight; } }); }; exports.getButton = function (id) { for (var i in $._buttons) { if ($._buttons[i].id == id) return $._buttons[i].b; } return false; };