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

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

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

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

Ответ 1

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

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

//.....

//Here I add a UITextView in code, it will work if it 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 corner radius:
textView.layer.cornerRadius = 5;
textView.clipsToBounds = YES;

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

Ответ 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];

Ответ 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
}

Ответ 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];

Ответ 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];

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

enter image description hereenter image description here

Ответ 6

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

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

У вас будет тот же вид, что и текстовое поле.

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

DCKit: bordered UITextView

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

Ответ 10

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

Нижеприведенное решение представляет собой UITextView, который снабжает его собственным UITextField для границы. Это сокращенная версия моего полного решения (которое аналогично добавляет поддержку "заполнителя" для UITextView) и было опубликовано здесь: fooobar.com/questions/12726/...

// 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);
    }        
}

Ответ 11

Существует отличное фоновое изображение, которое идентично UITextView, используемому для отправки текстовых сообщений в приложении iPhone Messages. Вам понадобится Adobe Illustrator, чтобы получить и изменить его. элементы вектора iphone ui

Ответ 12

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

Пробовал код Quartzcore и обнаружил, что это вызвало задержку в моем старом 3G (я использую для тестирования). Не большая проблема, но если вы хотите быть максимально возможными для разных ios и аппаратных средств, я рекомендую ответить Andrew_L выше - или создайте свои собственные изображения и примените соответственно.

Ответ 13

#import <QuartzCore/QuartzCore.h>
- (void)viewDidLoad{
  UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 220, 200, 100)];
  textView.layer.cornerRadius = 5;
  textView.clipsToBounds = YES;
  [textView.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
  [textView.layer setBorderColor: [[UIColor grayColor] CGColor]];
  [textView.layer setBorderWidth: 1.0];
  [textView.layer setCornerRadius:8.0f];
  [textView.layer setMasksToBounds:YES];
  [self.view addSubView:textview];
}

Ответ 14

Вы можете создать текстовое поле, которое не принимает никаких событий поверх текстового вида:

CGRect frameRect = descriptionTextField.frame;
frameRect.size.height = 50;
descriptionTextField.frame = frameRect;
descriptionTextView.frame = frameRect;
descriptionTextField.backgroundColor = [UIColor clearColor];
descriptionTextField.enabled = NO;
descriptionTextView.layer.cornerRadius = 5;
descriptionTextView.clipsToBounds = YES;

Ответ 15

Если вы хотите, чтобы ваш код контроллера был чистым, вы можете подклассифицировать UITextView, как показано ниже, и изменить имя класса в Interface Builder.

RoundTextView.h

#import <UIKit/UIKit.h>
@interface RoundTextView : UITextView
@end

RoundTextView.m

#import "RoundTextView.h"
#import <QuartzCore/QuartzCore.h>
@implementation RoundTextView
-(id) initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        [self.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.333] CGColor]];
        [self.layer setBorderWidth:1.0];
        self.layer.cornerRadius = 5;
        self.clipsToBounds = YES;
    }
    return self;
}
@end

Ответ 16

Я не думаю, что это возможно. но вы можете сделать UITableView (сгруппированы) с 1 секцией и 1 пустой ячейкой и использовать ее в качестве контейнера для UITextView.

Ответ 17

Это старый вопрос, и я также искал ответ на этот вопрос. Ответ luvieeres на 100% правильный, а позже Роб добавил код. Это отлично, но я нашел третью сторону в другом ответе на вопросы, который мне очень помогает. Я не только искал аналогичный внешний вид UITextField поверх UITextView, но также искал многострочную поддержку. ChatInputSample удовлетворены обоими. Вот почему я думаю, что эта третья сторона может быть полезной для других. Также благодаря Тимуру он упомянул этот открытый источник в здесь.

Ответ 18

В iOS7 следующие совпадения UITextField границы (по крайней мере, на мой взгляд):

textField.layer.borderColor = [[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor];
textField.layer.borderWidth = 0.5;
textField.layer.cornerRadius = 5;
textField.clipsToBounds = YES;

Не нужно ничего импортировать.

Благодаря @uvieere и @hanumanDev, ответы на которые идут мне почти там:)

Ответ 19

Вот мое решение:

- (void)viewDidLoad {
    [super viewDidLoad];


    self.textView.text = self.messagePlaceholderText;
    self.textView.layer.backgroundColor = [[UIColor whiteColor] CGColor];
    self.textView.layer.borderColor = [[[UIColor grayColor] colorWithAlphaComponent:0.3] CGColor];
    self.textView.layer.borderWidth = 0.5;
    self.textView.layer.cornerRadius = 5.5f;
    self.textView.layer.masksToBounds = YES;
    self.textView.textColor = [[UIColor grayColor] colorWithAlphaComponent:0.4];
}

- (void)textViewDidBeginEditing:(UITextView *)textView {
    if (textView == self.tvMessage) {
        // Delete placeholder text
        if ([self.textView.text isEqualToString:self.messagePlaceholderText]) {
            self.textView.text = @"";
            self.textView.textColor = [UIColor blackColor];
        }
    }
}

- (void)textViewDidEndEditing:(UITextView *)textView {
    if (textView == self.tvMessage) {
        // Write placeholder text
        if (self.textView.text.length == 0) {
            self.textView.text = self.messagePlaceholderText;
            self.textView.textColor = [[UIColor grayColor] colorWithAlphaComponent:0.4];
        }
    }
}

Ответ 20

Как насчет просто:

UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(20, 20, 280, 32)];
textField.borderStyle = UITextBorderStyleRoundedRect;
[self addSubview:textField];