UISearchBar设置技巧(输入框，取消按钮等背景设置)

最新推荐文章于 2017-10-19 15:58:50 发布

陨落星辰-光

最新推荐文章于 2017-10-19 15:58:50 发布

阅读量1.5k

点赞数

分类专栏：原创 UI设置技巧文章标签： uisearchbar 输入框背景文字颜色光标颜色

本文链接：https://blog.csdn.net/guangguang03/article/details/76461553

版权

原创同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

UI设置技巧

4 篇文章 0 订阅

订阅专栏

1. 设置光标和输入框的颜色

    self.searchBar.tintColor = [UIColor blueColor];

    [self.mySearchBar setSearchFieldBackgroundImage:[UIImage imageNamed:@"searchBarFieldBackground"] forState:UIControlStateNormal];

2. 修改placeHolder的文字颜色

for (UIView* subview in [[searchBar.subviews lastObject] subviews]) {

        if ([subview isKindOfClass:[UITextField class]]) {
            UITextField *textField = (UITextField*)subview;
            //修改输入字体的颜色
            textField.textColor = [UIColor redColor];              
            //修改输入框的颜色
            [textField setBackgroundColor:[UIColor grayColor]];      
            //修改placeholder的颜色
            [textField setValue:[UIColor whiteColor] forKeyPath:@"_placeholderLabel.textColor"];   
        } else if ([subview isKindOfClass:NSClassFromString(@"UISearchBarBackground")])
        {
            [subview removeFromSuperview];
        }
    }

3. 修改UISearchBar的取消按钮背景、搜索内容输入文本框背景和UISearchBar的背景

（1）、添加UISearchBar到父View

UISearchBar *searchBar = [[UISearchBar alloc]init];
searchBar.frame = CGRectMake(0, 0, self.view.frame.size.width, 44);
searchBar.autoresizingMask = UIViewAutoresizingFlexibleWidth;
searchBar.delegate = self;
searchBar.placeholder = @"请输入搜索内容";
[self.view addSubview:searchBar];

（2）、修改搜索框背景

UIImage *img = [UIImage resizedImage:@"find_bg.png"];
[_searchBar setBackgroundImage:img];

(3)、修改搜索输入框内左侧的指示图标

[_searchBar setImage:[UIImage resizedImage:@"ic_search.png"] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];

(4)、修改搜索输入文本的背景

[_searchBar setSearchFieldBackgroundImage:[UIImage imageNamed:@"login_btn_input_side.png"] forState:UIControlStateNormal];

注：对于设计人员提供的搜索输入文本的背景，若提供的是一个圆角的小方块，按常理我们会使用拉伸图片的中间部分的方法，经测试显示效果如下：
若让设计人员重新提供一张固定高度的图片（比如高是60），当做搜索输入文本的背景，效果图如下：

(5)、修改UISearchBar右侧的取消按钮文字颜色及背景图片

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

    // 修改UISearchBar右侧的取消按钮文字颜色及背景图片
    for (UIView *searchbuttons in [searchBar subviews]){
        if ([searchbuttons isKindOfClass:[UIButton class]]) {
            UIButton *cancelButton = (UIButton*)searchbuttons;
            // 修改文字颜色
            [cancelButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
            [cancelButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];

            // 修改按钮背景
            [cancelButton setBackgroundImage:[UIImage resizedImage:@"login_btn_login.png"] forState:UIControlStateNormal];
            [cancelButton setBackgroundImage:nil forState:UIControlStateHighlighted];
        }
    }
}
注：修改取消按钮文字颜色及背景图片的代码片段，一定要放到取消按钮会显示代理方法中修改，否则遍历找不着呀，那就修改不了了。

4. 将UISearchBar放入导航栏的方法：

(1).通过navigationItem.titleView

    UISearchBar *searchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(5.0f,20.0f,WCScreenW -10.0f,44.0f)];
    searchBar.delegate = self;
    [searchBar setPlaceholder:@"搜索"];

    //将搜索条放在一个UIView上
    UIView *searchView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, WCScreenW, 64)];
    searchView.backgroundColor = [UIColor clearColor];
    [searchView addSubview:searchBar];

    self.navigationItem.titleView = searchView;

(2).自己再添加一个NavigationBar

self.navigationController.navigationBar.hidden = YES;
    UINavigationBar *navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0,      self.view.bounds.size.width, 64)] ;
    navigationBar.barTintColor = [LYCCUISetting getInstance].colorTopView;
    [self.view addSubview:navigationBar];
    [navigationBar addSubview:self.searchBar];