Paste_Image.png

最近公司要求開發(fā)一個(gè)新項(xiàng)目公般，使用到了UISearchBar進(jìn)行地址搜索万搔。

要求如下：

Paste_Image.png

原生的UISearchBar樣式不能滿足UI設(shè)計(jì)需求，網(wǎng)上找了大量資料才解決了這個(gè)問題官帘。

Paste_Image.png

新建JGSearchTextField 繼承 UISearchBar

.h文件

#import <UIKit/UIKit.h>

@interface JGSearchTextField : UISearchBar
@property (nonatomic, assign, setter = setHasCentredPlaceholder:) BOOL hasCentredPlaceholder;

@end

.m文件


#import "JGSearchTextField.h"

@implementation JGSearchTextField

// ------------------------------------------------------------------------------------------
#pragma mark - Initializers
// ------------------------------------------------------------------------------------------
- (instancetype)initWithFrame:(CGRect)frame
{
    if ((self = [super initWithFrame:frame]))
    {
        self.hasCentredPlaceholder = NO;
    }
    
    return self;
}

// ------------------------------------------------------------------------------------------
#pragma mark - Methods
// ------------------------------------------------------------------------------------------
- (void)setHasCentredPlaceholder:(BOOL)hasCentredPlaceholder
{
    _hasCentredPlaceholder = hasCentredPlaceholder;
    
    SEL centerSelector = NSSelectorFromString([NSString stringWithFormat:@"%@%@", @"setCenter", @"Placeholder:"]);
    if ([self respondsToSelector:centerSelector])
    {
        NSMethodSignature *signature = [[UISearchBar class] instanceMethodSignatureForSelector:centerSelector];
        NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:signature];
        [invocation setTarget:self];
        [invocation setSelector:centerSelector];
        [invocation setArgument:&_hasCentredPlaceholder atIndex:2];
        [invocation invoke];
    }
    
}
@end

在控制器中使用JGSearchTextField

 //語音搜索按鈕
    UIButton *voiceBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [voiceBtn setBackgroundImage:[UIImage imageNamed:@"search_ico_voice"] forState:UIControlStateNormal];
    
    [self.navigationBar addSubview:voiceBtn];
    
    self.searchBar = [[JGSearchTextField alloc] init];
    
    self.searchBar.barStyle     = UIBarStyleBlackOpaque;
    
    self.searchBar.translucent  = YES;
    
    self.searchBar.delegate     = self;
    
    self.searchBar.placeholder = @"請(qǐng)輸入地址或地區(qū)";
    
    self.searchBar.keyboardType = UIKeyboardTypeDefault;
    
    UIImage* searchBarBg = [self GetImageWithColor:[UIColor clearColor] andHeight:30.0f];
    
    //設(shè)置背景圖片
    [_searchBar setBackgroundImage:searchBarBg];
    
    //設(shè)置背景色
    [_searchBar setBackgroundColor:[UIColor clearColor]];
    
    //設(shè)置文本框背景
    [_searchBar setSearchFieldBackgroundImage:searchBarBg forState:UIControlStateNormal];
    
    [_searchBar setContentMode:UIViewContentModeLeft];

    UITextField *searchField = [_searchBar valueForKey:@"_searchField"];
    
    UIImage *image = [UIImage imageNamed:@"search_ico_search"];
    
    UIImageView *iconView = [[UIImageView alloc] initWithImage:image];
    
    iconView.frame = CGRectMake(0, 0, image.size.width , image.size.height);
    
    searchField.leftView = iconView;
    
    searchField.textAlignment = NSTextAlignmentLeft;
    
    [self.navigationBar addSubview:self.searchBar];
    
    [voiceBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.searchBar.mas_right).offset(5);
        make.size.mas_equalTo(CGSizeMake(15, 15));
        make.centerY.equalTo(self.searchBar);
    }];
    
        [self.searchBar mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.navigationBar).offset(35);
        make.bottom.equalTo(self.navigationBar).offset(-10);
        make.width.mas_equalTo(SCREEN_WIDTH*0.7);
        make.height.mas_equalTo(30);
    }];
    
    //設(shè)置搜索框取消按鈕顏色
    NSMutableDictionary* dic = [NSMutableDictionary dictionary];
    
    dic[NSForegroundColorAttributeName] = HexRGB(0x0aa676);
    
    [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil]setTitleTextAttributes:dic forState:UIControlStateNormal];
    
    UIView *bottomLine = [[UIView alloc]init];
    
    bottomLine.backgroundColor = HexRGB(0x0aa676);
    
    [self.navigationBar addSubview:bottomLine];
    
    [bottomLine mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.searchBar).offset(15);
        make.right.equalTo(voiceBtn);
        make.bottom.equalTo(self.navigationBar).offset(-5);
        make.height.mas_equalTo(1);
    }];
    
    self.navigationBar.rightNormalImage=[UIImage imageNamed:@"search_ico_cbb"];
    
    self.navigationBar.rightClickBlock=^{
        
    };


/**
 *  生成圖片
 *
 *  @param color  圖片顏色
 *  @param height 圖片高度
 *
 *  @return 生成的圖片
 */
- (UIImage*) GetImageWithColor:(UIColor*)color andHeight:(CGFloat)height
{
    CGRect r= CGRectMake(0.0f, 0.0f, 1.0f, height);
    UIGraphicsBeginImageContext(r.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, r);
    
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return img;
}

最后初始化 UISearchDisplayController,遵循代理完成了地址搜索功能

- (void)initSearchDisplay
{
    self.displayController = [[UISearchDisplayController alloc] initWithSearchBar:self.searchBar contentsController:self];
    self.displayController.delegate                = self;
    self.displayController.searchResultsDataSource = self;
    self.displayController.searchResultsDelegate   = self;
    
    [self setExtraCellLineHidden:self.displayController.searchResultsTableView];
}