文档章节

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

珲少
 珲少
发布于 2016/03/23 19:41
字数 926
阅读 1.2K
收藏 2

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

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

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

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

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

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

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

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

//整体文本控件的高度
    @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!

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

    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

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

 //键盘将要展示时触发的方法
    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()
        }
    }

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

@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后可用

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

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已经改变

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

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()
            })
        }
    }

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

 

                 

专注技术,热爱生活,交流技术,也做朋友。

——珲少 QQ群:203317592

© 著作权归作者所有

珲少

珲少

粉丝 896
博文 395
码字总数 478732
作品 0
上海
程序员
私信 提问
加载中

评论(0)

基于Vue的移动端h5项目总结

以前都是写pc,后来需要写h5移动端项目,会遇到一些自适应和兼容性等方面的问题,下面从自己写过的h5项目中稍稍做点总结。 一.自适应布局 1.1 vw与rem相结合实现适配 1.原理 开启一个移动端项...

Wowoy
2019/12/04
0
0
移动端:对高度自适应的输入框说不~

1、textarea: 核心想法: 这个方法在ios上会变得非常奇怪,因为我们使用input进行监听输入的时候,事实上他会把还没输入到屏幕上的文字还在输入法上的文字也计算在里边,所以使用input进行监听...

B_Cornelius
2018/08/27
0
0
iO6 Programming pushing the limits 阅读笔记

目录 第一部分 iOS6新内容 第二部分 从每天工具中获取更多(介绍日常使用控件和框架的潜力) 第三部分 完成任务的正确工具(介绍不是那么常用的控件和框架) 第四部分 发挥到极限(深入理解i...

云飞扬v5
2015/11/09
65
0
使用 Xamarin 开发 iOS 键盘扩展(含网络访问)

版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名吕毅(包含链接:https://walterlv.blog.csdn.net/...

walter lv
2019/02/24
0
0
修复ios不支持fixed属性

场景说明:产品需求在wap页面,需要在页面底部固定一块区域执行输入操作。在Android手机中,对position:fixed是完美支持并实现预计效果的,但ios系统手机测试时出现输入框光标不居中和底部区...

碌星
2018/05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kali Linux发布2020.1a版本

Kali Linux发布2020.1a版本 Kali Linux发布2020.1a版本。现在该版本暂时只能从cdimage.kali.org下载。该版本修复了2010.1不联网安装时,没有桌面的bug。2010.1默认的桌面为Xfce。该桌面对应的...

大学霸
15分钟前
46
0
Elasticsearch+Fluentd+Kafka搭建日志系统

前言 由于logstash内存占用较大,灵活性相对没那么好,ELK正在被EFK逐步替代.其中本文所讲的EFK是Elasticsearch+Fluentd+Kfka,实际上K应该是Kibana用于日志的展示,这一块不做演示,本文只讲述数...

四颗咖啡豆
40分钟前
57
0
结果.

app/admin/options.py

MtrS
今天
42
0
00-Java 面试准备

面试之前 面试前准备简历需要注意的几个方面: 写简历、改简历,这个一定要干的。简历有两个作用,一个是吸引别人,能让别人邀请你去面试,这是前提;另一个是引导面试的人,让面试的人问你所...

源程序
今天
54
0
OSChina 周二乱弹 —— 大王(@罗马的王)颜值制霸Osc社区

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :Lunik的单曲《Seeing You Soar》 I hope you’re smiling,When seeing me soar. #今日歌曲推荐# 《Seeing You Soar》- Lunik 手...

小小编辑
今天
1.6K
5

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部