Tag: table view
给TableView加背景
by Elton 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的一个子类

给TableView添加背景
by Elton 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 |
还是很简单的吧。
iPhone Table View 教程(2) 创建一个简单表格
by Elton on 七.05, 2009, under iPhone
上一节我们介绍了iPhone的table view,这节我们先做一个简单的表格例子。
在Xcode中新建一个view based项目,命名为SimpleTable。
在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
按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。
打开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 |
运行可以得到:
iPhone Table View 教程(1) 基础知识
by Elton on 七.05, 2009, under iPhone
Table View是iPhone最重要的用户UI之一,用来显示具有层级关系的数据结构。本教程将建立一个最基本的Table View,显示数组中的数据。
Table View的角色
- 让用户在层级化的数据中浏览
- 展示一个可选择列表选项
- 展示一个有序的项目列表
- 在不同的分组中显示详细信息和控件
Table view中的每一行称作一个cell,用来显示文字、图片或者其他内容。每个cell还可以有子视图。iPhone定义了三种默认的子视图
展开指示器(Disclosure indicator) — UITableViewCellAccessoryDisclosureIndicator
用来以table view方式显示下一级数据
详细信息指示器(Detail disclosure button) –UITableViewCellAccessoryDetailDisclosureButton
用来显示一个详细信息视图(detail view)
选择标记(Check mark) — UITableViewCellAccessoryCheckmark.
用来标记选择了哪一项。 可以是单选或者多选。
Table View的样式
Table view有两种样式,一种是普通型,一种是分组类型。 分组类型中,每一个分组(section)都可以有自己的header和footer。
Table View cell的样式
从iPhone SDK 3.0开始,可以定义每个cell的样式。UIKit定义了四种cell的样式。你也可以定义自己的样式,但是这四种预定义的样式可以满足绝大多数的需求。
默认样式(UITableViewCellStyleDefault)
显示主标题,可以允许有一个图片。
子标题样式(UITableViewCellStyleSubtitle)
一个主标题,一个灰色的副标题位于主标题下面,并可安放一个图片
UITableViewCellStyleValue1样式
主标题位于左侧,副标题以蓝色小字位于右侧,并右对齐。不允许有图片
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的标题。














