How to do iPhone's SMS app SPECIAL viewController shifting?

Question

If anyone has used the iPhone's SMS app, there is a special animation with the compose view.

When you first press compose, a modal view controlelr is shown. However as soon as you press send, it shifts to your chat view controler. But here are a few weird behavior:

1) The keybaord stays intact. Usually when you pop and push new controllers, you lose your keyboard positions.

2) Further evidence that there was no pop/pushing of new controllers because the actual view did not change. As soon as you press send, the message "slides" up to the bubble view.

3) However, if there really IS no popping/pushing of controllers, how do you change the buttons on the navigationbar? The top left button also changed from the square "cancel" button to a arrow-like back button.

Any ideas how to implement this experience?

Answer 1

You can change the characteristics of the navigation bar in a view controller. You can also change the appearance of the screen by altering the viewController.view directly. In this example, when the user presses send you could use the following code to alter the nav bar:

UIBarButtonItem *back = [[UIBarButtonItem alloc] initWithTitle:[NSString stringWithFormat:@"Messages:(%i)", messageCount] style:UIBarButtonStylePlain target:nil action:nil];
self.navigationItem.backBarButtonItem = back;
[back release];
UIBarButtonItem *edit = [[UIBarButtonItem alloc] initWithTitle:@"Edit" style:plain target:self action:@selector(editMessage)];
self.navigationItem.rightBarButtonItem = edit;
[edit release]

And then you implement editMessage:

- (void)editMessage {
  //Go into edit mode, whatever that code looks like.
}

They then simply fail to call [self.textField resignFirstResponder] after you hit send, so the keyboard stays up there. You will notice that if you load an old conversation the view loads with the send box on the bottom of the screen and no keyboard. This is in keeping with the standard behavior of UITextField objects.

Hacking the view directly is explained in the help files for UIView, and can be kind of a pain. I'm honestly not sure how they draw that pretty IM interface, I'll leave that up to another expert.

Answer 2

I've actually implemented a very similar UI for one of my apps. This is how did it:

The main control is a UITableView. The two buttons at the top "call" and "add to contacts" are the table view header view.

Each cell is drawn from 8 different images. - One for each corner. - one that stretch and fills the gap between the top left and top right corners. - One that stretch and fills the gap between the top left and bottom left corners. - One that stretch and fills the gap between the top right and bottom rightt corners. - One that stretch and fills the gap between the middle left and the middle right. - One that stretch and fills the gap between the bottom left and bottom right corners.