一、输入相关的优化问题
在大部分应用中，都有输入的需求，面对众多用户，他们的想法各异，输入的文本内容也是千奇百怪，面对不同的输入，我们该如何优化输入体验？本文将汇总一下Swift社交应用文本输入优化技巧。
这里集中汇总输入相关问题，主要如下：
-
输入控件UITextField跟随键盘移动
-
过滤输入内容
-
响应编程的处理，去除体验不好的对话框、HUD提示
-
中文输入
二、输入框随键盘移动
界面构建有两种方法，代码或者storyboard/xib，这两种方法在处理键盘移动上方法相同，这里推荐使用已经封装好的第三方框架：TPKeyboardAvoiding
1、代码处理方法
rootView使用**TPKeyboardAvoiding**框架中的TPKeyboardAvoidingScrollView来初使化。例如，登录界面，LoginViewController(继承自UIViewController),处理方法如下：
|
1
2
3
4
5
|
letrootView=TPKeyboardAvoidingScrollView(frame:self.view.bounds);
self.view.addSubview(rootView)
|
代码构建界面，实现输入框随键盘移动，需要将类**TPKeyboardAvoidingScrollView**做为根视图来处理。
2、storyboard/xib处理办法
storyboard/xib处理起来更简单，将视图控制器的rootView设置为TPKeyboardAvoidingScrollView即可
(1)选择控制器的根视图
(2)设置默认实例化类
三、常用基本设置
1、常用基本设置
包括打开键盘、关闭键盘、指定键盘的输入类型、指定return按钮的类型，如以下代码
5
6
7
8
self.inputText.becomeFirstResponder()
self.inputText.resignFirstResponder()
self.inputText.keyboardType=UIKeyboardType.NumberPad
self.inputText.returnKeyType=UIReturnKeyType.Go
|
2、通过代理过滤输入
通过UITextField/UITextView的代理，可以更精确的控制输入，例如：过滤指定字符、超过字符数禁止输入等
(1)UITextField代码如下：
8
9
10
11
12
13
14
15
16
17
18
19
20
//设置代理，可根据实际情况来设置代理，这里使用self来指定
self.textField.delegate=self
functextField(textField:UITextField,shouldChangeCharactersInRange
range:NSRange,replacementStringstring:String)->Bool
{
if
(string==
""
){
return
false
}
//按下回车后取消键盘
"\n"
){
textField.resignFirstResponder()
false
}
true
}
|
(2)UITextView代码如下：
self.textView.delegate=self
replacementTexttext:String)->Bool
(text==
textView.resignFirstResponder()
UITextField/UITextView可以通过代理方法实时检测用户输入的内容,方便对输入约束，例如，在输入超过10个字符时，禁止用户输入，不过这种体验不好，建议不要使用
四、响应编程处理，精确提示信息
1、如何优化
输入信息的约束一般是将规则直接提示给用户，例如：社交中用户昵称的输入：
请输入1-8位的字符作为昵称，不能包括空格、回车、标点
用户点击**确定**按钮之后，检查输入的合法性，并通过对话框（或HUD）的形式，提示给用户信息
上面的处理方式，十分常见，能满足基本需求。不过我们已经不再采用上面的设计，原因有以下两点：
-
提示信息过多，大部分用户不会看
-
对话框及HUD提示比较突兀，容易使用户产生挫败感
在实际开发过程中，精减提示信息为
用户主动输入空格、回车、标点这些字符或者超出长度时，才主动提示给用户信息，如下图，无输入，确定按钮disable，只提示极少有用信息
输入合法，确定按钮enable
输入不合法，高亮错误显示，确定按钮disable
2、代码实现
使用第三方框架ReactiveCocoa,首先实现在用户输入时，下方提示及右侧图片的功能（不使用三方框架，可自己通过代理实现）
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@IBOutletweak
var
nickTextField:UITextField!
checkResultShowImageView:UIImageView!
button:UIButton!
hintLabel:UILabel!
overridefuncviewDidLoad(){
super
.viewDidLoad()
//配置输入
configinput()
}
funcconfiginput(){
self.nickTextField.rac_textSignal().subscribeNext{(text)->Void
in
(text==nil||text.length==0){
self.checkResultShowImageView.hidden=
false
return
imageName=
""
(self.checkInputValidate()){
"ok.png"
self.hintLabel.text=
""
}
else
{
"warning.png"
"超出\(text.length-8)个字符"
}
self.checkResultShowImageView.image=UIImage(named:imageName)
}
}
funccheckInputValidate()->Bool{
//输入条件检查，这里示例，只检查字符长度
letlength=(self.nickTextField.textasNsstring).length
return
length>0&&length<=8
下面实现功能：根据输入的合法性，设置按钮的enabled属性，此步骤需要下载文件RAC语法支持文件,更详细介绍Swift支持ReactiveCocoa
9
| funcconfigButtonEnable(){
RAC(self.button,
"enabled"
)<~RACSignal.combineLatest(
[self.nickTextField.rac_textSignal()],
reduce:{()->AnyObject!
in
self.checkInputValidate()
})
}
|
五、中文处理办法
有中文输入时，上面的字数检查不准确，如通过输入法输入**"我爱中国文化"**6个字符时self.nickTextField.text的字符个数为23个，提示信息不正确
UITextView/UITextFiled有一个markedTextRange属性，用于标识当前是否有选中的文本（有选中文本时即为上图中的未完成输入状态），利用此原理来解决中文等类似问题
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
nickTextField:UITextField!
checkResultShowImageView:UIImageView!
hintLabel:UILabel!
chineseText:Nsstring!
overridefuncviewDidLoad(){
.viewDidLoad()
self.nickTextField.delegate=self
filterinput()
configButtonEnable()
}
funcfilterinput(){
in
(self.nickTextField.markedTextRange!=nil){
;
}
//这里可以加入去除空格，标点等操作
self.chineseText=textasNsstring
(text==nil||text.length==0){
false
return
}
true
""
(self.checkInputValidate()){
"ok.png"
""
{
"warning.png"
"超出\(text.length-8)个字符"
}
self.checkResultShowImageView.image=UIImage(named:imageName)
}
}
funccheckInputValidate()->Bool{
//输入条件检查，这里示例，只检查字符长度
letlength=chineseText.length
length>0&&length<=8
}
funcconfigButtonEnable(){
)<~RACSignal.combineLatest(
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
in
(self.nickTextField.markedTextRange==nil){
self.checkInputValidate()
}
self.button.enabled
})
}
@IBActionfuncbuttonpressed(sender:AnyObject){
println(
"------>\(self.chineseText)"
)
六、总结
输入是手机App中最耗时的操作，处理不当很容易失去用户，这里总结以下几点
-
不要将所有的约束信息直接展示给用户，只展示那些对大部分用户都有用的信息，对于其他约束在用户输入错误的时候再提示
-
尽量少用或者不用对话框及HUD的方式提示错误
-
提示信息准确，例如超出字符数，一种提示为：超出最大140字符;另一种为：超出n个字符，显然后者提示对用户更有价值
-
不要擅自更改用户输入内容或者粗暴禁止用户输入
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
相关推荐
效率成吨提升之代码生成器-蓝湖工具神器iOS,Android,Swift,Flutter
软件简介:蓝湖辅助工具,减少移动端开发中控件属性的复制和粘贴.待开发的功能:1.支持自动生成约束2.开发设置页面3.做一个浏览器插件,支持不需要下载整个工程,可即时操作当前蓝湖浏览页面4.支持Flutter语言模板生成5.支持更多平台,如Sketch等6.支持用户自定义语言模板
【Audio音频开发】音频基础知识及PCM技术详解
现实生活中，我们听到的声音都是时间连续的，我们称为这种信号叫模拟信号。模拟信号需要进行数字化以后才能在计算机中使用。目前我们在计算机上进行音频播放都需要依赖于音频文件。那么音频文件如何生成的呢？音频文件的生成过程是将声音信息采样、量化和编码产生的数字信号的过程，我们人耳所能听到的声音频率范围为（20Hz~20KHz），因此音频文件格式的最大带宽是20KHZ。根据奈奎斯特的理论，音频文件的采样率一般在40~50KHZ之间。奈奎斯特采样定律，又称香农采样定律。...............
见过仙女蹦迪吗？一起用python做个小仙女代码蹦迪视频
前言最近在B站上看到一个漂亮的仙女姐姐跳舞视频，循环看了亿遍又亿遍，久久不能离开！看着小仙紫姐姐的蹦迪视频，除了一键三连还能做什么？突发奇想，能不能把舞蹈视频转成代码舞呢？说干就干，今天就手把手教大家如何把跳舞视频转成代码舞，跟着仙女姐姐一起蹦起来~视频来源：【紫颜】见过仙女蹦迪吗 【千盏】一、核心功能设计总体来说，我们需要分为以下几步完成：从B站上把小姐姐的视频下载下来对视频进行截取GIF，把截取的GIF通过ASCII Animator进行ASCII字符转换把转换的字符gif根据每
自定义ava数据集及训练与测试 完整版 时空动作/行为 视频数据集制作 yolov5, deep sort, VIA MMAction, SlowFast
前言这一篇博客应该是我花时间最多的一次了，从2022年1月底至2022年4月底。我已经将这篇博客的内容写为论文，上传至arxiv：https://arxiv.org/pdf/2204.10160.pdf欢迎大家指出我论文中的问题，特别是语法与用词问题在github上，我也上传了完整的项目：https://github.com/Whiffe/Custom-ava-dataset_Custom-Spatio-Temporally-Action-Video-Dataset关于自定义ava数据集，也是后台
【视频+源码】登录鉴权的三种方式：token、jwt、session实战分享
因为我既对接过session、cookie，也对接过JWT，今年因为工作需要也对接了gtoken的2个版本，对这方面的理解还算深入。尤其是看到官方文档评论区又小伙伴表示看不懂，所以做了这期视频内容出来：视频在这里：本期内容对应B站的开源视频因为涉及的知识点比较多，视频内容比较长。如果你觉得看视频浪费时间，可以直接阅读源码：goframe v2版本集成gtokengoframe v1版本集成gtokengoframe v2版本集成jwtgoframe v2版本session登录官方调用示例文档jwt和sess
【Android App】实战项目之仿微信的私信和群聊App附源码和演示视频 超详细必看
【Android App】实战项目之仿微信的私信和群聊App（附源码和演示视频 超详细必看）
采用MATLAB对正弦信号，语音信号进行生成、采样和恢复，利用MATLAB工具箱对混杂噪声的音频信号进行滤波
采用MATLAB对正弦信号，语音信号进行生成、采样和内插恢复，利用MATLAB工具箱对混杂噪声的音频信号进行滤波
Keras深度学习实战40——音频生成
随着移动互联网、云端存储等技术的快速发展，包含丰富信息的音频数据呈现几何级速率增长。这些海量数据在为人工分析带来困难的同时，也为音频认知、创新学习研究提供了数据基础。在本节中，我们通过构建生成模型来生成音频序列文件，从而进一步加深对序列数据处理问题的了解。
- • 效率成吨提升之代码生成器-蓝湖工具神器…
- • 【Audio音频开发】音频基础知识及PCM技…
- • 见过仙女蹦迪吗？一起用python做个小仙…
- • 【Android App】实战项目之仿抖音的短视…
- • 自定义ava数据集及训练与测试 完整版 时…
- • 【视频+源码】登录鉴权的三种方式：tok…
- • 【Android App】实战项目之仿微信的私信…
- • 零基础用Android Studio实现简单的本地…
- • 采用MATLAB对正弦信号，语音信号进行生…
- • Keras深度学习实战40——音频生成
- • 视频实时行为检测——基于yolov5+deeps…
- • 数电实验 数字电子钟设计 基于quartus …
- • 腾讯会议使用OBS虚拟摄像头
- • 文本生成视频Make-A-Video，根据一句话…
- • 信号处理——MATLAB音频信号加噪、滤波
- • 【新知实验室 - TRTC 实践】音视频互动…
- • Keras深度学习实战39——音乐音频分类
- • C++游戏game | 井字棋游戏坤坤版配资源…
|
|