系统UISearchBar效果图:

需求效果图:

两种方案:

  • 找到UISearchBar上的放大镜图标, 修改Frame. 同时判断在有无文本内容更改placeholder的颜色.
  • 利用UISearchBar的Text有值后, 放大镜自动靠左特性, 让UISearchBar设置一个默认的Text, 在点击UISearchBar开始编辑后, 如果没有值,设置Text为则@"", 同时还要根据状态修改placeholderLabel的颜色.(太繁琐, 不推荐!)

实现代码:

  1. @interface ViewController () <UISearchBarDelegate>
  2.  
  3. /** xib搜索框 */
  4. @property (weak, nonatomic) IBOutlet UISearchBar *searchBar;
  5. /** 搜索图片(放大镜) */
  6. @property (nonatomic, weak) UIImageView *imgV;
  7. @end
  8. @implementation ViewController
  9.  
  10. - (void)viewDidAppear:(BOOL)animated
  11. {
  12. [super viewDidAppear:animated];
  13. // 查找放大镜图片ImageView
  14. for (UIImageView *imgV in _searchBar.subviews.firstObject.subviews.lastObject.subviews) {
  15. if ([imgV isMemberOfClass:[UIImageView class]]) {
  16. imgV.frame = CGRectMake(, 7.5, , );
  17. _imgV = imgV;
  18. [_imgV addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
  19. }
  20. }
  21. // 设置searchBar文本颜色
  22. [self updateSeachBar];
  23. }
  24. - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context
  25. {
  26. // 修改放大镜Frame前, 移除观察者
  27. [_imgV removeObserver:self forKeyPath:@"frame"];
  28. // 修改Frame
  29. _imgV.frame = CGRectMake(, 7.5, , );
  30. // 再次添加观察者
  31. [_imgV addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
  32. }
  33. #pragma mark -UISearchBarDelegate代理方法
  34. - (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar
  35. {
  36. if ([searchBar.text isEqualToString:searchBar.placeholder]) {
  37. // 无文本时, 显示placeholder
  38. searchBar.text = @"";
  39. }
  40. // 获取到UISearchBar中UITextField
  41. UITextField *searchField = [searchBar valueForKey:@"_searchField"];
  42. // 开始编辑要修改textColor颜色
  43. searchField.textColor = [UIColor blackColor];
  44. searchField.clearButtonMode = UITextFieldViewModeWhileEditing;
  45. }
  46. - (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar
  47. {
  48. [self updateSeachBar];
  49. }
  50. #pragma mark -根据文本内容设置searchBar颜色及clearButtonMode
  51. - (void)updateSeachBar
  52. {
  53. if ([_searchBar.text isEqualToString:@""]) {// 文本内容为空时
  54. UITextField *searchField = [_searchBar valueForKey:@"_searchField"];
  55. // 修改textColor为placeholderColor
  56. searchField.textColor = [searchField valueForKeyPath:@"_placeholderLabel.textColor"];
  57. searchField.text = searchField.placeholder;
  58. // 去除右侧clearButton
  59. searchField.clearButtonMode = UITextFieldViewModeNever;
  60. }
  61. }
  62. - (void)dealloc
  63. {
  64. // 移除观察者
  65. [_searchBar removeObserver:self forKeyPath:@"frame"];
  66. }

iOS之让UISearchBar搜索图标和placeholder靠左显示的更多相关文章

  1. ios UISearchBar搜索框的基本使用

    摘要: 小巧简洁的原生搜索框,漂亮而易用,如果我们的应用没有特殊需求,都可以使用它. iOS中UISearchBar(搜索框)使用总结 初始化:UISearchBar继承于UIView,我们可以像创建 ...

  2. iOS开发-搜索栏UISearchBar和UISearchController

    iOS中UISearchDisplayController用于搜索,搜索栏的重要性我们就不说了,狼厂就是靠搜索起家的,现在越来越像一匹没有节操的狼,UC浏览器搜索栏现在默认自家的神马搜索,现在不管是社 ...

  3. iOS开发之UISearchBar初探

    iOS开发之UISearchBar初探 UISearchBar也是iOS开发常用控件之一,点进去看看里面的属性barStyle.text.placeholder等等.但是这些属性显然不足矣满足我们的开 ...

  4. [转] iOS开发-搜索栏UISearchBar和UISearchController

    原文网址: http://www.cnblogs.com/xiaofeixiang/p/4273620.html?utm_source=tuicool iOS中UISearchDisplayContr ...

  5. iOS 如何自定义UISearchBar 中textField的高度

    iOS 如何自定义UISearchBar 中textField的高度 只需设置下边的方法就可以 [_searchBar setSearchFieldBackgroundImage:[UIImage i ...

  6. input中加入搜索图标

    刚吃了一份宫保鸡丁刀削面,幸福感满满,写篇博客消耗一下热量. 今天工作遇到的一个问题是在input输入框中加入图标,当输入内容后,图标和提示语一起隐藏,类似于placeholder的功能.如淘宝页面, ...

  7. MUI - H5实现ios长按图标后进入图标排序及删除功能的效果

    html5实现ios长按图标后进入图标排序及删除功能的效果 我们知道在ios(国产定制安卓系统基本都有)设备上按下图标,图标就会不停的抖动,并且可以随心拖动排序和删除. 那么问题来了,我们怎么通过ht ...

  8. ico图标在谷歌浏览器中如何显示?

    http://www.zen-cart.cn/forum/topic266117.html 版主: shaning 发表回复 2 篇帖子 • 分页: 1 / 1  ico图标在谷歌浏览器中如何显示? ...

  9. 关键字搜索:jQuery过滤器插件fastLiveFilter||显示结果条数

    引用js库 <script src="jquery-1.6.4.min.js"></script> <script src="jquery. ...

随机推荐

  1. .NET源代码已经下载,潜心研读…

    有兴趣的弟兄可以从这里下载:http://referencesource.microsoft.com

  2. React Native常用组件样式总结

    在react 中,有时要使用 style 指定样式 ,如要跟随放大比例关系,展示图标. const stylebutton = {width:25*scalesize, height:25*scale ...

  3. Condition使用

    面试题:写一个固定容量同步容器,拥有put和get方法,以及getCount方法,    能够支持2个生产者线程以及10个消费者线程的阻塞调用 有两种方法 1.使用wait和notify/notify ...

  4. BadgeView使用

    BadgeView是第三方的插件,用来显示组件上面的标记,起到提醒的作用,下载地址如下:http://files.cnblogs.com/files/hyyweb/android-viewbadger ...

  5. Charles基础

    一.Charles 监控其他设备连接方式 1.XP系统:控制面板——>Internet选项——>连接(tab)——>局域网(LAN)设置——>局域网设置——>代理服务器, ...

  6. python汉字转拼音

    上代码: #!/usr/bin/env python # -*- coding:utf-8 -*- """ Author:cleverdeng E-mail:clverd ...

  7. shell_basic

    1.回顾基础命令 2.脚本 3.变量 4.别名 5.条件判断 6.test判断   一.回顾基础命令 shutdown --关机/重启 exit --退出当前shell rmdir --删除空目录 d ...

  8. leetCode Detect Capital

    1.问题描述 Given a word, you need to judge whether the usage of capitals in it is right or not. We defin ...

  9. Oracle EBS 验证应收是否等于加税

    --To validate whether a transaction's REC is equal to its REV plus TAX or not --验证应收是否等于收入加税 SELECT ...

  10. es知识点

    版权声明:本文为博主原创文章,未经博主允许不得转载.转载请务必加上原作者:铭毅天下,原文地址:blog.csdn.net/laoyang360 https://blog.csdn.net/wojius ...