Dynamic Height of TableView Cell

For table view in iOS, its cell could be one of several styles: basic, detail, subtitle and custom. The first 3 are built-in style. The title, subtitle, and detail are labels in the cell. By default, those labels cannot grow vertically if text in the label is too long. I found out there is a property for label to control if displaying only one or multiple lines: numberOfLines. By default, this property is one.

If you change the property to 0, the label may grow vertically to show all the text in it. That means the view cell in a table view could grow dynamically in height. This is true for the first three styles. However, for the custom view cell, it is tricky.

Recently, I was working on my iOS app to enhance its user interface. One of table views contains custom view cell. I would like to show cells in dynamic height if labels in the cell having long text. At first, I tried to set up enough constrains in the custom view cell so that no any warning nor errors in storyboard. However, my view could not show dynamic cell height.



It seems that all cell height are the same.

Finally I figured out why. The contrails in the custom view cell have to be enough for UIKit to calculate the height. In my view, I placed three labels one by one vertically. From top to bottom, I set constrains one to next vertically. However, I did not add a constrain from the last label to the bottom. As a result, UIKit could get the height of view cell.



I added the constrain to make sure the last label's bottom related to the bottom of its container. With this change, I got my app working as expected.




Enough-constrains-for-vertial-span is a trick for custom table view cell. There are other things which have to be set for dynamic cell height. See the reference blog for detail.

By the way, my app supports several languages. Therefore, for this update, I have to make all the changes in all language views in storyboard. You may notice that the messy one above is in Chinese, and the next expected one is in English. By the time I am writing this blog, I have not updated my Chinese view yet.

Reference

• Blog: Self-sizing Table View Cells
• My iOS App: TapToCount

Read More...

Collapse...

Grey blank toolbar on TableView

During my work on my iOS app (TapToCount - 3W), I had a very bizarre issue. There is grey blank toolbar appearing above tab bar on one of tableview controller.

Problem

Actually, the main view with tableview looks OK initially. A grey blank tool bar appears above tab bar after back from a detail view.



The detail view is popped up from the main view when a row of tableview is selected by using navigation controller. The detail view shows a toolbar with some buttons, but no tab bar. Look at detail view, I notice that the tool bar actually is raised up from bottom.




I tried to find what settings triggered this problem from storyboard on both main and detail views, as well as my codes for those views. I could not find anything wrong.

One thing I noticed is that the English version runs good. The problem only appeared on my Chinese version (when I changed iOS language to simplified Chinese, but traditional Chinese is good). I think that it must be something I might changed in storyboard for simplified Chinese. Most unlikely in my view controller codes.

Snapshots to Find out Differences

I am using MaBook Air 2014 on my App. There are tens of property settings in a view. It is really very painful slow (about 40 secs) to compare those settings switch back and forth between Chinese and English storyboards. I found a trick to do the checking, taking snapshots of property settings in one language and then using those snapshots to compare property settings in another language.

Interesting thing is that both main and detail views are exactly same! That puzzled me. Soon I realize that the view is driven by navigation controller. There might be something different in navigation controller. There are several navigation controllers: root view controller (tab view controller as start), master view controller (split view controller), and navigation controller.

From those view controllers, I found the differences!







I am not sure what those marked settings mean. I changed the settings in views of Chinese storyboard. voilà! It works!

Here is the current version of views for the same problem ones as in above.

Conclusion

Sometimes, it may be hard to find out straight solutions either from my own knowledge/skills or internet. There may be some other ways to target the issue. Here is an example, from working version as start, then trace down the difference in the problem target.

I am not going to explain what caused the problem. I may figure out reason behind those property settings. This blog is just a note about my programming experience and growth.

Read More...

Collapse...