表视图在IOS中的应用非常广泛,常用于展示显示数据列表。
在工具组中包含了Table View 和Table View Cell
每个表示图都是UITableView的一个实例,每个可见行都是UITableViewCelll的一个实例。也就是把TableViewCell放入TableView里面。
表格有两种style
分组和列表
分组:Grouped
列表:Plain
下面做一个默认style的表视图实例:
1.先拉出一个TableView到xib中。
2.连接添加的TableView和ViewController
因为IOS开发是使用MVC模式,所以这里要把视图和控制层关联起来,而他们之间的桥梁就是File's Owner.这样一来控制器类就成了TableView的数据源和委托
3.向ViewController.h中添加
@property (nonatomic,retain) NSArray *list;
并使用
<UITableViewDelegate,UITableViewDataSource>协议
向ViewController.m添加实现
@synthesize list=_list;
4.建立数据
在ViewController.m中添加
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSArray *array = [[NSArray alloc] initWithObjects:@"美国", @"菲律宾",
@"黄岩岛", @"中国", @"泰国", @"越南", @"老挝",
@"日本" , nil];
self.list = array;
}
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
self.list = nil;
}
并实现协议的三个方法,这三个方法必须实现不然后果很严重!!!
//绑定数据源
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *TableSampleIdentifier = @"TableSampleIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:
TableSampleIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:TableSampleIdentifier];
}
NSUInteger row = [indexPath row];
cell.textLabel.text = [self.list objectAtIndex:row];
return cell;
}
//是否分组
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
//行数
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.list.count;
}
运行结果:
这样一个简单的tableView例子就完成了 NICE!
5.为每一行加图片,首先添加图片文件到到项目中
修改方法:- (UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath;
UIImage *img= [UIImage imageNamed:@"a.png"];
cell.imageView.image=img;
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *TableSampleIdentifier = @"TableSampleIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:
TableSampleIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:TableSampleIdentifier];
}
UIImage *img= [UIImage imageNamed:@"a.png"];
cell.imageView.image=img;
NSUInteger row = [indexPath row];
cell.textLabel.text = [self.list objectAtIndex:row];
return cell;
}
效果如下:
6.设置表格的样式,说明文字
initWithStyle:UITableViewCellStyleSubtitle
cell.detailTextLabel.text =@"nice";
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *TableSampleIdentifier = @"TableSampleIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:
TableSampleIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleSubtitle
reuseIdentifier:TableSampleIdentifier];
}
UIImage *img= [UIImage imageNamed:@"a.png"];
cell.imageView.image=img;
NSUInteger row = [indexPath row];
cell.textLabel.text = [self.list objectAtIndex:row];
cell.detailTextLabel.text =@"nice";
return cell;
}
效果如下:
7.设置缩进级别
//缩进级别
-(NSInteger) tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSUInteger row = [indexPath row];
return row;
}
效果如下:
那么一行会按照它的索引去增加缩进,nice~
8.处理行的选择
可以使用-(void)tableView:(UITableView
*)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath这个方法来做处理
//行的选择
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
NSString *rowString = [self.list objectAtIndex:[indexPath row]];
UIAlertView * alter = [[UIAlertView alloc] initWithTitle:@"选中的行信息" message:rowString delegate:self cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
[alter show];
}
效果如下:
9.设置字体的大小和行高
cell.textLabel.font = [UIFont boldSystemFontOfSize:50];
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *TableSampleIdentifier = @"TableSampleIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:
TableSampleIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleSubtitle
reuseIdentifier:TableSampleIdentifier];
}
UIImage *img= [UIImage imageNamed:@"a.png"];
cell.imageView.image=img;
NSUInteger row = [indexPath row];
cell.textLabel.text = [self.list objectAtIndex:row];
cell.textLabel.font = [UIFont boldSystemFontOfSize:50];
cell.detailTextLabel.text =@"nice";
return cell;
}
效果如下:
但这样我们又发现行高不对,所以我们需要在控制层类里面再添加一个委托方法来解决这个问题,
//委托解决行高问题
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 70;
}
效果如下:
那么今天的TableView表视图基础知识就学习到这里。
以下是IOS开发-我的第一个IOS程序及IOS开发-TableView表视图基础
源码:
源码下载
分享到:
相关推荐
IOS开发-TableView表视图基础 源码下载 http://blog.csdn.net/lmnotlm/article/details/9035481
IOS开发-TableView表视图LV2 源码 http://write.blog.csdn.net/postedit/9061845
IOS开发-我的第一个IOS程序 及 IOS开发-TableView表视图基础 源码
常见的tableView的顶部视图,下拉放大,上推渐变隐藏,导航栏显示,状态栏颜色的改变
tableView 头部折叠,点击按钮 展示内容,合并内容。
在tableview的cell中显示一个倒计时demo给大家参考下暂时没实现获取毫秒的方法,如果大家有方法欢迎提出修改。。。感激不尽。
只用简单几句代码就可以构建出tableview下拉图片放大的效果
tableView下来header变大。。 OC和Swift
但是这样的交互官方并不推荐,而且对开发来说确是不那么友好,需要处理滚动手势的冲突,页面的多层级嵌套都给开发带来了一定程度的麻烦。接下里我聊聊我们的实现思路。 思路和过程 对应这种页面结构应该毫无疑问是...
零代码,完全在Storyboard中实现tableview头部图片拉伸 及导航栏透明渐变功能
Swift对轮播图的封装 和 TableView的练习传值
在弹出对话框(Alert dialogue)中加入列表(UITableView)。 注意:请在Mac下解压使用
看到有的demo中,只是把imageview加到了tableview上,覆盖了cell,并没有赋给headerview ,自己试了下 ,赋给headerview还是不行,就加在了view上,采用异步加载,服务器能获得图片的尺寸比例当然更好。初学者。
/Users/qianfeng/Desktop/Simulator Screen Shot 2015年11月27日 下午12.53.41.png
主要内容包括: 下拉放大、下拉回弹、上拉放大、上拉回弹、常见的两个tablView结构 简书地址:http://www.jianshu.com/p/7ad7d1ec7bc1 github代码地址:...
简单地实现了一下类似于聊天软件的分组效果,界面没有美化,承认比较丑,但是重要的是功能的实现
https://github.com/robinccer/RBPageMenu 喜欢点个 star 哈 ~~
iOS-tableview-rx-swift 创建该项目的目的是记住有关RxSwift和tableView的一些概念,以获取并填充项目 特征 RxSwift表格视图 预览项目
模仿 tableViewheader 悬浮在顶部 下面是一个scrollView包含多个tableView,本人比较菜,大家多多见谅,github地址https://github.com/wkffantasy/OC-ScrollViewManyTables.git,
自定义tableview,实现下拉放大表图图片,上滑显示导航栏,CPKenburnsView实现表图动画效果,点击照片放大,只是业余做的demo,做的不好请大家多多指教