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

断更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

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

最后编辑于：2020.05.14 10:56:59