Estoy usando una vista de texto como un comentario compositor.

En el inspector de propiedades no puedo encontrar nada como un estilo de borde de la propiedad para que yo pueda hacer uso de un redondeado rect, algo así como UITextField.

Entonces, la pregunta es: ¿Cómo puedo estilo de un UITextView como un UITextField redondeada en el rect?

  • No podrías usar UITextField y apagar userInteractionEnabled?
InformationsquelleAutor harshalb | 2009-12-01

20 Comentarios

  1. 283

    No hay ningún estilo implícito que tiene que elegir, se trata de escribir un poco de código utilizando la QuartzCore marco:

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

    Sólo funciona en OS 3.0 y arriba, pero supongo que ahora es la plataforma de hecho de todos modos.

    • gracias es simplemente increíble …
    • Gracias a su trabajo muy bien..
    • Me encontré con la adición de la siguiente cima, el código anterior hace que la frontera look muy cerca de un UITextField. [textView.la capa de setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]]; [textView.la capa de setBorderWidth:2.0];
    • Asegúrese de tener: #import <QuartzCore/QuartzCore.h> . He tenido problemas porque no me importar QuartzCore
    • +1 muchas gracias por la hermosa respuesta.. saludos!!
    • Para n00bs como yo, digno de nota: poner este código en viewDidLoad NO en initWithNibName 🙂
    • Usted puede utilizar un UITextField con el borderStyle conjunto de propiedades a UITextBorderStyleRoundedRect – ver mi post de abajo.
    • En iOS 7, me parece que un ancho de borde de 0.5 f funciona mucho mejor.
    • borderWidth = 0.5 f coincide con perfecto en iOS 7
    • iOS 7 – borderWidth de 1.0 y alfa de .2 obras con el estilo predeterminado.
    • ¿qué textField.borderStyle = UITextBorderStyle.roundedRect hacer entonces? ¿Cuál es la diferencia entre eso y su forma?

  2. 76

    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];
    • Yo diría que 5px está más cerca de campos de texto, pero esta respuesta es de color gris es mejor que la respuesta seleccionada.
    • Por supuesto, usted necesita agregar QuartzCore Marco de esta respuesta y la importación por #import <QuartzCore/QuartzCore.h>
  3. 34

    Swift 3 Versión

    Después de configurar la vista texto en el 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 Versión

    @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
    }
    • El problema es que no es gris exactamente. Color de UITextField la trama es un poco diferente.
    • De decisiones .borderWidth = 0.7 hace que se vea más cerca del estilo actual veo en iOS 11.
  4. 27

    Edit: tienes Que importar

    #import <QuartzCore/QuartzCore.h>

    para el uso de radio de la esquina.

    Tratar de esto, va a trabajar para asegurarse

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

    Como
    Rob descubierto la configuración de la si desea que el color del borde de ser similares como UITextField entonces usted necesita para cambiar el ancho del borde de 2.0 y color a gris, añade la siguiente línea

    [textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]]; 
    [textView.layer setBorderWidth:2.0];
    • Me preguntaba por qué esto no estaba funcionando. Gracias por el inicio del partido acerca de QuartzCore.
  5. 22

    Yo quería que el verdadero negocio, así que añadir UIImageView como una subvista de la UITextView. Esto coincide con los nativos de la frontera en un UITextField, incluyendo 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:

    Cómo el estilo de UITextview a como Redondeada Rect campo de texto?
    Cómo el estilo de UITextview a como Redondeada Rect campo de texto?

    • Los enlaces están rotos.
    • Creo que usted también necesita saber el textView tener UITextBorderStyle Ninguno si no es que ya en XCode
    • He vuelto a subir las imágenes en formato png
    • No es bueno, el fondo se mueve a medida que se desplaza el UITextView. Supongo que tendré que ponerlo todo en un padre UIView.
    • Excelente. Que se ve genial 😀
  6. 11

    Una solución es agregar un UITextField debajo de la UITextView, hacer el UITextView fondo transparente y deshabilitar cualquier interacción del usuario en el UITextField. A continuación, en cambio en el código de la UITextField marco con algo como eso

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

    Usted tendrá exactamente el mismo aspecto que un campo de texto.

    Y como sugiere Jon, usted debe poner este trozo de código dentro de [UIViewController viewDidLayoutSubviews] en iOS 5.0+.

    • Esto era tan simple y se ve exactamente como yo lo quería mirar. Yo sólo coincidentes en el marco de la UITextField a la UITextView: CGRect frame = auto.myTextView.marco, marco.tamaño.altura +=2; auto.myTextField.frame = marco;
    • Hermosa respuesta. Limpio y sencillo. Coloque el código en viewDidLayoutSubviews: (iOS 5.0+).
    • Niza, este fue el soln me fui con en el final. Tenga en cuenta que no funcionaba hasta que he utilizado de Jon comentario re: viewDidLayoutSubviews:
    • Este fue el más rápido, y se ve mejor.
  7. 4

    Para el mejor efecto tiene el uso de una costumbre (estirable) imagen de fondo. Esta es también la forma en la UITextField‘s redondeado borde se dibuja.

  8. 3

    Una manera que he encontrado de hacerlo sin necesidad de programación es hacer que el campo de texto de fondo transparente, a continuación, coloque una Ronda Rect Botón detrás de él. Asegúrese de cambiar la configuración del botón para desactivarlo y desactive la Disable adjusts image casilla de verificación.

  9. 3

    Es posible que desee comprobar hacia fuera mi biblioteca llamada DCKit.

    Usted sería capaz de hacer una esquina redondeada vista de texto (así como el texto de campo/botón/plain UIView) de la Interface Builder directamente:

    Cómo el estilo de UITextview a como Redondeada Rect campo de texto?

    También tiene muchas otras características útiles, tales como campos de texto con la validación, los controles de las fronteras, trazos de las fronteras, el círculo y la línea del cabello vistas etc.

    • Bueno, gracias 🙂
    • biblioteca muy bonita… gracias
  10. 3

    Sé que ya hay un montón de respuestas a este, pero realmente no encontrar ningún suficiente (al menos en Swift). Yo quería una solución que proporciona el mismo borde exacto como un UITextField (no es un aproximado que se ve como se ve ahora, pero uno que se ve exactamente como es y siempre tendrá un aspecto exactamente igual). Tuve que usar un UITextField a la espalda de la UITextView para el fondo, pero no quiero tener que cree que por separado cada vez.

    La solución a continuación es un UITextView que suministra la propia UITextField de la frontera. Esta es una versión recortada de mi completa solución (que añade «marcador de posición» apoyo a la UITextView de una manera similar) y se ha publicado aquí: 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);
        }        
    }
  11. 2

    Una manera que he encontrado de hacerlo sin necesidad de programación es hacer que el campo de texto de fondo transparente, a continuación, coloque una Ronda Rect Botón detrás de él. Asegúrese de cambiar la configuración del botón para desactivarlo y desactive la casilla Deshabilitar ajusta la imagen de la casilla de verificación.

    Probado el Quartzcore código y se encontró que causó el retraso en mi viejo 3G (yo uso para hacer pruebas). No es un gran problema pero si quieres ser lo más inclusivo posible para los diferentes ios y hardware recomiendo Andrew_L la respuesta de arriba o crear tus propias imágenes y aplicar en consecuencia.

  12. 2
    #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];
    }
  13. 1

    Puede crear un Campo de Texto que no se acepta a cualquiera de los eventos en la parte superior de una Vista de Texto como este:

    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;
    • O simplemente hacer un campo de texto en el interface builder. A continuación, establezca la altura en el código (ya que el interface builder, no te dejará). CGRect frameRect = auto.textField.marco; frameRect.tamaño.altura = 50; el auto.textField.frame = frameRect;
  14. 1

    Si quieres mantener tu código de controlador de limpiar, puede subclase UITextView como el de abajo, y cambiar el nombre de la clase en el 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
  15. 0

    No creo que es posible. pero usted puede hacer UITableView(agrupados) con 1 sección y 1 celda vacía y utilizar como un contenedor para su UITextView.

  16. 0

    Esta es una vieja pregunta, y yo también era buscado para esta pregunta de respuesta. luvieeres respuesta 100% correcta y más tarde Rob añadido algo de código. Que es excelente, pero me he encontrado con un tercero en otra de las preguntas de respuesta que parece muy útil para mí. Yo no sólo era buscado aspecto similar de UITextField más de UITextView, yo también era buscado por varias líneas de apoyo. ChatInputSample dejó satisfechos a ambos. Es por eso que creo que esta tercera parte podría ser útil a los demás. También gracias a Timur, mencionó open source en aquí.

  17. 0

    En iOS7 los siguientes partidos UITextField frontera perfectamente (a mis ojos al menos):

    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 va casi allí 🙂

  18. 0

    Aquí está mi solución:

    - (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];
            }
        }
    }
  19. -1

    Pero, ¿qué tal:

    UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(20, 20, 280, 32)];
    textField.borderStyle = UITextBorderStyleRoundedRect;
    [self addSubview:textField];
    • la pregunta es acerca del textview.
    • Lo siento – gatillo de la pila de respuesta. Estaría interesado en saber por qué no podía simplemente utilizar un UITextField con userInteractionEnabled conjunto para NO.
    • Textfield no admite varias líneas de
    • entendido. Gracias por aclarar
    • también hay que agregar el color del borde y borde parámetro de ancho de…

Dejar respuesta

Please enter your comment!
Please enter your name here