UISearchBar修改输入框，取消按钮样式

最新推荐文章于 2023-12-14 19:17:38 发布
最新推荐文章于 2023-12-14 19:17:38 发布
阅读量2.5k 收藏
点赞数
分类专栏： UI界面 文章标签： ui ios SearchBar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyiyiSmile/article/details/48030649
版权
本文介绍了如何根据设计需求自定义UISearchBar的输入框背景颜色和取消按钮样式。在iOS7之后，UISearchBar的视图结构有所变化，需要深入研究其内部视图层次来实现定制。此外，还解决了UITextField占位符光标水平居中的问题。
摘要由CSDN通过智能技术生成

UISearchBar修改输入框，取消按钮样式

设计需求
槽点：系统的样式已经不能满足我们UI设计的优化了，我们会在开发的过程遇到到各种样式的需求，这个时候我们问的不是为什么这样设计，产品经理哪有时间给你讲每个设计的种种，逗比的我们去研究吧！

Mou icon

设计需求如上图，设置SearchBar在导航上，并设置输入框的背景颜色为白色，如果有输入框的白色背景图片可以直接通过设置SearchBar的属性完成即

[self.searchBar setSearchFieldBackgroundImage:[UIImage imageNamed:@"banner4"]forState:UIControlStateNormal]; 设置搜索框中文本框的背景图片，也可以设置高亮状态的图片

如果不提供需求要求的背景图片可以这样获取，这个我在网上查找了好多怎么修改SearchBar输入框的方法是这样的

UITextField *searchField;
NSUInteger numViews = [searchBar.subviews count];
for(int i = 0; i < numViews; i++) {  

  if([[searchBar.subviews objectAtIndex:i] isKindOfClass[UITextFiel
最低0.47元/天 解锁文章
smileLhj
关注
专栏目录
自定义UISearchBar背景、边框、左侧图标、删除图标、取消按钮
宁静致远
08-23 7569
self.searchBar = [[UISearchBar alloc] initWithFrame:[AdapterRect adapterRectByWidth:(CGRect){0, 0, 200, 30}]]; self.searchBar.placeholder = @"搜索商品分类 品牌"; self.searchBar.delegate = self; UI
修改系统UISearchBar搜索框的样式-搜索图片、背景颜色
timtian008的博客
12-15 6283
修改系统搜索框 //searchbar //设置背景图是为了去掉上下黑线 self.searchBar.backgroundImage = [[UIImage alloc] init]; // 设置SearchBar的颜色主题为白色 self.searchBar.barTintColor = [UIColor whiteColor]; self.searchB
UISeachBar去掉icon
嘎嘎的专栏
07-28 1166
UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(100, 0100, 200, 40)]; [searchBar setImage:[UIImage new] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNorma
如何更改UISearchBar取消的字体颜色
u011189158的专栏
09-26 1990
需要更改UISearchBar中“取消”文本的色值，但UISearchBar又没这属性，于是上网搜，，但网上全他大爷的都是一样的东东，不知道被拷贝粘贴多少次的，我也粘下吧：     _searchBar.showsCancelButton = YES;     for(UIView *subView in _searchBar.subviews){         if([subView i
uniapp 实现搜索使得搜索字体变颜色
m0_56276571的博客
04-25 2025
uniapp 实现搜索使得搜索字体变颜色
自定义UISearchBar的“取消按钮”
aolao6405的博客
08-03 124
需求: UISearchBar的取消按钮，没有公共方法可以修改它的属性。但我们仍可以通过遍历UISearchBar的子控件来设置该"取消按钮"。 效果: 将UISearchBar的取消按钮中的"取消"文字,更改为"搜索"。 代码如下: - (void)setSearchBar:(UISearchBar *)searchBar{ UISearchBar *searchB...
焦点问题 获取 失去 重新获取
yueloveme的博客
08-18 737
给大家推荐个靠谱的公众号程序员探索之路，大家一起加油 ​  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;zzhjs4.html&lt;/title&gt; &lt;meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&
iOS中修改UISearchBar圆角的小技巧分享
08-30
此外，利用类似的方法，我们还可以修改UISearchBar中的其他元素，比如取消按钮的颜色和字体等。只需要找到对应的子视图，然后进行相应的调整即可。 总结来说，虽然iOS原生的UISearchBar并没有提供直接修改圆角的API...
如何修改系统UISearchBar的样式
enethitall的博客
12-12 3098
自从接触iOS快一年多的时间了，感觉自己还是菜鸟一枚，最近在整理自己的开发过程中得点点滴滴，想通过博客的形式记录下来。本博客会陆续添加内容，鉴于本人水平有限，如有错误，请给与指正，感激不尽。         修改UISearchBar的样式，网上也有很多种，也都大同小异，本篇也不例外，但确实很实用，废话不多说，上代码：         1.UISearchBar带有背景颜色的
Android SearchView 自定义SearchIcon和字体颜色大小
weixin_30363509的博客
05-27 580
自定义SearchView的搜索图标和字体属性相对复杂一些，记下来。 一、自定义SearchIcon 1、API版本低于21：版本小于21时，要修改SearchIcon比较复杂，需要先获取到SearchView的ImageView，然后为ImageView设置图片，具体代码如下： (1)初始化SearchView控件 mSearch = (SearchView) view.findVi...
uniapp使用u-search以及相关api
最新发布
zzx262625的博客
12-14 2805
u-search是uni-app框架中的一款搜索组件，可以方便地实现搜索功能。下面简单介绍一下如何使用u-search以及相关API。以上是u-search组件的基本使用方法和API介绍，希望能对您有所帮助。
UISearchBar自定义取消按钮
u014656271的专栏
03-26 877
前些天工作需要做一个搜索框，需要自定义右侧的取消按钮的颜色和文字，于是上网搜了一些资料，发现都出自一个模板，有一点偏差，所以在这里更正一下，让同学们少走一点弯路。 首先初始化一个UISearchBar - (void)initSearchBar { _searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(20, 100, 3
前端uniap实现搜索功能
qq_42158469的博客
06-21 8970
使用到的组件<u-search></u-search> <u-search class="search" placeholder="搜索" v-model="keyword" @search="searchHistory"></u-search>
uni组件uni-search-bar默认值
MouseLikeCat的博客
01-11 2763
uni组件uni-search-bar不带默认值修复uni-search-bar上代码，不废话 uni-search-bar 请注意！本次修改基于原生uni-search-bar（h5以及小程序可用，其它未进行测试），兼容uni-search-bar(1.0.3)。如修改过该原生组件代码，请谨慎使用。 上代码，不废话 1、请移动代码到props下面，增加如下 //....前方代码已省略 bgColor: { type: String, default: "#F8F8F8" }, maxlength: {
uView使用之路--u-search组件
热门推荐
yyc_two的博客
08-19 1万+
踩坑之旅 官网使用教程：uView-search 效果图： 代码： <template> <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search> </template> <script> export default { data() { return { keyword: '遥看瀑布挂前川' } } } </script> 基本功
ios15中使用u-search踩坑
weixin_43844239的博客
02-17 762
ios15中使用u-search踩坑 在ios15 使用u-search搜索图标显示异常，如图 添加css样式即可解决 input[type="search"]{ -webkit-appearance:none; } [type="search"]::-webkit-search-decoration { display: none; } input::-webkit-search-cancel-button { display: none; } ...
修改uview搜索框样式
qq_41919594的博客
12-27 6580
HTML <view class="searchButton"> <u-search placeholder="请输入学员姓名/手机号/身份证号" v-model="keyword" height="80" border-color='#1A90FF' :show-action='false' search-icon=''> </u-search> <u-button class="searchButtons" :custom-style="sear.
iOS UISearchController中 如何改变UISearchBar中取消按钮的颜色和字
iOS徐建波的博客
12-11 1万+
iOS UISearchController中 如何改变UISearchBar中取消按钮的颜色和字     今天在做项目的时候想要自定义搜索栏中的取消按钮的显示文字为取消，字体颜色为白色，自己试了很多次都失败了，后来想在网上搜索答案，发现我找到的这些博客都是比较早的版本，就是一句话根本解决不了现在的问题。 #pragma mark -----------------搜索栏代理-----
搜索条UISearchBar自定义样式 去掉上下阴影下划线 修改取消按钮的文字、颜色 - Swift
陈云峰技术博客
08-31 1894
搜索条UISearchBar自定义样式 去掉上下阴影下划线 修改取消按钮的文字、颜色 - Swift
uniapp uni-search-bar引入
07-28
在使用 uni-app 中引入 uni-search-bar 组件，可以按照以下步骤进行操作： 1. 在需要使用的页面的 `.vue` 文件中，导入 uni-search-bar 组件： ```javascript import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue' ``` 2. 在 components 属性中注册 uni-search-bar 组件： ```javascript export default { components: { uniSearchBar }, // ... } ``` 3. 在页面模板中使用 uni-search-bar 组件： ```html <template> <view> <uni-search-bar></uni-search-bar> </view> </template> ``` 这样就可以在页面中使用 uni-search-bar 组件了。你可以根据自己的需求，进一步配置和修改 uni-search-bar 组件的样式和行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值