Elton's Blog

Tag: table view

给TableView加背景

by on 二.02, 2010, under iPhone

iPhone默认的表格背景很单调,你可以通过加背景图片的方式来给你的应用增添点亮点。可以通过以下方法来给表格添加背景。
你可以在你的delegate类里面添加如下代码:

1
2
3
4
5
6
7
8
9
10
UIView *backgroundView = [[UIView alloc] initWithFrame: window.frame];
backgroundView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"TableViewBackground.png"]];
[window addSubview:backgroundView];
[backgroundView release];
 
yourTableViewController = [[ATableViewController alloc] initWithStyle:UITableViewStyleGrouped];
yourTableViewController.view.backgroundColor = [UIColor clearColor];
[window addSubview:yourTableViewController.view];
 
[window makeKeyAndVisible];

ATableViewController是UITableViewController的一个子类

18 Comments :, more...

给TableView添加背景

by on 十.16, 2009, under iPhone

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

还是很简单的吧。

1 Comment :, , more...

iPhone Table View 教程(2) 创建一个简单表格

by on 七.05, 2009, under iPhone

上一节我们介绍了iPhone的table view,这节我们先做一个简单的表格例子。

在Xcode中新建一个view based项目,命名为SimpleTable。

新建xcode项目

新建xcode项目

在SimpleTableViewController.h输入以下代码:

1
2
3
4
5
6
7
#import
 
@interface SimpleTableViewController : UIViewController  {
	IBOutlet UITableView *tblSimpleTable;
	NSArray *arryData;
}
@end

定义一个table view IBOutlet变量和一个数组。

打开SimpleTableViewController.xib文件,进入interface builder。
从Library拖入一个table view控件到主窗口中。

选择File’s Owner

File‘s Owner

File‘s Owner

按cmd + 2 打开 ‘Connections Inspector’

关联表格

关联表格

点击tblSimpleTable边上的小圆圈,拖拽到主屏幕上的table view上,将IBOutlet变量跟Interface Builder中的表格table view关联起来。

在选择主屏幕中的table view,拖拽dataSource和delegate两个变量拖拽到File’s Owner上,指定File‘s Owner所对应的对象(即SimpleTableViewController)为tableview的datasource和delegate。

设置data source和delegate

设置data source和delegate

打开SimpleTableViewController.m,编辑其中内容为:

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
54
#import "SimpleTableViewController.h"
 
@implementation SimpleTableViewController
 
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
	arryData = [[NSArray alloc] initWithObjects:@"iPhone",@"Android",@"Plam Pre",@"Windows Mobile",nil];
    [super viewDidLoad];
}
 
- (void)didReceiveMemoryWarning {
	// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
 
	// Release any cached data, images, etc that aren't in use.
}
 
- (void)viewDidUnload {
	// Release any retained subviews of the main view.
	// e.g. self.myOutlet = nil;
}
 
- (void)dealloc {
	[arryData release];
    [super dealloc];
}
 
#pragma mark Table view methods
 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
 
// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [arryData count];
}
 
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
    }
 
    // Set up the cell...
	cell.textLabel.text = [arryData objectAtIndex:indexPath.row];
    return cell;
}
 
@end

运行可以得到:

运行结果

运行结果

14 Comments :, , more...

iPhone Table View 教程(1) 基础知识

by on 七.05, 2009, under iPhone

Table View是iPhone最重要的用户UI之一,用来显示具有层级关系的数据结构。本教程将建立一个最基本的Table View,显示数组中的数据。

Table View的角色

  • 让用户在层级化的数据中浏览
  • 展示一个可选择列表选项
  • 展示一个有序的项目列表
  • 在不同的分组中显示详细信息和控件

Table view中的每一行称作一个cell,用来显示文字、图片或者其他内容。每个cell还可以有子视图。iPhone定义了三种默认的子视图

Disclosure indicator

Disclosure indicator

展开指示器(Disclosure indicator) — UITableViewCellAccessoryDisclosureIndicator

用来以table view方式显示下一级数据

Detail disclosure button

Detail disclosure button

详细信息指示器(Detail disclosure button) –UITableViewCellAccessoryDetailDisclosureButton

用来显示一个详细信息视图(detail view)

Check mark

Check mark

选择标记(Check mark) — UITableViewCellAccessoryCheckmark.

用来标记选择了哪一项。 可以是单选或者多选。

Table View的样式

Table view有两种样式,一种是普通型,一种是分组类型。 分组类型中,每一个分组(section)都可以有自己的header和footer。

Table View cell的样式

从iPhone SDK 3.0开始,可以定义每个cell的样式。UIKit定义了四种cell的样式。你也可以定义自己的样式,但是这四种预定义的样式可以满足绝大多数的需求。

默认样式(UITableViewCellStyleDefault)

Default table row style

Default table row style

显示主标题,可以允许有一个图片。

子标题样式(UITableViewCellStyleSubtitle)

UITableViewCellStyleSubtitle

UITableViewCellStyleSubtitle

一个主标题,一个灰色的副标题位于主标题下面,并可安放一个图片

UITableViewCellStyleValue1样式

UITableViewCellStyleValue1

UITableViewCellStyleValue1

主标题位于左侧,副标题以蓝色小字位于右侧,并右对齐。不允许有图片

UITableViewCellStyleValue2样式

UITableViewCellStyleValue2

UITableViewCellStyleValue2

主标题以蓝色显示位于左侧,并且是右对齐。超过宽度的文字以…省略,副标题以黑色字左对齐方式在主标题右侧显示。不能放置图片。iPhone的联系人程序中的列表就是使用这种布局。

Table View

iPhone中的Table View都是UITableView的实例,用来定义表格的样式和行为,而UITableView是UIScrollView的子类。UIScrollView定义了超过屏幕大小的view的滚动行为,而UITableView则重新定义了滚动行为,使其只能垂直滚动。

Data Source 和 Delegate

一个UITableView对象必须具有一个data source 和一个delegate。 根据MVC设计模式,data source负责连通应用程序的数据(即Model)和table view。 delegate则负责table view的外观和行为。 data source 和delegate往往是一个对象,而这个对象通常又是UITableViewController的子类。

data source 遵循 UITableViewDataSource 协议,delegate遵循 UITableViewDelegate 协议

  • UITableViewDataSource 协议有一个可选方法,告诉table view有多少个section(默认是一个)
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView。
    还有一个必须方法,用来告诉table view每个section有多少行(row)
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section。
  • UITableViewDelegate 协议定义了一个必须方法,这个方法返回一个cell,使的table view在画某一行的时候显示。
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  • UILocalizedIndexedCollation 是一个辅助类,是iPhone OS 3.0新引进的类,用来帮助data source组织数据,以便于在有序列表(indexed lists)中显示,当用户点击某一个项目的时候,可以正确显示对应的section。 UILocalizedIndexedCollation还可以本地化section的标题。
Leave a Comment :, , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit my friends!

A few highly recommended friends...