Big Tabs!
By Daniel Wood, 13 February 2014
Introduction
Building FileMaker solutions for iOS introduces a new set of challenges for developers and requires UI controls that make it easy for users to interact. This article gives a very quick and simple technique you can use to make selecting tab controls much easier for FileMaker Go users on iPad and iPhone.
Tab Controls before FileMaker 13
Prior to FileMaker 13, the labels you define for tab panels would be the only means of dictating the height of those selectable tab panel areas. Increasing the font size inevitably increases the height of the tab panels selectable area.
The problem here is that with increased font size comes unreadability of the tab label. Various methods could be employed to inhibit this behaviour such as making the label white to hide it. Another method people have used is to set the tab label to a series of space characters and then overlaying the actual label as a standard piece of text. Neither method is that elegant or easy to maintain.
The solution in FileMaker 13
With FileMaker 13, we can now define the labels for tabs by way of calculation and as such we can make use of some of the text formatting functions within that calculation.
To retain big tabs but allow for readable labels, we can use the TextSize function to reduce the label size to a readable level, while making the font size associated with the tab control object large.
Here is a tab control where the tab font size is set to 72pt. By doing this, the selectable tab area height is increased.
If we look at the tab setup, you'll notice all the tabs are defined by calculation. I have also set tab width to a fixed width per tab (choosing the other options tends to not work nicely with this technique).
The tab function is simply a custom function that will correctly format the label to a desired size - this is purely for readability.
The End Result
When viewed in browse mode, we end up with some really nice tall tabs with a readable font size. On an iOS device this gives a much larger area to tap for selecting a tab.
Compare this to a tab control based on the standard font size of 12pt.
Example File
Please find attached an example file. This file is provided to help you fully understand what is going on in this article. Note that FileMaker 13 is required to view this example file.
And Finally...
It has been just over a year since my last article. in January of last year I set off and spent 5 months cycling across the African continent. Upon returning to work the motivation for writing new articles wasn't quite there and it took a while to get back into the swing of things. Now it is a new year and I'm looking forward to cracking out some new articles in 2014 and explore everything that FileMaker 13 has to offer!
Thank you for your continued readership and support!
