Как получить 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]; 

Спасибо за ваше время.

EDIT: У меня есть графические объекты, и я хочу использовать их программно.

Answer 1

1. Добавить два отдельных UIView

   

2. Для TextFields.Change их цвет фона серый.

3. Разместить текстовые поля на UIView.

4. И для желтого цвета, измените видКонтроллеры Цвет фона.

Там Вы идете

Надежда Это поможет

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

Вы можете спроектировать UITextField на UImageView, как я сделал здесь

Мой код:

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

Interface Builder:

Шаг 01 - добавление мнения контейнера: добавить две точки зрения (и настройки, подходящие ограничения) и подключить их к ViewController -по IBOutlets-:

Шаг 02 - добавление фонового градиента imageViews: добавьте «ImageView» в каждый из контейнеров (или «Просмотры», если вы хотите создать свой градиент программно вместо изображений, я рекомендую это сделать), а затем установите для него градиент im возраст для них, не забудьте установить подходящие ограничения для них; наконец, подключить их к ViewController его IBOutlets-:

Шаг 03 - добавление текстовых полей: добавить «TextField» в верхней части каждого «ImageView», то они должны быть тем же размером, как фон ImageViews , убедитесь, что изменить стиль границы TextFields ни к границе от инспектора атрибутов:

установки подходящих ограничений для них, и, наконец, подключить их к ViewController его 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 

и, наконец, он должен выглядеть следующим образом:

наверняка, вам может играть с размерами, шириной границ и стилем градиента, чтобы он выглядел хорошо для вашего приложения.

Приветствия!