我如何得到像这样的TextField

我已经检查了UITextField属性,并试图得到如下的devise。 但是我没有成功。

在这里输入图像说明

我想添加一个更多的UIView得到它周围的黑暗的颜色。 但是我不知道UITextField是否有任何属性。

我需要做什么才能获得与上面相同的devise。

更新:这是我的代码

  self.txtUserName = [[UITextField alloc]initWithFrame:CGRectMake(Padding, height/3.5, width - (Padding*2), TextFieldHeight)]; self.txtUserName.backgroundColor = [UIColor whiteColor]; self.txtUserName.textColor = [UIColor whiteColor]; self.txtUserName.borderStyle = UITextBorderStyleRoundedRect; [self.txtUserName.layer setBorderColor: [[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]]; [self.txtUserName.layer setBorderWidth: 5.0]; [self.txtUserName.layer setCornerRadius:5]; 

谢谢你的时间。

编辑:我有graphics资产,我想用编程方式。

界面生成器:

第01步 – 添加容器视图 :添加两个视图(并设置合适的约束),并将它们连接到ViewController -as IBOutlets-: 在这里输入图像说明

第二步 – 添加背景渐变imageViews :在每个容器(或“视图”)中添加一个“ImageView”,如果你想创build梯度而不是图像,我build议这样做),然后设置为他们的梯度图像,不要忘记为他们设置合适的约束。 最后,将它们连接到ViewController -as IBOutlets-: 在这里输入图像说明

第3步 – 添加文本字段 :在每个“ImageView”顶部添加一个“TextField”,它们应该与背景ImageViews大小相同。 请确保将属性检查器的TextFields边框样式更改为无边框:

在这里输入图像说明

为它们设置合适的约束,最后将它们连接到ViewController -as IBOutlets-:

在这里输入图像说明

编码:现在,您需要在“ViewDidLoad”中添加这些行:

 override func viewDidLoad() { super.viewDidLoad() // adding corner radius to the container views: viewUsernameContainer.layer.cornerRadius = 5 viewPasswordContainer.layer.cornerRadius = 5 // adding corner radius to the background imageviews: imgUsernameBackground.clipsToBounds = true imgUsernameBackground.layer.cornerRadius = 5 imgPasswordBackground.clipsToBounds = true imgPasswordBackground.layer.cornerRadius = 5 } 

运行应用程序,它应该看起来像这样:

在这里输入图像说明

那么“validation”边界呢? 你可以为选中的文本框添加这些代码行(为背景ImageView添加边框):

 // adding border to the username background ImageView imgUsernameBackground.layer.borderWidth = 2 // whatever color you want... imgUsernameBackground.layer.borderColor = UIColor.black.cgColor 

最后,它应该是这样的:

在这里输入图像说明

当然,你可以玩大小,边框宽度和渐变风格,使它看起来很好,为您的应用程序。

打起精神来!

你需要添加你的UITextFields作为单独的UIViews子视图。

UIView背景颜色设置为:

 backView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5] 

然后使用以下设置边缘舍入:

 backView.clipsToBounds = YES; backView.layer.cornerRadius = 4.0; 

对于你的UITextFields你也可以设置裁剪和angular半径。 如果你也想要红线使用类似的东西:

 textView.layer.borderWidth = 2.0; textView.layer.borderColor = [UIColor redColor]; 
  1. 添加两个单独的UIView

    的UIView

  2. 对于TextFields.Change他们的背景颜色为灰色。

  3. 将文本字段放在UIView上。

  4. 对于黄颜色,更改ViewControllers背景颜色。

你走了

希望这会帮助

你可以像在这里一样deviseUImageView上的UITextField

我的代码:

 UIImageView *imgVw = [[UIImageView alloc] initWithFrame:CGRectMake(20, 100, [UIScreen mainScreen].bounds.size.width - 40, 50)]; imgVw.backgroundColor = [UIColor colorWithWhite:0.2 alpha:0.4]; imgVw.layer.cornerRadius = 5.0; imgVw.userInteractionEnabled = YES; [self.view addSubview:imgVw]; UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 10)]; UITextField *txtFld = [[UITextField alloc] initWithFrame:CGRectMake(5, 5, CGRectGetWidth(imgVw.frame) - 10, CGRectGetHeight(imgVw.frame) - 10)]; txtFld.leftView = leftView; txtFld.leftViewMode = UITextFieldViewModeAlways; txtFld.delegate = self; txtFld.layer.borderColor = [UIColor redColor].CGColor; txtFld.layer.borderWidth = 2.0; txtFld.layer.cornerRadius = 5.0; [imgVw addSubview:txtFld]; 

输出:

在这里输入图像说明

我给了一些虚拟的颜色代码,你可以相应地devise。 希望能帮助到你

快乐编码…