关于UITextField左侧图标的设置
程序员文章站
2022-05-29 23:51:05
...
背景:
这几天在写一个注册、登陆的界面。想模仿一些热门的app的登录注册界面,输入框肯定是少不了的啦~~所以,就自然而然遇到了输入框左侧图标的设置的问题。
设计思路:
- 方案一:
左侧的图标是一个UIImageView
来设置,右边放一个UITextField
。当然,这种方法是很low
的,建议用方案二。因为UITextField
自带左侧视图,直接用就行了。 - 方案二:直接用
UITextField
自带的左侧视图,因为左侧视图是一个UIView
,可以创建一个UIImageView
,然后把这个UIImageView
的赋值给左侧视图UIView
。
会遇到的问题:
你会发现,左侧的UIImageView
无论你怎么设置X轴的距离,它都紧贴着UITextField
的左侧。
解决办法:
办法一:让美工给你切一个这样的图标,就可以让左侧视图看起来有点距离了。这个图片除了图标之外,其余都是透明色的。
-
办法二:直接把这个
UIImageView
的宽度设宽一个,然后高度设置合适就行。再让UIImageView
的按比例适应,或者右侧适应,居中适应。都可以。图片中,红色的部分就是UIImageView
的宽高,让手机图标按比例适应。这样,就不会紧贴着UITextField
的左侧了。推荐使用方法二咯。因为我们都走正常的道路,如果像办法一那样,切一个这么奇怪的图,总感觉怪怪的。我自己的切图很烂,这些图标都是直接从“阿里图标库”里面搜的。所以我用办法二。
参考代码:
self.phoneTextField = [[UITextField alloc] initWithFrame:CGRectMake(0.5*(ZFScreenW - 300 * ZFRatioW), CGRectGetMaxY(self.signPicImgView.frame) + 10, 300 * ZFRatioW, 44 *ZFRatioH)];
self.phoneTextField.background = [UIImage imageNamed:@"textFieldBackground"];
self.phoneTextField.attributedPlaceholder = [NSString changePlaceholderAttributes:@"请输入手机号码"];
[self.view addSubview:self.phoneTextField];
UIImageView *leftPhoneImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, (self.phoneTextField.frame.size.height - 20)*0.5, 40, 20)];
leftPhoneImgView.image = [UIImage imageNamed:@"phone"];
leftPhoneImgView.contentMode = UIViewContentModeScaleAspectFit;
self.phoneTextField.leftView = leftPhoneImgView;
self.phoneTextField.leftViewMode = UITextFieldViewModeAlways;