iOS 利用collectionView代码布局实现搜索历史，UISearchBar搜索框

最新推荐文章于 2022-04-18 07:00:00 发布
最新推荐文章于 2022-04-18 07:00:00 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： iOS基础 文章标签： objective-c ios xcode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smileKH/article/details/109996262
版权

效果如下：
搜索功能
控制器代码如下：

#import "HBSearchHeaderTitleView.h"
#import "HBSearchHistoryWordCell.h"
#import "HBSearchHotWordCell.h"
#import "UICollectionViewLeftAlignedLayout.h"
@interface HBSearchViewController ()<UISearchBarDelegate,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
@property (nonatomic ,strong)UIView *navView;
@property (nonatomic ,strong)UISearchBar *searchBar;
@property (nonatomic ,strong)UIButton *cancelBtn;//取消按钮
@property (nonatomic ,strong)UICollectionView *collectionView;
@property (nonatomic ,strong)NSMutableArray *historyWordsAry;//历史记录
@property (nonatomic ,strong)NSArray *hotWordsAry;//热搜
@end

@implementation HBSearchViewController

-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    self.navigationController.navigationBar.hidden = YES;
}
-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    self.navigationController.navigationBar.hidden = NO;
    //保存历史到本地
    if ([NSKeyedArchiver archiveRootObject:_historyWordsAry toFile:kSearchHistoryCachePath]) {
        NSLog(@"缓存搜索历史成功！！");
    }
}
//-(NSArray *)historyWordsAry{
//    if (!_historyWordsAry) {
//        _historyWordsAry = @[@"衣服",@"衣服",@"衣意思是酸辣粉",@"衣服",@"衣服"];
//    }
//    return _historyWordsAry;
//}
-(NSArray *)hotWordsAry{
    if (!_hotWordsAry) {
        _hotWordsAry = @[@"裤子",@"衣服",@"衣意思是酸辣粉衣意思是酸辣粉酸辣粉",@"衣服",@"衣意思是酸辣粉",@"衣服",@"衣意思是酸辣粉",@"衣服",@"衣意思是酸辣粉",@"衣服",@"衣意思是酸辣粉",@"衣服",@"衣意思是酸辣粉",@"衣服",@"衣意思是酸辣粉",@"衣服",@"衣意思是酸辣粉",@"衣服衣",@"衣意思是酸辣粉",@"衣服"];
    }
    return _hotWordsAry;
}
#pragma mark ==========点击取消按钮==========
-(void)clickCancelBtn:(UIButton *)btn{
    [self.searchBar resignFirstResponder];
    [self.navigationController popViewControllerAnimated:YES];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"搜索";
    self.historyWordsAry = [NSMutableArray array];
    _historyWordsAry = [[NSKeyedUnarchiver unarchiveObjectWithFile:kSearchHistoryCachePath] mutableCopy];
    if (_historyWordsAry == nil) _historyWordsAry = [NSMutableArray arrayWithCapacity:1];
    //添加子视图
    [self addSubViewUI];
}
#pragma mark ==========添加子视图==========
-(void)addSubViewUI{
    [self.view addSubview:self.navView];
    [self.navView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(self.view);
        make.height.mas_equalTo(NAVIBAR_HEIGHT);
    }];
    
    CGFloat btnWidth = 40;
    CGFloat searchHeight = 40;
    [self.navView addSubview:self.searchBar];
    [self.searchBar mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(self.navView).offset(-10);
        make.left.equalTo(self.navView).offset(15);
        make.right.equalTo(self.navView).offset(-10-15-btnWidth);
        make.height.mas_equalTo(searchHeight);
    }];
    
    [self.navView addSubview:self.cancelBtn];
    [self.cancelBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.searchBar);
        make.left.equalTo(self.searchBar.mas_right).offset(10);
        make.size.mas_equalTo(CGSizeMake(btnWidth, btnWidth));
    }];
    
    [self.view addSubview:self.collectionView];
    [self.collectionView reloadData];
    [self.searchBar becomeFirstResponder];
}
#pragma mark - UICollectionView
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    if (kind == UICollectionElementKindSectionHeader) {
        HBSearchHeaderTitleView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:CELLID([HBSearchHeaderTitleView class]) forIndexPath:indexPath];
        WEAKSELF;
        if (indexPath.section == 0) {
//            header.delBtn.hidden = NO;
            header.titleLabel.text = @"历史搜索";
            header.backgroundColor = [UIColor whiteColor];
//            [header.delBtn bk_addEventHandler:^(id sender) {
//
//                weakSelf.isDelHistory = !weakSelf.isDelHistory;
//                [weakSelf.collectionView reloadSections:[NSIndexSet indexSetWithIndex:0]];
//            } forControlEvents:UIControlEventTouchUpInside];
        } else {
            header.titleLabel.text = @"大家都在搜";
//            header.delBtn.hidden = YES;
        }
        return header;
    }
    return nil;
}
#pragma mark-表头尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    return CGSizeMake(SCREEN_WIDTH, 40);
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    if (section == 0) {
        return self.historyWordsAry.count;
    }
    return self.hotWordsAry.count;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.section == 0) {
        WEAKSELF;
        HBSearchHistoryWordCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CELLID([HBSearchHistoryWordCell class]) forIndexPath:indexPath];
//        cell.delBtn.hidden = !self.isDelHistory;
        NSString *text = self.historyWordsAry[indexPath.row];
        cell.titleLabel.text = text;
//        [cell.delBtn bk_addEventHandler:^(id sender) {
//
//            [weakSelf.historyWordsAry removeObject:text];
//            [weakSelf.collectionView reloadSections:[NSIndexSet indexSetWithIndex:0]];
//        } forControlEvents:UIControlEventTouchUpInside];
        
        return cell;
    } else {
        HBSearchHotWordCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CELLID([HBSearchHotWordCell class]) forIndexPath:indexPath];
        cell.titleLabel.text = self.hotWordsAry[indexPath.row];
        return cell;
    }
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    
    NSString *searchText = @"";
    if (indexPath.section == 0) {
        //热词
        searchText = self.historyWordsAry[indexPath.row];
    }else if (indexPath.section == 1) {
        //热词
        searchText = self.hotWordsAry[indexPath.row];
    }
    _searchBar.text = searchText;
    [self searchGoods];
}
- (void)searchGoods{
    NSString *search = _searchBar.text;
    if (search.length == 0) {
//        [NSObject showToastWithText:];
        //@"请输入搜索的商品名称"
        return;
    }
    
    //隐藏键盘
    [self.view endEditing:YES];
    
//    self.searchText = search.removeAllSpace;
    if (![_historyWordsAry containsObject:search]) [_historyWordsAry addObject:search];
    
//    kDefineWeakSelf;
//    [YXShoppingService searchGoodsWithName:_searchText pageNum:_page sort:_sort order:_order success:^(YXShoppingSearchGoodsListModel *obj) {
//
//        weakSelf.listModel = obj;
//        weakSelf.collectionView.hidden = YES;
//        weakSelf.tableView.hidden = NO;
//
//        if (obj.list.count == 0) {
//            //没数据
//            weakSelf.isShowEmptyView = YES;
//            weakSelf.tintImgName = @"yx_yhq_wu-ss";
//            weakSelf.tintStr = @"还没有数据哦~~";
//        }
//
//        [weakSelf.tableView reloadData];
//    } fail:^(NSString *str) {
//
//        weakSelf.collectionView.hidden = YES;
//        weakSelf.tableView.hidden = NO;
//        //没数据
//        weakSelf.isShowEmptyView = YES;
//        weakSelf.tintStr = str; //@"网络请求失败，请重试";
//        [weakSelf.tableView reloadData];
//    }];
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.section == 0) {
        NSString *text = self.historyWordsAry[indexPath.row];
        return [HBSearchHistoryWordCell getSizeWithText:text];
    } else {
        NSString *text = self.hotWordsAry[indexPath.row];
        return [HBSearchHistoryWordCell getSizeWithText:text];
    }
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(0, 15, 0, 0);
}
#pragma mark - UISearchBar
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar{
    [self searchGoods];
}
#pragma mark ==========getter==========
-(UIView *)navView{
    if (!_navView) {
        _navView = ({
            UIView *view = [UIView new];//初始化控件
            view.backgroundColor = [UIColor whiteColor];
            view ;
        }) ;
    }
    return _navView ;
}
-(UISearchBar *)searchBar{
    if (!_searchBar) {
        _searchBar = ({
            UISearchBar *seBar = [[UISearchBar alloc]init];
            seBar.delegate = self;
            if (@available(iOS 13, *)) {
                seBar.searchTextField.font = [UIFont systemFontOfSize:13];
            } else {
                UITextField *textfield = [seBar valueForKey:@"_searchField"];
                textfield.font = [UIFont systemFontOfSize:13];
            }
            //默认白色搜索框,多出的背景为灰色;UIBarStyleDefault 默认 UIBarStyleBlack背景为黑色
            seBar.barStyle = UIBarStyleDefault;
            //设置搜索框整体的风格为不显示背景,默认为Prominent显示
            seBar.searchBarStyle = UISearchBarStyleDefault;
            [seBar setBackgroundImage:[UIImage new]];
            [seBar setSearchFieldBackgroundImage:[UIImage imageNamed:@"yx_search_field_bg"] forState:UIControlStateNormal];
            seBar.placeholder = @"复制标题，搜隐藏优惠券拿返利";
            seBar;
        });
    }
    return _searchBar;
}
-(UIButton *)cancelBtn{
    if (!_cancelBtn) {
        _cancelBtn = ({
            //创建按钮
            UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
            //设置标题
            [button setTitle:@"取消" forState:UIControlStateNormal];
            //设置字体大小
            button.titleLabel.font = [UIFont systemFontOfSize:14];
            //设置title颜色
            [button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
            //添加点击事件
            [button addTarget:self action:@selector(clickCancelBtn:) forControlEvents:UIControlEventTouchUpInside];
            
            button;
        });
    }
    return _cancelBtn;
}
#pragma mark -Getter
-(UICollectionView *)collectionView{
    if (!_collectionView) {
        //创建 layout(此处创建的是流水布局)
        UICollectionViewLeftAlignedLayout *flowLayout = [[UICollectionViewLeftAlignedLayout alloc] init];
        flowLayout.headerReferenceSize = CGSizeMake(SCREEN_WIDTH, 30);
        flowLayout.minimumLineSpacing = 10;
        flowLayout.minimumInteritemSpacing = 10;
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, NAVIBAR_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT-NAVIBAR_HEIGHT) collectionViewLayout:flowLayout];
        _collectionView.backgroundColor = [UIColor whiteColor] ;
        _collectionView.delegate = self ;
        _collectionView.dataSource = self ;
        _collectionView.showsVerticalScrollIndicator = NO;
        _collectionView.showsHorizontalScrollIndicator = NO;
        
        //注册 item
        [_collectionView registerClass:[HBSearchHeaderTitleView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:CELLID([HBSearchHeaderTitleView class])];
        [_collectionView registerClass:[HBSearchHistoryWordCell class] forCellWithReuseIdentifier:CELLID([HBSearchHistoryWordCell class])];
        [_collectionView registerClass:[HBSearchHotWordCell class] forCellWithReuseIdentifier:CELLID([HBSearchHotWordCell class])];

    }
    return _collectionView ;
}
@end

demo地址：HBSearchNavDemo

END.

明似水
关注
专栏目录
ios 搜索历史记录 不规则布局
07-20
前阵子做项目的时候，偶然用到不规则的历史记录列表，之前的处理方式一个是通过固定搜索文字大小，一行固定2个或三个，另一种则是类似百度搜索记录的方式那样，一行一行罗列显示，苦苦思索后从网上找到一个demo,优化了下效果，希望对大家有所帮助。
ios-仿天猫以及电商的历史搜索功能，本地存储。.zip
07-11
仿照主流的电脑历史搜索功能，搜索记录可顺序排版，自动换行功能。简单实用～ 后续会继续更近优化～ github地址：https://github.com/cxcxy/SearchRecord 顺手给个star吧～
iOS仿淘宝搜索记录，多标签自动分布,自动布局！
08-18
仿淘宝搜索记录，多标签自动分布,自动换行展示！不同于collection的是，collection 每一行item平均分布，每一行的间隔不统一，MoreLabels实现的是每一行靠左展示，每一行的标签间隔统一，自动换行！大家根据自己的需求选择！
一个带有历史搜索记录的Demo
05-10
一个带有历史搜索记录的Demo
UICollectionView做历史记录
weixin_30323961的博客
06-03 590
效果图：参考：https://github.com/celiaDeveloper/XDEShop，这个不能满足需求，所以我改了下 layout： ReceiveHomeVC.h #import <UIKit/UIKit.h> @protocol HorizontalCollectionLayoutDelegate <NSObject> @opt...
iOS UICollectionView记录
weixin_30502157的博客
08-21 225
UICollectionView 在项目中是出现很高频的一个空间，它能灵活的展现各种布局。平时，我们常用的水平、垂直及网格的效果基本上都可以使用系统提供的给我们的 Layout 进行完成，最近刚好做了一个自定义布局的需求，这里将过程稍作记录，后面也提及了一些 DragAndDrop 的简单使用。 准备知识 Basic Layout Custom Layout Drag And Drop 准备...
UISearchBar使用记录
Inkywang的专栏
12-21 4359
UISearchBar *_listSearchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, [Globle shareInstance].globleWidth, 44.0)]; me.backgroundColor = RGB(0xf6, 0xf6, 0xf6); ((UISearchBar *)me).ti
iOS 用数组保存搜索记录
LBY5211ABC的专栏
05-09 1473
//拼接路径 - (NSString *)dataFilePath {     NSArray *paths = NSSearchPathForDirectoriesInDomains             (NSDocumentDirectory, NSUserDomainMask, YES);     NSString *documentsDirectory = [paths ob
【iOS】一种仿京东搜索历史记录的表格的实现(sqlite3的使用)
小猿猪哥的博客
04-10 8036
功能点 准确的来说，不是仿制京东的，因为年前就是做好了这个功能。昨天看看京东，发现效果是一样的。 年前公司APP的功能需求点： 1.限制最多存储20条历史搜索数据(Demo为了演示，做的是5条) 2.最新的历史数据在最上面 3.数据不能重复 4.历史数据支持点击，点击后发起搜索(Demo做的是弹出框展示) 效果图 在公司的项目中，由于整个项目使用的是FMDB，为了再
iOS-关于浏览、搜索等历史记录本地存储的思路
测试必备，自由切换账号、环境的组件（swift）
04-18 749
前言工具类VisitManager结构一、Node：二、 VisitManagerVisitManager数据操作流程一、插入数据二、 删除链表中的Node1、 删除链表中的NodeB2、 真正的删除内存中的NodeB三、校验与存储到磁盘思考过程一、 读取的时间复杂度二、 存储的最大长度三、超时的历史记录进行删除四、储存到磁盘demo 前言 在APP需求开发中，经常会有一些本地存储一些信息的功能，对于本地保存的浏览历史记录，大多需要根据几个维度进行约束：时间、数量、增删改查的时间复杂度、用户浏览顺序等 例.
iOS UICollectionView实现标签选择器
08-19
主要为大家详细介绍了iOS UICollectionView实现标签选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
历史搜索标签排列自适应
03-12
历史搜索标签，排列自适应，可以直接拿来用的。
swift-HistoryListView几句代码快速创建有推荐和历史搜索的页面
08-15
HistoryListView 几句代码快速创建 有推荐和历史 搜索的 页面
swift-类似于百度输入框历史记录的UI效果
08-15
类似于百度输入框历史记录的UI效果
iOS UICollectionView 不规则排序
12-01
自定义UICollectionViewLayout 布局 自适应高度。 多选cell
iOS 通过collectionView实现照片删除功能
08-28
本教程将介绍如何利用UICollectionView实现在iOS应用中实现照片删除功能。 首先，我们需要创建一个继承自UIViewController的类，比如ViewController，并且需要实现UICollectionViewDataSource、...
iOS自定义collectionView实现毛玻璃效果
09-01
在iOS开发中，毛玻璃效果（也称为模糊效果或Blurred Effect）是一种流行的设计趋势，自iOS 7以来被广泛应用于系统界面，以增加界面的深度和美感。本篇文章将介绍如何通过自定义UICollectionView实现毛玻璃效果。我们...
ios-collectionView实现3D滚动图片效果.zip
07-11
在本示例中，"ios-collectionView实现3D滚动图片效果.zip" 文件提供了一个实现3D滚动效果的代码示例。这种效果通常用于增加用户交互性和视觉吸引力，比如在应用的启动屏幕、产品展示或照片浏览等场景。 首先，我们...
ios-collectionView实现单选按钮功能.zip
07-11
在这个“ios-collectionView实现单选按钮功能.zip”项目中，开发者旨在利用UICollectionView来创建一个单选按钮的功能，这在很多场景下都非常实用，比如设置界面、选项卡选择等。 首先，我们要理解如何在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明似水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值