自定义UISearchBar外观
本文转载至 http://www.jianshu.com/p/66b5b777f5dc
最近,在项目过程中遇到要自定义SearchBar的外观,虽然自己觉得用系统默认的外观就行了,不过UI设计师要求不用系统的默认样式,要跟app主题保持
一致。
从上图可以看出,我们要做的UISearchBar要有圆角,边框颜色,取消按钮颜色,背景透明等等。
开始以为可能要自己写一个自定义的UISearchBar控件了,后面研究了一番,发现可以设定系统UISearchBar属性来更改,便把经验记录下来。
首先,我们看下系统默认的SearchBar的样式,离我们的目标样式确实相差很大, 后面我会一步一步详细说明做成我们的目标样式。
1. 设置背景色
我以白色的背景色为例,下面看看代码:
//1. 设置背景颜色//设置背景图是为了去掉上下黑线self.customSearchBar.backgroundImage = [[UIImage alloc] init]; // 设置SearchBar的颜色主题为白色 self.customSearchBar.barTintColor = [UIColor whiteColor];
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,会发现这样做是有问题的。
嗯,离预期效果越来越近了,有木有!
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]; } }
需要特别注意的是设置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]; } }
5. 如何设置搜索图标
下面评论中有简友问我怎么更改默认的搜索图标,我查了下UISearchBar的API,发现有方法可以更改的。
//5. 设置搜索Icon[self.customSearchBar setImage:[UIImage imageNamed:@"Search_Icon"] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];
为了跟系统默认Icon的有个明显的对比,我特殊找了张绿色的搜索Icon,效果见下图:
Tips: 还可以设置其他的Icon(如清除按钮图标),也是用上面的方法,具体要设置什么,可以去看看UISearchBarIcon这个枚举。
最后,介绍下QQ的搜索样式的实现
很简单,在storyboard中设置searchBar的Bar Style为Minimal,或者用代码设置 :
//设置类似QQ搜索框self.minimalSearchBar.searchBarStyle = UISearchBarStyleMinimal;
完整代码在这里。
自定义UISearchBar外观相关推荐
- 【动画技巧】在Flash中自定义鼠标外观
在Flash中实现自定义鼠标外观非常简单,可以直接通过一个MovieClip就实现了,新建一个Flash程序,然后添加一个影片剪辑原件,如下图示. 在这个新建的Flash元件里,可以通过绘图工具绘制或 ...
- 自定义角色外观之捏脸
"捏脸"和"换装"在游戏中一般用来实现自定义角色外观的功能,今天先来说说"捏脸","换装"放在下一篇博文中介绍.所谓捏脸 ...
- Creo/ProE自定义零件外观库保存使用
来源 零件设计完,同一个颜色不方便看,而且论文中野需要考虑使用不同颜色进行说明.在此,想实现自定义外观库并且保存起来,每次都能自动加载. 方法 视图 -> 外观 -> 外观管理器, 进行新 ...
- 自定义UISearchBar的背景图
可以重写UISearchBar,然后调用layoutSubviews这个方法. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 - (void)layoutSubv ...
- 自定义UISearchBar 适配IOS6和IOS7 修改放大镜图标 修改光标颜色 修改边框颜色 placeholder颜色 设置文本框背景
文章转自:http://blog.csdn.net/zhang_red/article/details/21447535 总结下常用的几点: 1.修改放大镜图标 [self setImage:[UII ...
- android自定义optionmenu,android - 自定义onOptionMenu外观 - 堆栈内存溢出
我试图使我的OnOptionMenu看起来像这样: 关于如何使其接近的任何想法? 编辑: 这是我所做的: android:id="@+id/item1" android:title ...
- iOS开发UI篇 -- UISearchBar 属性、方法详解及应用(自定义搜索框样式)
很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...
- chromebook刷机_如何在Chromebook上自定义外观设置
chromebook刷机 Chromebooks and Chrome OS have a full library of fun, funky themes that you can use to ...
- 修改UISearchBar背景
转载:http://blog.csdn.net/favormm/archive/2010/11/30/6045463.aspx UISearchBar是由两个subView组成的,一个是UISearc ...
最新文章
- Django 缓存6.2
- 智能手机相机测试中的功能测试和性能测试
- 马拦过河卒(NOIP2002)
- u盘魔术师装linux,使用U盘魔术师安装Win7系统教程
- VS2017中的附加到进程
- apollo持久化sentinel_Spring Cloud Alibaba基础教程:Sentinel使用Apollo存储规则
- 论文解读:ACL2021 NER | 基于模板的BART命名实体识别
- Vijos1755 靶形数独 Sudoku NOIP2009 提高组 T4 舞蹈链 DLX
- python底层原理讲解_python底层原理
- 基于python物流管理系统毕业设计-python实现快递价格查询系统
- 国内百家企业SRC一览表(安全应急响应中心)
- 学习关于 2D 和 3D 姿势估计的知识
- Csdn视频第二十期 : 测试工具与流程讨论
- axure 母版自定义触发事件的工作机制
- 移动MAS短信接口工具类
- 企业为什么要通过直播来做营销呢?
- 细数抖音电商的7问题
- 【C#】WPF实现经典纸牌游戏,适合新手入门
- 3D游戏编程与设计作业一
- ACR Loss: Adaptive Coordinate-based Regression Loss for Face Alignment