web-dev-qa-db-fra.com

Comment styler UITextview pour aimer le champ de texte Rounded Rect?

J'utilise une vue de texte en tant que compositeur de commentaires.

Dans l'inspecteur des propriétés, je ne trouve rien qui ressemble à une propriété de style bordure, de sorte que je puisse utiliser un rectangle arrondi, quelque chose comme UITextField.

La question est donc la suivante: comment puis-je définir un UITextView comme un UITextField avec un rect arrondi?

iosuitextview
169
harshalb

Il n'y a pas de style implicite que vous devez choisir, cela implique d'écrire un peu de code en utilisant le framework 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;

Cela ne fonctionne que sous OS 3.0 et supérieur, mais je suppose que c'est maintenant la plate-forme de facto.

283
luvieere

ce code a bien fonctionné pour moi:

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

Swift 3 Version

Après avoir configuré la vue de texte dans le constructeur d’interface.

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

@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
}
34
Sean McClory

Edit: vous devez importer

#import <QuartzCore/QuartzCore.h>

pour utiliser le rayon de coin.

Essayez ceci cela fonctionnera à coup sûr

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

Comme Rob l'a imaginé en définissant le si vous voulez que la couleur de la bordure soit semblable à UITextField, vous devez changer la largeur de la bordure en 2,0 et la couleur en gris en ajoutant la ligne suivante.

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

Je voulais la vraie affaire, alors j’ajoute UIImageView en tant que sous-vue de UITextView. Cela correspond à la bordure native d'un UITextField, y compris le dégradé de haut en bas:

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

Ce sont les images que j'utilise:

enter image description hereenter image description here

22
Ben Packard

Une solution consiste à ajouter un UITextField en dessous de UITextView , rendre le fond UITextView transparent et désactiver toute interaction de l'utilisateur sur le UITextField. Puis, dans le code, changez le cadre UITextField avec quelque chose comme ça

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

Vous aurez exactement le même aspect qu'un champ de texte.

Et comme suggéré par Jon , vous devriez mettre ce morceau de code à l'intérieur de [UIViewController viewDidLayoutSubviews] sur iOS 5.0+.

11
Phil

Pour obtenir le meilleur effet possible, vous devez utiliser une image d’arrière-plan personnalisée (extensible). C'est également comme cela que la bordure arrondie de UITextField est dessinée.

4
kennytm

Une façon que j'ai trouvée de le faire sans programmation est de rendre l'arrière-plan du champ de texte transparent, puis de placer un bouton Round Rect derrière celui-ci. Assurez-vous de changer les paramètres du bouton pour le désactiver et décochez la case Disable adjusts image case à cocher.

3
Andrew_L

Vous voudrez peut-être consulter ma bibliothèque appelée DCKit .

Vous pourrez créer une vue de texte aux coins arrondis (ainsi qu'un champ de texte/bouton/texte simple UIView) à partir du fichier Interface Builder directement:

DCKit: bordered UITextView

Il comporte également de nombreuses autres fonctionnalités utiles, telles que des champs de texte avec validation, des contrôles avec des bordures, des bordures en pointillés, des vues en cercle et en traits fins, etc.

3
Andrey Gordeev

Je sais qu'il y a déjà beaucoup de réponses à cette question, mais je n'en ai trouvé aucune suffisante (du moins dans Swift). Je recherchais une solution offrant la même bordure qu'un UITextField (et non une solution approximative qui ressemble à ce à quoi elle ressemble maintenant, mais une solution qui lui ressemble exactement et qui lui ressemblera toujours). J'avais besoin d'utiliser un UITextField pour sauvegarder UITextView pour l'arrière-plan, mais je ne voulais pas avoir à le créer séparément à chaque fois.

La solution ci-dessous est une UITextView qui fournit son propre UITextField pour la frontière. Il s'agit d'une version allégée de ma solution complète (qui ajoute le support "d'espace réservé" à UITextView de la même manière) et a été publiée ici: 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);
    }        
}
3
BobDickinson
#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];
}
2
Sonu

Il existe une superbe image d'arrière-plan qui est identique au UITextView utilisé pour l'envoi de messages texte dans l'application Messages de l'iPhone. Vous aurez besoin d’Adobe Illustrator pour l’obtenir et le modifier. éléments vectoriels iphone ui

2
ma11hew28

Une façon que j'ai trouvée de le faire sans programmation est de rendre l'arrière-plan du champ de texte transparent, puis de placer un bouton Round Rect derrière celui-ci. Assurez-vous de changer les paramètres du bouton pour le désactiver et décochez la case Désactiver ajuste l'image.

J'ai essayé le code Quartzcore et trouvé qu'il causait un décalage sur mon ancien 3G (que j'utilise pour les tests). Pas un gros problème, mais si vous voulez être aussi inclusif que possible pour différents ios et matériels, je vous recommande la réponse de Andrew_L ci-dessus - ou créez vos propres images et postulez en conséquence.

2
Apple Jooce

Vous pouvez créer un champ de texte qui n'accepte aucun événement en haut d'une vue de texte, comme ceci:

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;
1
Nate

Si vous souhaitez que votre code de contrôleur reste propre, vous pouvez sous-classer UITextView comme ci-dessous et modifier le nom de la classe dans 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
1
Satoshi Nakajima

Je ne pense pas que c'est possible. mais vous pouvez faire UITableView (groupé) avec 1 section et 1 cellule vide et l'utiliser comme conteneur pour votre UITextView.

0
Morion

Voici ma solution:

- (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];
        }
    }
}
0
Manuel Schmitzberger

Dans iOS7, les éléments suivants correspondent parfaitement à la bordure UITextField (du moins à mes yeux):

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

Il n'est pas nécessaire d'importer quelque chose de spécial.

Merci à @uvieere et @hanumanDev dont les réponses me sont presque parvenues :)

0
Adrian Toman

C'est une vieille question, et j'ai également été recherché pour cette réponse aux questions. La réponse de luvieeres est correcte à 100% et plus tard, Rob a ajouté du code. C'est excellent, mais j'ai trouvé un tiers dans réponse à une autre question qui me semble très utile. Je n'ai pas seulement recherché l'apparence similaire de UITextField sur UITextView, mais également le support multiligne. ChatInputSample satisfait les deux. C'est pourquoi je pense que ce tiers pourrait être utile aux autres. Aussi, grâce à Timur, il a mentionné cette source ouverte dans ici .

0
sumon