美文网首页iOS高质量博客iOS奇思怪巧IOS开发
史上最全的iOS之UITextView实现placeHolder

史上最全的iOS之UITextView实现placeHolder

作者: VV木公子 | 来源:发表于2016-05-05 17:13 被阅读25157次

    前言

    iOS开发中,UITextField和UITextView是最常用的文本接受类和文本展示类的控件。UITextField和UITextView都输入文本,也都可以监听文本的改变。不同的是,UITextField继承自UIControl这个抽象类。UITextView继承自UIScrollView这个实体类。这就导致了UITextView可以多行展示内容,并且还可以像UIScrollView一样滚动。而UITextField只能单独的展示一行内容。从这个角度,UITextView在功能上是优于UITextField的。
    但是,众所周知,UITextField中有一个placeholder属性,可以设置UITextField的占位文字,起到提示用户输入相关信息的作用。可是,UITextView就没那么幸运了,apple没有给UITextView提供一个类似于placeholder这样的属性来供开发者使用。而开发中,我们经常会遇到既要占位文字,又要可以多行展示并且可以滚动的控件,单纯的UITextField或者UITextView都不能满足这种产品上的需求。比如,现在市面上的app大多都有一个用户反馈的入口,如下图(一)所示。下面我就把自己能够想到的方法汇总一下,让更多的开发者知道,原来有这么多方法可以实现UITextView的占位文字。

    图(一)

    方法一

    1.把UITextView的text属性当成“placeholder”使用。
    2.在开始编辑的代理方法里清除“placeholder”。
    3.在结束编辑的代理方法里根据条件设置“placeholder”。

    特点:这种方法的特点是,当用户点击了textView,placeholder占位文字就会立马消失,官方的placeholder是当系统监听到用户输入了文字后placeholder才会消失。

    // 创建textView
    UITextView *textView =[[UITextViewalloc]initWithFrame:CGRectMake(20,70,SCREEN.width-40,100)];
    textView.backgroundColor= [UIColor whiteColor];
    textView.text = @"我是placeholder";
    textView.textColor = [UIColor grayColor];
    textView.delegate = self;
    [self.view addSubview:textView];
    
    #pragma mark - UITextViewDelegate
    - (void)textViewDidEndEditing:(UITextView *)textView
    {
        if(textView.text.length < 1){
            textView.text = @"我是placeholder";
            textView.textColor = [UIColor grayColor];
        }
    }
    - (void)textViewDidBeginEditing:(UITextView *)textView
    {
        if([textView.text isEqualToString:@"我是placeholder"]){
            textView.text=@"";
            textView.textColor=[UIColor blackColor];
        }
    }
    

    方法二

    1.创建textView
    2.给textView添加一个UILabel子控件,作为placeholder
    3.在文本改变的代理方法里面显示/隐藏UILabel

    特点:该方法同样也可以实现类似于placeholder的功能。相比较方法一,方法二可以实现动态监听文本的改变,并非弹出键盘就立即清除placeholder,只有当用户开始输入文本的时候。placeholder才会消失。同样,当用户清空文本的时候,placeholder又会重新显示出来。

    #import "WSViewController.h"
    
    @interface WSViewController () <UITextViewDelegate>
    
    @property(nonatomic, weak)UITextView *textView;
    
    @property(nonatomic, weak)UILabel *placeHolder;
    
    @end
    
    @implementation WSViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
    
        [self setupTextView];
    
    }
    
    // 添加textView
    - (void)setupTextView
    {
        UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(10, 74, SCREEN_WIDTH - 2 * 10, 200)];
        textView.frame = CGRectMake(10, 74, SCREEN_WIDTH - 2 * 10, 200);
    
        [self.view addSubview:textView];
        self.textView = textView;
    
        textView.contentInset = UIEdgeInsetsMake(-64, 0, 0, 0);
    
        textView.delegate = self;
        [self setupPlaceHolder];
        
        
        //在弹出的键盘上面加一个view来放置退出键盘的Done按钮
        UIToolbar * topView = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 30)];
        [topView setBarStyle:UIBarStyleDefault];
        UIBarButtonItem * btnSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
        UIBarButtonItem * doneButton = [[UIBarButtonItem alloc] initWithTitle:@"完成" style:UIBarButtonItemStyleDone target:self action:@selector(dismissKeyBoard)];
        NSArray * buttonsArray = [NSArray arrayWithObjects:btnSpace, doneButton, nil];
    
        [topView setItems:buttonsArray];
        [textView setInputAccessoryView:topView];
    
    }
    
    // 给textView添加一个UILabel子控件
    - (void)setupPlaceHolder
    {
        UILabel *placeHolder = [[UILabel alloc] initWithFrame:CGRectMake(15, -2, SCREEN_WIDTH - 2 * 15, 200)];
        self.placeHolder = placeHolder;
        
        placeHolder.text = @"我是placeholder";
        placeHolder.textColor = [UIColor lightGrayColor];
        placeHolder.numberOfLines = 0;
        placeHolder.contentMode = UIViewContentModeTop;
        [self.textView addSubview:placeHolder];
    }
    
    #pragma mark - UITextViewDelegate
    - (void)textViewDidChange:(UITextView *)textView
    {
        if (!textView.text.length) {
        self.placeHolder.alpha = 1;
        } else {
            self.placeHolder.alpha = 0;
        }
    }
    
    //关闭键盘
    -(void) dismissKeyBoard{
        [self.textView resignFirstResponder];
    }
    
    @end
    

    同样地思路,我们也可以把作为占位文字的UILabel用UITextField或者UITextView来替换,同样可以实现带placeholder的textView,在次就不在详述。

    方法三

    1.自定义UITextView
    2.给UITextView添加placeholder和placeholderColor属性
    3.重写initWithFrame方法
    4.添加通知监听文字改变
    5.重写drawRect:方法
    6.重写相关属性的set方法

    特点:相比计较上面两种方法,这种方法可移植性、拓展性更好,这种方法,不仅乐意随意通过我们添加的placeholder属性设置默认文字,还可以通过我们添加的placeholderColor设置默认文字的颜色。今后,我们只需要写好这么一个自定义UITextView,就可以一劳永逸。

    #import <UIKit/UIKit.h>
    
    @interface WSPlaceholderTextView : UITextView
    /** 占位文字 */
    @property (nonatomic, copy) NSString *placeholder;
    /** 占位文字颜色 */
    @property (nonatomic, strong) UIColor *placeholderColor;
    @end
    
    #import "WSPlaceholderTextView.h"
    
    @implementation WSPlaceholderTextView
    
    - (instancetype)initWithFrame:(CGRect)frame
    {
        if (self = [super initWithFrame:frame]) {
            // 设置默认字体
            self.font = [UIFont systemFontOfSize:15];
            
            // 设置默认颜色
            self.placeholderColor = [UIColor grayColor];
            
            // 使用通知监听文字改变
            [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(textDidChange:) name:UITextViewTextDidChangeNotification object:self];
        }
        return self;
    }
    
    - (void)textDidChange:(NSNotification *)note
    {
        // 会重新调用drawRect:方法
        [self setNeedsDisplay];
    }
    
    - (void)dealloc
    {
        [[NSNotificationCenter defaultCenter] removeObserver:self];
    }
    
    /**
     * 每次调用drawRect:方法,都会将以前画的东西清除掉
     */
    - (void)drawRect:(CGRect)rect
    {
        // 如果有文字,就直接返回,不需要画占位文字
        if (self.hasText) return;
        
        // 属性
        NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
        attrs[NSFontAttributeName] = self.font;
        attrs[NSForegroundColorAttributeName] = self.placeholderColor;
        
        // 画文字
        rect.origin.x = 5;
        rect.origin.y = 8;
        rect.size.width -= 2 * rect.origin.x;
        [self.placeholder drawInRect:rect withAttributes:attrs];
    }
    
    - (void)layoutSubviews
    {
        [super layoutSubviews];
        
        [self setNeedsDisplay];
    }
    
    #pragma mark - setter
    - (void)setPlaceholder:(NSString *)placeholder
    {
        _placeholder = [placeholder copy];
        
        [self setNeedsDisplay];
    }
    
    - (void)setPlaceholderColor:(UIColor *)placeholderColor
    {
        _placeholderColor = placeholderColor;
        
        [self setNeedsDisplay];
    }
    
    - (void)setFont:(UIFont *)font
    {
        [super setFont:font];
        
        [self setNeedsDisplay];
    }
    
    - (void)setText:(NSString *)text
    {
        [super setText:text];
        
        [self setNeedsDisplay];
    }
    
    - (void)setAttributedText:(NSAttributedString *)attributedText
    {
        [super setAttributedText:attributedText];
        
        [self setNeedsDisplay];
    }
    @end
    

    方法四

    1.自定义UITextView
    2.给UITextView添加placeholder和placeholderColor属性
    3.重写initWithFrame方法
    4.重写drawRect:方法
    5.重写相关属性的set方法

    特点:这个方法的和方法三很相似,只是没有利用通知来监听文本的改变,需要配合textViewDidChanged:这个文本改变的代理方法使用。

    #import <UIKit/UIKit.h>
    
    @interface WSTextView : UITextView
    /** 占位文字 */
    @property (nonatomic,copy) NSString *placeholder;
    /** 占位文字颜色 */
    @property (nonatomic,strong) UIColor *placeholderColor;
    @end
    
    #import "WSTextView.h"
    
    @implementation WSTextView
    - (instancetype)initWithFrame:(CGRect)frame
    {
        if (self = [super initWithFrame:frame]) {
            self.font = [UIFont systemFontOfSize:15];
            self.placeholderColor = [UIColor lightGrayColor];
            self.placeholder = @"请输入内容";
        }
        return self;
    }
    
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect {
        // Drawing code
        NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
        attrs[NSFontAttributeName] = self.font;
        attrs[NSForegroundColorAttributeName] = self.placeholderColor;
        
        [self.placeholder drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height) withAttributes:attrs];
    }
    
    // 布局子控件的时候需要重绘
    - (void)layoutSubviews
    {
        [super layoutSubviews];
        [self setNeedsDisplay];
        
    }
    // 设置属性的时候需要重绘,所以需要重写相关属性的set方法
    - (void)setPlaceholder:(NSString *)placeholder
    {
        _placeholder = placeholder;
        [self setNeedsDisplay];
    }
    
    - (void)setPlaceholderColor:(UIColor *)placeholderColor
    {
        _placeholderColor = placeholderColor;
        [self setNeedsDisplay];
        
    }
    
    - (void)setFont:(UIFont *)font
    {
        [super setFont:font];
        [self setNeedsDisplay];
    }
    
    - (void)setText:(NSString *)text
    {
        [super setText:text];
        if (text.length) { // 因为是在文本改变的代理方法中判断是否显示placeholder,而通过代码设置text的方式又不会调用文本改变的代理方法,所以再此根据text是否不为空判断是否显示placeholder。
            self.placeholder = @"";
        }
        [self setNeedsDisplay];
    }
    
    - (void)setAttributedText:(NSAttributedString *)attributedText
    {
        [super setAttributedText:attributedText];
        if (attributedText.length) {
            self.placeholder = @"";
        }
        [self setNeedsDisplay];
    }
    @end
    
    // 应用的时候需要配合UITextView的文本改变的代理方法
    
    #import "ViewController.h"
    #import "WSTextView.h"
    
    @interface ViewController ()<UITextViewDelegate>
    
    // @property(nonatomic,weak) WSTextView *textView;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        WSTextView *textView = [[WSTextView alloc] initWithFrame:CGRectMake(10, 20, self.view.frame.size.width, 30)];
        textView.placeholder = @"ws";
        textView.delegate = self;
        [self.view addSubview:textView];
        // textView.text = @"试试会不会调用文本改变的代理方法"; // 不会调用文本改变的代理方法
        textView.attributedText = [[NSAttributedString alloc] initWithString:@"富文本"];
      
        // self.textView = textView;
    }
    
    #pragma mark - UITextViewDelegate
    - (void)textViewDidChange:(WSTextView *)textView // 此处取巧,把代理方法参数类型直接改成自定义的WSTextView类型,为了可以使用自定义的placeholder属性,省去了通过给控制器WSTextView类型属性这样一步。
    {
        if (textView.hasText) { // textView.text.length
            textView.placeholder = @"";
            
        } else {
            textView.placeholder = @"ws";
            
        }
    }
    @end
    

    方法五

    通过runtime,我们发现,UITextView内部有一个名为“_placeHolderLabel”的私有成员变量。大家知道,Objective-C没有绝对的私有变量,因为我们可以通过KVC来访问私有变量。

    特点:相对于上面的4种方法,这种方法更加取巧,虽然Apple官方没有给我们开发者提供类似于placeholder的属性,但是通过运行时,我们遍历出了一个placeHolderLabel的私有变量。这种方法简单易懂,代码量少,推荐大家使用这种方法。

    #import "ViewController.h"
    #import <objc/runtime.h>
    #import <objc/message.h>
    
    @interface ViewController ()
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    
    
      // 通过运行时,发现UITextView有一个叫做“_placeHolderLabel”的私有变量
        unsigned int count = 0;
        Ivar *ivars = class_copyIvarList([UITextView class], &count);
        
        for (int i = 0; i < count; i++) {
            Ivar ivar = ivars[i];
            const char *name = ivar_getName(ivar);
            NSString *objcName = [NSString stringWithUTF8String:name];
            NSLog(@"%d : %@",i,objcName);
        }
        
        [self setupTextView];
        
    }
    - (void)setupTextView
    {
        UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width, 100];
        [textView setBackgroundColor:[UIColor greenColor]];
        [self.view addSubview:textView];
        
        // _placeholderLabel
        UILabel *placeHolderLabel = [[UILabel alloc] init];
        placeHolderLabel.text = @"请输入内容";
        placeHolderLabel.numberOfLines = 0;
        placeHolderLabel.textColor = [UIColor lightGrayColor];
        [placeHolderLabel sizeToFit];
        [textView addSubview:placeHolderLabel];
    
        // same font
        textView.font = [UIFont systemFontOfSize:13.f];
        placeHolderLabel.font = [UIFont systemFontOfSize:13.f];
    
        [textView setValue:placeHolderLabel forKey:@"_placeholderLabel"];
    }
    
    @end
    

    文/VV木公子(简书作者)
    PS:如非特别说明,所有文章均为原创作品,著作权归作者所有,转载转载请联系作者获得授权,并注明出处,所有打赏均归本人所有!

    如果您是iOS开发者,或者对本篇文章感兴趣,请关注本人,后续会更新更多相关文章!敬请期待!

    相关文章

      网友评论

      • 張無忌:apple提供一个属性要死啊:flushed:
      • 吴德馨:可以说方法五是非常无耻了
      • 井空烀地瓜:方法五很好用哈
      • DY_340f:你好,按照方法5添加后,正常编辑textview,placeholder没有消失,请问这是什么原因呢?
      • CloudL:收藏了,刚好解决我的问题,谢谢楼主
      • 小屋新:方法三不能编辑呢
      • 肾得朕心:最后一个8.3以下有问题
      • 被风吹乱的思念:说一下第二种方法,第二种方法输入很多文本的时候,一直按退格键去除文本,过几秒退格键的速度就变快,等以这种快的速度的删除了所有文本的时候,提示文本不再显示。(有点啰嗦,语言组织太难了)
        大牛油果:@被风吹傻的娇娇 加什么判断呢,都是删除啊
        被风吹乱的思念:@大牛油果 在textViewDidChange这个代理里面判断就好了
        大牛油果:这个问题你解决了吗
      • 麦哲文:过来查查有没有私有placeholder,还真有,拿来主义,谢了
      • 0d968422513d:最后一个方法在8.0的系统上会崩溃,因为UITextView没有_placeholderLabel
      • 觅渡丶:测试过在最低支持那个系统版本么?实测iOS8上会崩溃 方法五
        麦哲文:刚抄上就崩溃了...
        VV木公子:使用的时候建议使用运行时遍历下那个私有属性,如果不存在就不要用方法5
      • __weak:大神牛逼啊
      • 0o冻僵的企鹅o0:有个问题想问一下,如果插入了图片附件,以上方法的placeholder文字都会盖在图片上,你有解决办法吗?
      • lazyzhang:TextView 可以直接在 xib 里输入placeholder的属性值了
      • Freedom_fly:第二种方法里面,作为placeholder的labe或者textfield不应该放在textview的下面吗 它是作为一个背景来显示的
      • SmallflyBlog:第三种方法,为什么 rect.origin.x = 0 的时候,绘制的字会在光标的左边呀?
      • slimsallen:可以 很强势
      • 叶舞清风: self.backLabel.hidden = YES;
        可以直接设置label的隐藏属性
      • 叶舞清风:第二个方法的问题不显示textview文字,已被label遮挡
      • 彩虹丶直至黑白:厉害了我的哥!
      • 你说明哥我说哎:最后一个方法是个好方法,不过在iOS8.0运行时报错,[<UITextView 0x157962e00> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key _placeholderLabel.
        iOS8.0中UITextView没有_placeholderLabel,这点需要注意一下。
        VV木公子:可以用运行时看下那个私有属性是换了名字还是不在了,再针对性的解决,使用私有属性是件危险的事情,建议大家做好检查工作,避免崩溃
        RobinZhao:确切的说是低于iOS8.3的设备都没有_placeholderLabel,建议用文中的第三种方法
        缺一门:8.1系统也不行:sob:
      • 搜捕儿:第五种方法很方便, 谢谢博主
      • Simonist:你好。问下,TextView下面显示的“最多输入五百字”,是用一个Label盖到TextView上面的嘛?如果是这样,TextView输入到最下面的时候,怎么保证和这个Label不重叠?
        VV木公子:可以用label ,也可以不用label ,如果担心重叠问题,可以通过监听文本变化来展示或者隐藏label
      • JMong:LZ,能留下QQ吗,我按照你的,结果_placeholderLabel显示在了textView的偏底部了
        lanmoyingsheng:@偶是猛宝宝 TextView和placeholderLabel的字体要一样大。:smiley:
        JMong:@VV木公子 第五个方法,不过已经解决了,添加了self.automaticallyAdjustsScrollViewInsets = NO;
        VV木公子:@偶是猛宝宝 你采取的是哪个方法
      • 琪一可:谢谢 帮助到我了 :heart:
      • 小脸书1:挺好 赞一个
      • VickyLanLan:不错不错!学习了!
      • 2a392233fc62:真的很不错,有学了知识。
      • 拉风的胖鱼:请问下,如何添加类似textField设置左图片
        丶生如夏花:@farewellyw textField里面含有leftView或者rightView的属性, 设置对应的图片后打开leftViewMode或者rightViewMode为UITextFieldViewModeAlways就可以使用了。
        这样设置文字和图片是紧凑的, 需要增加间隙的话, 重写leftViewRectForBounds、
        editingRectForBounds、textRectForBounds,在起始点的x增加你需要产生的间隙位移量就可以了。
      • George哥:直接看图层结构就知道有那个Label了,不用运行时那么麻烦吧?
      • hauibojek:最后一个确实存在楼上说的问题,楼主有时间解答一下 :smiley:
        __weak:@VV木公子 就是说到底能不能用啊??我现在想用第五种方法,又怕到时上架有影响
        VV木公子:刚刚查看了2016审核规则,里面有一句:使用非公开API的程序将会被拒绝。 你可以参考一下
        醉雨清风:会被拒绝吗?
      • 天听云道:最后一个方法有问题,placeHolderLabel.text第一次显示是向上偏移的,输入内容之后删空才恢复正常,是什么原因呢?
        达若漠沙:@HUswIft 完美的解决我的问题!!:smile:
        天听云道:@HUswIft :+1: 没问题了,腻害。
        hauibojek:@天听云道 那个我试了下,保持textView 和 label 的font一致就正常了 :smile:
      • 闻道刘:你确定用私有方法上架的时候不会被拒了?:joy:
        VV木公子:@ericoda 注意还有一个只读属性
        闻道刘:@VV木公子 如此一来,我岂不是可以对任何类里面的任何属性进行修改?
        VV木公子:@ericoda 运行时,KVC
      • chenzhengxu:最后一个方法不错

      本文标题:史上最全的iOS之UITextView实现placeHolder

      本文链接:https://www.haomeiwen.com/subject/lgmdrttx.html