D12:UITableView(多行删除_UISearchBar

2015-05-19 本文已影响827人 Vinc

Inheritance

NSObject
UIResponder
UIView
UIScrollView
UITableView

一、UITableView多行删除

NSArray(NSMutableArray)的2个实用方法
选中某一行后加入删除数据数组
点击NavigationBar右侧的Item执行的方法

二、UITableView结合搜索功能

搜索的控件
为搜索框添加数据源, 在UISearchResultsUpdating协议实现
判断是否在搜索,根据属性"isSearch"改写一些方法
发现问题, 去之前的地方修改
给表格添加右侧的索引(SectionIndex)

三、自定义UITableView每个Section的header，模拟QQ好友界面分组的点击展开收拢

当前选中的section, 初始值默认为0
在创建tableView的时候设置背景视图
显示表格的每个section的header
返回每一组有多少行
�点击headView之后去判断点击的Section和之前已选中的Section的关系

一、UITableView多行删除

NSArray(NSMutableArray)的2个实用方法 :

- (void)removeObjectsInArray:(NSArray *)array

- (BOOL)containsObject:(id)anObject

将要删除的数据

@property (nonatomic, strong) NSMutableArray *deleteArray;

为视图添加删除按钮

    // 点击进入表格多行选择的状态
    UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithTitle:@"删除" style:UIBarButtonItemStyleDone target:self action:@selector(beginDelete:)];
    self.navigationItem.rightBarButtonItem = rightItem;
    
    // 删除数据数组的初始化
    _deleteArray = [NSMutableArray array];

默认是删除状态, 我们要修改为可以多选的编辑状态

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

{
return UITableViewCellEditingStyleDelete|UITableViewCellEditingStyleInsert;
}
```

选中某一行后加入删除数据数组

判断是否是在编辑模式下的点击: 没有判断的话, 在非多选状态下选中一条cell, 进入再退出编辑状态就会产生bug删除之前选中过的cell
判断是否已经加入过删除数据数组
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
  {
  if (tableView.editing == YES) { // 如果没有这句判断的话, 在非多选状态下选中一条cell, 进入再退出编辑状态就会产生bug删除之前选中过的cell
  // 获取选择的对象
  StudentModel *model = self.dataArray[indexPath.row];
  if (![self.deleteArray containsObject:model]) {
  // 添加到删除数据数组
  [self.deleteArray addObject:model];
  }
  }
  }
// 取消选择, 表示不需要删除该数据
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
  {
  // 获取取消选择的对象
  StudentModel *model = self.dataArray[indexPath.row];
  
  if ([self.deleteArray containsObject:model]) {
  [self.deleteArray removeObject:model];
  }
  }

点击NavigationBar右侧的Item执行的方法

- (void)beginDelete:(id)sender
{
    // 获取导航按钮上的文字
    NSString *title = self.navigationItem.rightBarButtonItem.title;
    **if ([title isEqualToString:@"删除"])** {
        // 进入表格的多选状态
        [self.tbView setEditing:YES animated:YES];
        // 将导航按钮文字改为"确定"
        self.navigationItem.rightBarButtonItem.title = @"确定";
    } **else { // 文字为"确定"**
        // 执行删除操作
        // 从数据源数组中删除需要删除的数据
        [self.dataArray removeObjectsInArray:self.deleteArray];
        
        // 取消表格的编辑状态
        [self.tbView setEditing:NO];

        // 刷新表格
        [self.tbView reloadData];
        
        // 将导航文字恢复成"删除"
        self.navigationItem.rightBarButtonItem.title = @"删除";
    }
}

二、UITableView结合搜索功能

// 创建搜索视图
// iOS7: UISearchDisplayController 已不建议使用
// iOS8: UISearchController

搜索的控件

@property (nonatomic, strong) UISearchController *searchCtrl;


    * #### 创建搜索控件
    
    ```  
     - (void)createSearch
    {
        // 1. 存nil表示当前搜索结果就保存在当前视图控制器中, 而非是其他视图控制器
        _searchCtrl = [[UISearchController alloc] initWithSearchResultsController:nil];
        // 2. 设置代理
        _searchCtrl.delegate = self;
        // 3. 设置搜索数据更新的代理:怎样显示搜索结果
        _searchCtrl.searchResultsUpdater = self;
        
        // 4. 显示搜索条
        [_searchCtrl.searchBar sizeToFit];
        
        // 5. 添加到父视图
        /*
         tableHeaderView: 表格的表头, 显示在整个表格的上面
         tableFooterView: 表格的表尾, 显示在整个表格的下面
         */
        _tbView.tableHeaderView = _searchCtrl.searchBar;
        
        // 这样实现, 搜索结果也是显示到_tbView中
        // _tbView显示的数据, 就要区分是在搜索时, 还是非搜索的时候
}

为搜索框添加数据源, 在UISearchResultsUpdating协议实现

// 存储符合搜索条件的数据
@property (nonatomic, strong) NSMutableArray *searchResultArray;

* #### 在搜索框里面的文字修改时调用
* #### 在这个方法里面实现搜索的功能
  
```
- (void)updateSearchResultsForSearchController:(UISearchController *)searchController
{
    // 如果搜索结果数组没有初始化, 初始化数组对象
    if (self.searchResultArray == nil) {
        _searchResultArray = [NSMutableArray array];
    }
    
    // 实现搜索的功能
    // 获取搜索的关键字
    NSString *keyword = self.searchCtrl.searchBar.text;
    
    // 从_dataArray数组里面找符合条件的数据
    for (NSArray *sectionArray in self.dataArray) {
        // 遍历每一个section里面的内容
        for (NSString *title in sectionArray) {
            // NSCaseInsensitiveSearch表示大小写不敏感: a与A,a都可以匹配
            NSRange range = [title rangeOfString:keyword options:NSCaseInsensitiveSearch];
            if (range.location != NSNotFound) {
                // 符合条件, 添加到搜索结果数组中
                [self.searchResultArray addObject:title];
            }
        }
    }
    // 显示数据
    [self.tbView reloadData];
}
```

判断是否在搜索

@property (nonatomic, assign) BOOL isSearch;
* 首先根据当前搜索状态给"isSearch"赋值

        // 进入搜索状态
   - (void)willPresentSearchController:(UISearchController *)searchController
   {
       self.isSearch = 1;
       [self.tbView reloadData];
   }
   
   // 退出搜索状态
   - (void)willDismissSearchController:(UISearchController *)searchController
   {
       // 结束搜索状态
       self.isSearch = 0;
       [self.tbView reloadData];
   }

* #### 根据属性"*isSearch*"改写一些方法

   // 返回多少组
   - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView  
   {
       **if (self.isSearch) {
           // 搜索时显示一组
           return 1;
       }**
       return self.dataArray.count;
   }
    ```    

   ```  
   // 返回每组多少行
   - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
   {
       **if (self.isSearch) {
           // 搜索时返回的行数
           return self.searchResultArray.count;
       }**
       return [self.dataArray[section] count];
   }
   ```
   ```
   // 返回cell
   - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
   {
       **if (self.isSearch) {
           // 搜索时
           static NSString *SearchCellID = @"Search";
           UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SearchCellID];
           if (nil == cell) {
               cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SearchCellID];
           }
           // 显示数据
           cell.textLabel.text = self.searchResultArray[indexPath.row];
           return cell;
       }**
           原代码
   }
   ```  
   ```  
   // 每个Section的标题
   - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
   {
       if (self.isSearch) {
           return @"搜索结果";
       }
       return [NSString stringWithFormat:@"第%c组", (int)section+'A'];
   }  
   ```    
---
#### 发现问题, 去之前的地方修改
1. #### 修改UISearchController的属性
   
   1. 使搜索结果滑动: 隐藏前面的遮罩视图  
`    _searchCtrl.dimsBackgroundDuringPresentation = NO;`  
   2. 在搜索的时候显示导航栏  
   `_searchCtrl.hidesNavigationBarDuringPresentation = NO;`
 
2. #### 修改搜索词时重新刷新tableView

// 在搜索框里面的文字修改时调用
// 在这个方法里面实现搜索的功能

(void)updateSearchResultsForSearchController:(UISearchController *)searchController
{
// 如果搜索结果数组没有初始化, 初始化数组对象
if (self.searchResultArray == nil) {
_searchResultArray = [NSMutableArray array];
}
else {
[self.searchResultArray removeAllObjects];
}

  
 ---
* #### 给表格添加右侧的索引(*SectionIndex*)    
    1. **表格右侧索引的文字**
    
        ```
        //返回索引上面显示的文字内容
        //实现这个方法，系统或默认在右侧添加索引视图
        //点击相应地文字会跳转到对应的section
        //这种对应关系是按照顺序对应的
        //索引视图默认比较小，如果需要的话，可以自己去实现这个功能 
        
        /*
         自己实现功能的思路:
         添加一个视图，放在表格视图的右边
         在上面添加很多按钮
         点击按钮的事件中，设置表格视图的偏移量
         //计算位置
         //header的高度和cell的高度
         //_tbView scrollToRowAtIndexPath:<#(NSIndexPath *)#> atScrollPosition:<#(UITableViewScrollPosition)#> animated:<#(BOOL)#>
         */
         
        - (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
        {
            NSMutableArray *array = [NSMutableArray array];
            //26个组对应的索引上面的标题分别是每个字母的大写
            for (int i='A'; i<='Z'; i++) {
                [array addObject:[NSString stringWithFormat:@"%c",i]];
            }
            return array;
        }
        
        ```
    2.  **实现另外一个代理方法，可以修改点击右边index项对应跳转的tableView的section顺序**
    
        ```
        - (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
        {
            //参数中的index是索引数组里面的序号
            //返回的值是表格视图的section的序号
            return index;
        }  
        ```

  
* #### 为搜索框在右侧的*"sectionIndexTitles"*增加一个索引

(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
NSMutableArray *indexArray = [NSMutableArray array];

// 对应搜索框的索引
[indexArray addObject:UITableViewIndexSearch];

for (int i = 0; i < 26; i++) {
[indexArray addObject:[NSString stringWithFormat:@"%c", 'A'+i]];
}
return indexArray;
}
(NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
{
// 参数中的index是索引数组里面的序号
// 返回的值是表格视图的section序号

// 表格的section 索引的序号
//搜索:-1 0
//A: 0 1
//B: 1 2
if (index == 0) {
// 搜索的索引
self.tbView.contentOffset = CGPointZero;
return -1;
} else {
return index-1;
}
}

  

---
## 三、自定义UITableView每个Section的header，模拟QQ好友界面分组的点击展开收拢
* #### 当前选中的section, 初始值默认为0
`@property (nonatomic, assign) NSInteger selectSection;`

* #### 在创建tableView的时候设置背景视图

UIImageView *bgImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"gamebg"]];
bgImageView.frame = _tbView.bounds;
_tbView.backgroundView = bgImageView;


* #### 显示表格的每个section的header      

    ```
    - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
    {
        // section的header的背景视图
        UIImageView *headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];
        headerImageView.image = [UIImage imageNamed:@"header"];
        
        // 创建标签, 显示在第几组
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(80, 0, 120, 40)];
        label.text = [NSString stringWithFormat:@"第%ld组", section + 1];
        [headerImageView addSubview:label];
    
        // 添加一个图片, 显示展开的状态
        UIImageView *leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 0, 40, 40)];
        if (section == self.selectSection) {
            // 选中的图片
            leftImageView.image = [UIImage imageNamed:@"list_ico_d"];
        } else {
            // 未选中的图片
            leftImageView.image = [UIImage imageNamed:@"list_ico"];
        }
        [headerImageView addSubview:leftImageView];
        
        // 点击的功能
        // 添加一个手势
        // 打开用户交互
        UITapGestureRecognizer *g = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
        [headerImageView addGestureRecognizer:g];
        headerImageView.userInteractionEnabled = YES;
        headerImageView.tag = 200+section;
        
        return headerImageView;
    }  
    ```

* #### 返回每一组有多少行  
  
    ```  
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        if (section == _selectSection) {
            //选中的组里面的内容全部显示
            NSArray *sectionArray = _dataArray[section];
            return sectionArray.count;
        }else{
            //没有选中的组cell全部不显示，只显示header
            return 0;
        }
    }
    ```  
* #### 点击headView之后去判断点击的Section和之前已选中的Section的关系

    ```
    - (void)tapAction:(UIGestureRecognizer *)g
    {
        //获取点击的section
        UIImageView *headerView = (UIImageView *) g.view;
        NSInteger section = headerView.tag-200;
        NSLog(@"section:%ld",section);
        
        //赋值给选中section的成员变量
        if (section == _selectSection) {
            //点击的是已经展开的组
            //将展开的组关闭
            _selectSection = -1;
            [_tbView reloadData];
        }else{
            
            //点击的是关闭的组
            //将已经展开的组合并，将点击的组展开
            _selectSection = section;
            
            [_tbView reloadData];
        }
        
    }
    ```

D12:UITableView(多行删除_UISearchBar

Inheritance

一、UITableView多行删除

二、UITableView结合搜索功能

三、自定义UITableView每个Section的header，模拟QQ好友界面分组的点击展开收拢

一、UITableView多行删除

NSArray(NSMutableArray)的2个实用方法 :

将要删除的数据

为视图添加删除按钮

默认是删除状态, 我们要修改为可以多选的编辑状态

选中某一行后加入删除数据数组

点击NavigationBar右侧的Item执行的方法

二、UITableView结合搜索功能

搜索的控件

为搜索框添加数据源, 在UISearchResultsUpdating协议实现

判断是否在搜索

猜你喜欢

热点阅读