Updating SmarterSteuer App for the iPhone – Adding a settings dialog

August 6, 2011 by · Leave a Comment
Filed under: iOS 

After more than four months that my SmarterSteuer app was on the AppStore, I decided it was time to extend the application a bit. To recap, SmarterSteuer helps freelancers and self employed people like myself to figure out how much tax is owed and allowing them to save some money. V1 is a pretty simple app – just one screen, no options or sub-dialogs.

Kirchensteuer

The addition I had in mind was with regard to “Kirchensteuer” (church tax). In Germany, when you are a member of one of the registered national churches (either Catholic or Protestant), the state collects a certain percentage and forwards it to the appropriate church. The amount of church tax is based on the income tax, but the percentage is based on which state (“Bundesland”)  you live in (either 8% or 9% of the income tax). Also, when you’re not a member of a church, you don’t have to pay church tax at all.

So in it’s simplest form, the user has to make a choice between three different options:

  • no tax at all (when you are not a member of a church)
  • 8% church tax (when you are living in Bavaria/Bayern or Baden-Württemberg)
  • 9% church tax (when you are living anywhere else).

But then the user would have to know whether she lives in a high or low rate state. I could add some text to explain which is which, but it wouldn’t be very intuitive.

 

Iteration 1 – A simple dialog

The first step was to add a working dialog that allowed the user to set the appropriate options. After thinking about it, I added two main input elements:

  • a switch that allows the user to set whether she has to pay church tax at all (“Kirchensteuer-pflichtig”)
  • a picker that allows the user to set in which state she lives (“Bundesland”)

The resulting tax rate (“resultierender Satz”) is then displayed at the top.

Here’s a screenshot of what it looked like:

image

I spent some time to make the dialog fully functional and was almost ready to release the app like this. One of the things I didn’t like was that the picker didn’t offer too many options for styling, so I was stuck with darker grays than I would have liked. I looked around a bit, but I couldn’t find any simple way to change this. (Maybe Apple will add some functionality to the picker class in later releases.)

But what kept me from releasing this version was the fact that this dialog does not look anything like the “main dialog” of SmarterSteuer which is a TableView:

SmarterSteuer_Screen

Iteration 2 – Using a TableView

The next iteration consisted of developing a TableView that gives the same options to the user. As with the main dialog it used two section within a TableView – one for displaying the resulting tax rate, and a second section for the different options. Applying some styling, and the dialog looked very much like main dialog:

image

But there was another problem: If you selected one of states towards the bottom of the list (like Schleswig-Holstein where I live), the first section displaying the results scrolled off-screen:

image

There might have been some ways of getting around that (e.g. splitting the dialog into two TableViews instead of two sections), but that sounded like it didn’t quite fit Apple’s User Interface Guidelines (a TableView is always full screen). It just felt that a TableView wasn’t a good fit. So on to …

Iteration 3 – Trying to fake a TableView

Using some “background” buttons, I could make the simple dialog from Iteration 1 look like a TableView:

image

This was very close to what I wanted, but I couldn’t really style the buttons with the proper background color. I’m not really sure why it didn’t work (see StackOverflow question #6496441), but I just couldn’t make it work.

Iteration 4 – TableView with custom cells

So instead of faking the TableView, why not build a real TableView with custom cells? It was a bit of work, but I managed to get it to work properly:

image

The tricky bit was to make sure that any gestures on the picker did not get picked up by the TableView. The only solution I could come up with was to set the whole TableView to scrollEnabled = NO. This works because the TableView is not larger than one screen, but it feels a bit like a hack. If you’ve got a better idea, look to my StackOverflow question #6711878.

Finally, this version was good enough for me to release it as version 1.1 of SmarterSteuer. It is available on the AppStore!