7

I'm new to XCode and Objective-C, and is trying to recreate the bottom bar of the iMessage app, but i can't figure out how to do it. I've seen other app's using the exact same layout, WhatsApp Messenger for example, which made me think there probably is some easy way to do it.

It seems impossible to get a UIButton to look like the send-button, and it seem equally impossible to make a UITextField look like the input-field. Is it really all done by using images, or are there some native (correct) way to do it? If it is all images, where can I find them, or do I have to make my own?

Also, how do i make the textfield vertically expand while the user enters text? This question at least seems to answer how to make dynamic-width buttons using images, but not how to make textfields with variable height.

This is what I'm trying to recreate:

Empty text message form enter image description here

Community
  • 1
  • 1
TheQ
  • 6,858
  • 4
  • 35
  • 55

2 Answers2

8

There is no easy way to do it. The tricky part is to mimic the behavior and the precise position of the elements. I did this with high precision for an app I developed and extracted the compose bar into a standalone project so anyone can easily get it. It's called PHFComposeBarView. Here's what it looks like:

PHFComposeBarView

Just to summarize, those are the features:

  • title of main button (the one on the right) can be changed
  • tint color of main button can be changed
  • title of the placeholder can be changed
  • placeholder is exposed as a property for further customization
  • text view is exposed as a property for further customization
  • utility button (the one on the left) can be shown by setting the utility button image (best results for white images on transparent background with up to 32pt side length)
  • optional character counter when specifying a max character count (similar to typing an SMS in Messages.app; the max char count limit is not imposed)
  • uses delegation to notify of button presses
  • forwards delegation methods from the text view
  • automatically grows when text wraps and posts notifications and sends delegate messages about frame changes before and after the change so you can adjust your other views for frame changes and sends delegate methods so you can adjust your views
  • by default grows upwards, alternatively downwards
  • max height for growth can be specified in terms of points or line numbers
fphilipe
  • 9,739
  • 1
  • 40
  • 52
5

Quick google search for the bar. You have to make your own button images and havve it change when you tap it. The its a textview not a textfield and you have to make it change size dynamically. There's an imageview behind it that changes size as well. My suggestion is to use google more. I found a lot of this stuff by a 2 second google search. As for the bar he is the link http://developer.apple.com/library/ios/#samplecode/KeyboardAccessory/Introduction/Intro.html

evan.stoddard
  • 698
  • 1
  • 5
  • 22