Цвет рамки UITextField


133

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

Я использовал свойство background, чтобы установить цвет фона таким образом:

self.textField.backgroundColor = textFieldColor;

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


Много полезных ответов, но только один ( stackoverflow.com/a/5387607/826946 ) упомянул кое-что, что я нашел ключ: textField.borderStyle = UITextField.BorderStyle.none. Без этого я получаю следы встроенной границы. По-видимому, если вы не используете встроенную рамку и не начинаете определять свою собственную, вам нужно сказать, что вы не хотите ее использовать с помощью borderStyle = none, а затем определить все параметры (color, cornerRadius и borderWidth)
Энди Вайнштейн

Ответы:


274

Импортируйте QuartzCoreфреймворк в свой класс:

#import <QuartzCore/QuartzCore.h>

и для изменения цвета рамки используйте следующий фрагмент кода (я устанавливаю его в redColor),

    textField.layer.cornerRadius=8.0f;
    textField.layer.masksToBounds=YES;
    textField.layer.borderColor=[[UIColor redColor]CGColor];
    textField.layer.borderWidth= 1.0f;

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

    serverField.layer.borderColor=[[UIColor clearColor]CGColor];

в быстром коде

    textField.layer.borderWidth = 1
    textField.layer.borderColor = UIColor.whiteColor().CGColor

3
Это #import <QuartzCore / QuartzCore.h> вместо QuartCore (вы забыли z)
cldrr

54
В iOS 7 необходимо установить ширину границы, иначе цвет не вступит в силу.
Михей

1
Как новичок это не имеет смысла для меня. Если я запускаю пустое, пустое приложение, перехожу на раскадровку и добавляю поле TextView. Куда я могу импортировать кварц? Где я могу добавить информацию о границе выше? Что такое textField и как он узнает, о каком текстовом поле я говорю?
Натан МакКаскл

1
@Sephethus, если вы еще не поняли это, вам нужно сделать следующее: вы должны «подключить» текстовое поле, которое вы создали в раскадровке, и изменить эти свойства программно . После того как вы подключили раскадровку, вы заходите в свой код (например, в viewDidLoad) и изменяете эти свойства, говоря self.myTextField.layer.cornerRadiusи т. Д. Эти изменения вступят в силу, как только вы запустите свое приложение, но вы не сможете увидеть изменения в раскадровке. Если это не имеет никакого смысла для вас, я предлагаю вам зайти на сайт, например, Рэй Вендерлих, и прочитать некоторые статьи для начинающих.
Александр

@NathanMcKaskle "Куда мне импортировать кварц?" Вы добавляете его в верхней части вашего файла ViewController.h. «Что такое« textField »и как он узнает, о каком текстовом поле я говорю?» Вы можете создать «локальное» текстовое поле IBOutlet var и подключить его к TextField (не TextView), который вы только что поместили в раскадровку. Для получения дополнительной информации, проверьте здесь: hubpages.com/technology/… "Где я могу добавить информацию о пропускной способности выше?" В любом месте, но предпочтительно, в функции viewDidLoad.
Чэнь Ли Ён

21

Попробуй это:

UITextField *theTextFiels=[[UITextField alloc]initWithFrame:CGRectMake(40, 40, 150, 30)];
    theTextFiels.borderStyle=UITextBorderStyleNone;
    theTextFiels.layer.cornerRadius=8.0f;
    theTextFiels.layer.masksToBounds=YES;
        theTextFiels.backgroundColor=[UIColor redColor];
    theTextFiels.layer.borderColor=[[UIColor blackColor]CGColor];
    theTextFiels.layer.borderWidth= 1.0f;

    [self.view addSubview:theTextFiels];
    [theTextFiels release];

и импортировать QuartzCore:

#import <QuartzCore/QuartzCore.h>

17

Импортируйте следующий класс:

#import <QuartzCore/QuartzCore.h> 

// Код для установки серого цвета для границы текстового поля

[[textField layer] setBorderColor:[[UIColor colorWithRed:171.0/255.0
                                                   green:171.0/255.0
                                                    blue:171.0/255.0
                                                   alpha:1.0] CGColor]];

Замените 171.0на соответствующий номер цвета, как требуется.


14

этот вопрос обнаруживается довольно высоко в поиске Google и работал по большей части! Я обнаружил, что ответ Салмана Заиди был частично правильным для iOS 7.

Вам необходимо внести изменения в «возвратный» код. Я обнаружил, что следующее для возврата отлично работает:

textField.layer.cornerRadius = 0.0f;
textField.layer.masksToBounds = YES;
textField.layer.borderColor = [[UIColor blackColor] CGColor];
textField.layer.borderWidth = 0.0f;

Я понимаю, что это, скорее всего, связано с изменениями в iOS 7.


10

Чтобы упростить эти действия из принятого ответа, вы также можете создать категорию для UIView(поскольку это работает для всех подклассов UIView, а не только для текстовых полей:

UIView + Additions.h:

#import <Foundation/Foundation.h>

@interface UIView (Additions)
- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width 
                   radius:(float)radius;
@end

UIView + Additions.m:

#import "UIView+Additions.h"

@implementation UIView (Additions)

- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width
                   radius:(float)radius
{
    self.layer.cornerRadius = radius;
    self.layer.masksToBounds = YES;
    self.layer.borderColor = [color CGColor];
    self.layer.borderWidth = width;
}

@end

Использование:

#import "UIView+Additions.h"
//...
[textField setBorderForColor:[UIColor redColor]
                       width:1.0f
                      radius:8.0f];

9

Если вы используете TextField с закругленными углами, используйте этот код:

    self.TextField.layer.cornerRadius=8.0f;
    self.TextField.layer.masksToBounds=YES;
    self.TextField.layer.borderColor=[[UIColor redColor]CGColor];
    self.TextField.layer.borderWidth= 1.0f;

Чтобы удалить границу:

self.TextField.layer.masksToBounds=NO;
self.TextField.layer.borderColor=[[UIColor clearColor]CGColor];


4

цвет границы в любом представлении (или подклассе UIView) также может быть установлен с использованием раскадровки с небольшим количеством кодирования, и этот подход может быть очень полезен, если вы устанавливаете цвет границы для нескольких объектов пользовательского интерфейса.

Ниже приведены шаги, как этого добиться,

  1. Создайте категорию в классе CALayer. Объявите свойство типа UIColor с подходящим именем, я назову его как borderUIColor .
  2. Напишите установщик и получатель для этого свойства.
  3. В методе «Setter» просто установите для свойства «borderColor» слоя значение CGColor новых цветов.
  4. В методе 'Getter' верните UIColor с помощью borderColor слоя.

PS: помните, категории не могут иметь сохраненных свойств. 'borderUIColor' используется как вычисляемое свойство, просто как ссылка для достижения того, на чем мы фокусируемся.

Пожалуйста, посмотрите на приведенный ниже пример кода;

Цель C:

Файл интерфейса:

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer (BorderProperties)

// This assigns a CGColor to borderColor.
@property (nonatomic, assign) UIColor* borderUIColor;

@end

Файл реализации:

#import "CALayer+BorderProperties.h"

@implementation CALayer (BorderProperties)

- (void)setBorderUIColor:(UIColor *)color {
    self.borderColor = color.CGColor;
}

- (UIColor *)borderUIColor {
    return [UIColor colorWithCGColor:self.borderColor];
}

@end

Swift 2.0:

extension CALayer {
var borderUIColor: UIColor {
    set {
        self.borderColor = newValue.CGColor
    }

    get {
        return UIColor(CGColor: self.borderColor!)
    }
}
}

И, наконец, перейдите к вашей раскадровке / XIB, выполните оставшиеся шаги;

  1. Нажмите на объект просмотра, для которого вы хотите установить цвет границы.
  2. Нажмите «Identity Inspector» (3-й слева) на панели «Utility» (правая часть экрана).
  3. В разделе «Определенные пользователем атрибуты времени выполнения» нажмите кнопку «+», чтобы добавить путь к ключу.
  4. Установите тип пути к ключу «Цвет».
  5. Введите значение для ключевого пути как «layer.borderUIColor». Помните, что это должно быть имя переменной, которую вы объявили в категории, а не borderColor, здесь это borderUIColor ].
  6. Наконец, выберите любой цвет, который вы хотите.

Вы должны установить значение свойства layer.borderWidth как минимум 1, чтобы увидеть цвет границы.

Построй и беги. Удачного кодирования. :)


Пожалуйста, не публикуйте одинаковые ответы на несколько вопросов. Отправьте один хороший ответ, затем проголосуйте / пометьте, чтобы закрыть другие вопросы как дубликаты. Если вопрос не является дубликатом, адаптируйте свои ответы на вопрос .
josliber

1

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

extension UIView {
    func addBorderAndColor(color: UIColor, width: CGFloat, corner_radius: CGFloat = 0, clipsToBounds: Bool = false) {
        self.layer.borderWidth  = width
        self.layer.borderColor  = color.cgColor
        self.layer.cornerRadius = corner_radius
        self.clipsToBounds      = clipsToBounds
    }
}

Назовем это так: email.addBorderAndColor(color: UIColor.white, width: 0.5, corner_radius: 5, clipsToBounds: true).

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.