Как стилизовать UITextview как текстовое поле Rounded Rect?

Question

Я использую текстовое представление как компоновщик комментариев.

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

Итак, вопрос таков: как мне оформить UITextView как UITextField с закругленным прямоугольником?

Answer 1

Нет неявного стиля, который вы должны выбрать, он включает в себя написание небольшого количества кода с использованием QuartzCore framework:

//first, you
#import <QuartzCore/QuartzCore.h>

//.....

//Here I add a UITextView in code, it will work if it's added in IB too
UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 220, 200, 100)];

//To make the border look very close to a UITextField
[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];
[textView.layer setBorderWidth:2.0];

//The rounded corner part, where you specify your view's corner radius:
textView.layer.cornerRadius = 5;
textView.clipsToBounds = YES;

Это работает только на OS 3.0 и выше, но я думаю, что теперь это де-факто платформа в любом случае.

Answer 2

этот код хорошо сработал для меня:

    [yourTextView.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
    [yourTextView.layer setBorderColor: [[UIColor grayColor] CGColor]];
    [yourTextView.layer setBorderWidth: 1.0];
    [yourTextView.layer setCornerRadius:8.0f];
    [yourTextView.layer setMasksToBounds:YES];

Answer 3

Swift 3 версия

После настройки просмотра текста в конструкторе интерфейсов.

@IBOutlet weak var textView: UITextView!

override func viewDidLoad() {
    super.viewDidLoad()
    textView.layer.cornerRadius = 5     
    textView.layer.borderColor = UIColor.gray.withAlphaComponent(0.5).cgColor
    textView.layer.borderWidth = 0.5  
    textView.clipsToBounds = true
}

Версия Swift 2.2

@IBOutlet weak var textView: UITextView!

override func viewDidLoad() {
    super.viewDidLoad()
    textView.layer.cornerRadius = 5     
    textView.layer.borderColor = UIColor.grayColor().colorWithAlphaComponent(0.5).CGColor
    textView.layer.borderWidth = 0.5  
    textView.clipsToBounds = true
}

Answer 4

Редактировать: Вы должны импортировать

#import <QuartzCore/QuartzCore.h>

для использования углового радиуса.

Попробуйте, это будет работать наверняка

UITextView* txtView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 300, 100)];
txtView.layer.cornerRadius = 5.0;
txtView.clipsToBounds = YES;

Как Роб понял, что если вы хотите, чтобы цвет границы был похож на UITextField, тогда вам нужно изменить ширину границы на 2.0 и цвет на серый, добавив следующую строку

[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]]; 
[textView.layer setBorderWidth:2.0];

Answer 5

Я хотел получить реальную сделку, поэтому я добавил UIImageView в качестве подпредставления UITextView. Это соответствует родной границе на UITextField, включая градиент сверху вниз:

textView.backgroundColor = [UIColor clearColor];
UIImageView *borderView = [[UIImageView alloc] initWithFrame: CGRectMake(0, 0, textView.frame.size.width, textView.frame.size.height)];
borderView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
UIImage *textFieldImage = [[UIImage imageNamed:@"TextField.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 8, 15, 8)];
borderView.image = textFieldImage;
[textField addSubview: borderView];
[textField sendSubviewToBack: borderView];

Вот изображения, которые я использую:

Answer 6

Одним из решений является добавить UITextField ниже UITextView , сделать фон UITextView прозрачным и отключить любое взаимодействие с пользователем на UITextField. Затем в коде измените кадр UITextField на что-то подобное

self.textField.frame = CGRectInset(self.textView.frame, 0, -2);

Вы будете выглядеть точно так же, как текстовое поле.

И, как предлагает Jon , вы должны поместить этот кусок кода в [UIViewController viewDidLayoutSubviews] на iOS 5.0 +.

Answer 7

Для достижения наилучшего эффекта вы должны использовать пользовательское (растягиваемое) фоновое изображение. Это также, как нарисована округленная граница UITextField.

Answer 8

Вы можете проверить мою библиотеку под названием DCKit .

Вы можете сделать представление текста в виде закругленного угла (а также текстовое поле / кнопка / обычный текст UIView) непосредственно из Interface Builder:

Он также имеет много других полезных функций, таких как текстовые поля с проверкой, элементы управления с границами, пунктирные границы, круговые и линии роста волос и т. Д.

Answer 9

Один из способов сделать это без программирования - сделать фон текстового поля прозрачным, а затем поместить круглую кнопку Rect позади него. Обязательно измените настройки кнопки, чтобы отключить ее, и снимите флажок Disable adjusts image.

Answer 10

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

Решение ниже представляет собой UITextView, который предоставляет собственный UITextField для границы. Это урезанная версия моего полного решения (которая добавляет поддержку «заполнителя» в UITextView аналогичным образом), и была размещена здесь: https://stackoverflow.com/a/36561236/1227119

// This class implements a UITextView that has a UITextField behind it, where the 
// UITextField provides the border.
//
class TextView : UITextView, UITextViewDelegate
{
    var textField = TextField();

    required init?(coder: NSCoder)
    {
        fatalError("This class doesn't support NSCoding.")
    }

    override init(frame: CGRect, textContainer: NSTextContainer?)
    {
        super.init(frame: frame, textContainer: textContainer);

        self.delegate = self;

        // Create a background TextField with clear (invisible) text and disabled
        self.textField.borderStyle = UITextBorderStyle.RoundedRect;
        self.textField.textColor = UIColor.clearColor();
        self.textField.userInteractionEnabled = false;

        self.addSubview(textField);
        self.sendSubviewToBack(textField);
    }

    convenience init()
    {
        self.init(frame: CGRectZero, textContainer: nil)
    }

    override func layoutSubviews()
    {
        super.layoutSubviews()
        // Do not scroll the background textView
        self.textField.frame = CGRectMake(0, self.contentOffset.y, self.frame.width, self.frame.height);
    }

    // UITextViewDelegate - Note: If you replace delegate, your delegate must call this
    func scrollViewDidScroll(scrollView: UIScrollView)
    {
        // Do not scroll the background textView
        self.textField.frame = CGRectMake(0, self.contentOffset.y, self.frame.width, self.frame.height);
    }        
}