在iPhone程序上读取PDF文件 (rev0.1 ^-^;)
The Ultimate Toolbox for iPhone Development

Drawing a Grid in a UITableView

Chirpware posted @ 2009年12月22日 22:20 in iphone开发 with tags iphone Border UITableView , 62229 阅读

The Original paper come from: http://dewpoint.snagdata.com/2008/10/31/drawing-a-grid-in-a-uitableview/

 UITableView is probably the most used view on the iPhone. It’s flexible and the UI is ideally suited to use on the iPhone. There are lots of examples on how to add multiple items to a UITableViewCell. However, I needed to present some data in a more traditional spreadsheet style grid. The results worked well and enabled me to pack a lot of information on the screen that was very hard to follow without the vertical grid. I’ll show a very simplified version here you can use to add vertical lines to your UITableView.

 First we need to create a subclass of UITableViewCell. This is so we can override drawrect and draw our lines and to add an array to hold a list of positions where we’ll draw the lines.

@interface MyTableCell : UITableViewCell {
	NSMutableArray *columns;
}
- (void)addColumn:(CGFloat)position;
@end

 In this simplified example we’ll leave the positioning of the actual text in the cells in the UITableViewController and place it manually (full source code is attached at the end). We’re just providing a mechanism for drawing vertical lines to make a grid. Column locations are added by calling addColumn:

- (void)addColumn:(CGFloat)position {
	[columns addObject:[NSNumber numberWithFloat:position]];
}

 Now lets override drawRect. In it we grab the current graphics context and set the line color and width. Then we iterate over our columns array drawing a line from the top of the cell row to the bottom at each position stored in the array.

- (void)drawRect:(CGRect)rect {
	CGContextRef ctx = UIGraphicsGetCurrentContext();
	// Use the same color and width as the default cell separator for now
	CGContextSetRGBStrokeColor(ctx, 0.5, 0.5, 0.5, 1.0);
	CGContextSetLineWidth(ctx, 0.25);
 
	for (int i = 0; i < [columns count]; i++) {
		CGFloat f = [((NSNumber*) [columns objectAtIndex:i]) floatValue];
		CGContextMoveToPoint(ctx, f, 0);
		CGContextAddLineToPoint(ctx, f, self.bounds.size.height);
	}
 
	CGContextStrokePath(ctx);
 
	[super drawRect:rect];
}

 To add columns to the view just call

[cell addColumn:50];

 when you’re building each cell.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
	NSString *MyIdentifier = [NSString stringWithFormat:@"MyIdentifier %i", indexPath.row];
 
	MyTableCell *cell = (MyTableCell *)[tableView dequeueReusableCellWithIdentifier:MyIdentifier];
 
	if (cell == nil) {
		cell = [[[MyTableCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];
 
		UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(0.0, 0, 30.0,tableView.rowHeight)] autorelease];
		[cell addColumn:50];
		label.tag = LABEL_TAG;
		label.font = [UIFont systemFontOfSize:12.0];
		label.text = [NSString stringWithFormat:@"%d", indexPath.row];
		label.textAlignment = UITextAlignmentRight;
		label.textColor = [UIColor blueColor];
		label.autoresizingMask = UIViewAutoresizingFlexibleRightMargin |
		UIViewAutoresizingFlexibleHeight;
		[cell.contentView addSubview:label]; 
 
		label =  [[[UILabel alloc] initWithFrame:CGRectMake(60.0, 0, 30.0,tableView.rowHeight)] autorelease];
		[cell addColumn:120];
		label.tag = VALUE_TAG;
		label.font = [UIFont systemFontOfSize:12.0];
		// add some silly value
		label.text = [NSString stringWithFormat:@"%d", indexPath.row * 4];
		label.textAlignment = UITextAlignmentRight;
		label.textColor = [UIColor blueColor];
		label.autoresizingMask = UIViewAutoresizingFlexibleRightMargin |
		UIViewAutoresizingFlexibleHeight;
		[cell.contentView addSubview:label];
	}
 
	return cell;
}

 That’s it. Being a bit dense I beat my head on my desk a few days before it become obvious how blindingly simple it really was. A lot was just learning ObjectiveC and how UIKit works in general. I’m now working on a GridTableView library that will add a good bit of functionality and ease of use. I’ll post it here.

 

Chintan 说:
2011年2月23日 07:48

Nice article........can you tell me where is the download link for the source code.

Avatar_small
chen82858 说:
2011年3月01日 08:11

你好 能不能送个兑换码给我啊?http://itunes.apple.com/cn/app/id363128952?mt=8

pandi 说:
2012年2月15日 22:26

how to scroll the single column in table view.....

twaghmare5@gmail.com 说:
2012年6月06日 21:32

Give me source code of "Drawing a Grid in a UITableView"

thank you..

ThE uSeFuL 说:
2012年6月19日 18:08

Any idea how we can make re-ordering of cells possible?

cenk sahin 说:
2012年6月24日 01:53

not working

新人 说:
2013年5月13日 01:54

不知版主
能提供這個專案的檔案嗎?
照你的做我還是無法畫出現


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter