UITextField 的左视图 --用户名和密码框的标志

一般软件都有登录和注册的页面，都有2个输入框，输入框前一般会有一个图标代表用户名的头像和密码的锁

这个功能如何实现？

可以在UITextField的前面添加一张图片UIImageView 再做约束即可。

但是

UITextField本身是有一个左视图的属性的，默认情况是不显示的。我们可以通过左视图实现该功能。代码如下：

@interfaceKRLoginViewController()

#pragma mark -连线是为了给输入框 设置左视图
//用户名和密码的输入框

@property(weak,nonatomic)IBOutlet UITextField *userNameTF;

@property(weak,nonatomic)IBOutlet UITextField *passWordTF;

@end

- (void)viewDidLoad {
    [super viewDidLoad];
   
#pragma mark -设置用户名输入框的左视图
    UIImageView *userNameLeftViewIV = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:@"icon"]];
    //图片的显示模式
    userNameLeftViewIV.contentMode= UIViewContentModeCenter;
    //图片的位置和大小
    userNameLeftViewIV.frame= CGRectMake(0,0,55,20);
    //左视图默认是不显示的 设置为始终显示
    self.userNameTF.leftViewMode= UITextFieldViewModeAlways;
    self.userNameTF.leftView= userNameLeftViewIV;
   
    //密码框的左视图
    UIImageView*passWordLeftViewIV = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:@"lock"]];
    //设置图片中间显示

    passWordLeftViewIV.contentMode= UIViewContentModeCenter;

    passWordLeftViewIV.frame= CGRectMake(0,0, 55, 20);

   //设置左视图一直显示

   self.passWordTF.leftViewMode= UITextFieldViewModeAlways;

   self.passWordTF.leftView= passWordLeftViewIV;

}

效果如下：