{"id":203,"date":"2011-08-06T00:11:59","date_gmt":"2011-08-05T22:11:59","guid":{"rendered":"http:\/\/www.smartersoftware.de\/wordpress\/2011\/08\/updating-smartersteuer-app-for-the-iphone-adding-a-settings-dialog\/"},"modified":"2011-08-06T00:11:59","modified_gmt":"2011-08-05T22:11:59","slug":"updating-smartersteuer-app-for-the-iphone-adding-a-settings-dialog","status":"publish","type":"post","link":"http:\/\/www.smartersoftware.de\/wordpress\/2011\/08\/updating-smartersteuer-app-for-the-iphone-adding-a-settings-dialog\/","title":{"rendered":"Updating SmarterSteuer App for the iPhone &ndash; Adding a settings dialog"},"content":{"rendered":"<p>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 \u2013 just one screen, no options or sub-dialogs. <\/p>\n<h2>Kirchensteuer<\/h2>\n<p>The addition I had in mind was with regard to \u201cKirchensteuer\u201d (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 (\u201cBundesland\u201d)&#160; you live in (either 8% or 9% of the income tax). Also, when you\u2019re not a member of a church, you don\u2019t have to pay church tax at all.<\/p>\n<p>So in it\u2019s simplest form, the user has to make a choice between three different options:<\/p>\n<ul>\n<li>no tax at all (when you are not a member of a church)<\/li>\n<li>8% church tax (when you are living in Bavaria\/Bayern or Baden-W\u00fcrttemberg)<\/li>\n<li>9% church tax (when you are living anywhere else).<\/li>\n<\/ul>\n<p>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\u2019t be very intuitive.<\/p>\n<p>&#160;<\/p>\n<h2>Iteration 1 \u2013 A simple dialog<\/h2>\n<p>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:<\/p>\n<ul>\n<li>a switch that allows the user to set whether she has to pay church tax at all (\u201cKirchensteuer-pflichtig\u201d)<\/li>\n<li>a picker that allows the user to set in which state she lives (\u201cBundesland\u201d)<\/li>\n<\/ul>\n<p>The resulting tax rate (\u201cresultierender Satz\u201d) is then displayed at the top.<\/p>\n<p>Here\u2019s a screenshot of what it looked like:<\/p>\n<p><a href=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/image1.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/image1_thumb.png\" width=\"206\" height=\"400\" \/><\/a><\/p>\n<p>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\u2019t like was that the picker didn\u2019t 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\u2019t find any simple way to change this. (Maybe Apple will add some functionality to the picker class in later releases.)<\/p>\n<p>But what kept me from releasing this version was the fact that this dialog does not look anything like the \u201cmain dialog\u201d of SmarterSteuer which is a TableView:<\/p>\n<p><a href=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/SmarterSteuer_Screen.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px\" title=\"SmarterSteuer_Screen\" border=\"0\" alt=\"SmarterSteuer_Screen\" src=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/SmarterSteuer_Screen_thumb.jpg\" width=\"282\" height=\"404\" \/><\/a><\/p>\n<h2>Iteration 2 \u2013 Using a TableView<\/h2>\n<p>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 \u2013 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:<\/p>\n<p><a href=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/image.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/image_thumb.png\" width=\"206\" height=\"400\" \/><\/a><\/p>\n<p>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:<\/p>\n<p><a href=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/image3.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/image3_thumb.png\" width=\"206\" height=\"400\" \/><\/a><\/p>\n<p>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\u2019t quite fit Apple\u2019s User Interface Guidelines (a TableView is always full screen). It just felt that a TableView wasn\u2019t a good fit. So on to \u2026<\/p>\n<h2>Iteration 3 \u2013 Trying to fake a TableView<\/h2>\n<p>Using some \u201cbackground\u201d buttons, I could make the simple dialog from Iteration 1 look like a TableView:<\/p>\n<p><a href=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/image6.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/image6_thumb.png\" width=\"206\" height=\"400\" \/><\/a><\/p>\n<p>This was very close to what I wanted, but I couldn\u2019t really style the buttons with the proper background color. I\u2019m not really sure why it didn\u2019t work (see <a href=\"http:\/\/stackoverflow.com\/questions\/6496441\/creating-a-uiimage-from-a-uicolor-to-use-as-a-background-image-for-uibutton\">StackOverflow question #6496441<\/a>), but I just couldn\u2019t make it work. <\/p>\n<h2>Iteration 4 \u2013 TableView with custom cells<\/h2>\n<p>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:<\/p>\n<p><a href=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/image4.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/www.smartersoftware.de\/wordpress\/wp-content\/pics\/6a4405dd221b_8AC6\/image4_thumb.png\" width=\"206\" height=\"400\" \/><\/a><\/p>\n<p>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\u2019ve got a better idea, look to my <a href=\"http:\/\/stackoverflow.com\/questions\/6711878\/uipickerview-in-uitableviewcell-how-to-select-values-instead-of-scrolling-table\">StackOverflow question #6711878<\/a>. <\/p>\n<p>Finally, this version was good enough for me to release it as version 1.1 of <a href=\"http:\/\/itunes.apple.com\/de\/app\/smartersteuer-steuerrechner\/id418893395?ls=1&amp;mt=8\">SmarterSteuer. It is available on the AppStore<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-203","post","type-post","status-publish","format-standard","hentry","category-ios"],"_links":{"self":[{"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/posts\/203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/comments?post=203"}],"version-history":[{"count":0,"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/posts\/203\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/media?parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/categories?post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/tags?post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}