“To get observation notices, you have to override a lengthy selector (observeValueForKeyPath:ofObject:change:context:), provide a static context pointer, and essentially implement a big switch statement on the key path.

That’s unwieldy, but I think it also makes for unmaintainable code: the callbacks end up thrown in the same method, and they’re separated from the observer registration.”

~ KVO+Blocks: Block Callbacks for Cocoa Observers

Since iOS 4 support blocks, it’s possible to use this for iPhone projects too.

Growing and Shrinking

I started with the code of Brett Schumann (iPhone Multiline Textbox for SMS style chat). Brett calculates the new height when UITextViewTextDidChangeNotification is posted. He determines the needed height by using sizeWithFont:

CGSize newSize = [textView.text
            sizeWithFont:[UIFont fontWithName:@"Helvetica" size:14]
            constrainedToSize:CGSizeMake(222,9999)
            lineBreakMode:UILineBreakModeWordWrap];

I find this rather inconsistent with other typefaces and sized, because of the inset/padding of the UITextView.

I ended with a much simpler approach, using the textViewDidChange: delegate method. This method is called after inserting the typed character. Determining the height is than as easy as: textView.contentSize.height (UITextView extends UIScrollView)

Determining the height of, for example, one line is done by a hidden UITextView, this is needed for the properties of minNumberOfLines and maxNumberOfLines.

Removing the bottom margin

The first problem that comes about when using a UITextView with one line is that the UITextView scrolls up when focused. With googling you can find the answer for the solution:

textView.contentInset = UIEdgeInsetsZero;

Some people say that the “word-tip” or correction bubble will be cut by the bounds of the UITextview, but I couldn’t reproduce that.

Removing the bottom margin took quite a long time. After a few days of research I found out that UITextView is setting the contentInset on unpredictable times. I tried setting it in several delegate methods but ended up in subclassing UITextView and overriding the method. It seems that this works perfectly.

-(void)setContentInset:(UIEdgeInsets)s
{
	UIEdgeInsets insets = s;
 
	if(s.bottom>8) insets.bottom = 0;
	insets.top = 0;
 
	[super setContentInset:insets];
}

Sometimes you want a inset on the bottom when you’re typing and wraps to the next line. But when the user is going to scroll manually you need to set the inset to 0. The solution is overriding setContentOffset:.

-(void)setContentOffset:(CGPoint)s
{
	if(self.tracking || self.decelerating){
		//initiated by user...
		self.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
	} else {
 
		float bottomOffset = (self.contentSize.height - self.frame.size.height + self.contentInset.bottom);
		if(s.y < bottomOffset && self.scrollEnabled){
			self.contentInset = UIEdgeInsetsMake(0, 0, 8, 0); //maybe use scrollRangeToVisible?
		}
 
	}
 
	[super setContentOffset:s];
}

Delegate and UITextView properties

The class uses a internal UITextView, but you can set nearly all properties on a class instance, the will be applied on the internal UITextView. All the UITextView delegate methods are also possible to use.

I also included 2 delegate methods for determining when a grow/shrink starts. willChangeHeight is called within the animation block, so every change you make there on a view gets animated.

The Delegate methods

- (BOOL)growingTextViewShouldBeginEditing:(HPGrowingTextView *)growingTextView;
- (BOOL)growingTextViewShouldEndEditing:(HPGrowingTextView *)growingTextView;
 
- (void)growingTextViewDidBeginEditing:(HPGrowingTextView *)growingTextView;
- (void)growingTextViewDidEndEditing:(HPGrowingTextView *)growingTextView;
 
- (BOOL)growingTextView:(HPGrowingTextView *)growingTextView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text;
- (void)growingTextViewDidChange:(HPGrowingTextView *)growingTextView;
 
//called WITHIN animation block!
- (void)growingTextView:(HPGrowingTextView *)growingTextView willChangeHeight:(float)height;
 
//called after animation
- (void)growingTextView:(HPGrowingTextView *)growingTextView didChangeHeight:(float)height;
 
- (void)growingTextViewDidChangeSelection:(HPGrowingTextView *)growingTextView;
- (BOOL)growingTextViewShouldReturn:(HPGrowingTextView *)growingTextView;

The included properties

int maxNumberOfLines;
int minNumberOfLines;
 
BOOL animateHeightChange; //default is YES
 
//UITextView properties
NSString *text;
UIFont *font;
UIColor *textColor;
UITextAlignment textAlignment;
NSRange selectedRange;
BOOL editable;
UIDataDetectorTypes dataDetectorTypes;
UIReturnKeyType returnKeyType;

You can read/write the properties on a class instance. When you need to set a specific property that is not listed here, you can set it directly on the internalTextView. Be careful though; the HPGrowingTextView needs to stay the delegate of the internalTextView!

Download

GrowingTextView

Update: Added fixes suggested in the comments.

License: MIT license

It’s a zip file, with the class and an example included.

Please comment if you use it or found any problems.

Too lazy to build the sample project or just want to see if this is what you are looking for? Here is a movie showing the HPGrowingTextView;

First, I should credit Craig for his example of drawing lines on a MKMapView (http://spitzkoff.com/craig/?p=108), that’s where you can find part 1 and part 2. This post is a teaser of what I am going to post later this month. It’s a improvement on his code and makes overlays on a MKMapView possible without the need to hide it when zooming/panning around.

The performance is pretty good. There is absolutely no lag on the iPhone 3GS, you will notice that panning/zooming around on the iPhone 3G is not that smooth as on the 3GS, but it’s acceptable.

I will publish it here on my blog when my app update is ready and Apple approved it. Will be in a month or so. If you actually found a way of doing this please let me now, I still looking for other ideas.

–

Download

I do not have a lot of time to write a big blogpost, so I’m just going to post the code, and maybe later write the explanation.

Download project here.

It’s easy to use

1. Copy the files in your project.
2. Use this code to create a cell:

   cell = [[[HPCopyTableViewCell alloc] 
   			initWithStyle:UITableViewCellStyleValue2 
   		      reuseIdentifier:CellIdentifier] autorelease];

   Download

   HPCopyTableViewCell.zip

   ]]> http://www.hanspinckaers.com/how-to-create-a-uitableviewcell-with-copy-possibility/feed 10 http://www.hanspinckaers.com/custom-action-on-back-button-uinavigationcontroller http://www.hanspinckaers.com/custom-action-on-back-button-uinavigationcontroller#comments Fri, 27 Nov 2009 22:17:05 +0000 Hans Pinckaers http://www.hanspinckaers.com/?p=160 Yes! There is a way of using the backBarButton with a custom action. No, it’s not by overriding the backBarButton property of navigationItem. This is not an ugly solution with images that simulate the “Back”-button (arrow-shaped.) It’s possible to use the backBarButton for popping the current viewController as normal, but than with other animations such as UIViewAnimationTransitionCurlDown.

   Enough said, the solution is simple. You have to subclass your navigationController’s  popViewControllerAnimated:(BOOL)animated. So create a custom navigationController:

   customNavigationController.h

   #import
   @interface customNavigationController : UINavigationController {}
   @end

   And a custom “popViewControllerAnimated:(BOOL)animated”, this popViewControllerAnimated-function uses the “UIViewAnimationTransitionCurlDown” when popping from a SettingsTableView.

   customNavigationController.m

   #import "customNavigationController.h"
   #import "SettingsTableController.h"
    
   @implementation customNavigationController
    
   - (UIViewController *)popViewControllerAnimated:(BOOL)animated
   {
   	if([[self.viewControllers lastObject] class] == [SettingsTableController class]){
    
   		[UIView beginAnimations:nil context:NULL];
   		[UIView setAnimationDuration: 1.00];
   		[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown
   					forView:self.view cache:NO];
    
   		UIViewController *viewController = [super popViewControllerAnimated:NO];
    
   		[UIView commitAnimations];
    
   		return viewController;
   	} else {
   		return [super popViewControllerAnimated:animated];
   	}
   }
   @end

   Use your custom navigationController in your appDelegate:

   customNavigationController *navigationController =
    [[customNavigationController alloc] 
   		initWithRootViewController:rootView];

   ]]> http://www.hanspinckaers.com/custom-action-on-back-button-uinavigationcontroller/feed 17 http://www.hanspinckaers.com/high-performance-rounded-corner-uitableview http://www.hanspinckaers.com/high-performance-rounded-corner-uitableview#comments Sat, 24 Oct 2009 07:51:55 +0000 Hans Pinckaers http://www.hanspinckaers.com/?p=143 The problem with the previous example was that I was using a second UIScrollView to scroll the UITableView and not the UITableView itself, which is a subclass of UIScrollView and highly optimized for scrolling.

   Here is a solution. The advantage of this one is that it is fast, but it’s not that easy and straightforward.
   There are three view related properties for the uitableviewcell:

   @property(nonatomic, readonly, retain) UIView *contentView
    
   @property(nonatomic, retain) UIView *backgroundView
    
   @property(nonatomic, retain) UIView *selectedBackgroundView

   The backgroundView of the first and last UITableCell will be changed so that they have rounded corners at the proper place.

   The selectedBackgroundview will be changed so that the blue selection of the first and last table cell will be corrected with the rounded corners of the backgroundView.

   The gradient is drawn with Core Graphics. So you also learn with this project how to draw a gradient.

   The only negative point of this technique is that I needed to make the separatorColor “clearColor”.

   Download the project

   Here 

   ]]> http://www.hanspinckaers.com/high-performance-rounded-corner-uitableview/feed 4 http://www.hanspinckaers.com/reproducing-a-tableview-like-in-stocks-spotlight-weather http://www.hanspinckaers.com/reproducing-a-tableview-like-in-stocks-spotlight-weather#comments Wed, 21 Oct 2009 12:00:40 +0000 Hans Pinckaers http://www.hanspinckaers.com/?p=125 This article is outdated. You can find the better optimized tableView here: http://www.hanspinckaers.com/high-performance-rounded-corner-uitableview

   To come straight out with it: the trick is

   view.layer.cornerRadius = 10;

   
   For this to work you need to include the QuartzCore into the class which you call that property:

   #import <QuartzCore/QuartzCore.h>

   I heard that this only works since OS 3.0. Haven’t checked it though.

   This is the idea:
   Scrollview (rounded corners) -> TableView (rounded corners, scrolling disabled)

   Don’t use this with big tables because it will ruin the cache system of the table. I will post a solution and better method next week.

   This is the code:

   self.view = [[UIView alloc] init];
    
   scrollView = [[UIScrollView alloc] init];
   scrollView.frame = CGRectMake(10, 40, 300, 380);
   scrollView.layer.cornerRadius = 15;
   [self.view addSubview:scrollView];
   [scrollView setShowsVerticalScrollIndicator:NO];
    
   table = [[RoundedCornerTableViewController alloc] initWithStyle:UITableViewStylePlain];
   table.tableView.scrollEnabled = NO;
   table.tableView.layer.cornerRadius = 15;
    
   //Should be set the same as
   [scrollView setContentSize:CGSizeMake(300, 800)];
   table.tableView.frame = CGRectMake(0, 0, 300, 800);
   [scrollView addSubview:table.tableView];

   Download the sample project

   Here.

   ]]> http://www.hanspinckaers.com/reproducing-a-tableview-like-in-stocks-spotlight-weather/feed 1 http://www.hanspinckaers.com/multiple-nsurlrequests-with-different-cookies http://www.hanspinckaers.com/multiple-nsurlrequests-with-different-cookies#comments Tue, 06 Oct 2009 11:12:49 +0000 Hans Pinckaers http://www.hanspinckaers.com/?p=71 I searched the whole internet for a solution but I didn’t find one. Yet I managed to get it to work. My problem was that I had several NSURLRequests who had to connect to one internet webservice, without an API, so I had to login behind the scenes with the provided login form from the normal website. This webpage uses cookies, but the NSURLRequest object on the iPhone uses a shared cookie storage. I wanted to use different accounts on one webservices with each their own cookies.

   The solution was quite simple. You have to save the cookies after you get the response headers and you have to set them before doing the request. You also have to turn off the cookie handling via the shared cookie provider.

   Here is the code for saving the cookies. self.currentCookies is an NSArray, you have to be sure that the delegate of the NSURLConnection is the same class.

   -(void) connection:(NSURLConnection *)connection 
   	didReceiveResponse:(NSURLResponse *)response
   {
       self.currentCookies = [NSHTTPCookie 
   	cookiesWithResponseHeaderFields:[response allHeaderFields] 
   	forURL:[NSURL URLWithString:@""]];
   }

   Here is the code for using the saved cookies for a new request:

   NSMutableURLRequest *request = [[NSMutableURLRequest alloc] 
   				initWithURL:url]; 
    
   [request setHTTPMethod: @"POST"];
   [request setHTTPShouldHandleCookies:NO];
    
   if(self.currentCookies != nil){
       [request setAllHTTPHeaderFields:
   	[NSHTTPCookie requestHeaderFieldsWithCookies:
   		self.currentCookies]];
   }
   NSURLConnection *connection = [[NSURLConnection alloc] 
   				initWithRequest:request delegate:self];

   ]]> http://www.hanspinckaers.com/multiple-nsurlrequests-with-different-cookies/feed 2 http://www.hanspinckaers.com/multiple-backgrounds-with-canvas-drawing http://www.hanspinckaers.com/multiple-backgrounds-with-canvas-drawing#comments Thu, 02 Apr 2009 21:51:42 +0000 Hans Pinckaers http://www.hanspinckaers.com/?p=10 The canvas HTML element was invented by Apple. It was created to dynamically create complex images for Widgets. There where a few complaints about the element, but despite of that it is included in the HTML 5.0 working draft. All modern browsers are compatible with the canvas-tag, beside of Internet Explorer, but Google created a superb piece of javascript that ported the canvas to IE. I created a little piece of javascript for drawing multiple backgrounds in a canvas element behind an HTML element.

   The syntax

   First the syntax to call the function. I use this code to draw the backgrounds behind the header in this site:

   $mb(['info'],
   ['url(http://hanspinckaers.com/img/mainBackgroundTop2.png) no-repeat 8px top',
   'url(http://hanspinckaers.com/img/achtergrondHoofdartikel.jpg) no-repeat 8px bottom']);

   Examples

   • You can see a simple example with rounded corners here

   Points of improvements

   • It’s buggy (report bugs please!)
   • Maybe convert it into a class
   • Speed (always a good one to improve)
   • Destination element must have an absolute or relative position declared in his css

   Download

   Project homepage: at Github. You can download the files from there.

   Using it

   You have to add these lines before you call the $mb funtion:

   <!--[if IE]>
   <script type="text/javascript" charset="utf-8" src="changed_excanvas_compressed.js" mce_src="changed_excanvas_compressed.js"></script>
   <![endif]-->
   <script src="mbmin.js" type="text/javascript"><!--mce:0--></script>

   I modified googles excanvas so it is smaller but can only be used to draw images.

   If you have any questions, please ask in the comments! And please always keep progressive enhancement in mind, so set a normal replacement background in the css.

   ]]> http://www.hanspinckaers.com/multiple-backgrounds-with-canvas-drawing/feed 1