Comment Scene Like Instagram

In my short stint with iOS programming thus far, I found that one of the most difficult and crucial part of the process is deciding which controller to use. Conceivably, you could use a plain UIViewController to design everything but that’s a poor man’s way of going about it. Here’s how I did the comment page for Instagram.

There are a few requirements:

  • Comment box should stick to the bottom
  • Autolayout should be used
  • UITableViewCell should resize accordingly to the amount of text required to fit the cell nicely
  • Bonus: works in landscape and portrait modes. Instagram doesn’t support landscape.

2014-04-24 12.26.36

2014-04-24 12.23.33

 

 

 

 

 

 

General process:

  • Insert a TableView into a UIViewController
  • Add a subview programmatically or via storyboard
  • Set the constraints up correctly
  • Animate the bottom constraint from the comment box to it’s superview as and when the keyboard appears

Some gotchas:

  • You can’t do this using a UITableViewController and then laying a subview into it.
    • The view will move along with the tableview as you scroll which is not the behaviour you want
  • You can’t do this using a UITableViewController and then adding the comment box in the footer
    • The footer will always be below the last cell in the tableview which is not what you want

Code: https://github.com/nychng/AutoSizeTableCell

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s