Fork me on GitHub

给TableView添加背景

iPhone SDK提供了默认的几个TableView样式，但是如果想提供更个性化的样式就需要自己定义。 比如添加背景

如上图的样子。 其实自定义table view的样子很简单，无非就是把table view和table view cell的背景变成透明的，然后在指定视图和cell的背景图片（当然，也可以指定table view的背景图片）

1
2
3
4

@interface MainViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
{
  UITableView *theTableView;
}

先建立Controller，注意是继承自UIViewController而不是UITableViewController

实现类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

- (id)init
{
  if (self = [super init]) 
  {
    self.view = [[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]] autorelease];
 
    // Setup the background
    UIImageView *background = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background.png"]];
    [self.view addSubview:background];
    [background release];
 
    // Create table view
    theTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 11, 320, 460) style: UITableViewStylePlain];
    [theTableView setDelegate:self];
    [theTableView setDataSource:self];
 
    // This should be set to work with the image height
    [theTableView setRowHeight:68];
 
    // Transparent, so we can see the background
    [theTableView setBackgroundColor:[UIColor clearColor]];
    [theTableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
    [theTableView setIndicatorStyle:UIScrollViewIndicatorStyleWhite];
 
    [self.view addSubview:theTableView];
 
  }
  return self;
}

代码中的注释已经很清楚了。 先设置视图的背景，再设定table view的背景

再看另外一断代码，设置了cell的背景，注意，这里面使用了自定义的cell类CustomCell

1
2
3
4
5
6
7
8
9
10
11
12

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
	CustomCell *cell= [[[CustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil] autorelease];
 
	// Default to no selected style and not selected
	cell.selectionStyle = UITableViewCellSelectionStyleNone;
 
	// Set the image for the cell
	[cell setTheImage:[UIImage imageNamed:[NSString stringWithFormat:@"Arrows%d.png", indexPath.row + 1]]];
 
	return cell;
}

我们再看看如何定义自定义的cell

1
2
3
4
5
6
7
8
9
10

#import <UIKit/UIKit.h>
 
@interface CustomCell : UITableViewCell 
{
  UIImageView *image; 
}
 
- (void) setTheImage:(UIImage *)icon;
 
@end

再看实现类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

#import "CustomCell.h"
 
@implementation CustomCell
 
/*---------------------------------------------------------------------------
* 
*--------------------------------------------------------------------------*/
-(id) initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
	if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) 
  {
    // Cells are transparent
    [self.contentView setBackgroundColor:[UIColor clearColor]];
	}
 
	return self;
}
 
/*---------------------------------------------------------------------------
* 
*--------------------------------------------------------------------------*/
- (void) setTheImage:(UIImage *) icon
{  
  // Alloc and set the frame
  image = [[UIImageView alloc] initWithImage:icon];
  image.frame = CGRectMake(0, 0, 286, 68);
 
  // Add subview
  [self.contentView addSubview:image];    
}
 
/*---------------------------------------------------------------------------
*
*--------------------------------------------------------------------------*/
- (void)setSelected:(BOOL)selected animated:(BOOL)animated 
{
  [super setSelected:selected animated:animated];   
  if (selected == YES)
    image.alpha = .5;
  else
    image.alpha = 1;
}
 
/*---------------------------------------------------------------------------
* 
*--------------------------------------------------------------------------*/
- (void)dealloc 
{
  [image release];
  [super dealloc];
}
 
@end

posted on 2012-02-13 10:19  pengyingh  阅读(294)  评论(0)  编辑  收藏  举报

导航