Create UITextField/UITextView similar to iPhone messaging app - ios

Question

How can you create a UITextField very similar to the one apple uses in their messaging app, Instagram uses, edmodo uses, Whatsapp uses and many other message sharing applications? This text field should animate up, animate down, be able to expand, only reach a certain height, and have other properties as well.

Answer 1

I researched for a while, but couldn't find an answer so I just created my own way to do it. There are several things you must do. First of all, this does use a UITextView and not a UITextField. Secondly, this code was written specifically for the iPhone 5, so you may need to play around with the coordinates. It does not use sizing classes or constraints. 1You need to implement the first. Your .h file should look like the following:
int returnPressed = 0;
int newLine;
#interface ViewController : UIViewController <UITextViewDelegate>
{
IBOutlet UIView *dock;
IBOutlet UIButton *sendButton;
IBOutlet UITextView *textView1;
CGRect previousRect;
}
#end
In the .m file there are many needs that need to be met to make it look how the iPhone message app looks. You'll notice how we have created our own custom place holder in here because textview don't really have them. Here is the .m file:
- (void)viewDidLoad {
[super viewDidLoad];
previousRect = CGRectZero;
textView1.delegate = self;
self->textView1.layer.borderWidth = 1.0f;
self->textView1.layer.borderColor = [[UIColor lightGrayColor] CGColor];
self->textView1.layer.cornerRadius = 6;
self->textView1.textColor = [UIColor lightGrayColor];
self->textView1.text = #"Place Holder";
}
- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text {
if ([text isEqualToString:#"\n"]) {
returnPressed +=1;
if(returnPressed < 17){
textView1.frame = CGRectMake(8, 8, textView1.frame.size.width, textView1.frame.size.height + 17);
newLine = 17*returnPressed;
[UIView animateWithDuration:0.1 animations:^
{
dock.transform = CGAffineTransformMakeTranslation(0, -250 - newLine);
}
];
}
}
return YES;
}
- (void)textViewDidChange:(UITextView *)textView{
UITextPosition* pos = textView1.endOfDocument;
CGRect currentRect = [textView1 caretRectForPosition:pos];
if (currentRect.origin.y > previousRect.origin.y || [textView1.text isEqualToString:#"\n"]){
returnPressed +=1;
if(returnPressed < 17 && returnPressed > 1){
textView1.frame = CGRectMake(8, 8, textView1.frame.size.width, textView1.frame.size.height + 17);
newLine = 17*returnPressed;
[UIView animateWithDuration:0.1 animations:^
{
dock.transform = CGAffineTransformMakeTranslation(0, -250 - newLine);
}
];
}
}
previousRect = currentRect;
}
- (BOOL)textViewShouldBeginEditing:(UITextView *)textField {
if([textView1.text isEqualToString:#""] || [textView1.text isEqualToString:#"Place Holder"]){
textView1.text = #"";
}
textView1.textColor = [UIColor blackColor];
[UIView animateWithDuration:0.209 animations:^
{
dock.transform = CGAffineTransformMakeTranslation(0, -250 - newLine);
}
completion:^(BOOL finished){}];
return YES;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch * touch = [touches anyObject];
if(touch.phase == UITouchPhaseBegan) {
[textView1 resignFirstResponder];
[self.view endEditing:YES];
int height = returnPressed*20;
[UIView animateWithDuration:0.209 animations:^
{
dock.transform = CGAffineTransformMakeTranslation(0, -height);
}];
if([textView1.text isEqualToString:#""]){
self->textView1.textColor = [UIColor lightGrayColor];
self->textView1.text = #"Place Holder";
}
}
}
That is everything. I hope this helps anyone who was trying to do this and I hope you can integrate this into an app of yours.

Answer 2

There is a pod that you can use for growing text view's :
https://cocoapods.org/pods/HPGrowingTextView
With this you can manage animation and maximum height of text view.