我如何获得像这样的TextField

Question

我已检查UITextField的属性并尝试为其设计如下。但我没有成功。

我想补充一个UIView吃出黑色暗色这是它周围。但我不知道UITextField中是否有任何物业。

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

UPDATE：这是我的代码

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]; 

感谢您的时间。

编辑：我有图形资产，我想以编程方式使用它们。

Answer 1

1. 添加两个单独的UIView

   

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

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

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

你去那里

希望这将有助于

Answer 2

您需要将UITextFields添加为单独UIViews子视图。

设置UIView背景色：

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

然后设置边缘采用圆角：

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

为了您UITextFields，你还可以设置剪切和圆角半径。如果你也想红线使用类似：

textView.layer.borderWidth = 2.0; 
textView.layer.borderColor = [UIColor redColor]; 

Answer 3

您可以在UImageView设计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]; 

输出：

我给出了一些虚拟的颜色代码，你可以相应地进行设计。 希望它有帮助

快乐编码...

Answer 4

界面生成器：

步骤01 - 添加容器视图：添加两个视图（和设置的合适的约束）和连接它们到ViewController -as IBOutlets-：

步骤02 - 添加背景渐变imageViews：在每个容器（或“视图”）中添加一个“ImageView”，如果你想以编程方式创建梯度而不是图像，我建议这样做），然后设置渐变im为他们的年龄，不要忘记为他们设置适当的限制;最后，将它们连接到ViewController -as IBOutlets-：

步骤03 - 添加文本框：每个“ImageView的”上添加一个“文本字段”，他们应该是尺寸为背景ImageViews相同。确保将TextField的边框样式从属性检查器更改为无边框：

设置为他们适当的约束，最后，将它们连接到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 
} 

运行应用程序，它应该是这样的：

怎么样的 “验证” 的边界？您可以添加对检查文本框的这些代码行（添加边框为背景的ImageView）：

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

最后，它应该是这样的：

可以肯定，你可以玩大小，边框宽度和渐变样式，以使其看起来不错。

干杯！