您的位置:首页 > 产品设计 > UI/UE

UITableView总结

2016-01-08 15:28 239 查看

UITableView

UITableView : 列表控件,是UIScrollView的子类,所以说是可以滚动的
1 . TableView, TableView的显示也是分区域的
2 . TableViewCell,以及cell的重用
3 . cell的编辑(添加,删除), cell的移动
4 . 自定义cell,以及在cell上label属性的自适应高度

1.1 TableView
在rootView中创建tableView的属性,此时我们可以根据不同的需求,选用不同的style(例如我们在通讯录中上下滑动tableView的时候,想让上面始终显示当前section的标题时,我们可以选择style:UITableViewStylePlain);也可以设置tableView分割线的颜色以及样式.


1.2 在rootViewController中的viewDidLoad中指定代理,指定代理的前提记得接受代理 -- UITableViewDataSource


除这两个方法外,要想实现其他的方法,都要指定delegate的

// 1.2.1 指定有多少条数据(每个section钟cell的个数)

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

switch (section) {

case
0:

return4;

break;

case
1:

return1;

break;

case
2:

return1;

break;



default:

return1;

break;

}

}

// 指定有多少个分区

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

return
3;

}

// 1.2.2 制定返回每一个cell的样式和内容

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

// UITableViewCell

/*


在Table中,每一个单元格叫cell,

1系统默认提供了四种cell的样式

2 UITableViewCell默认已经声明好了三个控件
(一个ImageView,两个label(textLabel, detailTextLabel))

*/



// UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];

#pragma mark -- 2 -- Cell重用

UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:@"cell_id"];

if (cell ==
nil) {

cell = [[UITableViewCellalloc]
initWithStyle:UITableViewCellStyleSubtitlereuseIdentifier:@"cell_id"];

NSLog(@"创建一个Cell");

}

/*

cell.textLabel.text = @"程序员需要妹子";

cell.detailTextLabel.text = @"人生亦是旅途,没有一帆风顺";

cell.imageView.image = [UIImage imageNamed:@"4.png"];

// cell
的属性介绍

// cell
的选中提示效果

cell.selectionStyle = UITableViewCellSelectionStyleDefault;

*/

//
辅助视图



// cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

// UILabel *view = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];

// view.backgroundColor = [UIColor redColor];

// view.layer.masksToBounds = YES;

// view.layer.cornerRadius = 10;

// view.textColor = [UIColor whiteColor];

// view.textAlignment = NSTextAlignmentCenter;

// view.text = @"3";

// cell.accessoryView = view;

cell.textLabel.text =self.data[indexPath.section][indexPath.row];

return cell;

}

3.1 cell的编辑--添加,删除

首先记得接受代理

UITableViewDataSource, UITableViewDelegate

指定代理

self.rv.table.dataSource
= self;

self.rv.table.delegate =self;

并且创建一个UITableViewCellEditingStyle 的对象editstyle作为属性,用来记录即将进入的编辑状态

- (void)makeData {

// 自定义数据源

self.data =@[@"张飞",@"刘备",@"关羽",@"赵云",@"马超",@"吕布",@"黄忠",@"左慈",@"贾诩",@"小乔",@"孙尚香",@"诸葛孔明"].mutableCopy;
// 对NSMutableArray类型的数组采用字面量法创建数组的时候,后面需要加上".mutablCopy".

}

- (void)deleteAction {

self.editstyle =UITableViewCellEditingStyleDelete;

#pragma mark 删除第一步:让TableView处于编辑状态



[self.rv.tablesetEditing:!self.rv.table.editinganimated:YES];

}

- (void)addAction {



#pragma mark -- 添加第一步:让tableView处于编辑状态

if (self.rv.table.editing) {

[self.rv.tablesetEditing:!self.rv.table.editinganimated:YES];

self.editstyle =UITableViewCellEditingStyleDelete;

} else {

self.editstyle =UITableViewCellEditingStyleInsert;

[self.rv.tablesetEditing:!self.rv.table.editinganimated:YES];



}



}

#pragma mark 删除第二步:指定哪些行可以进行编辑

#pragma mark -- 添加第二步:指定那些可以进行编辑

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {

// if (indexPath.row%2) {

// return NO;

// } // 默认的是全部都可以

return
YES;

}

#pragma mark 删除第三步:指定编辑的样式

#pragma mark -- 添加第三部:指定编辑的样式

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {


// 指定编辑样式,默认的是删除样式 单单删除的时候可以省略

// return UITableViewCellEditingStyleDelete;

return self.editstyle;

}

#pragma mark 删除第四步:提交编辑请求

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath
*)indexPath {

if (self.editstyle
== UITableViewCellEditingStyleDelete) {

// 1
更新数据源

[self.dataremoveObjectAtIndex:indexPath.row];

// 2
刷新界面

[self.rv.tabledeleteRowsAtIndexPaths:@[indexPath]withRowAnimation:UITableViewRowAnimationBottom];

}

if (self.editstyle
== UITableViewCellEditingStyleInsert) {

// 1
更新数据源

[self.datainsertObject:@"甄姬"atIndex:indexPath.row
+1];

// 2
刷新界面

NSIndexPath *path = [NSIndexPathindexPathForRow:indexPath.row +1
inSection:indexPath.section];

[self.rv.tableinsertRowsAtIndexPaths:@[path]withRowAnimation:UITableViewRowAnimationRight

];

// [self.rv.table reloadData];

}



}

3.1 cell的移动

要求同上,接受代理,指定代理

- (void)leftAction {

#pragma mark
编辑第一步:让tableView处于编辑状态

[self.rv.tablesetEditing:!self.rv.table.editinganimated:YES];



}

#pragma mark
编辑第二步: 指定那些cell可以编辑

- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath {

returnYES;

}

#pragma mark
编辑第三步: 进行交换

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath
*)destinationIndexPath {

// 1
修改数据源

if (sourceIndexPath.section ==0 && destinationIndexPath.section ==0)
{

NSString *str =self.data1[sourceIndexPath.row];

[self.data1removeObjectAtIndex:sourceIndexPath.row];

[self.data1insertObject:str
atIndex:destinationIndexPath.row];

}

//
跨区域移动

if (sourceIndexPath.section ==1 && destinationIndexPath.section ==0)
{

NSString *str =self.data2[sourceIndexPath.row];

[self.data2removeObjectAtIndex:sourceIndexPath.row];

[self.data1insertObject:str
atIndex:destinationIndexPath.row];



}

if (sourceIndexPath.section ==0 && destinationIndexPath.section ==1)
{

NSString *str =self.data1[sourceIndexPath.row];

[self.data1removeObjectAtIndex:sourceIndexPath.row];

[self.data2insertObject:str
atIndex:destinationIndexPath.row];



}

// 2
修改界面

// [self.rv.table moveRowAtIndexPath:sourceIndexPath toIndexPath:destinationIndexPath]; // 跨区域移动的时候,如果用这个的话会导致程序崩溃

}

4. 自定义cell,自适应 label,cell 的高度

4.1 自定义cell

4.1.1 基于UITableViewCell创建SuitTableViewCell

可以在自定义cell上添加imageView,label等属性,并自定义设置他们的frame,背景,字体大小等他们的属性

最后将这些imageView等添加到.contentView上

4.1.2在rootViewController中引入SuitTableViewCell,用它创建的cell的对象,就具有这些特征了

4.2 自适应 label,cell 的高度

此时用到 MVC模型(model)-视图(view)-控制器(controller)

SuitTableViewCell.h中

@property (nonatomic,strong)
UILabel *labelText;

//
自适应1 :包含model 在SuitTableViewCell 中生命model属性

@property (nonatomic,strong)
Model *model;

// 自适应3 : 提供方法,返回对应cell的高度

+ (CGFloat)heightforcell:(NSString *)text;

SuitTableViewCell.m中

// 自适应第二步:重写set方法

- (void)setModel:(Model *)model {

_model = model;

self.labelText.text = model.text;



#pragma mark 计算model里面的字符串需要用多高的lebel去显示 (前提条件是label.font够小,
label.numberOfLines = 0;)


// 计算1获取要计算的字符串

NSString *temp = model.text;

//
计算2 准备工作


// 宽度和label的宽度一样,高度给一个巨大的值

CGSize size =CGSizeMake(CGRectGetWidth([UIScreenmainScreen].bounds)
-20,
20000);


// 这里要和上面label指定的字体一样

NSDictionary *dic =@{NSFontAttributeName:[UIFontsystemFontOfSize:15]};

//
计算3 调用方法 获得rect

CGRect rect = [tempboundingRectWithSize:size
options:NSStringDrawingUsesFontLeading|NSStringDrawingUsesLineFragmentOriginattributes:dic
context:nil];

//
计算4 获取当前的label的frame,并将新的frame重新设置上去

CGRect frame =
self.labelText.frame;

frame.size.height = rect.size.height;

self.labelText.frame = frame;



}

+ (CGFloat)heightforcell:(NSString *)text {

//
计算1:准备工作

CGSize size =CGSizeMake(CGRectGetWidth([UIScreenmainScreen].bounds)
-20,
20000);

NSDictionary *dic =@{NSFontAttributeName:[UIFontsystemFontOfSize:15]};

//
计算2:通过字符串获得rect

CGRect rect = [textboundingRectWithSize:size
options:NSStringDrawingUsesFontLeading|NSStringDrawingUsesLineFragmentOriginattributes:dic
context:nil];

return rect.size.height +21;

}

RootViewController.m中

// 自适应4:调用3中的方法,挨个计算每一行cell的高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

Model *m =
self.data[indexPath.row];

return [SuitTableViewCellheightforcell:m.text];

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: