Как стиль UITextview нравится округлое прямоугольное текстовое поле?


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

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

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

19 167

19 ответов:

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

//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 и выше, но я думаю, что теперь это де-факто платформа в любом случае.

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

    [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];

Swift 3 Version

после настройки текстового представления в interface builder.

@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
}

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

#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];

Я хотел реальное дело, поэтому я добавляю 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

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

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

вы будете иметь точно такой же вид, как текстовое поле.

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

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

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

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

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

DCKit: bordered UITextView

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

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

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

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

#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];
}

Я знаю, что уже есть много ответов на этот вопрос, но я действительно не нашел ни одного из них достаточным (по крайней мере, в 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);
    }        
}

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

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;

Если вы хотите сохранить код контроллера в чистоте, вы можете подкласс UITextView, как показано ниже, и изменить имя класса в Построителе интерфейса.

RoundTextView.h

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

RoundTextView.м

#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

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

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

в 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 чьи ответы идут мне почти туда:)

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

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