首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在iOS 13中创建带有麦克风图标的搜索栏?

在iOS 13中创建带有麦克风图标的搜索栏,可以通过使用UISearchBar结合UITextField的自定义视图来实现。以下是实现这一功能的步骤:

基础概念

  • UISearchBar:用于在iOS应用中提供搜索功能的UI组件。
  • UITextField:用于输入文本的UI组件。
  • 自定义视图:通过自定义视图可以添加额外的图标或样式到UISearchBar中。

实现步骤

  1. 创建UISearchBar: 首先,在你的视图控制器中创建一个UISearchBar实例。
  2. 自定义TextField: 通过KVC(Key-Value Coding)访问UISearchBar内部的UITextField,并对其进行自定义。
  3. 添加麦克风图标: 使用UIImageView来添加麦克风图标,并将其添加到UITextField的左侧。

示例代码

代码语言:txt
复制
import UIKit

class ViewController: UIViewController, UISearchBarDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 创建UISearchBar
        let searchBar = UISearchBar(frame: CGRect(x: 20, y: 100, width: view.bounds.width - 40, height: 44))
        searchBar.delegate = self
        view.addSubview(searchBar)
        
        // 自定义TextField
        if let textField = searchBar.value(forKey: "searchField") as? UITextField {
            textField.borderStyle = .none
            textField.backgroundColor = .white
            
            // 添加麦克风图标
            let microphoneIcon = UIImageView(image: UIImage(named: "microphone"))
            microphoneIcon.frame = CGRect(x: 8, y: 8, width: 24, height: 24)
            microphoneIcon.contentMode = .scaleAspectFit
            textField.leftView = microphoneIcon
            textField.leftViewMode = .always
        }
    }
    
    // UISearchBarDelegate方法
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        print("Search text changed: \(searchText)")
    }
}

应用场景

  • 语音搜索:在应用中集成语音搜索功能时,可以在搜索栏中添加麦克风图标,提示用户可以通过语音输入进行搜索。
  • 实时搜索:在需要实时搜索的应用中,带有麦克风图标的搜索栏可以提供更丰富的用户体验。

可能遇到的问题及解决方法

  1. 麦克风图标不显示
    • 确保microphone图片资源已正确添加到项目中,并且图片名称正确。
    • 检查UIImageView的frame是否正确设置,确保图标在UITextField中可见。
  • 自定义视图不生效
    • 确保通过KVC访问UITextField的方式正确,iOS版本不同可能会有所差异。
    • 确保在viewDidLoad方法中进行自定义操作,避免在视图未完全加载时进行操作。

参考链接

通过以上步骤和示例代码,你可以在iOS 13中创建一个带有麦克风图标的搜索栏。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

[ISUX译]iOS 9 人机界面指南(五):图标与图形设计 - 腾讯ISUX

iOS中,各个不同尺寸的icon将被用于Game Center,搜索结果,设置之中,还会用于代表由这个app创建的文档。 ? 为了让icon达到最好的效果,你可以求助于专业设计师。...通常情况下,启动图片不需要提供如下内容: “进入应用的过程”,例如载入进程带有“关于信息”的窗口。 品牌元素,除非它们是 app 第一屏的静态内容。...创建有内部细节的图标的选中态版本时(例如收音机图标),将内部细节反过来填充,以确保这些细节在选中态依然突出。...具体来说,使用 1-point 描边(也就是在 @2x 分辨率下是 2 像素描边) 不管图标的是怎样的视觉风格,都需要按照尺寸表表格 45-1来创建自定义工具、导航以及标签的图标。...UI元素的背景,弹窗,按钮,导航,标签等,还包括这些上的项。

1.6K31
  • iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

    API注释 想要了解如何在代码中定义搜索,请参考UISearchBar.想要了解更多如何显示搜索,请参考UISearchDisplayController....在iOS 8以及之后的版本里,你可以通过UISearchDisplayController简单快捷地把搜索放在导航中。...4.1.8 范围栏 范围栏只有在与搜索一起时才会出现,它让用户可以定义搜索结果的范围。 API注释 想要了解如何在代码中定义搜索与范围栏,请参考UISearchBar....请注意,iOS本身提供了若干内置的服务,打印,转发到Twitter,发送信息和Airplay等等,你不需要再额外为这些内置任务创建活动。...标题将会出现在活动菜单图标的下方。一般来说短标题效果最好,因为它在屏幕上的显示效果更好并且更容易本地化。如果你的标题文字过长,iOS会将缩小文本,仍然过长的话则会被截断。

    10.1K51

    最新iOS设计规范三|3大界面要素:(Bars)

    本文是iOS设计规范系列第3篇,介绍3大界面要素(、视图、控件)中的(Bars)。首先让我们了解一下iOS的3大界面要素。...当点击进入新页面时,其导航的左侧会出现一个返回按钮,并带有前一页面的标题。 有时,导航的右侧也会有一个控件,“编辑”或“完成”按钮,用于管理活动视图中的内容。...搜索的字段可以包含占位符文本,例如“搜索服装,鞋子和配饰”或仅“搜索”,以提醒要搜索的上下文。带有适当标点符号的简洁的单行提示也可以直接出现在搜索上方,以提供指导。...工具包含用于执行与当前上下文有关的动作的按钮,例如创建项目,删除项目,添加注释或拍照。标签和工具永远不会在同一视图中同时出现。 提供相应的工具按钮。...工具应该是当前页面中有意义并且常用的命令。 思考图标或文本标题按钮哪个更适合。当你需要3个以上的工具按钮时,图标的效果更好。如果是3个或3个以下的按钮,文本按钮可以更清晰。

    9.9K10

    iOS 图标图像 (官方翻译版)

    Spotlight,设置和通知图标 每个应用程序还应提供一个小的图标,当应用程序名称与Spotlight搜索中的术语匹配时,iOS可以显示该图标。...iOS会自动为所有图标添加1像素笔画,使其在“设置”的白色背景上看起来很好。 提示 如果您的应用程序创建自定义文档,则不需要设计文档图标,因为iOS会使用您的应用程序图标自动创建文档图标。...快进导航和标签图标 通过媒体播放或幻灯片快进。快进 ? 组织导航和标签图标 将项目移动到新的目的地,文件夹。组织 ? 暂停导航和标签图标 暂停媒体播放或幻灯片。...搜索导航和标签图标 显示搜索字段。搜索 ? 停止导航和标签图标 停止媒体播放或幻灯片。停止 ? 垃圾导航和标签图标 删除当前或所选项目。垃圾 ?...最近的标签图标 显示在特定时间段内最近访问的内容或项目。mostRecent ? 最常浏览的标签图标 显示最受欢迎的项目。最受关注 ? 搜索标签图标 进入搜索模式。搜索 ?

    3.6K40

    腾讯支持深圳教育空中课堂,使用腾讯课堂平台技术

    作为全国风向标的深圳,此次在教育领域又扎扎实实地办了件大事:4天内,在深圳市教育局信息技术中心的指导下,腾讯教育迅速为市教育局搭建了市级空中课堂平台。...老师通过课堂管理功能,可以进行多种权限的管控,开关麦克风和摄像头、禁言等。以禁言功能为例,全体禁言可以使老师上课教学时内容清晰无杂音,学生之间互不干扰,从而保证课堂纪律与上课效果。...直播课堂中,老师与学生可在讨论区进行交流互动,当学生在工具点击“举手”,授课教师即可授权麦克风可以发起语音互动,保证良好的课堂互动效果。...:腾讯课堂成员管理功能界面 除了便捷、高效、互动性强等优势,腾讯空中课堂的最大优势在于具有极高的流畅性和稳定性。...希望通过腾讯教育助力线上开课,可通过手机QQ搜索公众号:800082734 ,即有疫情专员进行对接。 “在看”我的你真好看 ?

    1.5K40

    Win11 的这 19 个新功能,你都用上了吗?

    1、开始菜单 Windows 11 带有全新的开始菜单和任务体验,如下面的屏幕截图所示。 动态磁贴已被图标取代,类似于 Android 和 iOS。...您可以按 Win+V 启动剪贴板管理器并通过菜单内搜索选择或搜索材料,而不是在线搜索 GIF 和表情符号,如下图所示。 Windows 剪贴板还获得了一项名为“粘贴为纯文本”的新功能。...例如,您可以将一个虚拟桌面用于工作项目,将另一个用于个人内容(流媒体)。您可以根据需要创建任意数量的虚拟桌面,但您可能不需要超过两个或三个。 如前所述,您现在还可以更改虚拟桌面的背景。...在 Windows 11 中,微软正在统一音频端点,这意味着现在可以在麦克风和扬声器之间切换,而无需手动更改音频端点。...Microsoft 正在刷新文件夹图标和默认文件类型图标的方向。这些文件夹包括桌面、文档、下载和图片。回收站图标也已更新。 我们在资源管理器中得到了一些圆角。

    23.7K30

    Windows 11的这19个新功能,你都知道吗?

    1、开始菜单 Windows 11 带有全新的开始菜单和任务体验,如下面的屏幕截图所示。 动态磁贴已被图标取代,类似于 Android 和 iOS。...您可以按 Win+V 启动剪贴板管理器并通过菜单内搜索选择或搜索材料,而不是在线搜索 GIF 和表情符号,如下图所示。 Windows 剪贴板还获得了一项名为“粘贴为纯文本”的新功能。...例如,您可以将一个虚拟桌面用于工作项目,将另一个用于个人内容(流媒体)。您可以根据需要创建任意数量的虚拟桌面,但您可能不需要超过两个或三个。 如前所述,您现在还可以更改虚拟桌面的背景。...在 Windows 11 中,微软正在统一音频端点,这意味着现在可以在麦克风和扬声器之间切换,而无需手动更改音频端点。...Microsoft 正在刷新文件夹图标和默认文件类型图标的方向。这些文件夹包括桌面、文档、下载和图片。回收站图标也已更新。 我们在资源管理器中得到了一些圆角。

    3.6K20

    mac系统常用的工具这几个App简直是mac神器,建议大家去试试哦

    功能强大,我用的最多的就是用来搜索软件,文件或者是快捷百度。比如我设置了双击Command唤醒。然后在搜索框输入自己想要的软件或者文件即可找到。...或者是输入百度空格加自己想搜索的内容,就不用打开浏览器页面,即可直接跳转,非常方便。...Vanilla Pro Mac:隐藏菜单中的图标工具 可以隐藏Mac菜单中的任何应用程序图标的工具,通过完全隐藏图标完善您的菜单,它兼容浅色和深色菜单,使用它能保持你的菜单的清洁。...Gif Brewery for Mac:最专业的Gif制作软件 简单易用,支持从视频导入、屏幕录制、iOS设备等等进行Gif图片制作,支持循环预览动,帧管理,动拼接,自动计算帧数与延时参数(Calculate...MacBook 有以下好用软件: 1、系统硬件监测软件:iStat Menus 虽然macOS系统自带有监视CPU、内存、硬盘等的活动监视器,但我们想要的是能够在状态上实时地显示当前信息,更加直观地了解

    34710

    iOS 9人机界面指南(一)下篇:UI设计基础 - 腾讯ISUX

    优秀的应用应该通过创建独特的外观和感觉来为用户提供愉悦、难忘的体验。 在iOS系统之下可以很容易地使用自定义的图标、颜色和字体来创建区别于其他应用的UI。...为了在iOS中感觉舒适,你的应用虽然不必看起来跟内置的一样,但是需要对它的遵从、清晰度和深度(欲了解更多,参见1 为iOS而设计(Design for iOS))进行整合。...当你使用自定义的颜色时,着重考虑半透明的和应用内容。当你需要创建能匹配特别颜色的颜色时(比如一个已有品牌中的颜色),可能在你获得你想要的结果之前,你需要用各种颜色进行实验。...的显示将会同时受到iOS系统所提供的半透明与藏在后面的应用内容的呈现所影响。...最好的与iOS整合的方式便是深刻地了解iOS的主题与核心——这一部分在上文为iOS而设计(Designing for iOS)部分中已有详细描述,并寻求出如何在你的应用中融合与表达这种主题。

    1.8K21

    Flutter BottomNavigation 底部导航详解 及问题记录

    Flutter BottomNavigation 底部导航详解 主要是使用了 Scaffold下的 bottomNavigationBar 整个属性,在这个属性下,可以添加底部图标的背景色,选中颜色,...以及是否粘贴到底部,和导航的个数 在app的主页面,home指向底部导航的组件 home: BottomNavigation(), 底部导航的组件集成 StatefulWidget 在内部创建一个带有状态的组件...currentIndex = 0; static const int mainNum = 0xFFFA8C16; 这里多数一句 Flutter 提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用 颜色...问题3: 目前dart辨析的时候,有很多括号, 格式不够优美,有没有第三方,成熟的组件以供使用 问题4: 如何在页面切换时 ,使用动画,自己写?框架有预设吗?...问题5: 如何设置支持导航,左滑,优化切换? 效果

    3.3K10

    高质量又免费的图标资源都在这

    标的尺寸 在移动端 iOS 规范中 2 倍图下最适合人点击的区域大小为 48*48px, iOS 功能图标尺寸为 48 加或减 4 的倍数;安卓 Android 功能图标尺寸为 48 加或减 8 的倍数...为什么 iOS 是 4 的倍数?因为 2 倍适配 3 倍时要乘以 1.5, 适配 1 倍时要除以 2, 并且保证 1 倍/ 2 倍/ 3 倍尺寸值都是偶数,能满足要求的最小数是 4; ?...在很多带有色块的图标中,不仅要保证色块的大小统一,也要保证色块里面的功能图标图形的大小统一。 2....图标栅格 以 2 倍 44*44px 为例,常见方形、圆形、水平矩形、竖直矩形图标为保证视觉大小一致,通常实际设计尺寸并不一样,可通过图标栅格关键线来进行规范,这里推荐一篇聊一聊iOS系统图标栅格&带你绘制系统图标...网址:www.iconfont.cn 02 iconfinder图标库 iconfinder 是一个专注于图标的搜索引擎,收录了大量的图标,通过它你可以快速找到你所需要的图标,并且它收录的图标一般都是免费的

    1.4K20

    UI Tabbar底部标签设计全攻略

    苹果 iOS 标签 对于 Apple iOS,导航选项的容器大小等于 390x49。...(也可以是375) 苹果iOS标签 容器中图标的大小为: 25x25 pt 用于常规标签 18x18 pt 用于紧凑的标签 对于方形字形,图标应该是: 23x23 pt 用于常规标签 17x17...标签设计的 7 个注意事项 1.不要在bar中放置触发动作的元素 标签包含导航目的地,而不是操作。不要放置触发动作的控件,例如创建。...✅ 带有特定号召性用语对象的标签 2.不要添加超过5个导航图标 Tab 最适合 3-5 个顶级导航目的地。使用超过五个选项会使目标彼此过于接近并损害可用性。用户可能会意外触发错误的选项。...不要使用“灰+灰”的颜色组合 图标颜色对比度差和标签字体小是标签设计的两个常见问题。 始终检查文本和图标的颜色对比度。

    1.9K30

    最新iOS设计规范八|3大图标和图像规范(Icons and Images)

    它也出现在整个系统中,例如在“设置”和“搜索结果”中。 ? 拥抱简单。找到一个可以捕捉应用程序本质的元素,并以简单,独特的形状表达该元素。谨慎添加详细信息。...如果图标的内容或形状过于复杂,则可能难以分辨细节,尤其是在较小尺寸的情况下。 提供一个焦点。设计带有单个中心点的图标,该图标可以立即引起注意并清楚地标识您的应用程序。 设计一个可识别的图标。...Spotlight搜索、设置和通知图标 每个APP还应提供一个小图标,当APP名称与Spotlight搜索中的关键词匹配时,iOS可以显示该图标。...导航和工具图标 标签图标 主屏幕快速操作图标 在运行iOS12及更早版本的APP中,尽可能使用这些内置图标是个好办法,因为它们对用户来说已经很熟悉了。 按预期使用系统图标。...导航和工具图标 在导航和工具中使用以下图标。 注:可以使用文本代替图标来表示导航或工具中的项目。例如:日历在工具中使用“今日”、“日历”和“收件箱”。

    3.1K20

    和安卓用户FaceTime,一个鼠标操作iPad和Mac!没有新硬件的WWDC,就不行吗

    通知也有了新的外观。通知可以显示联系人照片和更大的应用程序图标,这在iOS 15以新的过滤模式存在,称为焦点(Focus)。...用户将收到一份应用隐私报告(App Privacy Report),其中包含在过去7天内,应用访问你的位置信息和手机麦克风或摄像头的频率。...这个功能支持在照片中搜索文本,包括在Spotlight中搜索照片、AirPods音频更新,以及通过Find My定位AirPods Pro和AirPods Max。...也就是说,用户或能将它们放在任何地方,这是去年iOS 14鸽掉的一项功能——尽管桌面空间很大,但小部件只能放置在“今日视图”(Today View)侧中。 多任务处理也得到了一些改进。...用户可以在Dock、菜单、Finder甚至Siri上调用快捷指令,比如自动分屏、快速群发等。 当然用户也可以创建个性化的快捷指令。创建好指令后,用户也可以将其通过社区或其他方式分享出去。

    1.6K20

    6详解AppBar小部件

    AppBar 应用是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮,或者只是页面标题。...在本教程中,我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。 以下是我们将介绍的内容: Flutter 中的 AppBar 是什么?...: IconThemeData(color: Colors.green, size: 36), ), 文字主题 假设您想将文本颜色更改为带有较浅阴影的琥珀色,200并将字体大小设置为24: AppBar...工具高度和不透明度 最后,我们有工具属性。工具包含文字,图标,按钮,和其他任何公司的前景,除了小部件,Container和Image。...我希望这篇文章能帮助你在未来所有的 Flutter 应用程序中创建漂亮的 AppBars。 最后附上AppBar的一些属性 AppBar({ Key?

    16.4K10

    浅谈跨平台框架Flutter的搭建与运行

    myapp),点击 Next; 点击 Finish; 等待Android Studio安装SDK并创建项目。...如果没有列出可用,请选择 Tools>Android>AVD Manager 创建; 在工具中点击 Run图标; 如果一切正常,在设备或模拟器上会看到启动的应用程序 4.体验热重载:Flutter可以通过热重载实现快速的开发周期...clicked the button this many times:'; 不要按“停止”按钮,让应用继续运行; 要查看更改,请调用 Save (cmd-s / ctrl-s),或者点击 热重载按钮 (带有闪电图标的按钮...名称(myapp)并按回车键; 指定防止项目的位置,然后确认; 等待项目创建继续,并显示main.dart文件。...当你选择一个团队时,Xcode会创建并下载开发证书,向你的设备注册你的账户,并创建和下载配置文件。 如果要开始你的第一个iOS开发项目,需要使用你的Apple ID登录Xcode。

    3.3K20

    2018 UI + 交互 流行趋势(案例)汇总

    大标题文本包含一组带有图片和描述的文字,文字之间保持较大的留白,看起来它们互不干扰,又不会令界面看上去显得松散,因而带给用户非常轻松的浏览体验。 ?...自ios7开始,苹果规范了2px的线性图标;到了ios10中,线性图标的选中状态变成背景填充样式;而在现在的ios11中,采用了面性图标,未选中和选中状态只有颜色上的区分,并且图标更加圆润,目前这种设计...插画风格运用的越来越广泛,适用于app当中的启动页、缺省页、banner、专题头、弹窗插画、icon等等,运用时要和app的整体风格搭配,有趣味、富有创意的插画会让用户对app的好感大幅提升。...Seeing AI 在设计工具领域,设计一张海报,传统的方式需要借助商业图库,花费大量时间和人力来做素材筛选的工作;后来随着技术发展,提供了以搜索的方式,提高了筛选效率;未来,大数据+人工智能辅助创作将会广泛普及...线上账户和线下购买行为在入口处自动绑定,并利用摄像机人脸识别确定身份;在线下购买过程中,通过摄像机识别手势、麦克风判断位置,结合货架上的红外线传感器、压力感应装置、荷载传感器确定消费者真正购买的商品,同步到线上购物车

    73120
    领券