开发者社区> 珲少> 正文

设计iOS中随系统键盘弹收和内容文字长度自适应高度的文本框

简介:
+关注继续查看

设计iOS中随系统键盘弹收和内容文字长度自适应高度的文本框

    文本输入框是多数与社交相关的app中不可或缺的一个控件,这些文本输入框应该具备如下的功能:

1.在键盘为弹起时,输入框悬浮在界面底部。

2.当键盘弹起时,输入框位置上移至键盘上方,并且动画应与键盘同步。

3.当输入的文字超出一行时,输入框应想用的进行高度扩展。

4.当输入框的高度达到某一极限值时,输入框高度不应继续扩展,文字区域应该支持滑动。

    使用autolayout布局技术加上对键盘的相关监听,可以十分方便的实现上述效果。首先在xib文件中进行相关约束的添加,如下图:

192428_2dqY_2340880.png

将需要的属性与约束对象关联到文件中:

1
2
3
4
5
6
7
8
9
10
//整体文本控件的高度
    @IBOutlet weak var textViewHeight: NSLayoutConstraint!
    //文本控件中的文字输入控件UITestView的高度
    @IBOutlet weak var textFieldHeight: NSLayoutConstraint!
    //文本控件中文字输入控件
    @IBOutlet weak var ourTextField: UITextView!
    //文本控件与父视图底部的约束距离
    @IBOutlet weak var textViewBottom: NSLayoutConstraint!
    //文本控件
    @IBOutlet weak var ourTextView: UIView!

在初始化方法中进行通知的注册和代理的设置:

1
2
3
    NSNotificationCenter.defaultCenter().addObserver(self, selector: Selector("keyboardWillShow:"), name: UIKeyboardWillShowNotification, object: nil)
    NSNotificationCenter.defaultCenter().addObserver(self, selector: Selector("keyboardWillHidden:"), name: UIKeyboardWillHideNotification, object: nil)
    ourTextField.delegate=self

实现通知的监听方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 //键盘将要展示时触发的方法
    func keyboardWillShow(noti:NSNotification){
        //获取通知信息
        let info:Dictionary = noti.userInfo!
        //获取信息中的键盘尺寸和位置信息
        let value:NSValue = info[UIKeyboardFrameBeginUserInfoKey] as! NSValue
        //获取键盘动画的时间信息
        let value2:NSValue = info[UIKeyboardAnimationDurationUserInfoKey] as! NSValue
        let keyboardSize = value.CGRectValue()
        let height = keyboardSize.height
        var time:NSTimeInterval=0
        value2.getValue(&time)
        //重设约束
        textViewBottom.constant = height
        //动画展示
        UIView.animateWithDuration(time) { () -> Void in
            self.view.layoutIfNeeded()
        }
    }
    //键盘将要隐藏时触发的方法
    func keyboardWillHidden(noti:NSNotification){
        let info:Dictionary = noti.userInfo!
        let value2:NSValue = info[UIKeyboardAnimationDurationUserInfoKey] as! NSValue
        var time:NSTimeInterval=0
        value2.getValue(&time)
        textViewBottom.constant = 0
        UIView.animateWithDuration(time) { () -> Void in
            self.view.layoutIfNeeded()
        }
    }

监听的键盘状态发送的通知中,会传递进来许多键盘信息,可取的键值如下:

1
2
3
4
5
6
7
8
9
10
@available(iOS 3.2, *)
public let UIKeyboardFrameBeginUserInfoKey: String //键盘的初始位置尺寸 为CGRect类型的NSValue值
@available(iOS 3.2, *)
public let UIKeyboardFrameEndUserInfoKey: String // 键盘的末位位置尺寸 为CGRect类型的NSValue值
@available(iOS 3.0, *)
public let UIKeyboardAnimationDurationUserInfoKey: String // 键盘动画时间 double类型的NSValue
@available(iOS 3.0, *)
public let UIKeyboardAnimationCurveUserInfoKey: String // 键盘动画效果 (UIViewAnimationCurve)枚举类型的NSNumber值
@available(iOS 9.0, *)
public let UIKeyboardIsLocalUserInfoKey: String //与多任务相关 判断键盘是否属于当前应用 iOS9后可用

可以监听的与键盘相关信息的通知有如下几种:

1
2
3
4
5
6
7
8
public let UIKeyboardWillShowNotification: String//键盘将要出现
public let UIKeyboardDidShowNotification: String//键盘已经出现
public let UIKeyboardWillHideNotification: String//键盘将要隐藏
public let UIKeyboardDidHideNotification: String//键盘已经隐藏
@available(iOS 5.0, *)
public let UIKeyboardWillChangeFrameNotification: String//键盘frame将要改变
@available(iOS 5.0, *)
public let UIKeyboardDidChangeFrameNotification: String//键盘frame已经改变

还需要实现当输入框文字长度改变时的回调方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
func textViewDidChange(textView: UITextView) {
        let height = textView.contentSize.height
        if height <= 37 {
            textFieldHeight.constant = 37
            textViewHeight.constant = 53
            UIView.animateWithDuration(0.3, animations: { () -> Void in
                self.view.layoutIfNeeded()
            })
            return
            //临界值
        }else if height<100 {
            textFieldHeight.constant = height
            textViewHeight.constant = height+16
            UIView.animateWithDuration(0.3, animations: { () -> Void in
                self.view.layoutIfNeeded()
            })
        }else{
            textFieldHeight.constant = 100
            textViewHeight.constant = 116
            UIView.animateWithDuration(0.3, animations: { () -> Void in
                self.view.layoutIfNeeded()
            })
        }
    }

上面代码是实现可自适应高度和位置的文本输入框控件的核心代码,效果图下图:

194104_QOJE_2340880.png                 194104_oWgz_2340880.png


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
IOS设计模式第八篇之键值观察模式
版权声明:原创作品,谢绝转载!否则将追究法律责任。 键值观察模式: 在KVO,一个对象可以要求被通知当他的某个特殊的属性被改变了。自己或者另一个对象。如果你感兴趣你可以阅读更多的信息参考: Apple’s KVO Programming Guide. 怎么用KVO设计模式呢? 正如上面提及到的。
819 0
ASP.NET中检测含有中文字符串的实际长度
以下就是在ASP.NET中检测含有中文字符串的实际长度,这个可能在很多地方都用的上.        VB.NET的写法:    Function StrLength(Byval Str As String) As Integer      Dim En As ASCIIEncoding=New ASCIIEncoding ()    Dim B As Byte()=En.
559 0
Java秒杀系统实战系列~整合Shiro实现用户登录认证
本篇博文是“Java秒杀系统实战系列文章”的第五篇,在本篇博文中,我们将整合权限认证-授权框架Shiro,实现用户的登陆认证功能,主要用于:要求用户在抢购商品或者秒杀商品时,限制用户进行登陆!并对于特定的url(比如抢购请求对应的url)进行过滤(即当用户访问指定的url时,需要要求用户进行登陆)。
3678 0
IOS设计模式第七篇之观察者设计模式
版权声明:原创作品,谢绝转载!否则将追究法律责任。 观察者设计模式 在观察者设计模式里面,一个对象通知其他的对象一些状态的改变。涉及这些对象不需要知道另一个对象---因此鼓励解耦设计模式。这个设计模式经常被用来通知感兴趣的对象当一个属性被改变时候。
771 0
麻省理工学院开发系统 使用肌肉信号控制无人机
麻省理工学院的研究人员创造了一个新的系统,能让我们更接近于人与机器人的无缝协作。这套系统被称为 "行为-A-Bot"。它利用可穿戴式传感器发出的人体肌肉信号来驾驶无人机,控制无人机的运动。
459 0
架设PPPOE Server及Radius Server(OpenLDAP+Mysql) 实现PPOE 计费系统
http://dxf1122.blog.163.com/blog/static/54041004200977101537378/ ...
716 0
iOS 的MVC设计模式
MVC是所有面向对象程序设计语言都应该遵守的规范,MVC思想是将一个应用分成三个基本部分:Model(模型)、View(视图)和Controller·(控制器),它们以最少的耦合协同工作,从而提高应用的可扩展性和可维护性。
504 0
+关注
199
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载