Menu

Category

Archive

logo


Change Dynamically Text and Color in iOS

2013-09-23 02:11:00 +0900
  • このエントリーをはてなブックマークに追加

I think we often encounter the situation we want to change the text color based on the length of the message in iOS programming. The famous example is twitter. When we type tweet and the tweet is over 140, the counter become red. like there :

This twitter editing modal view automatically show the count and change the color based on the user typing.

How to implement

This is easily accomplished. Here is simple code :

 1 #import "KKViewController.h"
 2 
 3 @interface KKViewController ()
 4 
 5 @property (strong, nonatomic) IBOutlet UITextField *textfield;
 6 @property (strong, nonatomic) IBOutlet UILabel     *labelCount;
 7 
 8 @end
 9 
10 @implementation KKViewController
11 
12 - (void)viewDidLoad
13 {
14     [super viewDidLoad];
15     
16     // Textfield
17     self.textfield                 = [[UITextField alloc] init];
18     self.textfield.frame           = CGRectMake(10, 100, 300, 30);
19     self.textfield.borderStyle     = UITextBorderStyleRoundedRect;
20     self.textfield.placeholder     = @"Type message for this people.";
21     self.textfield.clearButtonMode = UITextFieldViewModeWhileEditing;
22     [self.textfield addTarget:self
23                        action:@selector(textAttributesBasedOnTyping:)
24              forControlEvents:UIControlEventEditingChanged];
25     
26     [self.view addSubview:self.textfield];
27     
28     // Count Text
29     self.labelCount           = [[UILabel alloc] init];
30     self.labelCount.frame     = CGRectMake(140, 50, 40, 40);
31     self.labelCount.text      = [NSString stringWithFormat:@"%i",140 - [self.textfield.text length]];
32     self.labelCount.textColor = [UIColor colorWithRed:0.4 green:0.4 blue:0.4 alpha:0.8];
33     
34     [self.view addSubview:self.labelCount];
35     
36 }
37 
38 -(void)textAttributesBasedOnTyping:(id)sender
39 {
40     if([sender isKindOfClass:[UITextField class]])
41     {
42         self.labelCount.text     = [NSString stringWithFormat:@"%i",140 - [self.textfield.text length]];
43         
44         // Change color by the count of text length
45         if([self.textfield.text length] <= 140)
46         {
47             self.labelCount.textColor = [UIColor colorWithRed:0.4 green:0.4 blue:0.4 alpha:0.8]; // Gray
48         }
49         else
50         {
51             self.labelCount.textColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.8];  // Red
52         }
53     }
54 }
55 
56 @end

The point is adding Target ( - (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;) and using "UIControlEventEditingChanged" in my textAttributesBasedOnTyping function. By this code, we can change dynamically the text ( number in this case ) and the color at the same time. It is so convenient. Furthermore, we can add some more effect like the twitter's tweet button in above photos. If we type over 140 characters, we won't be allowed to tweet it by disable the button. It is helpful to validate something in client side.

If you have better solution, feel free to tell me.