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