iOS学习iOS 开发每天分享优质文章iOS程序猿

iOS 搜索功能,粗仿网易云音乐

2016-12-19  本文已影响764人  莜12138

/**
最近做的项目中需要到一个仿照网易云音乐的搜索功能,我把它抽离出来供大家分享,有一些写的不好的地方,欢迎大家指正
我在这里用朋友的测试接口展示数据,仅供测试使用,请勿进行商业用途
/
/

这里会讲一下基本的搜索功能的搭建,首先是当点击搜索框的时候,调起键盘并显示搜索历史记录,然后在点击记录时返回搜索数据
当点击键盘时候,显示匹配到的关键字,点击字段返回数据并将该字段存入到历史记录中
虽然搜索功能很小很简单,但是不细心的话也会出现很多bug,我会把我想到的一些注意事项写在项目中,欢迎大家指正补充
**/

效果图如下:


搜索Gif.gif

我们先来分析一下:首先点击搜索框的时候,弹出键盘,显示历史记录;点击键盘开始输入时,需要匹配关键字;点击键盘上的搜索,点击历史记录,点击匹配到的关键字的时候都要返回值,然后界面刷新UI。
我们需要搭建一个本地数据库来存储搜索的历史记录
DataBase.h
<pre>

import <Foundation/Foundation.h>

import "SearchModel.h"

@interface DataBase : NSObject

/**

pragma mark -

/**

@end

</pre>
.m
<pre>

import "DataBase.h"

import "FMDB.h"

@interface DataBase ()

@property (nonatomic, strong) FMDatabase *db;

@end

@implementation DataBase
// 创建单例

// 创建数据库

}

</pre>

搭建一下主界面,这里我是用一个collectionView写的. 实现代理方法
<pre>
/**

}

</pre>

然后我们需要再写一个tableView,用来展示历史记录和匹配到的关键字
<pre>
**

</pre>
在这里看一下我在主控制器中所定义的属性,都是要用到的。
<pre>
@interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UITextFieldDelegate, UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) UICollectionView *myCollection; //

@property (nonatomic, strong) UITableView *myTable; //

@property (nonatomic, strong) UITextField *searchTextField; // 搜索框

@property (nonatomic, strong) NSMutableArray dataSource; // cell数据源
@property (nonatomic, strong) NSMutableArray textFieldDataSource; // 匹配字段数据源
@property (nonatomic, strong) NSMutableArray historyDataSource; // 搜索历史数据源
/
我在这里用一个替换字段接收请求下来的匹配字段的数据。。不这样做的话,在匹配字段返回的cell时,如果是在汉语模式下编辑,在没有确定输入字段时,此时已经匹配到了字段,但是如果点击的时候,在点击事件中,原来的数据源是空的,可能是我在哪里清空了原来的数据源,我没有找到,只能用一个新的数据源来替代。英文模式下输入,暂时没有发现这种问题(读这个源码的朋友如果能改进这个错误请私信我,万分感谢!!!)
*/
@property (nonatomic, strong) NSMutableArray *placeTextDataSource; // 替换匹配字段

@property (nonatomic, strong) NSString *judgeStr; // 用来判断展示的table

@property (nonatomic, strong) SearchModel *model;

// 输入显示字段
@property (nonatomic, strong) NSString *textFieldStr;

@end
</pre>
我们要通过textField的代理事件来实现搜索的交互事件
<pre>

pragma mark --- TextFieldDelegate

/**

return YES;

}
/**

/**

</pre>

代码有点多,不明白的同学可以到我的git主页上下载源码,里面注释写的也比较详细
git:https://github.com/you12138/SearchLikeWangYiMusic.git

上一篇 下一篇

猜你喜欢

热点阅读