我如何获得这样的 TextField [英] How do I get TextField like this

问题描述

我检查了 UITextField 的属性并尝试为它设计如下图.但我没有成功.

I've checked properties of UITextField and tried out to get a design for it like below. But I didn't succeed.

我想再添加一个 UIView 以获得它周围的黑色暗淡颜色.但我不知道 UITextField 中是否有任何属性.

I thought to add one more UIView to get that black dim color which is around it. But I didn't know whether any properties are there in UITextField.

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

What do I need to do to get the same design as above.

更新:这是我的代码

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

感谢您的时间.

我有图形资产，我想以编程方式利用它们.

I have the graphic assets and I want to utilize them programatically.

推荐答案

Interface Builder:

步骤 01 - 添加容器视图:添加两个视图(并设置合适的约束)并将它们连接到 ViewController -as IBOutlets-:

Step 01 - adding the container views: add two views (and setup the suitable constraints) and connect them to the ViewController -as IBOutlets-:

第 02 步 - 添加背景渐变图像视图:在每个容器中添加一个ImageView"(或视图"，如果您想以编程方式创建渐变而不是图像，我建议您这样做)，然后为它们设置渐变图像，不要忘记为它们设置合适的约束；最后，将它们连接到 ViewController -as IBOutlets-:

Step 02 - adding the background gradient imageViews: add an "ImageView" in each of containers (or "Views" if you want to create your gradient programmatically instead of images, I recommend to do it), then set set the gradient image for them, don't forget to setup the suitable constraints for them; finally, connect them to the ViewController -as IBOutlets-:

步骤 03 - 添加文本字段:在每个ImageView"之上添加一个TextField"，它们应该与背景 ImageView 的大小相同.确保在属性检查器中将 TextFields 边框样式更改为无边框:

Step 03 - adding the textfields: add a "TextField" on top of each "ImageView", they should be the same size as the background ImageViews. make sure to change the TextFields border style to no border from the attributes inspector:

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

setup the suitable constraints for them, and finally, connect them to the ViewController -as IBOutlets-:

编码:现在，您需要在ViewDidLoad"中添加这些行:

Coding: Now, you need to add those lines in the "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
}

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

Run the application, it should look like this:

验证"边界怎么样?您可以为选中的文本字段添加这些代码行(为背景 ImageView 添加边框):

What about the "validation" border? you can add those lines of code for the checked textfield (adding a border for the background ImageView):

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

最后，它应该是这样的:

and finally, it should look like this:

当然，您可以调整大小、边框宽度和渐变样式，使其适合您的应用程序.

For sure, you can play with sizes, border widths and gradient style to make it looks good for your application.

加油！

这篇关于我如何获得这样的 TextField的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！