`

IOS之表视图添加搜索栏

阅读更多

        下面是我们要实现的效果。本效果是在上一篇自定义表视图的基础上进行更改的。http://ikrboy.iteye.com/blog/2004032


   

1.将Search bar and search display拖动到ViewController中。不要添加Search Bar.


 

2.修改ViewController的头文件

#import <UIKit/UIKit.h>

@interface IkrboyViewController4 : UIViewController
{
    NSArray *dataArr;//用于显示表视图的数据
    NSArray *allDataArr;//存储所有数据,通过关键词搜索将搜索结果赋值给dataArr
}
@property (weak, nonatomic) IBOutlet UISearchBar *searchBar;

@end

 

 3.修改自定义方法initTableViewData。将ScopeBar隐藏是考虑到iphone的显示高度问题。可自行决定。

-(void)initTableViewData{
    NSBundle *bundle = [NSBundle mainBundle];
    NSString *plistPath = [bundle pathForResource:@"user_head" ofType:@"plist"];
    allDataArr = [[NSArray alloc] initWithContentsOfFile:plistPath];
    dataArr = [NSArray arrayWithArray:allDataArr];
    NSLog(@"table data count = %d",[allDataArr count]);
    
    //设定搜索栏ScopeBar隐藏
    [self.searchBar setShowsScopeBar:NO];
    [self.searchBar sizeToFit];
}

4.添加SearchBar的三个事件触发

//以下三个方法实现SearchBar的搜索功能
//当文本内容发生改变时候,向表视图数据源发出重新加载消息
- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString
{
    [self filterContentForSearchText:searchString scope:self.searchBar.selectedScopeButtonIndex];
    //YES情况下表视图可以重新加载
    return YES;
}

// 当Scope Bar选择发送变化时候,向表视图数据源发出重新加载消息
- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchScope:(NSInteger)searchOption
{
    [self filterContentForSearchText:self.searchBar.text scope:searchOption];
    // YES情况下表视图可以重新加载
    return YES;
}

//点击cancel按钮的事件
- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar
{
    //查询所有
    [self filterContentForSearchText:@"" scope:-1];
}

 
 5.自定义关键词搜索功能

//自定义搜索方法,根据关键词从allDataArr中搜索到满足搜索条件的元素,并将匹配的数组赋值给dataArr,由于dataArr是表视图的数据源,因此表视图的记录也会随之改变。
- (void)filterContentForSearchText:(NSString*)searchText scope:(NSUInteger)scope;
{
    if([searchText length]==0)
    {
        //查询所有
        dataArr = [NSArray arrayWithArray:allDataArr];
        NSLog(@"dataArr count = %d",[dataArr count]);
        return;
    }
    
    NSPredicate *scopePredicate;
    
    switch (scope) {
        case 0:
            scopePredicate = [NSPredicate predicateWithFormat:@"(SELF.itemName contains[c] %@) OR (SELF.itemImagePath contains[c] %@)",searchText,searchText];
            NSLog(@"searchText=%@",searchText);
            dataArr =[NSArray arrayWithArray:[allDataArr filteredArrayUsingPredicate:scopePredicate]];
            break;
        case 1:
            scopePredicate = [NSPredicate predicateWithFormat:@"SELF.itemName contains[c] %@",searchText];
            dataArr = [NSArray arrayWithArray:[allDataArr filteredArrayUsingPredicate:scopePredicate]];
            break;
        case 2:
            scopePredicate = [NSPredicate predicateWithFormat:@"SELF.itemImagePath contains[c] %@",searchText];
            dataArr =[NSArray arrayWithArray:[allDataArr filteredArrayUsingPredicate:scopePredicate]];
            break;
    }
}

 6.修改cellForRowAtIndexPath方法

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"myTableCell";
    MyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    //add code begin:important,for showing searching results
    //不对cell进行空值的判断,会导致在搜索时,找不到对应identifier的cell而报错。
    if (cell == nil) {
    //搜索结果采用简单表视图cell的style,并非自定义的表视图cell的style    
    cell = [[MyTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
        NSUInteger row = [indexPath row];
        NSDictionary *rowDict = [dataArr objectAtIndex:row];
        cell.textLabel.text =  [rowDict objectForKey:@"itemName"];
        NSString *imagePath = [rowDict objectForKey:@"itemImagePath"];
        cell.imageView.image =  [UIImage imageNamed:imagePath];
    }
    //add code end

    NSUInteger row = [indexPath row];
    NSDictionary *rowDict = [dataArr objectAtIndex:row];
    cell.label.text =  [rowDict objectForKey:@"itemName"];
    NSLog(@"cell.label.text =  %@",[rowDict objectForKey:@"itemName"]);
    
    NSString *imagePath = [rowDict objectForKey:@"itemImagePath"];
    cell.image.image = [UIImage imageNamed:imagePath];
    NSLog(@"cell.image.image  =  %@",imagePath);
    
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    
    return cell;
}

 

  • 大小: 34 KB
  • 大小: 46.6 KB
  • 大小: 74.3 KB
分享到:
评论

相关推荐

    IOS 带搜索栏表视图

    此实例主要实现 Search Bar and Search Display Controller ,注意不是Search Bar控件。

    ios搜索功能的实现源码

    ios搜索功能的实例代码,可以直接编译运行的。在现有的表视图下,实现搜索功能。

    IOS编程入门-精品教程

    第一部分:Hello World!...第十三部分:在表视图中添加搜索栏 第十四部分:如何在导航界面隐藏Tab Bar 第十五部分:Objective-C基础知识-介绍面向对象的编程 第十六部分:如何在你的iPhone App中发送邮件

    一步一步学习IOS6

    第十三部分:在表视图中添加搜索栏 第十四部分:如何在导航界面隐藏Tab Bar 第十五部分:Objective-C基础知识-介绍面向对象的编程 第十六部分:如何在你的iPhone App中发送邮件 第十七部分:持续改善Recipe App的...

    一步一步学习_iOS_6_编程(第四版)

    第十三部分:在表视图中添加搜索栏 第十四部分:如何在导航界面隐藏Tab Bar 第十五部分:Objective-C基础知识-介绍面向对象的编程 第十六部分:如何在你的iPhone App中发送邮件 第十七部分:持续改善Recipe App的...

    史上最全的ios开发源码

    游戏引擎之雷电游戏的激光子弹 指示器类 指示器(HUD)之Android Style Toast 指示器-Activity Bar 指示器--Notify HUD 指示器之MBAlertView 指示器之YLActivityIndicatorView 其他类 财付通打印票据和拖动银行卡...

    一步步学IOS5编程完整版

    第十三部分:在表视图中添加搜索栏 第十四部分:如何在导航界面隐藏Tab Bar 第十五部分:Objective-C基础知识-介绍面向对象的编程 第十六部分:如何在你的iPhone App中发送邮件 第十七部分:持续改善Recipe App的...

    material-design-search-ui-ios:材料设计样式的搜索UI包含搜索栏和搜索结果视图

    物料设计搜索UI iOS 材料设计样式的搜索UI包含搜索栏和搜索结果视图。 您可能会看到以下文章,以详细了解如何开发这些UI小部件。主要特点带有委派方法的Material Design搜索栏,供视图控制器使用。 材料设计和枚举...

    《iOS6开发指南》精彩书摘

    接下来掌握了如何实现简单表视图和分节表视图,以及表视图中索引、搜索栏、分组的使用。然后学习了如何对表视图单元格进行删除、插入、移动等操作。最后介绍表视图UI设计模式方面的内容。 第6章“视图控制器与导航...

    android 仿IOS联系人列表

    这是一款仿ios联系人列表控件,支持字母行置顶(有阴影和没阴影置顶)。支持右边字母视图点击和滑动到置顶的字母行。搜索栏支持中英文搜索

    IOS11AppStoreClone:这是一个有趣的项目,用于模拟iOS11应用商店克隆,仅用于显示收藏夹视图英雄动画并通过代码创建布局

    该项目使用新功能,例如导航栏,搜索栏,安全区域布局以及带有IGLListKit和Normal Collection View的新应用商店设计 该项目将在Xcode 9和IOS11上运行 没有api调用,所有数据都使用静态文本提取请求进行了硬编码,...

    awesome-ios-ui:仅在Swift中提供了很棒的UI和动画的协作列表。 包括快速预览

    一种仅需一行代码即可向任何视图添加闪烁效果的简便方法。 用作不显眼的加载指示器 具有液体动画的微调加载器组件 加载视图 -控制网络活动指示灯对使用的是iOS能见度Alamofire 带有渐变的圆形进度视图 视图...

    iphone3开发基础教程

    8.7 实现搜索栏 168 8.7.1 重新考虑设计 168 8.7.2 深层可变副本 169 8.7.3 更新控制器头文件 170 8.7.4 修改视图 171 8.7.5 修改控制器实现 173 8.8 小结 183 第9章 导航控制器和表视图 184 9.1 导航控制器 184 ...

    带有搜索栏的 CollectionView视图

    作者sambudda,源码UICollectionViewWithSearchBar,UICollectionViewWithSearchBar 是带有搜索栏的 CollectionView。

    awesome-ios-ui:仅在Swift中出色的UI和动画的协作列表。 包括快速预览

    一种仅需一行代码即可向任何视图添加闪烁效果的简便方法。 用作不显眼的加载指示器 具有液体动画的微调加载器组件 加载视图 -控制网络活动指示灯对使用的是iOS能见度Alamofire 带有渐变的圆形进度视图 视图...

    ios_yelp-master

    搜索栏应位于导航栏中筛选页面 - 必需:您实际上应该拥有的过滤器是:类别、排序(最佳匹配、距离、最高评级)、半径(米)、交易(开/关)。 必需:过滤器表应该像模拟中一样组织成部分。 必需:单击“搜索”按钮应...

    RottenTomatoes:使用 Rotten Tomatoes apis 的示例 iOS 应用程序,用于演示 tableview、主细节导航、基本网络、json 解析

    烂番茄 使用 Rotten Tomatoes apis 的示例 iOS 应用程序,用于演示 tableview、主细节导航、... 添加了搜索栏 图像淡入 显示低分辨率海报,由淡入的高分辨率替换(如果不是从缓存中) 自定义导航栏 用创建的 GIF。

Global site tag (gtag.js) - Google Analytics