Dynamic TabGroup icons too big on iPhone

[m1ga]

I'm generating my TabGroup icons from a font at app start with:

// generate icons
function generateIcon(icon) {
	var size = (icon.size == undefined) ? 30 : icon.size;
	var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, icon.filename);
	var lbl = Ti.UI.createLabel({
		text: icon.icon,
		font: {
			fontSize: size - 2,
			fontFamily: "remixicon"
		},
		color: "#888"
	});
	var view = Ti.UI.createView({
		width: size,
		height: size,
	});
	view.add(lbl);
	var img = view.toImage();
	f.write(img);
}

generateIcon({
	filename: 'icon_list.png',
	icon: "\uEEBA"
})
generateIcon({
	filename: 'icon_user.png',
	icon: "\uF264"
})

and then setting the icons

$.tab1.icon = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'icon_list.png').read();
$.tab2.icon = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'icon_user.png').read();

it is working fine on Android:

but my iOS icons are way to big:

Also tried to generate the @3x and @2x icons

generateIcon({
	filename: '[email protected]',
	icon: "\uEEBA",
	size: 90 // 60
});

but didn't change anything.
Any idea how to set the correct size on iOS?

[m1ga]

After analyzing the generated images it looks like:

if (OS_IOS) {
   size /= Ti.Platform.DisplayCaps.logicalDensityFactor;
}

fixes the issue 🤷‍♂️

[gjerlow]

I've never tried this aproach of setting tab icons, but I guess including the @3x in the filename forces it to use the 3x version of your image. Placing all your tab icons in assets/iphone (including @2x and @3x versions) should let it pick the correct version automatically by setting icon: filname.png

[m1ga]

even if I only used one image: creating it with with 30 created an image with width 90! But I also found the property honorScaleFactor which might also help for the toImage() call. But since it is working now I didn't want to change it again 😄

https://github.com/appcelerator/titanium_mobile/blob/609b58cd521c448426403798ff33cf7a66187b06/apidoc/Titanium/UI/View.yml#L1077-L1080

[caspahouzer]

I generate the icons on thy fly

Alloy.Globals.fa = require('fontawesome').icons;
if (OS_IOS) {
    // generating two different colors
    const colors = ['', Alloy.CFG.color.tint];
    _.each(colors, (color) => {
        // Array from config file
        Alloy.CFG.generateIcons.forEach((icon) => {

            let fontSize = 25;

            // platform specific size
            let ldf = Ti.Platform.displayCaps.logicalDensityFactor;
            let iosPostfix = '';
            if (OS_IOS) {
                if (Ti.Platform.displayCaps.dpi !== 160) {
                    iosPostfix = '@' + ldf + 'x';
                }
            } else if (OS_ANDROID) {
                fontSize = fontSize * ldf;
            }
            fontSize = fontSize + 'dp';

            let iconFile = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, color + icon + '.png');
            let iconFileLdf = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, color + icon + iosPostfix + '.png');
            let iconBlob = Ti.UI.createLabel({
                text: Alloy.Globals.fa[icon],
                color: (color) ? color : Alloy.CFG.color.font,
                backgroundColor: 'transparent',
                textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
                verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
                font: {
                    fontFamily: Alloy.CFG.icon_font_navbar,
                    fontSize: fontSize
                }
            }).toImage();
            if (iconBlob.media) {
                iconBlob = blob.media;
            }
            iconFile.write(iconBlob);
            iconFileLdf.write(iconBlob);
        });
    });
}