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

UI基础-UITableView 编辑

2015-11-24 22:32 459 查看

tableView编辑

包括:cell的添加,cell的删除

编辑的步骤:

1.让tableView处于编辑状态

- (void)setEditing:(BOOL)editing animated:(BOOL)animated;


2.指定tableView哪些行可以编辑

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


3.指定tableView编辑的样式(添加、删除)

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


4.完成编辑,提交(先操作数据源,再修改UI)

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


tableView移动

移动的步骤:

1、让tableView处于编辑状态

- (void)setEditing:(BOOL)editing animated:(BOOL)animated;


2.指定tableView哪些⾏行可以移动

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


3.移动完成

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


移动过程

监测移动过程,实现限制跨区移动

- (NSIndexPath *)tableView:(UITableView *)tableView
targetIndexPathForMoveFromRowAtIndexPath:(NSIndexPath
*)sourceIndexPath toProposedIndexPath:(NSIndexPath
*)proposedDestinationIndexPath


UITableViewController

UITableViewController继承自UIViewController,自带一个tableView

self.view不是UIView而是UITableView

datasource和delegate默认都是self(UITableViewController)

开发中只需要建立UITableViewController子类

总结

编辑和移动的共同点都是首先要进入编辑状态,结束后要先修改数组或字典中的数据,再更改UI。

例题:

1.完成界面如下:



新建工程,创建一个视图控制器作为导航控制器的根视图控制器

RootViewController *rootVC = [[RootViewController alloc] init];
UINavigationController *navC = [[UINavigationController alloc] initWithRootViewController:rootVC];
self.window.rootViewController = navC;
[navC release];
[rootVC release];


2.在根视图控制器中加载数据

-(void)setUpData
{
NSArray *arr = @[@"0", @"1", @"2", @"3", @"添加"];
self.firstArr = [NSMutableArray arrayWithArray:arr];
self.secondArr = [NSMutableArray arrayWithArray:arr];;
}


3.在根视图控制器添加TableView子视图

- (void)addTableView
{
self.tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:(UITableViewStylePlain)];

self.tableView.dataSource = self;
self.tableView.delegate = self;

[self.view addSubview:self.tableView];
[self.tableView release];
}


4.实现两个必须实现的代理方法(记得添加代理)

// 单元格cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *identifier = @"MyCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:(UITableViewCellStyleSubtitle) reuseIdentifier:identifier] autorelease];
}
// 展示分区
if (indexPath.section == 0) {
cell.textLabel.text = self.firstArr[indexPath.row];
} else {
cell.textLabel.text = self.secondArr[indexPath.row];
}
return cell;
}

// 每个分区有多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
// 注意:数字要给动态的 否则
if (section == 0) {
return self.firstArr.count;
} else {
return self.secondArr.count;
}
}


5.在根视图控制器中添加编辑按钮

- (void)addBarButtonItem
{
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithTitle:@"编辑" style:(UIBarButtonItemStylePlain) target:self action:@selector(rightClick:)];
self.navigationItem.rightBarButtonItem = rightButton;
[rightButton release];

}


6.在根视图控制器中实现点击按钮方法(开启编辑状态)

- (void)rightClick:(UIBarButtonItem *)rightButton
{
// 1.开启编辑状态
[self.tableView setEditing:!self.tableView.editing animated:YES];
// 编辑时更改标题
if (self.tableView.editing == YES) {
rightButton.title = @"完成";
} else {
rightButton.title = @"编辑";
}
}


7.允许编辑界面

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
// 可以利用indexPath 控制哪个分区的哪行 不能编辑
return YES;
}


8.指定编辑样式

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 返回编辑样式
if (indexPath.section == 0) {
// 分区1
if ([self.firstArr[indexPath.row] isEqualToString:@"添加"]) {
return UITableViewCellEditingStyleInsert;
}
} else {
// 分区2
if ([self.secondArr[indexPath.row] isEqualToString:@"添加"]) {
return UITableViewCellEditingStyleInsert;
}
}
return UITableViewCellEditingStyleDelete;
}


9.提交编辑

// 根据编辑的样式 和 索引 去完成编辑
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.section == 0) {
// 分区1
if (editingStyle == UITableViewCellEditingStyleDelete) {
// 删除
// 先删除数据
[self.firstArr removeObjectAtIndex:indexPath.row];
// 刷新页面
// 整体刷新(UITableView)重新走一遍数据源方法 达到刷新页面的效果
// [tableView reloadData];

// 删除刷新的方法
// 该方法可以进行多行删除 数组中填所有删除的索引
[tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:(UITableViewRowAnimationLeft)];

} else {
// 添加
// 先操作数组
[self.firstArr insertObject:@"123" atIndex:indexPath.row];

// 刷新页面
[tableView insertRowsAtIndexPaths:@[indexPath] withRowAnimation:(UITableViewRowAnimationRight)];
}
} else {
// 分区2
if (editingStyle == UITableViewCellEditingStyleDelete) {
[self.secondArr removeObjectAtIndex:indexPath.row];
[tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:(UITableViewRowAnimationLeft)];
} else {
[self.secondArr insertObject:@"123" atIndex:indexPath.row];
[tableView insertRowsAtIndexPaths:@[indexPath] withRowAnimation:(UITableViewRowAnimationLeft)];
}
}
}


这样编辑就完成了





10.允许哪个分区的哪一行 可以移动

- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}


11.实现cell的移动

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
{
// sourceIndexPath   来源的索引
// destinationIndexPath   目的地的索引
// 移动的分类 同分区移动 和 跨分区移动

// 判断分区的移动

if (sourceIndexPath.section == destinationIndexPath.section) {
// 同区
if (sourceIndexPath.section == 0) {
// 操作firstArr
// 把来源索引下 数组对应的元素 保存一下
NSString *str = self.firstArr[sourceIndexPath.row];
// 用来源的索引 删除数组中对应的元素
[self.firstArr removeObjectAtIndex:sourceIndexPath.row];
// 插入到移动的目的地索引处
[self.firstArr insertObject:str atIndex:destinationIndexPath.row];

// 移动刷新方法
[tableView moveRowAtIndexPath:sourceIndexPath toIndexPath:destinationIndexPath];

} else {
// 操作secondArr
if (sourceIndexPath.section == 1) {
// 操作secondArr
// 把来源索引下 数组对应的元素 保存一下
NSString *str = self.secondArr[sourceIndexPath.row];
// 用来源的索引 删除数组中对应的元素
[self.secondArr removeObjectAtIndex:sourceIndexPath.row];
// 插入到移动的目的地索引处
[self.secondArr insertObject:str atIndex:destinationIndexPath.row];

// 移动刷新的方法
// 从哪里来 to哪里去
[tableView moveRowAtIndexPath:sourceIndexPath toIndexPath:destinationIndexPath];
}

}

} else {
// 跨区移动(不符合规范)
}
}


12.限制跨区移动

- (NSIndexPath *)tableView:(UITableView *)tableView targetIndexPathForMoveFromRowAtIndexPath:(NSIndexPath *)sourceIndexPath toProposedIndexPath:(NSIndexPath *)proposedDestinationIndexPath
{
NSLog(@"excuted....");
// sourceIndexPath  来源索引
// proposedDestinationIndexPath  建议的目的地索引
if (sourceIndexPath.section == proposedDestinationIndexPath.section) {
return proposedDestinationIndexPath;
} else {
// 跨区移动 需要限制(从哪里来 还回哪里去)
return sourceIndexPath;
}
}


这样移动就完成了



tableView添加

例题:

1.创建如下界面:



新建工程,创建一个tableViewCotroller作为导航控制器的根视图控制器

RootTableViewController *rootVC = [[RootTableViewController alloc] init];
UINavigationController *navC = [[UINavigationController alloc] initWithRootViewController:rootVC];
self.window.rootViewController = navC;
[navC release];
[rootVC release];


2.在根视图控制器中加载数据

- (void)setUpData
{
NSArray *arrA = @[@{@"foodName":@"鱼香肉丝",@"money":@"15 元"},
@{@"foodName":@"宫保鸡丁",@"money":@"18 元"},
@{@"foodName":@"小炒肉片",@"money":@"13 元"},
@{@"foodName":@"水煮肉",@"money":@"12 元"},
@{@"foodName":@"鸡蛋西红柿",@"money":@"23 元"},
@{@"foodName":@"青椒肉丝",@"money":@"34 元"}];

// 初始化数组
self.dataArr = [NSMutableArray array];

// 字典转模型
for (NSDictionary *dic in arrA) {
// 给model赋值
FoodModel *model = [[FoodModel alloc] init];
// KVC间接赋值
[model setValuesForKeysWithDictionary:dic];
// 添加model
[self.dataArr addObject:model];
[model release];
}
}


3.创建FoodModel继承于NSObject,并声明两个属性与数据名称一致

// 菜名
@property (nonatomic, retain) NSString *foodName;
// 钱
@property (nonatomic, retain) NSString *money;


4.在根视图控制器中添加视图(创建按钮)

- (void)addTableView
{
UIBarButtonItem *editButton = [[UIBarButtonItem alloc] initWithTitle:@"编辑" style:(UIBarButtonItemStylePlain) target:self action:@selector(editButton:)];
self.navigationItem.rightBarButtonItem = editButton;
[editButton release];

UIBarButtonItem *addButton = [[UIBarButtonItem alloc] initWithTitle:@"添加" style:(UIBarButtonItemStylePlain) target:self action:@selector(addButton:)];
self.navigationItem.leftBarButtonItem = addButton;
[addButton release];
}


5.实现tableView协议里的方法

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
return self.dataArr.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *identifier = @"MyCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:(UITableViewCellStyleSubtitle) reuseIdentifier:identifier] autorelease];
}
// 展示数据
FoodModel *model = self.dataArr[indexPath.row];
cell.textLabel.text = model.foodName;
cell.detailTextLabel.text = model.money;

return cell;
}


6.实现编辑和移动

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
return YES;
}

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
return UITableViewCellEditingStyleDelete;
}

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
if (editingStyle == UITableViewCellEditingStyleDelete) {
[tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
} else if (editingStyle == UITableViewCellEditingStyleInsert) {

}
}

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

NSString *str = self.dataArr[fromIndexPath.row];
[self.dataArr removeObjectAtIndex:fromIndexPath.row];
[self.dataArr insertObject:str atIndex:toIndexPath.row];
[self.tableView moveRowAtIndexPath:fromIndexPath toIndexPath:toIndexPath];

}

- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath {
return YES;
}


7.实现按钮点击事件

- (void)addButton:(UIBarButtonItem *)addButton
{
SecondViewController *secondVC = [[SecondViewController alloc] init];
secondVC.delegate = self;
[self.navigationController pushViewController:secondVC animated:YES];
[secondVC release];

}

- (void)editButton:(UIBarButtonItem *)editButton
{
[self setEditing:!self.editing animated:YES];
if (self.editing == YES) {
editButton.title = @"完成";
} else {
editButton.title = @"编辑";
}
}


8.新建一个视图控制器,创建一个UITextField控件

UITextField *tf = [[UITextField alloc] initWithFrame:CGRectMake(100, 100, 150, 50)];
tf.delegate = self;
tf.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:tf];
[tf release];


9.添加协议并将协议设置为属性

@protocol SecondViewDelegate

(void)addFoodModel:(FoodModel *)model;

@end

@property (nonatomic, assign) id delegate;

10.实现键盘的return的点击事件(添加代理)

- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
FoodModel *model = [[FoodModel alloc] init];
model.foodName = textField.text;
model.money = @"111";

// 进行传值 让代理去干活
[self.delegate addFoodModel:model];
[self.navigationController popToRootViewControllerAnimated:YES];
[model release];
return YES;
}


11.回到tableViewController,实现协议里的方法(遵循协议)

- (void)addFoodModel:(FoodModel *)model
{
// 添加进 数据源数组
[self.dataArr addObject:model];
// 刷新界面
[self.tableView reloadData];
}


这样添加就可以了

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