iOS--UISearchBar 属性、方法详解及应用（自定义搜索框样式）

很多APP都会涉及到搜索框，苹果也为我们提供了默认的搜索框UISearchBar。但实际项目中我们通常需要更改系统默认搜索框的样式。为了实现这一目标，我们需要先搞懂 UISearchBar 的属性及方法。在系统的掌握了这些基础的前提下才能更好的去应用它，包括修改样式、或者是模仿系统搜索框的样式自定义一个自己的搜索框等。

本文主要介绍内容分为以下三个部分：

1. UISearchBar 的属性

2. UISearchBar 的方法

3. 自定义 UISearchBar 的样式

1. UISearchBar 的属性

介绍之前先说一下 UISearchBar 的初始化方法：UISearchBar 是 UIView 的子类，它的初始化方法有三种：

- (instancetype)init 
- (instancetype)initWithFrame:(CGRect)frame 
- (nullable instancetype)initWithCoder:(NSCoder *)aDecoder

这三个初始化方法是我们常见的初始化 UIView 以及它的子类的方法，比较常见，而且也不是介绍重点，所以这里不展开说明。

1.1 搜索框风格

属性

// 搜索框风格
@property(nonatomic) UIBarStyle barStyle;

UIBarStyle 有四种枚举值，但后两种已经禁用。

typedef NS_ENUM(NSInteger, UIBarStyle) {
    UIBarStyleDefault         //白色搜索框，灰色背景
    UIBarStyleBlack           //黑色搜索框,
    
    UIBarStyleBlackOpaque      = 1, // 禁用. Use UIBarStyleBlack
    UIBarStyleBlackTranslucent = 2, // 禁用. Use UIBarStyleBlack and set the translucent property to YES
}

效果图：

UIBarStyleDefault 样式

UIBarStyleBlack样式

1.2 搜索的文本、搜索框顶部的提示信息、占位符

属性

 // 搜索的文本
@property(nullable,nonatomic,copy)   NSString *text;  
 // 搜索框顶部的提示信息 
@property(nullable,nonatomic,copy)   NSString *prompt;    
// 占位符，默认nil, 若有值则在输入文本后消失
@property(nullable,nonatomic,copy)   NSString *placeholder;

效果图：

prompt 和 placeholder

输入文本为 text 后 placeholder 消失

1.3 搜索框右侧的按钮

属性

// 搜索框右侧是否显示图书按钮 
@property(nonatomic)  BOOL showsBookmarkButton;   
//搜索框右侧是否显示取消按钮 
@property(nonatomic) BOOL showsCancelButton;  
//搜索框右侧是否显示搜索结果按钮   
@property(nonatomic) BOOL showsSearchResultsButton; 
// 搜索结果按钮为选中状态
@property(nonatomic, getter=isSearchResultsButtonSelected) BOOL searchResultsButtonSelected；

以上四个属性的默认值都是 NO

效果图：

showsBookmarkButton = YES 效果

showsCancelButton = YES 效果

showsSearchResultsButton = YES 效果

searchResultsButtonSelected = YES 效果，要结合showsSearchResultsButton = YES使用

1.4 风格颜色、背景颜色

属性

// 风格颜色，可用于修改输入框的光标颜色，取消按钮和选择栏被选中时候都会变成设置的颜色
@property(null_resettable, nonatomic,strong) UIColor *tintColor;
// 搜索框背景颜色
@property(nullable, nonatomic,strong) UIColor *barTintColor;

测试代码

    self.tintColor = [UIColor orangeColor];      //设置光标颜色为橘色
    self.barTintColor = [UIColor grayColor];     //设置搜索框背景颜色为灰色

效果图：

tintColor 和 barTintColor

1.5 搜索框样式

属性

// 搜索框样式
@property (nonatomic) UISearchBarStyle searchBarStyle

它有三种枚举值：

typedef NS_ENUM(NSUInteger, UISearchBarStyle) {
    UISearchBarStyleDefault,    // 默认样式，和UISearchBarStyleProminent 一样
    UISearchBarStyleProminent,  // 显示背景，常用在my Mail, Messages and Contacts
    UISearchBarStyleMinimal     // 不显示背景，系统自带的背景色无效，自定义的有效，常用在Calendar, Notes and Music
}

效果图：

UISearchBarStyleMinimal 不显示背景

UISearchBarStyleDefault 和 UISearchBarStyleProminent 都显示背景

1.6 搜索栏的附件选择按钮视图

属性

// 选择按钮试图的按钮标题    
@property(nullable, nonatomic,copy) NSArray<NSString *> *scopeButtonTitles ; 
// 选中的按钮下标值 ，默认 0. 如果超出范围则忽略
@property(nonatomic) NSInteger  selectedScopeButtonIndex ; 
// 是否显示搜索栏的附件选择按钮视图
@property(nonatomic) BOOL showsScopeBar;

测试代码

    self.placeholder = @"搜索";
    self.showsScopeBar = YES;
    self.scopeButtonTitles = @[@"One", @"Two", @"Three"];
    self.selectedScopeButtonIndex = 1;

效果图：

带选择按钮视图的搜索栏

1.7 搜索框背景图片、搜索框附属分栏条的背景颜色

属性

// 搜索框背景图片
@property(nullable, nonatomic,strong) UIImage *backgroundImage;
// 搜索框附属分栏条的背景颜色
@property(nullable, nonatomic,strong) UIImage *scopeBarBackgroundImage;

测试代码

    //设置搜索框背景图片
    UIImage *backgroundImage = [UIImage imageNamed:@"image001"];
    self.backgroundImage = backgroundImage;

    //搜索框附属分栏条的背景颜色
    UIImage *scopeBarBackgroundImage = [UIImage imageNamed:@"image002"];
    self.scopeBarBackgroundImage = scopeBarBackgroundImage;

效果图：

设置backgroundImage 和 scopeBarBackgroundImage

1.8 索框中文本框的背景偏移量和文本偏移量

属性

// 搜索框中文本框的背景偏移量
@property(nonatomic) UIOffset searchFieldBackgroundPositionAdjustment;
// 搜索框中文本框的文本偏移量
@property(nonatomic) UIOffset searchTextPositionAdjustment;

测试代码

    self.searchFieldBackgroundPositionAdjustment = UIOffsetMake(5, 3);
    self.searchTextPositionAdjustment =  UIOffsetMake(10, 5);

效果图：

设置偏移量前后对比图

PS: UITextInputAssistantItem inputAssistantItem 、BOOL translucent 、UIView inputAccessoryView 经过测试这三个属性并不太清楚具体实现效果，之后会继续深入了解一下，记在这里，作为提醒，如果有谁刚好了解它们，希望能够给与帮助，非常感谢。

2. UISearchBar 的方法

2.1 设置是否动画效果的显示或隐藏取消按钮

方法：

// 设置是否动画效果的显示或隐藏取消按钮
 - (void)setShowsCancelButton:(BOOL)showsCancelButton animated:(BOOL)animated

通常在开始编辑文本时将调用该方法，让取消按钮显示出来。

测试代码：

-(void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
    NSLog(@"开始输入搜索内容");
    [searchBar setShowsCancelButton:YES animated:YES]; // 动画显示取消按钮
}

效果图：

setShowsCancelButton: animated:

2.2 设置 (获取) 搜索框背景图片、选择按钮视图的背景图片、文本框的背景图片

方法：

// 1.设置搜索框背景图片
- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics 
//  获取置搜索框背景图片
- (nullable UIImage *)backgroundImageForBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics 

// 2.设置选择按钮视图的背景图片
- (void)setScopeBarButtonBackgroundImage:(nullable UIImage *)backgroundImage forState:(UIControlState)state 
// 获取选择按钮视图的背景图片
- (nullable UIImage *)scopeBarButtonBackgroundImageForState:(UIControlState)state  

// 3.设置搜索框文本框的背景图片
- (void)setSearchFieldBackgroundImage:(nullable UIImage *)backgroundImage forState:(UIControlState)state 
// 获取搜索框文本框的背景图片
- (nullable UIImage *)searchFieldBackgroundImageForState:(UIControlState)state

测试代码：

    self.showsScopeBar = YES;
    self.scopeButtonTitles = @[@"One", @"Two", @"Three"];
    self.selectedScopeButtonIndex = 1;
    // 设置搜索框背景图片
    [self setBackgroundImage:[UIImage imageNamed:@"image001"] forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];
    // 设置选择按钮视图的背景图片
    [self setScopeBarButtonBackgroundImage:[UIImage imageNamed:@"image002"] forState:UIControlStateNormal];
    // 设置搜索框文本框的背景图片
    [self setSearchFieldBackgroundImage:[UIImage imageNamed:@"image003"] forState:UIControlStateNormal];

效果图：

设置搜索框背景图片、选择按钮视图的背景图片、文本框的背景图片

我们可以观察一下选择按钮视图的背景图片，发现这个图片只是设置在三个按钮的底部视图，而大的外面的空余背景依旧是灰色，对比1.7中使用属性UIImage *scopeBarBackgroundImage 设置的背景图片，发现使用属性设置背景图片不会有空余的灰色背景,该属性针对的是大的scopeBar, 而不是一个scopeBarButton，这一点需要注意区分。

2.3 设置（获取）搜索框的图标（包括搜索图标、清除输入的文字的图标、图书图标、搜索结果列表图标）

属性

// 设置搜索框的图标
- (void)setImage:(nullable UIImage *)iconImage forSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state;
// 获取搜索框的图标
- (nullable UIImage *)imageForSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state;

搜索框图标 UISearchBarIcon 有四个枚举值：

typedef NS_ENUM(NSInteger, UISearchBarIcon) {
    UISearchBarIconSearch, // 搜索框放大镜图标
    UISearchBarIconClear , // 搜索框右侧可用于清除输入的文字的图标x
    UISearchBarIconBookmark , // 搜索框右侧的图书图标
    UISearchBarIconResultsList , // 搜索框右侧的搜索结果列表图标
};

测试代码

  self.placeholder = @"搜索";
  self.showsSearchResultsButton = YES;
  // 设置搜索框放大镜图标
  UIImage *searchIcon = [UIImage imageNamed:@"searchIcon"];
  [self setImage:searchIcon forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];

  // 设置搜索结果列表图标
  UIImage *resultListIcon = [UIImage imageNamed:@"arrow"];
  [self setImage:resultListIcon forSearchBarIcon:UISearchBarIconResultsList state:UIControlStateNormal];

效果图

重新设置搜索框搜索图标和显示结果列表的图标

可以发现搜索图标和搜索结果列表图标已经改变，至于其他的两个图标仿照上面代码修改即可实现。

2.4 设置（获取）选择按钮视图的分割线图片、按钮上显示的标题样式

方法

// 设置选择按钮视图的分割线图片
- (void)setScopeBarButtonDividerImage:(nullable UIImage *)dividerImage forLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState;
// 获取选择按钮视图的分割线图片
- (nullable UIImage *)scopeBarButtonDividerImageForLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState;
// 设置选择按钮视图的标题样式
- (void)setScopeBarButtonTitleTextAttributes:(nullable NSDictionary<NSString *, id> *)attributes forState:(UIControlState)state;
// 获取选择按钮视图的标题样式
- (nullable NSDictionary<NSString *, id> *)scopeBarButtonTitleTextAttributesForState:(UIControlState)state

测试代码

   self.showsScopeBar = YES;
   self.scopeButtonTitles = @[@"One", @"Two", @"Three", @"Four"];
   // 设置选择按钮视图的分割线图片为一个橘色的线条
   [self setScopeBarButtonDividerImage:[UIImage imageNamed:@"divider"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal];

   // 设置选择按钮视图的标题样式为20号橘色空心的系统字体
   NSDictionary *attributeDic = @{NSFontAttributeName : [UIFont systemFontOfSize:20] , NSStrokeColorAttributeName : [UIColor orangeColor] , NSStrokeWidthAttributeName : @(3)};
   [self setScopeBarButtonTitleTextAttributes:attributeDic forState:UIControlStateNormal];

效果图

设置选择按钮视图的分割线图片和按钮上显示的标题样式的效果图

2.5 设置（获取）搜索框四种图标的偏移量

（评论里的小伙伴说不管怎样运行搜索图标总是在左边，测试后发现在iOS11系统上搜索图标默认在左边，而我当时写文章时没有升级模拟器为iOS11，所以非常感谢她的评论，不然自己也没注意到。总之就是如果想要更改搜索图标的位置，可以使用这个方法哦，亲测有效）

方法

//  设置搜索框图标的偏移量
- (void)setPositionAdjustment:(UIOffset)adjustment forSearchBarIcon:(UISearchBarIcon)icon;
//  获取搜索框图标的偏移量
- (UIOffset)positionAdjustmentForSearchBarIcon:(UISearchBarIcon)icon;

测试代码

    self.placeholder = @"搜索";
    [self setPositionAdjustment:UIOffsetMake(15, 5) forSearchBarIcon:UISearchBarIconSearch];

效果图

设置搜索图标向有偏移15个单位，向下偏移5个单位后的效果图

2.6 UISearchBarDelegate代理方法

方法

// 1. 将要开始编辑文本时会调用该方法，返回 NO 将不会变成第一响应者
- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar;                      
// 2. 开始输入文本会调用该方法
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar;                     
// 3. 将要结束编辑文本时会调用该方法，返回 NO 将不会释放第一响应者
- (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar; 
 // 4. 结束编辑文本时调用该方法
- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar;     
// 5. 文本改变会调用该方法（包含clear文本）
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText; 
// 6. 文字改变前会调用该方法，返回NO则不能加入新的编辑文字
- (BOOL)searchBar:(UISearchBar *)searchBar shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text ;

// 7. 键盘上的搜索按钮点击的会调用该方法
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar;     
// 8. 搜索框右侧图书按钮点击会调用该方法
- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar ;
 // 9.点击取消按钮会调用该方法
- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar;   
// 10.搜索结果列表按钮被按下会调用该方法
- (void)searchBarResultsListButtonClicked:(UISearchBar *)searchBar ; 
// 11. 搜索框的附属按钮视图中切换按钮会调用该方法
- (void)searchBar:(UISearchBar *)searchBar selectedScopeButtonIndexDidChange:(NSInteger)selectedScope;

测试代码

- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar {
    return YES;
}

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
    searchBar.prompt = @"1.开始编辑文本";
    [searchBar setShowsCancelButton:YES animated:YES]; // 动画效果显示取消按钮
}

- (BOOL)searchBar:(UISearchBar *)searchBar shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text {
    return YES;
}

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {
    searchBar.prompt = @"2.在改变文本过程中。。。";
}

- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
    searchBar.prompt = @"3. 点击键盘上的搜索按钮";
}

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
    searchBar.prompt = @"4. 点击取消按钮";
    searchBar.text = @"";
    [self setShowsCancelButton:NO animated:YES];
    // 如果希望在点击取消按钮调用结束编辑方法需要让加上这句代码
    //[searchBar resignFirstResponder];
}

- (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar{
    return YES;
}

- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar {
     searchBar.prompt = @"5.已经结束编辑文本";
}

效果图
点击取消按钮但没有释放搜索框的第一响应者身份效果图：

gif1

点击取消按钮用时释放搜索框的第一响应者身份会调用结束编辑文本的方法：

gif2

3. 自定义 UISearchBar 的样式

在自定义UISearchBar 样式之前我们先来看一下UISearchBar的组成：

UISearchBar层次结构截图

根据这个截图我们可以概括为下图：

简单概括的UISearchBar层次结构

根据这个简单的层次结构图，我们可以更好的了解UISearchBar的组成部分，这样有助于我们更方便的进行自定义样式，下面开始自定义样式！

目标搜索框样式

首先看一下目标样式

目标搜索框样式.gif

实现代码

代码中添加约束和自定义颜色可参考之前写的两篇文章：约束和自定义颜色

// 委托
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
    [searchBar setShowsCancelButton:YES animated:YES];
}

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
    searchBar.text = @"";
    [self setShowsCancelButton:NO animated:YES];
    [searchBar resignFirstResponder];
}

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {
    self.voiceButton.hidden = searchText.length > 0 ? YES : NO;
}

- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar {
    self.voiceButton.hidden = NO;
}

// 样式设计
- (void)modifyStyleByTraversal {
    // 修改搜索框背景图片为自定义的灰色
    UIColor *backgroundImageColor = [UIColor colorwithHex:0xE3DFDA];
    UIImage* clearImg = [self imageWithColor:backgroundImageColor andHeight:45.0];
    self.backgroundImage = clearImg;
    // 修改搜索框光标颜色
    self.tintColor = [UIColor P2Color];
    // 修改搜索框的搜索图标
    [self setImage:[UIImage imageNamed:@"searchIcon"] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];

    for (UIView *view in self.subviews.lastObject.subviews) {
        if([view isKindOfClass:NSClassFromString(@"UISearchBarTextField")]) {
            UITextField *textField = (UITextField *)view;
           //添加话筒按钮
            [self addVoiceButton:textField];
            //设置输入框的背景颜色
            textField.clipsToBounds = YES;
            textField.backgroundColor = [UIColor P1Color];

            //设置输入框边框的圆角以及颜色
            textField.layer.cornerRadius = 10.0f;
            textField.layer.borderColor = [UIColor P2Color].CGColor;
            textField.layer.borderWidth = 1;

            //设置输入字体颜色
            textField.textColor = [UIColor P2Color];

            //设置默认文字颜色
            textField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:@" 搜索" attributes:@{NSForegroundColorAttributeName:[UIColor P2Color]}];
        }

        if ([view isKindOfClass:NSClassFromString(@"UINavigationButton")]) {
            UIButton *cancel = (UIButton *)view;
            [cancel setTitle:@"取消" forState:UIControlStateNormal];
            [cancel setTitleColor:[UIColor P2Color] forState:UIControlStateNormal];
        }
    }
}

// 画指定高度和颜色的图片
- (UIImage*) imageWithColor:(UIColor*)color andHeight:(CGFloat)height {
    CGRect rect = CGRectMake(0.0, 0.0, 1.0, height);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

// 添加话筒按钮
- (void)addVoiceButton:(UIView *)view {
    if (!self.voiceButton) {
        self.voiceButton = [UIButton buttonWithType:UIButtonTypeCustom];
    }

    [self.voiceButton setImage:[UIImage imageNamed:@"voice"] forState:UIControlStateNormal];
    [self.voiceButton addTarget:self action:@selector(say) forControlEvents:UIControlEventTouchUpInside];
    [view addSubview:self.voiceButton];
    self.voiceButton.translatesAutoresizingMaskIntoConstraints = NO;
    [self.voiceButton addWidthConstraint:15];
    [self.voiceButton addHeightConstraint:15];
    [self.voiceButton addTopConstraintToView:view constant:8];
    [self.voiceButton addTrailingConstraintToView:view constant:- 15];
}

// 点击话筒触发该方法
- (void)say {
  //  self.prompt = @"在讲话哦！";
}

补充：修改UISearchBar宽高

UISearchBar 有默认的布局样式，我们想要修改他的宽高，需要重写layoutSubviews 方法。然后在这个方法里面修改UISearchBarTextField的宽高。

实现代码

- (void)layoutSubviews {
    [super layoutSubviews];
    UITextField *textField = [self valueForKey:@"searchBarTextField"];

    if (textField) {
        textField.frame = CGRectMake(50, 10, self.bounds.size.width - 100, 35);
    }
}

效果图：

自定义搜索框的宽高

关注我的微信公众号：“豆沙包小姐”！一个喜欢阅读，喜欢写字的女孩子，希望我的文字你能喜欢！谢谢你那么好看还能看我的文章到末尾处，祝陌生的你一切都好！

最后编辑于：2019.07.24 13:57:25

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,425评论 4赞 361
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,058评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,186评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,848评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,249评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,554评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,830评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,536评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,239评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,505评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,004评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,346评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,999评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,060评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,821评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,574评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,480评论 2赞 267

iOS--UISearchBar 属性、方法详解及应用（自定义搜索框样式）

本文主要介绍内容分为以下三个部分：

1. UISearchBar 的属性

2. UISearchBar 的方法

3. 自定义 UISearchBar 的样式

1. UISearchBar 的属性

1.1 搜索框风格

1.2 搜索的文本、搜索框顶部的提示信息、占位符

1.3 搜索框右侧的按钮

1.4 风格颜色、背景颜色

1.5 搜索框样式

1.6 搜索栏的附件选择按钮视图

1.7 搜索框背景图片、搜索框附属分栏条的背景颜色

1.8 索框中文本框的背景偏移量和文本偏移量

2. UISearchBar 的方法

2.1 设置是否动画效果的显示或隐藏取消按钮

2.2 设置 (获取) 搜索框背景图片、选择按钮视图的背景图片、文本框的背景图片

2.3 设置（获取）搜索框的图标（包括搜索图标、清除输入的文字的图标、图书图标、搜索结果列表图标）

2.4 设置（获取）选择按钮视图的分割线图片、按钮上显示的标题样式

2.5 设置（获取）搜索框四种图标的偏移量

2.6 UISearchBarDelegate代理方法

3. 自定义 UISearchBar 的样式

目标搜索框样式

实现代码

补充：修改UISearchBar宽高

实现代码

关注我的微信公众号：“豆沙包小姐”！一个喜欢阅读，喜欢写字的女孩子，希望我的文字你能喜欢！谢谢你那么好看还能看我的文章到末尾处，祝陌生的你一切都好！

推荐阅读更多精彩内容