有读者问到怎样才能为Bikini.com程序创立如下图所示的用户界面：

 

 

创建定制表格

 

这一切实际上很简单，只不过是让UITableView透明，所以可以看到背景。而每个单元格UITableViewCell允许定制。

 

在浏览代码之前，我们看一下我们将创建的示例程序的截图：

 

包含了tableview的主视图控制的类定义如下：

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

 

请注意在这里我没有使用UITableViewController，而是使用了带有UITableView的UIViewController。另外请注意代码中的UITableViewDelegate和UITableViewDataSource。

 

先看看我是怎样对viewconroller进行初始化的：

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
- (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;
}

 

我创建视图，增加背景图像并定义tableview。我将表格的行高设定为相应图像的高度，然后设定表格背景为透明。

另一段代码说明了我们是怎样提供构成表格的单元格的。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (UITableViewCell *)tableView:(UITableView *)tableView
        cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomCell *cell= [[[CustomCell alloc]
        initWithFrame:CGRectZero 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;
}

 

注意我没有使用UITableViewCell 而是使用了CustomCell 类（我下面会说明）。另外需注意的是第9行，我将要显示的图像设置到单元格中（下面会详细说明）。

 

创建定制单元格

 

我们看看定制单元格的代码，它也并不复杂，只不过是一个UIImageView和在单元格中设置图像的方法。根据你用户界面的需要，你还可以包括一个标签或其他UI元件。

1
2
3
4
5
6
7
8
9
10
#import <UIKit/UIKit.h>

@interface CustomCell : UITableViewCell
{
    UIImageView *image;
}

- (void) setTheImage:(UIImage *)icon;  

@end

CustomCell的实现只包括3个方法：初始化，为单元格设定图像以及设定所选行的alpha值:

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
#import "CustomCell.h"

@implementation CustomCell
/*----------------------------------------------------------------------- *
 *------------------------------------------------------------------------*/
- (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithFrame:frame 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

 

这样我们就创建了一个简单的定制tableview。

 

下载Xcode项目

 

在这里下载。

 

原文来自：Creating Unique Looking Tables with Custom Cells 翻译：bagusflyer