iOS 搜索页面—— 热门搜索和历史记录

在接到这个需求的时候，搜索页面—— 热门搜索和历史记录，第一反应就想到了之前看到的 PYSearch 的轮子，其中基本功能还是很明确的，但是和我们的需求还是有点不符合，于是只能自己来先写一个Demo啦，当然其中 PYSearch 有很多是可以借鉴的。

效果图

在这过程中遇到可以探讨的问题：

• 1、类似排行榜布局，是直接用一个 View 上放多个 UIButton 布局呢？还是用 UITableViewCell 呢？
  如果用 UITableViewCell 如何巧妙的对半分呢？
• 2、如何根据文字的长短紧凑的排序布局?
• 3、一般是 Masonry 布局，还是 用 Frame 搭 UI ？
• 4、如何显示每个UILabel 上的取消按钮，方案多种，但是哪一种更优呢？
• 5、由于我是通过设计 Cell 布局的，如何确定高度呢？

1、类似排行榜布局，是直接用一个 View 上放多个 UIButton 布局呢？还是用 UITableViewCell 呢？

我整体是用 UITableView 的，分为两个 Section 去完成的，Cell 和 Header 一起用。但是类似于上部分 热词排行，是用 UITableViewCell 展示，还是用 直接在 UITableViewCell 上添加逐个呢？ 我后来是采取的后一种方式，逐一添加：

import "SearchHotRankCell.h"

static const CGFloat kSearchHotRankSubViewHeight = 35.0f;
static const NSInteger kSearchHotRangContentViewTag = 1300;

@interface SearchHotRankCell ()

@property (nonatomic, strong) NSArray *hotArray;

@end
@implementation SearchHotRankCell

#pragma mark - Init
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        self.selectionStyle = UITableViewCellSelectionStyleNone;
    }
    return self;
}

#pragma mark - Method
- (void)setHotViewWithArray:(NSArray *)hotArray {
    self.hotArray = hotArray;
    [self.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    for (int i = 0; i < hotArray.count; i++) {
        // 整体内容
        UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(i%2 * (SCREEN_WIDTH/2.0), i/2 * kSearchHotRankSubViewHeight, SCREEN_WIDTH/2.0, kSearchHotRankSubViewHeight)];
        [self.contentView addSubview:backView];
        
        // 标签排名
        UILabel *rankLabel = [[UILabel alloc] initWithFrame:CGRectMake(15, 10, 15, 15)];
        rankLabel.textAlignment = NSTextAlignmentCenter;
        rankLabel.font = [UIFont systemFontOfSize:10];
        rankLabel.layer.cornerRadius = 3;
        rankLabel.text = [NSString stringWithFormat:@"%d", i + 1];
        switch (i) {
            case 0: // 第一名
                rankLabel.backgroundColor = [UIColor redColor];
                rankLabel.textColor = [UIColor whiteColor];
                break;
            case 1: // 第二名
                rankLabel.backgroundColor = [UIColor orangeColor];
                rankLabel.textColor = [UIColor whiteColor];
                break;
            case 2: // 第三名
                rankLabel.backgroundColor = [UIColor yellowColor];
                rankLabel.textColor = [UIColor whiteColor];
                break;
            default: // 其他
                rankLabel.backgroundColor = [UIColor lightGrayColor];
                rankLabel.textColor = [UIColor colorWithRed:113/255.0 green:113/255.0f blue:113/255.0f alpha:1.0];
                break;
        }
        [backView addSubview:rankLabel];

        // 标签内容
        UILabel *contentLabel = [[UILabel alloc]initWithFrame:CGRectMake(40, 0, SCREEN_WIDTH/2.0 - 55, kSearchHotRankSubViewHeight)];
        contentLabel.text = hotArray[i];
        contentLabel.userInteractionEnabled = YES;
        [contentLabel addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tagDidClick:)]];
        contentLabel.tag = kSearchHotRangContentViewTag + i;
        contentLabel.textColor = [UIColor grayColor];
        contentLabel.font = [UIFont systemFontOfSize:14];
        [backView addSubview:contentLabel];
    }
}
- (void)tagDidClick:(UITapGestureRecognizer *)tapGesture {
    UILabel *clickLabel = (UILabel *)tapGesture.view;
    NSInteger index = clickLabel.tag - kSearchHotRangContentViewTag;
    NSLog(@"index click == %lu",index);
    if (self.searchHotRanckTapSelect) {
        self.searchHotRanckTapSelect(self.hotArray[index]);
    }
}
@end

2、如何根据文字的长短紧凑的排序布局?

类似于历史纪录下部分是如何布局的呢？需要计算其宽度的，并且紧凑在一起...

#import "SearchHistoryCell.h"
#import "CanCancelLabel.h"

static const CGFloat kSearchHistorySubViewHeight = 35.0f; // Item 高度
static const CGFloat kSearchHistorySubViewTopSpace = 10.0f; // 上下间距
static const NSInteger kSearchHistoryContentViewTag = 1400;
static  NSString *const kSearchHistoryRowKeyIden = @"kSearchHistoryRowKeyIden";

@interface SearchHistoryCell ()

@property (nonatomic, strong) NSArray *historyArray;

@end

@implementation SearchHistoryCell

#pragma mark -  高度
+ (CGFloat)historyCellHeightWithData:(NSArray *)historyArray {
    NSInteger countRow = 0; // 第几行数
    countRow = [[NSUserDefaults standardUserDefaults] integerForKey:kSearchHistoryRowKeyIden];
    countRow = (historyArray.count > 0) ? (countRow + 1) : 0;
    return countRow * (kSearchHistorySubViewHeight + kSearchHistorySubViewTopSpace) + kSearchHistorySubViewTopSpace;
}

#pragma mark - Init
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        self.selectionStyle = UITableViewCellSelectionStyleNone;
    }
    return self;
}

#pragma mark - Method
- (void)setHistroyViewWithArray:(NSArray *)historyArray {
    self.historyArray = historyArray;
    [self.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    // 计算位置
    CGFloat leftSpace = 15.0f;  // 左右空隙
    CGFloat topSpace = 10.f; // 上下空隙
    CGFloat margin = 15.0f;  // 两边的间距
    CGFloat currentX = margin; // X
    CGFloat currentY = 0; // Y
    NSInteger countRow = 0; // 第几行数
    CGFloat lastLabelWidth = 0; // 记录上一个宽度
    
    for (int i = 0; i < historyArray.count; i++) {
        // 最多显示10个
        if (i > 9) {
            break;
        }
        /** 计算Frame */
        CGFloat nowWidth = [self textWidth:historyArray[i]];
        if (i == 0) {
            currentX = currentX + lastLabelWidth;
        }
        else {
            currentX = currentX + leftSpace + lastLabelWidth;
        }
        currentY = countRow * kSearchHistorySubViewHeight + (countRow + 1) * topSpace;
        // 换行
        if (currentX + leftSpace + margin + nowWidth >= SCREEN_WIDTH) {
            countRow++;
            currentY = currentY + kSearchHistorySubViewHeight + topSpace;
            currentX = margin;
        }
        lastLabelWidth = nowWidth;
        // 文字内容
        CanCancelLabel *contentLabel = [[CanCancelLabel alloc] initWithFrame:CGRectMake(currentX, currentY, nowWidth, kSearchHistorySubViewHeight)];
        /** Label 具体显示 */
        contentLabel.titleContent = historyArray[i];
        [contentLabel addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tagDidClick:)]];
        UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressClick:)];
        longPress.minimumPressDuration = 1.5f;
        [contentLabel addGestureRecognizer:longPress];
        contentLabel.tag = kSearchHistoryContentViewTag + i;
        [self.contentView addSubview:contentLabel];
    }
    [[NSUserDefaults standardUserDefaults] setInteger:countRow forKey:kSearchHistoryRowKeyIden];
}

- (CGFloat)textWidth:(NSString *)text {
     CGFloat width = [text boundingRectWithSize:CGSizeMake(SCREEN_WIDTH, kSearchHistorySubViewHeight) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14]} context:nil].size.width + 20;
    // 防止 宽度过大
    if (width > SCREEN_WIDTH - 30) {
        width = SCREEN_WIDTH - 30;
    }
    return width;
}

#pragma mark - Private Method
- (void)tagDidClick:(UITapGestureRecognizer *)tapGesture {
    CanCancelLabel *clickLabel = (CanCancelLabel *)tapGesture.view;
    NSInteger index = clickLabel.tag - kSearchHistoryContentViewTag;
    NSLog(@"history == %lu",index);
    if (self.searchTapHistoryBlock) {
        self.searchTapHistoryBlock(index);
    }
}

- (void)longPressClick:(UILongPressGestureRecognizer *)panGesture {
    CanCancelLabel *clickLabel = (CanCancelLabel *)panGesture.view;
    NSInteger index = clickLabel.tag - kSearchHistoryContentViewTag;
    if(panGesture.state == UIGestureRecognizerStateBegan) {
         NSLog(@"long Press == %lu",index);
        clickLabel.showCancel = NO;
        __weak typeof(self) weakSelf = self;
        clickLabel.clearOneHistroyBlock = ^{
            __strong typeof(self) strongSelf = weakSelf;
            if (strongSelf.searchLongPressClearHistoryBlock) {
                strongSelf.searchLongPressClearHistoryBlock(index);
            }
        };
    }
}

@end

此处的 Frame 计算，还可以 优化。

3、一般是 Masonry 布局，还是 用 Frame 搭 UI。

通过上述 Demo 中，我发现自己一般情况下是用 Masonry, 但是遇到类似用 For 循环的却是是用 Frame 的搭 UI的，所以自己需要总结下到底什么时候，需要用到 Frame，毕竟项目中大部分还是用 Masonry 的。
用 Masonry 是为了便于界面适配，也是为了保持整体代码统一，不能 Frame 和 Masonry 乱用，但实际上直接用 Frame 的效率却是要高一些，所以也不能排斥它。

因此就得出自己的小结论，在类似 For 循环的情况下 或者 UITableViewHeaderView 的时候才用 Frame，其他时候还是用 Masonry 。

4、如何显示每个UILabel 上的取消按钮，方案多种，但是哪一种更优呢？

后来我是采取自定义 CanCancelLabel 的方式，来实现长按手势之后显示 取消效果的。

5、由于我是通过设计 Cell 布局的，如何确定高度呢？

5-1、给予其 SearchHotRankCell (热词排行)一个加方法：

+ (CGFloat)hotRankCellHeightWithData:(NSArray *)hotArray {
    return ceilf((CGFloat)hotArray.count/2) * kSearchHotRankSubViewHeight;
}

此处用到 ceil\ceilf 数学函数，向上取整。

5-2、给予其 SearchHistoryCell (历史词汇) 这个确定高度，有点绕

• 直接用 加方法，等于是要重算一次 有几行，感觉计算量蛮多的，没必要
• 通过值传出去，感觉不符合高内聚低耦合的思想，多处使用这个高度。

所以小纠结啊，看到 PYSearch 中采取了个CGRectGetMaxY 的方法，然而此处还是不适用此处，犹如第二种方法，而且他那边不是用的 Cell 来实现的。

 // 设置contentView高度
contentView.py_height = CGRectGetMaxY(contentView.subviews.lastObject.frame);

最终还是先采取了临时保存量的方式记录的，用 NSUserDefaults 保存临时值的。

+ (CGFloat)historyCellHeightWithData:(NSArray *)historyArray {
    NSInteger countRow = 0; // 换几次行
    countRow = [[NSUserDefaults standardUserDefaults] integerForKey:kSearchHistoryRowKeyIden];
    countRow = (historyArray.count > 0) ? (countRow + 1) : 0;
    return countRow * (kSearchHistorySubViewHeight + kSearchHistorySubViewTopSpace) + kSearchHistorySubViewTopSpace;
}

如想到更好的方法再优化，如有朋友有好的方法，欢迎指导。

整体来说，这又是一个简单搭建熟练的 UI 的过程。