A Simple Drop In Expanding Chat Input Text View For iOS 7
What Is SimpleInput?
Simple input is an easy to use solution for integrating an expanding chat input into your app. Its adaptive, smooth, and highly customizable! Show us how you used it in your project!
Why Do I Need It?
Mimicking the behavior of iChat can be a long and complicated process, why not spend more time worrying about design and let us worry about the input. In just a few lines of code, you can drop SimpleInput into your project, customize it, and let it go!
Features
- iOS 7 Inspired Design
- 3.5” & 4” Screen Compatibility
- Low Memory Usage
- Drag & Drop Installation
- Portrait/Landscape Views
- Expanding View – Return & Text
- Smart Open & Close
- Synchronized Animation
- Customizable Design
TRY IT YOURSELF
You can check try the demo version here to see if it’s right for your project!
DOCS
You can check out our docs here , or you can follow along below.
1. Add SimpleInputSDK to Xcode
- Unzip SimpleInputSDK
- Drag SimpleInputSDK into your Xcode project
- Make sure “Copy items into destination group’s folder (if needed)” is selected
2. Your ViewController.h File
- Import SimpleInput
- Set up your view controller as a SimpleInput delegate
#import <UIKit/UIKit.h>
#import "SimpleInput.h"
@interface ViewController : UIViewController <SimpleInputDelegate>
@end
<pre>
<p align="center">
<img src="https://github.com/LoganWright/SimpleInputDemo/blob/master/SimpleInputDemo/Images/ViewControllerHeader.gif?raw=true" width="600" />
</p>
<h3>3. Your ViewController.m File</h3>
</pre>
- Create a SimpleInput Reference
- Launch simpleInput in viewDidLoad
- Set Up Required Delegate Method
* NOTE – Make sure simpleInput is on TOP of your view hierarchy to utilize autoClose (see below)
Notice that we aren’t adjusting the frame at all when we added simpleInput. SimpleInput will position itself at the bottom of the screen, with a starting height of 40px. Opening and closing is automatic, just make sure that simpleInput is on TOP of your view hierarchy in order for this to function properly. If your project doesn’t support multiple orientations, then you can skip step 4 and go straight to customization & synchronizing animation!
#import "ViewController.h"
@interface ViewController ()
{
SimpleInput * simpleInput;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
simpleInput = [[SimpleInput alloc]init];
simpleInput.delegate = self;
[self.view addSubview:simpleInput];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark SIMPLE INPUT DELEGATE
- (void) simpleInputNewMessageSent:(NSString *)message {
NSLog(@"User sent a new message: %@", message);
}
// ... (continues)
4. Add Rotation Calls
REQUIRED FOR MULTIPLE ORIENTATION SUPPORT
- Copy Below Code Into ViewController.m
#pragma mark SIMPLE INPUT ROTATION CALLS
- (void) willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
[simpleInput willRotate];
}
- (void) willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
[simpleInput isRotating];
}
- (void) didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
[simpleInput didRotate];
}
What It Gives You
5. Synchronize Animation
- Implement simpleInputResizing Delegate Method
- Utilize simpleInput’s synronization methods, or add your own
* Do not add UIView animations in this method *
You can see the result of this implementation in the graphic below the code.
- (void) simpleInputResizing {
/* DO NOT INCLUDE UI ANIMATIONS IN THIS METHOD */
// --- DEMO --- //
// rise with simple input
[simpleInput slideView:orangeV withOffset:0];
// rise with offset
[simpleInput slideView:greenV withOffset:20];
// crunch with simple input
[simpleInput crunchView:torquoiseV withOffset:0];
// crunch with offset
[simpleInput crunchView:blueV withOffset:20];
// dynamically resize
[simpleInput adjustViewDynamically:purpleV withMaximumY:20 maximumHeight:240 andOffset:25];
// -- DEMO END -- //
}
6. Customize
* Implement Customization BEFORE Adding SimpleInput To View *
Add Placeholder
simpleInput.placeholderString = ...; // (NSString *)
Color Scheme
simpleInput.customBackgroundColor = ...; // (UIColor *)
simpleInput.inputBorderColor = ...; // (UIColor *)
simpleInput.textViewBackgroundColor = ...; // (UIColor *)
simpleInput.textViewTextColor = ...; // (UIColor *)
simpleInput.placeholderTextColor = ...; // (UIColor *)
simpleInput.sendBtnInactiveColor = ...; // (UIColor *)
simpleInput.sendBtnActiveColor = ...; // (UIColor *)
simpleInput.inputBorderColor = ...; // (UIColor *)
Color Scheme
simpleInput.customKeyboard = ...; // (UIKeyboardAppearance)
Optional Behavior Options
Max Y
The point on the Y axis that simpleInput can extend to – default: 60
simpleInput.maxY = [NSNumber numberWithInt:60];
AutoClose—MUST BE ON TOP OF VIEW HIERARCHY TO PROPERLY INTERCEPT TOUCHES
Set to YES to prevent auto close behavior
simpleInput.stopAutoClose = YES;
Max Characters
The maximum amount of characters to allow at input – default is unrestricted
simpleInput.maxCharacters = [NSNumber numberWithInt:140];
7. Example Themes
* Remember to add these before you add simpleInput to your view! *
Light Blue Theme
simpleInput.customBackgroundColor = [UIColor colorWithRed:0.142954 green:0.60323 blue:0.862548 alpha:1];
simpleInput.sendBtnInactiveColor = [UIColor colorWithWhite:1 alpha:.5];
simpleInput.sendBtnActiveColor = [UIColor whiteColor];
simpleInput.inputBorderColor = [UIColor clearColor];
Soft Lounge Theme
simpleInput.customBackgroundColor = [UIColor colorWithRed:0.959305 green:0.901052 blue:0.737846 alpha:1];
simpleInput.textViewBackgroundColor = [UIColor colorWithRed:109.0/255.0 green:37.0/255.0 blue:38.0/255.0 alpha:.35];
simpleInput.textViewTextColor = [UIColor colorWithWhite:1 alpha:.9];//[UIColor colorWithRed:0.959305 green:0.901052 blue:0.737846 alpha:1];
simpleInput.placeholderTextColor = [UIColor colorWithWhite:1 alpha:.5];
simpleInput.sendBtnInactiveColor = [UIColor colorWithRed:109.0/255.0 green:37.0/255.0 blue:38.0/255.0 alpha:.35];
simpleInput.sendBtnActiveColor = [UIColor colorWithRed:109.0/255.0 green:37.0/255.0 blue:38.0/255.0 alpha:1];
simpleInput.inputBorderColor = [UIColor lightGrayColor];//[UIColor clearColor];
simpleInput.customKeyboard = UIKeyboardAppearanceDark;
* IMPORTANT NOTES **
DO NOT ADJUST SIMPLE INPUT FRAME
PLACEMENT – MUST BE ON TOP OF VIEW HIERARCHY TO PROPERLY HANDLE AUTOCLOSE
IN THE DELEGATE METHOD ’ simpleInputResizing ’ DO NOT INCLUDE ANIMATIONS
STARTING HEIGHT IS 40px SIMPLE INPUT WILL BE ON BOTTOM OF VIEW
Download SimpleInput – A Customizable Drop In Chat Input (UI Elements)
