美文网首页
UITextField输入文字展示不全(文字向左偏移)的解决

UITextField输入文字展示不全(文字向左偏移)的解决

作者: CoderAO | 来源:发表于2020-05-14 10:52 被阅读0次

断更4年多的iOS技术博客博主又回来更新啦(笑哭脸)!
时隔这么久登录简书,发现依然有很多的评论、关注、技术问题探讨,还是挺感动的。看到之前的文章仍然能帮广大码友解决一些问题,作为娃已3岁的时不时徘徊在代码边缘的超龄女码农,心理颇为欣慰。

那么究竟是什么问题让博主怒而更新呢?故事要从一个textField说起。
话说博主昨天在做一个登录后填写手机号码的页面,要求输入框可以随着输入数字的增加而变宽。

好做,textField放在一个框(UIView)里,textField和框的上下左三面固定,框右边的与textField右边距离固定,且框右边与控制器view的距离大于等于一个固定值(textField最长限制),类似这样(textField用橙色显示):


输入前.png 输入中.png 最大宽度限制.png

上代码:

// 省略了部分非关键代码
    [self.view addSubview:self.inputBg];
    [self.inputBg addSubview:self.inputTextField];
// 添加约束
    [self.inputBg mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.offset(60);
        make.top.equalTo(self.tipLabel.mas_bottom).offset(60);
        make.height.equalTo(@50);
        make.right.lessThanOrEqualTo(@(-60));
    }];
    [self.inputTextField mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.offset(20);
        make.top.bottom.offset(0);
        make.right.offset(-30);
    }];

这样就搞定啦!

但是,当我输入的时候发现了一个小问题,就是我的输入框在输入文字的时候,前面1至2个字符被遮挡起来,也就是向左偏移了一小段。看下面这张图:


前面两个数字被遮挡.png

图中我已经输入了三个数字:123,但是1完全没有显示出来,2也被遮挡了一半,那我当然不爽了。

省略几万字的心酸排查搜索过程和数小时的时间消耗,最后终于在stackoverflow里面一个不起眼的小问题里面一个不起眼的回答找到的解决方法。

原来我这个textField和里面文字的字体设置的都比较大(字号是系统24号,textField高度随父视图高度为50),可能大家在实际项目中用到如此巨大的textField的情况也不多,所以解决问题的过程中经历了很多波折。

结论:字号24不动(产品也不让你动),textField的高度不要设置50那么高,你设置小一点(比如30),或者干脆不要设置,autolayout会让其自己决定高度,就没有这个问题了。

我要做的就是把textField的约束稍稍改动那么一小下:

    [self.inputTextField mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.offset(20);
        make.centerY.offset(0);
        make.right.offset(-30);
    }];

跑一下看看:


123可以完整地显示了.png

这个结论真的让我心里一万只...飞驰而过,至于怎么排查的过程,就不细说了,估计也没人想看,结论放上来,希望以后遇到同样问题的小伙伴可以节省一点时间。

相关文章

网友评论

      本文标题:UITextField输入文字展示不全(文字向左偏移)的解决

      本文链接:https://www.haomeiwen.com/subject/ypbznhtx.html