文档章节

Swift社交应用文本输入优化汇总

一叶博客
 一叶博客
发布于 2015/03/03 12:47
字数 1738
阅读 1812
收藏 70
点赞 5
评论 3

一、输入相关的优化问题

在大部分应用中,都有输入的需求,面对众多用户,他们的想法各异,输入的文本内容也是千奇百怪,面对不同的输入,我们该如何优化输入体验?这里集中汇总输入相关问题,主要如下:

1、输入控件UITextField跟随键盘移动

2、过滤输入内容

3、响应编程的处理,去除体验不好的对话框、HUD提示

4、中文输入

二、输入框随键盘移动

界面构建有两种方法,代码或者storyboard/xib,这两种方法在处理键盘移动上方法相同,这里推荐使用已经封装好的第三方框架:TPKeyboardAvoiding

1、代码处理方法

rootView使用TPKeyboardAvoiding框架中的TPKeyboardAvoidingScrollView来初使化。例如,登录界面,LoginViewController(继承自UIViewController),处理方法如下:

let rootView = TPKeyboardAvoidingScrollView(frame: self.view.bounds);
//...
//add all subviews to rootView
//...
self.view.addSubview(rootView)

代码构建界面,实现输入框随键盘移动,需要将类TPKeyboardAvoidingScrollView做为根视图来处理。

2、storyboard/xib处理办法 

storyboard/xib处理起来更简单,将视图控制器的rootView设置为TPKeyboardAvoidingScrollView即可

(1)选择控制器的根视图

(2)设置默认实例化类

三、常用基本设置

1、常用基本设置

包括打开键盘、关闭键盘、指定键盘的输入类型、指定return按钮的类型,如以下代码

//打开键盘
self.inputText.becomeFirstResponder()
//关闭键盘
self.inputText.resignFirstResponder()
//指定键盘的输入类型
self.inputText.keyboardType = UIKeyboardType.NumberPad
//指定return按键的类型
self.inputText.returnKeyType = UIReturnKeyType.Go


2、通过代理过滤输入

通过UITextField/UITextView的代理,可以更精确的控制输入,例如:过滤指定字符、超过字符数禁止输入等

(1)UITextField代码如下:

//设置代理,可根据实际情况来设置代理,这里使用self来指定
self.textField.delegate = self
//代理方法实现
func textField(textField: UITextField, shouldChangeCharactersInRange
 range: NSRange, replacementString string: String) -> Bool
    {
        //禁止输入空格
        if (string == " ") {
            return false
        }
        
        //按下回车后取消键盘
        if (string == "\n") {
            textField.resignFirstResponder()
            return false
        }
        
        return true
    }

(2)UITextView代码如下:

/设置代理,可根据实际情况来设置代理,这里使用self来指定
self.textView.delegate = self
//代理方法实现
func textView(textView: UITextView, shouldChangeTextInRange range: NSRange, 
replacementText text: String) -> Bool
    {
        //禁止输入空格
        if (text == " ") {
            return false
        }
        
        //按下回车后取消键盘
        if (text == "\n") {
            textView.resignFirstResponder()
            return false
        }
        
        return true
    }


UITextField/UITextView可以通过代理方法实时检测用户输入的内容,方便对输入约束,例如,在输入超过10个字符时,禁止用户输入,不过这种体验不好,建议不要使用

四、响应编程处理,精确提示信息

1、如何优化

输入信息的约束一般是将规则直接提示给用户,例如:社交中用户昵称的输入:

请输入1-8位的字符作为昵称,不能包括空格、回车、标点

用户点击确定按钮之后,检查输入的合法性,并通过对话框(或HUD)的形式,提示给用户信息

上面的处理方式,十分常见,能满足基本需求。不过我们已经不再采用上面的设计,原因有以下两点:

1.提示信息过多,大部分用户不会看

2.对话框及HUD提示比较突兀,容易使用户产生挫败感


在实际开发过程中,精减提示信息为

请输入1-8个字符

用户主动输入空格、回车、标点这些字符或者超出长度时,才主动提示给用户信息,如下图,无输入,确定按钮disable,只提示极少有用信息

输入合法,确定按钮enable

输入不合法,高亮错误显示,确定按钮disable

2、代码实现

使用第三方框架ReactiveCocoa,首先实现在用户输入时,下方提示及右侧图片的功能(不使用三方框架,可自己通过代理实现)

    @IBOutlet weak var nickTextField: UITextField!//文本输入框
    @IBOutlet weak var checkResultShowImageView: UIImageView!//输入框右侧图片
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var hintLabel: UILabel!//文本框下方提示文字
	override func viewDidLoad() {
        super.viewDidLoad()
        //配置输入
        configInput()    
    }
 func configInput() {
        self.nickTextField.rac_textSignal().subscribeNext { (text) -> Void in
            if (text == nil || text.length == 0) {
                self.checkResultShowImageView.hidden = false
                return
            }
            
            self.checkResultShowImageView.hidden = true
            var imageName = ""
            if (self.checkInputValidate()) {
                imageName = "ok.png"
                self.hintLabel.text = ""
            } else {
                imageName = "warning.png"
                self.hintLabel.text = "超出\(text.length - 8)个字符"
            }
            self.checkResultShowImageView.image = UIImage(named: imageName)
            
        }
    }
    
    func checkInputValidate() -> Bool {
        //输入条件检查,这里示例,只检查字符长度
        let length = (self.nickTextField.text as NSString).length
        return length > 0 && length <= 8
    }

下面实现功能:根据输入的合法性,设置按钮的enabled属性,此步骤需要下载文件RAC语法支持文件,更详细介绍Swift支持ReactiveCocoa

func configButtonEnable() {
        RAC(self.button, "enabled") <~ RACSignal.combineLatest(
            [self.nickTextField.rac_textSignal()],
            reduce: { () -> AnyObject! in
            
            return self.checkInputValidate()
                
        })
    }

五、中文处理办法

有中文输入时,上面的字数检查不准确,如通过输入法输入**"我爱中国文化"**6个字符时self.nickTextField.text的字符个数为23个,提示信息不正确

UITextView/UITextFiled有一个markedTextRange属性,用于标识当前是否有选中的文本(有选中文本时即为上图中的未完成输入状态),利用此原理来解决中文等类似问题

    @IBOutlet weak var nickTextField: UITextField!
    @IBOutlet weak var checkResultShowImageView: UIImageView!
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var hintLabel: UILabel!
    
    var chineseText: NSString!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.nickTextField.delegate = self
        filterInput()
        configButtonEnable()
        
        
    }
    
    func filterInput() {
        self.nickTextField.rac_textSignal().subscribeNext { (text) -> Void in
            if(self.nickTextField.markedTextRange != nil) {
                return;
            }
            //这里可以加入去除空格,标点等操作
            self.chineseText = text as NSString
            
            if (text == nil || text.length == 0) {
                self.checkResultShowImageView.hidden = false
                return
            }
            
            self.checkResultShowImageView.hidden = true
            var imageName = ""
            if (self.checkInputValidate()) {
                imageName = "ok.png"
                self.hintLabel.text = ""
            } else {
                imageName = "warning.png"
                self.hintLabel.text = "超出\(text.length - 8)个字符"
            }
            self.checkResultShowImageView.image = UIImage(named: imageName)
            
        }
    }
    
    func checkInputValidate() -> Bool {
        //输入条件检查,这里示例,只检查字符长度
        let length = chineseText.length
        return length > 0 && length <= 8
    }
    
    func configButtonEnable() {
        RAC(self.button, "enabled") <~ RACSignal.combineLatest(
            [self.nickTextField.rac_textSignal()],
            reduce: { () -> AnyObject! in
            
            if(self.nickTextField.markedTextRange == nil) {
                return self.checkInputValidate()
            }
            return self.button.enabled
                
        })
    }
    
    
    @IBAction func buttonPressed(sender: AnyObject) {
        println("------>\(self.chineseText)")
    }

六、总结

输入是手机App中最耗时的操作,处理不当很容易失去用户,这里总结以下几点

        

       1.不要将所有的约束信息直接展示给用户,只展示那些对大部分用户都有用的信息,对于其他约束

在用户输入错误的时候再提示

2.尽量少用或者不用对话框及HUD的方式提示错误

3.提示信息准确,例如超出字符数,一种提示为:超出最大140字符

另一种为:超出n个字符,显然后者提示对用户更有价值

4.不要擅自更改用户输入内容或者粗暴禁止用户输入


© 著作权归作者所有

共有 人打赏支持
一叶博客
粉丝 16
博文 13
码字总数 16627
作品 0
朝阳
项目经理
加载中

评论(3)

zhouyuan24
zhouyuan24
rac..
yang003
yang003

引用来自“一叶博客”的评论

更多文章也可以访问http://00red.com

点击此处输入评论
一叶博客
一叶博客
更多文章也可以访问http://00red.com
OSChina 技术周刊第二十四期 —— C# 6.0 的新特性

每周技术抢先看,总有你想要的! 移动开发 【博客】Swift社交应用文本输入优化汇总 服务端开发/管理 【翻译】HTTP/1 的最佳实践并不适合 HTTP/2 【翻译】使用 AppDomain 存储实现大数据集合 ...

OSC编辑部 ⋅ 2015/03/09 ⋅ 0

OSChina 技术周刊第 24 期 —— C# 6.0 的新特性

每周技术抢先看,总有你想要的! 移动开发 【博客】Swift社交应用文本输入优化汇总 服务端开发/管理 【翻译】HTTP/1 的最佳实践并不适合 HTTP/2 【翻译】使用 AppDomain 存储实现大数据集合 ...

OSC编辑部 ⋅ 2015/03/09 ⋅ 0

iOS、mac开源项目及库汇总

UI 下拉刷新 EGOTableViewPullRefresh – 最早的下拉刷新控件。 SVPullToRefresh – 下拉刷新控件。 MJRefresh – 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷...

Snaiper ⋅ 2016/04/06 ⋅ 1

iOS9一些 新功能

 各个功能详解   ●地图   iOS 9的地图应用加入了公共交通导航、支持公交、火车、地铁、轮渡等交通工具,支持全球多个地区(包括国内300多个城市)。   ●Siri   更“积极”的Siri可...

天使雨儿 ⋅ 2015/09/28 ⋅ 0

iOS 各种demo链接汇总~其它UI

//联系人:石虎QQ:1224614774昵称:嗡嘛呢叭咪哄 一、其他UI AwesomeMenu-最多人用的Path菜单。 DCPathButton- Path,4.0的弹出菜单,呼出或者关闭菜单时,多个小图标会分别按照逆时针和顺时针...

石虎132 ⋅ 2017/11/24 ⋅ 0

GitHub第三方资源库整理(Swift篇)

网络 Alamofire:网络请求事件处理的框架。 Moya:这是一个基于的更高层网络请求封装抽象层。 Reachability.swift:用来检查应用当前的网络连接状况。 综合 Perfect:swift的开发框架(针对于移动...

hejunbinlan ⋅ 2016/06/24 ⋅ 0

Swift 开源精选-v1.0(进阶篇)

基于《Swift 语言指南》开源项目收录,做了一个甄别、筛选,并辅以一句话介绍。 来源 GitHub:Swift 开源项目精选 目录 工具 存储 网络 图片 框架 界面 示例 应用 界面 Spring By Meng To :...

上官尘 ⋅ 2016/03/07 ⋅ 0

OpenDigg iOS开源项目月报201704

由OpenDigg 出品的iOS开源项目月报第一期来啦。我们的iOS开源月报集合了OpenDigg一个月来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等。 Transition 构建iOS...

OpenDigg ⋅ 2017/04/13 ⋅ 0

15个快速学习苹果Swift编程语言的入门教程

要说今年最火的编程语言是什么。那就非Swift莫属了。当然最主要还是市场炒的比较热,加上官方Swift教程《The Swift Programming Language》在北航的大三学生发起在github上进行协同翻译获得了...

欲思 ⋅ 2014/07/24 ⋅ 7

借花献佛: 43个优秀的Swift开源项目推荐

来自: CSDN 拥有着苹果先天生态优势的 Swift 自发布以来,各种优秀的开源项目便层出不穷。本文作者站在个人的角度,将 2014 年 Swift 开源项目做了一个甄别、筛选,从工具、存储、网络、界面...

nzchris ⋅ 2015/01/14 ⋅ 7

没有更多内容

加载失败,请刷新页面

加载更多

下一页

内核线程、轻量级进程、用户线程

线程与进程概念 在现代操作系统中,进程支持多线程。 进程是资源管理的最小单元; 线程是程序执行的最小单元。 即线程作为调度和分配的基本单位,进程作为资源分配的基本单位 一个进程的组成...

117 ⋅ 28分钟前 ⋅ 0

elasticsearch2.4.6升级为elasticsearch-5.5.0的经历

将elasticsearch-5.5.0 中的配置 path.data 指向原来的数据路径 即 path.data: /usr/local/src/elasticsearch-2.4.6/data 注意: elasticsearch-5.5.0 需要将jdk版本升级到1.8...

晨猫 ⋅ 28分钟前 ⋅ 1

lvm讲解 磁盘故障小案例

1

oschina130111 ⋅ 32分钟前 ⋅ 0

那些提升开发人员工作效率的在线工具

本文转载自公众号 Hollis 作为一个Java开发人员,经常要和各种各样的工具打交道,除了我们常用的IDE工具以外,其实还有很多工具是我们在日常开发及学习过程中要经常使用到的。 Hollis偏爱使用...

时刻在奔跑 ⋅ 45分钟前 ⋅ 0

restful风格 实现DELETE PUT请求 的web.xml的配置

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframe......

泉天下 ⋅ 50分钟前 ⋅ 0

Shell数组

Shell数组 Shell在编程方面比Windows批处理强大很多,无论是在循环、运算。 bash支持一维数组(不支持多维数组),并且没有限定数组的大小。类似与C语言,数组元素的下标由0开始编号。获取数...

蜗牛奔跑 ⋅ 59分钟前 ⋅ 0

nmap为了开发方便 可以做简单的修改

因为nmap扫描是默认使用的是nse脚本,但是在开发的过程中需要修改后缀(主要是因为后缀为lua才能显示高亮,所以这里用一个取巧的办法) nse_main.lua文件中我们找到如下代码 local t, path = cn...

超级大黑猫 ⋅ 今天 ⋅ 0

springmvc获取axios数据为null情况

场景:前端用了vue没有用ajax与后台通信,用了axios,但是在代码运行过程中发现axios传递到后台的值接受到数据为null。 问题原因:此处的问题在与axios返回给后台的数据为json类型的,后台接...

王子城 ⋅ 今天 ⋅ 0

hadoop技术入门学习之发行版选择

经常会看到这样的问题:零基础学习hadoop难不难?有的人回答说:零基础学习hadoop,没有想象的那么难,也没有想象的那么容易。看到这样的答案不免觉得有些尴尬,这个问题算是白问了,因为这个...

左手的倒影 ⋅ 今天 ⋅ 0

806. Number of Lines To Write String - LeetCode

Question 806. Number of Lines To Write String Solution 思路:注意一点,如果a长度为4,当前行已经用了98个单元,要另起一行。 Java实现: public int[] numberOfLines(int[] widths, Str...

yysue ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部