我如何獲得像這樣的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 

最後，它應該是這樣的：

可以肯定，你可以玩大小，邊框寬度和漸變樣式，以使其看起來不錯。

乾杯！