ios - fields - Cómo estilo UITextview para me gusta el campo de texto Rectángulo redondeado?

text field ios 11

Question

Estoy usando una vista de texto como compositor de comentarios.

En el inspector de propiedades no encuentro nada parecido a una propiedad de estilo de borde, por lo que puedo usar un rectángulo redondeado, algo así como UITextField .

Entonces, la pregunta es: ¿cómo puedo UITextView un UITextView como un UITextField con un rect redondeado?

Answer 1

Una forma de hacerlo sin programar es hacer que el fondo del campo de texto sea transparente, luego coloque un botón Round Rect detrás de él. Asegúrese de cambiar la configuración del botón para deshabilitarlo y desmarque la casilla Desactivar ajusta la imagen.

Probé el código de Quartzcore y descubrí que causaba un retraso en mi viejo 3G (lo utilizo para las pruebas). No es un gran problema, pero si quieres ser lo más inclusivo posible para diferentes ios y hardware, recomiendo la respuesta de Andrew_L anterior, o crea tus propias imágenes y aplica en consecuencia.

Answer 2

Versión de Swift 3

Después de configurar la vista de texto en el constructor de interfaz.

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

Versión de 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 3

¿Qué tal solo?

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

Answer 4

En iOS7, lo siguiente coincide perfectamente con el borde de UITextField (a mi entender):

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

No hay necesidad de importar nada especial.

Gracias a @uvieere y @hanumanDev cuyas respuestas me siguen casi :)

Answer 5

Es posible que desee consultar mi biblioteca llamada DCKit .

Podrías hacer una vista de texto de esquina redondeada (así como el campo de texto / botón / UIView simple) UIView desde el Interface Builder :

También tiene muchas otras funciones útiles, como campos de texto con validación, controles con bordes, bordes discontinuos, vistas en círculo y finas, etc.

Answer 6

Esta es una vieja pregunta, y también me buscaron esta respuesta a las preguntas. La respuesta de luvieeres es 100% correcta y luego Rob agregó un código. Eso es excelente, pero encontré a un tercero en otra respuesta a preguntas que me parece muy útil. No solo busqué un aspecto similar de UITextField sobre UITextView , también me buscaron para el soporte multilínea. ChatInputSample satisfizo ambos. Es por eso que creo que este tercero podría ser útil para otros. También gracias a Timur, mencionó esta fuente abierta here .

Answer 7

Hay una gran imagen de fondo que es idéntica a la UITextView utilizada para enviar mensajes de texto en la aplicación Mensajes de iPhone. Necesitarás Adobe Illustrator para obtener y modificarlo. elementos de vector iphone ui

Answer 8

No creo que sea posible. pero puede hacer UITableView (agrupado) con 1 sección y 1 celda vacía y usarlo como contenedor para su UITextView .

Answer 9

No hay un estilo implícito que QuartzCore elegir, se trata de escribir un poco de código usando 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;

Solo funciona en OS 3.0 y versiones superiores, pero supongo que ahora es la plataforma de facto.

Answer 10

Para obtener el mejor efecto, debe usar una imagen de fondo personalizada (estirable). Esta es también la forma en que se UITextField el borde redondeado del UITextField .

Answer 11

Puede crear un campo de texto que no acepte ningún evento en la parte superior de una vista de texto como esta:

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;

Answer 12

Quería el trato real, así que UIImageView como una subvista del UITextView . Esto coincide con el borde nativo en un UITextField , incluido el degradado de arriba a abajo:

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

Estas son las imágenes que uso:

Answer 13

Sé que ya hay muchas respuestas a esta, pero realmente no encontré ninguna de ellas suficiente (al menos en Swift). Quería una solución que proporcionara el mismo borde exacto que un UITextField (no uno aproximado que se parece a lo que parece en este momento, pero que se ve exactamente igual y siempre se verá exactamente igual). Necesitaba usar un UITextField para respaldar el UITextView para el fondo, pero no quería tener que crearlo por separado cada vez.

La siguiente solución es una UITextView que proporciona su propio UITextField para el borde. Esta es una versión reducida de mi solución completa (que agrega soporte de "marcador de posición" a UITextView de manera similar) y se publicó aquí: https://.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);
    }        
}

Answer 14

Si desea mantener el código de su controlador limpio, puede subclasificar UITextView como se muestra a continuación y cambiar el nombre de la clase en 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

Answer 15

Una forma de hacerlo sin programar es hacer que el fondo del campo de texto sea transparente, luego coloque un botón Round Rect detrás de él. Asegúrese de cambiar la configuración del botón para deshabilitarlo y desmarque la casilla Disable adjusts image .

Answer 16

Una solución es agregar un UITextField debajo de UITextView , hacer que el fondo de UITextView transparente y deshabilitar cualquier interacción del usuario en el UITextField . Luego, en el código, cambie el cuadro UITextField con algo así

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

Tendrá exactamente el mismo aspecto que un campo de texto.

Y como lo sugirió Jon , debe poner este fragmento de código dentro de [UIViewController viewDidLayoutSubviews] en iOS 5.0+.

Answer 17

este código funcionó bien para mí:

    [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 18

Editar: tienes que importar

#import <QuartzCore/QuartzCore.h>

para usar el radio de la esquina.

Prueba esto, funcionará con seguridad

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

Como Rob lo UITextField estableciendo si desea que el color del borde sea similar a UITextField entonces necesita cambiar el ancho del borde a 2.0 y el color a gris agregando la siguiente línea

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

Answer 19

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