自定义searchBar外观

最近,在项目过程中遇到要自定义SearchBar的外观,虽然自己觉得用系统默认的外观就行了,不过UI设计师要求不用系统的默认样式,要跟app主题保持一致。

图1:设计效果图

从上图可以看出,我们要做的UISearchBar要有圆角,边框颜色,取消按钮颜色,背景透明等等。

开始以为可能要自己写一个自定义的UISearchBar控件了,后面研究了一番,发现可以设定系统UISearchBar属性来更改,便把经验记录下来。

首先,我们看下系统默认的SearchBar的样式,离我们的目标样式确实相差很大, 后面我会一步一步详细说明做成我们的目标样式。

图2:UISearchBar默认样式

1. 设置背景色

我以白色的背景色为例,下面看看代码:

//1. 设置背景颜色
    //设置背景图是为了去掉上下黑线
    self.customSearchBar.backgroundImage = [[UIImage alloc] init];
    // 设置SearchBar的颜色主题为白色
    self.customSearchBar.barTintColor = [UIColor whiteColor];

图3:设置SearchBar背景色为白色

2. 设置边框颜色和圆角

//2. 设置圆角和边框颜色
    UITextField *searchField = [self.customSearchBar valueForKey:@"searchField"];
    if (searchField) {
        [searchField setBackgroundColor:[UIColor whiteColor]];
        searchField.layer.cornerRadius = 14.0f;
        searchField.layer.borderColor = [UIColor colorWithRed:247/255.0 green:75/255.0 blue:31/255.0 alpha:1].CGColor;
        searchField.layer.borderWidth = 1;
        searchField.layer.masksToBounds = YES;
    }

这段代码有个特别的地方就是通过KVC获得到UISearchBar的私有变量
searchField(类型为UITextField),设置SearchBar的边框颜色和圆角实际上也就变成了设置searchField的边框颜色和圆角,你可以试试直接设置SearchBar.layer.borderColor和cornerRadius,会发现这样做是有问题的。

图4:设置边框颜色和圆角

嗯,离预期效果越来越近了,有木有!

3. 设置按钮(取消按钮)的文字和文字颜色

//3. 设置按钮文字和颜色
    [self.customSearchBar fm_setCancelButtonTitle:@"取消"];
    self.customSearchBar.tintColor = [UIColor colorWithRed:86/255.0 green:179/255.0 blue:11/255.0 alpha:1];
    //修正光标颜色
    [searchField setTintColor:[UIColor blackColor]];

//其中fm_setCancelButtonTitle是我写的UISearchBar一个分类的方法
- (void)fm_setCancelButtonTitle:(NSString *)title {
    if (IS_IOS9) {
        [[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:title];
    }else {
        [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTitle:title];
    }
}

图5:设置按钮文字和颜色

需要特别注意的是设置searchBar的tintColor会使输入框的光标颜色改变,可以通过设置searchField的tintColor来修正。

4. 设置输入框的文字颜色和字体

//4. 设置输入框文字颜色和字体
    [self.customSearchBar fm_setTextColor:[UIColor blackColor]];
    [self.customSearchBar fm_setTextFont:[UIFont systemFontOfSize:14]];

//下面两个方法是UISearchBar分类代码
- (void)fm_setTextColor:(UIColor *)textColor {
    if (IS_IOS9) {
        [UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]].textColor = textColor;
    }else {
        [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setTextColor:textColor];
    }
}

- (void)fm_setCancelButtonTitle:(NSString *)title {
    if (IS_IOS9) {
        [[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:title];
    }else {
        [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTitle:title];
    }
}

图6:最终对比效果图

5. 如何设置搜索图标

下面评论中有简友问我怎么更改默认的搜索图标,我查了下UISearchBar的API,发现有方法可以更改的。

//5. 设置搜索Icon
    [self.customSearchBar setImage:[UIImage imageNamed:@"Search_Icon"]
                  forSearchBarIcon:UISearchBarIconSearch
                             state:UIControlStateNormal];

为了跟系统默认Icon的有个明显的对比,我特殊找了张绿色的搜索Icon,效果见下图:

设置搜索Icon.png

Tips: 还可以设置其他的Icon(如清除按钮图标),也是用上面的方法,具体要设置什么,可以去看看UISearchBarIcon这个枚举。

最后,介绍下QQ的搜索样式的实现

图7:类似QQ搜索框样式

很简单,在storyboard中设置searchBar的Bar Style为Minimal,或者用代码设置 :

//设置类似QQ搜索框
    self.minimalSearchBar.searchBarStyle = UISearchBarStyleMinimal;

完整代码在这里

文/落羽生(简书作者)
原文链接:http://www.jianshu.com/p/66b5b777f5dc
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

时间: 08-05

自定义searchBar外观的相关文章

自定义UISearchBar外观

本文转载至 http://www.jianshu.com/p/66b5b777f5dc 最近,在项目过程中遇到要自定义SearchBar的外观,虽然自己觉得用系统默认的外观就行了,不过UI设计师要求不用系统的默认样式,要跟app主题保持 一致. 图1:设计效果图 从上图可以看出,我们要做的UISearchBar要有圆角,边框颜色,取消按钮颜色,背景透明等等. 开始以为可能要自己写一个自定义的UISearchBar控件了,后面研究了一番,发现可以设定系统UISearchBar属性来更改,便把经验记

自定义searchbar,修改背景色

1.自定义searchBar: (1).h: #import <UIKit/UIKit.h> @interface EMSearchBar : UISearchBar /** * 自定义控件自带的取消按钮的文字(默认为“取消”/“Cancel”) * * @param title 自定义文字 */ - (void)setCancelButtonTitle:(NSString *)title; @end (2).m: #import "EMSearchBar.h" @impl

从头自定义SearchBar和SearchDisplayController

自定义UISearchBar和UISearchDisplayController 自定义UISearchBar和UISearchDisplayController 起因 步骤 效果图 主要实现 实现CustomSearchTextField控件 layoutSubViews代码 layoutSubviews代码说明 实现CustomSearchBar相关组件 CustomSearchBar主要组成控件 layoutSubviews代码说明 实现CustomSearchDisplayControl

iOS开发之自定义SearchBar导航条右侧显示放大镜

ios中导航条SearchBar控件虽然说很好用,但是有的时候控件的样式不能达到我们的需要,比如我们需要导航条的右侧有个放大镜,系统提供的控件没有这样的,这就需要我们自定义一个这样的searchBar了. 1,因为searchBar控件输入的时候和textField想似,所以我们自定义的控件继承与textField,起名字为searchView 我们可以看一下searchView.h里面的内容 1 #import <UIKit/UIKit.h> 2 3 @interface searchVie

新浪微博客户端(5)-自定义UISearchBar

iOS自带的UISearchBar有很多限制,我们可以使用UITextField做出一个类似于SearchBar的效果. //================================================= // 自定义SearchBar //================================================= // 1.创建一个UITextField作为背景 UITextField *searchBar = [[UITextField alloc

自定义工作流

WWF提供了对原有活动进行扩展以及自定义新活动的功能,用户可以通过"Workflow Activity Library"创建和开发自定义活动. 一.自定义活动类型 默认情况下,创建的自定义活动是继承"System.Workflow.Activities.SequenceActivity"父类的.该类型自定义活动的外观是由一个Sequence顺序类型的容器构成的,用户可以在Sequence活动内添加其他子活动. 代码如下: namespace ActivityLibr

自定义Dialog的详细步骤

自定义Dialog的详细步骤(实现自定义样式一般原理) 现在很多App的提示对话框都非常有个性,然而你还用系统的对话框样式,是不是觉得很落后呢,今天我就给大家讲讲怎样自定义自己的Dialog,学会了之后,你就会根据自家app的主题,设计出相应的Dialog的风格. 好了接下来我就以一个简单风格的自定义Dialog来讲讲自定义dialog的一般步骤和原理. 第一步: 给Dialog设置一个风格主题(基本都是用这个主题)无边框全透明背景: [html] view plain copy <!--自定义

自定义Dialog的详细步骤(实现自定义样式一般原理)

现在很多App的提示对话框都非常有个性,然而你还用系统的对话框样式,是不是觉得很落后呢,今天我就给大家讲讲怎样自定义自己的Dialog,学会了之后,你就会根据自家app的主题,设计出相应的Dialog的风格. 好了接下来我就以一个简单风格的自定义Dialog来讲讲自定义dialog的一般步骤和原理. 第一步: 给Dialog设置一个风格主题(基本都是用这个主题)无边框全透明背景: [html] view plain copy <!--自定义dialog背景全透明无边框theme --> <

自己总结的 iOS ,Mac 开源项目以及库,知识点------持续更新

自己在 git  上看到一个非常好的总结的东西,但是呢, fork  了几次,就是 fork  不到我的 git 上,干脆复制进去,但是,也是认真去每一个每一个去认真看了,并且也是补充了一些,感觉非常棒,所以好东西要分享,为啥用 CN 博客,有个好处,可以随时修改,可以持续更新,不用每次都要再发表,感觉这样棒棒的 我们 自己总结的iOS.mac开源项目及库,持续更新.... github排名 https://github.com/trending,github搜索:https://github.