Toolbar in LocationController looks wrong for other locale than English

[mariusc]

The buttons, spaces and segmented controller are drawn in the storyboard and adjusted for the English text. After I've changed the language to German, for example, the buttons are resized to fit the new text, which is bigger, and the rightmost button goes partly off the screen. Possible solutions are either adjusting the font of the button text to fit a fixed width of the button, or adjusting the spaces between buttons and segmented controllers and keeping the same text size. I'd choose the first one, because for the iPhone, the toolbar is already pretty crowded

[mariusc]

Done in 0e088266c041938c032ca3895671387104a8a616. Only solution that worked for both iPad and iPhone, iOS 6 and iOS 7 was to create all the items in the toolbar programatically. BarButtonItem doesn't have a property for the text to fit to the width of the button, but UIButton does, so I had to init the barButtonItems with view: UIButton. And for that UIButton to look good on iOS 6 I had to use an image. Works fine for me now, for iOS6, iOS7, iPhone, iPad (both orientations)

[inghamn]

Sounds like we need to research best practices on localizing the storyboard

On Mon, Oct 21, 2013 at 2:13 PM, Marius Constantinescu < notifications@github.com> wrote:

Done in 0e08826https://github.com/City-of-Bloomington/open311-mobile/commit/0e088266c041938c032ca3895671387104a8a616. Only solution that worked for both iPad and iPhone, iOS 6 and iOS 7 was to create all the items in the toolbar programatically. BarButtonItem doesn't have a property for the text to fit to the width of the button, but UIButton does, so I had to init the barButtonItems with view: UIButton. And for that UIButton to look good on iOS 6 I had to use an image

— Reply to this email directly or view it on GitHubhttps://github.com/City-of-Bloomington/open311-mobile/issues/202#issuecomment-26741699 .

[mariusc]

It's not necessarily a localization problem, it just happened to be noticed while localizing the app. The toolbar items were aligned correct only for the English words. For the German words, which are longer, the buttons changed their width and went off the screen. I couldn't find a way to make fixed-width bar button items with text that can adjust its size to fit the width of the button only from the storyboard. Storyboards are great, but unfortunately, sometimes they're not enough.

[inghamn]

The recommended tehnique for localizations has changed since the previous version of the app. They now have a technique for Storyboards, called Base Localization. Back when I originally did this, you would have had to create seperate Nib files for each language.

That wasn't really practical, and I ended up doing string substitution instead. So, the tecnique that's written into the app right now has the story board load, but then swaps the strings out. So, of course the button is sized originally, and not resized after the string is swapped.

However, I believe it is worth re-engineering the localization with how Apple describes locatizing Storyboards. The technique they use involves the strings getting loaded when the Storyboard view is loaded, so the buttons have a chance to size themselves to the strings.

It looks like it will involve seperate MainStoryboard.string files or somethin. With autolayout, it looks like it should work.

On Mon, Oct 21, 2013 at 4:17 PM, Marius Constantinescu < notifications@github.com> wrote:

It's not necessarily a localization problem, it just happened to be noticed while localizing the app. The toolbar items were aligned correct only for the English words. For the German words, which are longer, the buttons changed their width and went off the screen. I couldn't find a way to make fixed-width bar button items with text that can adjust its size to fit the width of the button only from the storyboard. Storyboards are great, but unfortunately, sometimes they're not enough.

— Reply to this email directly or view it on GitHubhttps://github.com/City-of-Bloomington/open311-mobile/issues/202#issuecomment-26752316 .

[mariusc]

For normal UIButtons this could work. The problem is that the toolbar uses UIBarButtonItems which are aligned by default to the left, one after the other. To align them, we had to use fixed or flexible space bar button items. The toolbar has five components (cancel button, 3 segments in a segmentedControl - standard, satellite, hybrid, and the done button). If these buttons are resized so that the text could fit in them, for the iPhone they might get out of the screen (which they did, for German language). So we would need to be able to specify a maximum width for the buttons, so they all fit in the screen, and then have the text on the buttons shrink to fit in the specified width. This is not possible for normal bar button items; it is possible for UIButtons, and that's why I wrote the toolbar by hand and initialized the barbuttonitems with custom UIButton views, which can resize the text inside to fit the width. And this cannot be done in the storyboard, as far as I can see. So the problem was not necessarily about resizing the barButtonItems, but about keeping them the same size and resizing the text inside. I couldn't find a way to do this from the storyboard, and I'm not sure if it's possible even with the Base Localization for the storyboard.

[inghamn]

The base internationalization process would address this problem. However it requires some major reworking of the xcode project.

Doing base internationalization allows for extra storyboards for each language. So, as needed, you would swap in a seperate storyboard with the buttons the correct size for the extra-long strings. Most of the languages could still just swap in strings.

On 10/22/2013 04:05 AM, Marius Constantinescu wrote:

For normal UIButtons this could work. The problem is that the toolbar uses UIBarButtonItems which are aligned by default to the left, one after the other. To align them, we had to use fixed or flexible space bar button items. The toolbar has five components (cancel button, 3 segments in a segmentedControl - standard, satellite, hybrid, and the done button). If these buttons are resized so that the text could fit in them, for the iPhone they might get out of the screen (which they did, for German language). So we would need to be able to specify a maximum width for the buttons, so they all fit in the screen, and then have the text on the buttons shrink to fit in the specified width. This is not possible for normal bar button items; it is possible for UIButtons, and that's why I wrote the toolbar by hand and initialized the barbuttonitems with custom UIButton views, which can resize the text inside to fit the width. And this cannot be done in the storyboard, as far as I can see. So th e problem was not necessarily about resizing the barButtonItems, but about keeping them the same size and resizing the text inside. I couldn't find a way to do this from the storyboard, and I'm not sure if it's possible even with the Base Localization for the storyboard.

---

Reply to this email directly or view it on GitHub: https://github.com/City-of-Bloomington/open311-mobile/issues/202#issuecomment-26784116

[mariusc]

Ok, I will also try later to have a look at base internalization; but since the localization is working as it is now (string replacement and that UIToolbar built from code), I think we should try to fix the other issues for now and push the app to AppStore; and we can send an update to the AppStore when we have the base internalization working. What do you think?

[inghamn]

I could be okay with that, I think. I am eager to get this new version into the store.

I branched and started reworking the project to do base internationalization. Basically, the entire story board has to be redone. But it does greatly simplify the code.