之前看到一个别人封装的第三方PYSearch,相当于一个完整的搜索界面,今天在这里进行代码说明一下。

将PYSearch拖进项目或者使用Pods进行加库,我是直接拖进项目中进行使用

PYSearch库主要是PYSearch.h头文件,其中还有一些宏定义的头文件,界面设计,类别设计等头文件

项目引入头文件PYSearch.h

然后开始进行界面设计:

//创建搜索界面
    //参数一:热门词语数组,参数二:搜索框的占位符,参数三:点击搜索以后执行block块
    PYSearchViewController *searchViewController = [PYSearchViewController searchViewControllerWithHotSearches:_hotArray searchBarPlaceholder:@"搜索热门娱乐消息" didSearchBlock:^(PYSearchViewController *searchViewController, UISearchBar *searchBar, NSString *searchText) {
        // 开始搜索执行以下代码
        // 如:跳转到指定控制器
        [searchViewController.navigationController pushViewController:[[DetailViewController alloc] init] animated:YES];
    }];
    //设置风格
    if (indexPath.section == 0)
    {
        //设置热门搜索风格
        searchViewController.hotSearchStyle = (NSInteger)indexPath.row;
        //设置历史记录风格,选择默认风格
        searchViewController.searchHistoryStyle = PYHotSearchStyleDefault;
    }
    else
    {
        //设置热门搜索风格,选择默认风格
        searchViewController.hotSearchStyle = PYHotSearchStyleDefault;
        //设置历史记录风格
        searchViewController.searchHistoryStyle = (NSInteger)indexPath.row;
    }
    //设置代理
    searchViewController.delegate = self;
    //这里显示搜索控制器,最好使用模态present形式,否则直接使用主界面的[self.navigationController pushViewController:searchViewController animated:YES];,会出现界面偏差问题,而且返回时会导致键盘消失不及时(即使不显示取消按钮也会导致键盘消失不及时的情况),以后使用可以根据需要修改代码
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:searchViewController];
    [self presentViewController:nav  animated:NO completion:nil];
    
    //还有一种是创建没有取消按钮的类方法(+ (PYSearchViewController *)searchViewControllerWithHotSearches:(NSArray<NSString *> *)hotSearches searchBarPlaceholder:(NSString *)placeholder;),但是需要实现delegate方法:- (void)searchViewController:(PYSearchViewController *)searchViewController didSearchWithsearchBar:(UISearchBar *)searchBar searchText:(NSString *)searchText;

使用第三方创建搜索界面完成后,进行协议方法的调用

#pragma mark - PYSearchViewControllerDelegate
//搜索框文本变化时,显示的搜索建议通过searchViewController的searchSuggestions赋值即可
- (void)searchViewController:(PYSearchViewController *)searchViewController searchTextDidChange:(UISearchBar *)seachBar searchText:(NSString *)searchText
{
    if (searchText.length) { // 与搜索条件再搜索
        // 根据条件发送查询(这里模拟搜索)
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            // 添加建议搜索结果
            NSMutableArray *searchSuggestionsM = [NSMutableArray array];
            for (int i = 0; i < arc4random_uniform(5) + 10; i++) {
                NSString *searchSuggestion = [NSString stringWithFormat:@"搜索建议 %d", i];
                [searchSuggestionsM addObject:searchSuggestion];
            }
            //显示输入搜索框文字的匹配结果
            searchViewController.searchSuggestions = searchSuggestionsM;
        });
    }
}

调用第三方中的的样式类型:

typedef NS_ENUM(NSInteger, PYHotSearchStyle)  { // 热门搜索标签风格
    PYHotSearchStyleNormalTag,      // 普通标签(不带边框)
    PYHotSearchStyleColorfulTag,    // 彩色标签(不带边框,背景色为随机彩色)
    PYHotSearchStyleBorderTag,      // 带有边框的标签,此时标签背景色为clearColor
    PYHotSearchStyleARCBorderTag,   // 带有圆弧边框的标签,此时标签背景色为clearColor
    PYHotSearchStyleRankTag,        // 带有排名标签
    PYHotSearchStyleRectangleTag,   // 矩形标签,此时标签背景色为clearColor
    PYHotSearchStyleDefault = PYHotSearchStyleNormalTag // 默认为普通标签
};

typedef NS_ENUM(NSInteger, PYSearchHistoryStyle) {  // 搜索历史风格
    PYSearchHistoryStyleCell,           // UITableViewCell 风格
    PYSearchHistoryStyleNormalTag,      // PYHotSearchStyleNormalTag 标签风格
    PYSearchHistoryStyleColorfulTag,    // 彩色标签(不带边框,背景色为随机彩色)
    PYSearchHistoryStyleBorderTag,      // 带有边框的标签,此时标签背景色为clearColor
    PYSearchHistoryStyleARCBorderTag,   // 带有圆弧边框的标签,此时标签背景色为clearColor
    PYSearchHistoryStyleDefault = PYSearchHistoryStyleCell // 默认为 PYSearchHistoryStyleCell
};

typedef NS_ENUM(NSInteger, PYSearchResultShowMode) { // 搜索结果显示方式
    PYSearchResultShowModeCustom,   // 通过自定义显示
    PYSearchResultShowModePush,     // 通过Push控制器显示
    PYSearchResultShowModeEmbed,    // 通过内嵌控制器View显示
    PYSearchResultShowModeDefault = PYSearchResultShowModeCustom // 默认为用户自定义(自己处理)
};

协议方法:

@protocol PYSearchViewControllerDelegate <NSObject, UITableViewDelegate>

@optional
/** 点击(开始)搜索时调用 */
- (void)searchViewController:(PYSearchViewController *)searchViewController didSearchWithsearchBar:(UISearchBar *)searchBar searchText:(NSString *)searchText;
/** 搜索框文本变化时,显示的搜索建议通过searchViewController的searchSuggestions赋值即可 */
- (void)searchViewController:(PYSearchViewController *)searchViewController  searchTextDidChange:(UISearchBar *)seachBar searchText:(NSString *)searchText;
/** 点击取消时调用 */
- (void)didClickCancel:(PYSearchViewController *)searchViewController;

@end

如果界面样式需要修改的可以看代码根据需要修改,比如,搜索框的样式界面的显示,等等问题

有些需求非要把 UISearchBar 默认的圆角矩形的圆角改大,顶端改成圆形的。虽然系统没有提供这个 API,不过还是有一个简单方法可以解决。

首先在 UIView 的 category 里加一个方法:

UIView+Utils.m

- (UIView*)subViewOfClassName:(NSString*)className {
    for (UIView* subView in self.subviews) {
        if ([NSStringFromClass(subView.class) isEqualToString:className]) {
            return subView;
        }

        UIView* resultFound = [subView subViewOfClassName:className];
        if (resultFound) {
            return resultFound;
        }
    }
    return nil;
}

用的时候:

UIView* backgroundView = [searchBar subViewOfClassName:@"_UISearchBarSearchFieldBackgroundView"];
backgroundView.layer.cornerRadius = 14.0f;
backgroundView.clipsToBounds = YES;

就可以改成圆形了。效果:


圆形的 UISearchBar

用这个方法还可以改取消按钮的颜色、字体什么的。

详细内容可以参考我的Demo代码,如果有问题可以留言:http://download.csdn.net/detail/hbblzjy/9676026

界面效果展示:

热门搜索样式:

           

历史记录样式:

           

好用的有多种样式的搜索界面创建UISearchBar的更多相关文章

  1. [Android源码]Android源码之高仿飞鸽传书WIFI热点搜索与创建(一)

    (本文详情来源:android源码 http://www.eoeandroid.com/thread-296427-1-1.html   转载请注明出处!)  [Android源码分享]飞鸽传书的An ...

  2. CRM WEB UI 03搜索界面新建按钮调到详细界面

    这个和上一个差不多,简单说下: 1.因为NEW是在创建搜索界面的时候加的,所以此时只需在结果界面重定义NEW事件: method EH_ONNEW. OP_NEW( ). endmethod. 2.结 ...

  3. 如何利用Power BI 制作动态搜索界面

    最近Power BI有了最新更新,想着利用 Power BI 工具制造一个动态的搜索界面,比如动态切换搜索引擎,分别从百度.360.搜狗等搜索苹果最新新闻.通过一番测试,最终实现了相关功能. 数据加载 ...

  4. Day12-微信小程序实战-交友小程序-优化“附近的人”页面与serach组件的布局和样式以及搜索历史记录和本地缓存*内附代码)

    回顾/:我们已经实现了显示附近的人的功能了,可以多个人看到附近的人页面了 但是还是要进行优化有几个问题:1.我们用户选择了其他的自定义头像之后,在首页可以看到头像的变化,但是在附近的人中头像会变成报错 ...

  5. Android FragmentTransactionExtended:使Fragment以多种样式动画切换

    有多种fragment之间切换的效果,效果是这样的: Demo的实现是很简单的. 在res/values中,新建一个arrays.xml文件,存放Fragment动画效果的名称,在spinner中使用 ...

  6. AspNetPager实现真分页+多种样式

    真假分页 分页是Web应用程序中最常用到的功能之一.当从数据库中获取的记录远远超过界面承载能力的时候,使用分页可以使我们的界面更加美观,更加的用户友好.分页包括两种类型:真分页和假分页. 其中假分页就 ...

  7. Jquery qTip2实现多种提示效果,支持ajax,以及多种样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. (十九)TableView的点击监听和数据刷新(Alert的多种样式) -tag传值的技巧

    要实现监听,要使用代理,控制器要成为TableView的代理. 注意下面的方式是代理方法: - (void)tableView:(UITableView *)tableView didSelectRo ...

  9. Android多种样式的进度条

    原创 2016年04月26日 16:46:35 标签: android / clip / 进度条 / 8473 编辑 删除 ---- The mark of the immature man is t ...

随机推荐

  1. [AtCoder arc090E]Avoiding Collision

    Description 题库链接 给出一张 \(N\) 个节点, \(M\) 条边的无向图,给出起点 \(S\) 和终点 \(T\) .询问两个人分别从 \(S\) 和 \(T\) 出发,走最短路不相 ...

  2. [USACO12JAN]爬山Mountain Climbing

    题目描述 Farmer John has discovered that his cows produce higher quality milk when they are subject to s ...

  3. LOJ #6041. 事情的相似度

    Description 人的一生不仅要靠自我奋斗,还要考虑到历史的行程. 历史的行程可以抽象成一个 01 串,作为一个年纪比较大的人,你希望从历史的行程中获得一些姿势. 你发现在历史的不同时刻,不断的 ...

  4. bzoj 4919: [Lydsy六月月赛]大根堆

    Description 给定一棵n个节点的有根树,编号依次为1到n,其中1号点为根节点.每个点有一个权值v_i. 你需要将这棵树转化成一个大根堆.确切地说,你需要选择尽可能多的节点,满足大根堆的性质: ...

  5. ●BZOJ 3270 博物馆

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=3270题解: 期望DP,高斯消元 本来是定义的关于概率的dp, 但是发现这样定义有很多解释不通 ...

  6. 【网络流】【BZOJ1001】狼抓兔子

    继续网络流的学习.... 题意简析:就是给你张图,叫你求最小割. 解题思路:最小割=最大流,按题意见图跑一次就好了. 附代码: #include<cstdio> #include<i ...

  7. 【bzoj4008 hnoi2015】 亚瑟王

    题目描述 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑.他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知,亚瑟王是一个看脸的游戏,技能 ...

  8. bzoj 4025: 二分图

    Description 神犇有一个n个节点的图.因为神犇是神犇,所以在T时间内一些边会出现后消失.神犇要求出每一时间段内这个图是否是二分图.这么简单的问题神犇当然会做了,于是他想考考你. 解题报告: ...

  9. BZOJ4942【noi2017】整数

    题目背景 在人类智慧的山巅,有着一台字长为10485761048576 位(此数字与解题无关)的超级计算机,著名理论计算机科 学家P博士正用它进行各种研究.不幸的是,这天台风切断了电力系统,超级计算机 ...

  10. 单选、多选框根据value值设置选中

    $("input:checkbox[value='video']").parent().addClass('checked'); $("input:radio[value ...