UITextView实现placeHold提示、根据输入内容动态

作者: lele8446 | 来源:发表于2016-07-07 14:46 被阅读339次

UITextView实现placeHold提示、根据输入内容动态
TextView自适应高度
textViewDidChange与中文输入
iOS UITextView根据内容自适应高度
Android控件之——EditText
UITextView随着输入动态调整高度
43、[ iOS ] UITextView实现placeHold
listpopwindow实现EditText下拉框显示列表
iOS UITextView 添加提示水印
UITextView 光标定位定位

项目中遇到的需求，需要自定义UITextView，实现以下功能：

添加placeHold提示，类似UITextField的placeholder默认提示，并根据输入文字自动提示；
UITextView高度可根据输入内容动态调整，当超出maxHeight时，高度不再增加；
输入时可插入不可编辑的自定义文本（如＃主题＃，@人名），类似微信输入时候的@人名，插入的文本要有不同颜色显示，并且插入文本不可编辑，删除时候则统一删除。

简单效果如图所示

效果图

实现细节

自定义CJUITextView继承自UITextView，并且自身实现了UITextViewDelegate的代理，同时新增CJUITextViewDelegate代理方法：

@protocol CJUITextViewDelegate <NSObject>
@optional
/**
*  CJUITextView输入了done的回调
*  一般在self.textView.returnKeyType = UIReturnKeyDone;时执行该回调
*
*  @param textView
*
*  @return
*/
- (void)CJUITextViewEnterDone:(CJUITextView *)textView;

/**
 *  CJUITextView自动改变高度
 *
 *  @param textView
 *  @param frame     改变高度后的size
 */
 - (void)CJUITextView:(CJUITextView *)textView heightChanged:(CGRect)frame;

 - (BOOL)textViewShouldBeginEditing:(CJUITextView *)textView;
 - (BOOL)textViewShouldEndEditing:(CJUITextView *)textView;

 - (void)textViewDidBeginEditing:(CJUITextView *)textView;
 - (void)textViewDidEndEditing:(CJUITextView *)textView;

 - (BOOL)textView:(CJUITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text;
 - (void)textViewDidChange:(CJUITextView *)textView;

 - (void)textViewDidChangeSelection:(CJUITextView *)textView;

 - (BOOL)textView:(CJUITextView *)textView shouldInteractWithURL:(NSURL *)URL inRange:(NSRange)characterRange NS_AVAILABLE_IOS(7_0);
 - (BOOL)textView:(CJUITextView *)textView shouldInteractWithTextAttachment:(NSTextAttachment *)textAttachment inRange:(NSRange)characterRange NS_AVAILABLE_IOS(7_0);

 @end

从方法命名可以看出，除了前两个方法，后面的代理方法都是跟UITextViewDelegate的代理一样的。

1. placeHold提示

添加UILabel（placeHoldLabel）到UITextView上，设置默认字体、颜色等属性，然后在drawRect:方法中调整其frame值大小。同时在textViewDidChangeSelection:代理回调中判断placeHoldLabel的hidden值，并根据当前UITextView高度，调整placeHoldLabel的大小。

与placeHold提示相关的属性：

 @property (nonatomic, copy, setter=setPlaceHoldString:)   NSString *placeHoldString;
 @property (nonatomic, strong, setter=setPlaceHoldTextFont:) UIFont *placeHoldTextFont;
 @property (nonatomic, strong, setter=setPlaceHoldTextColor:) UIColor *placeHoldTextColor;

2. UITextView高度动态调整

设置属性

/**
 *  是否根据输入内容自动调整高度(default NO)
 */
@property (nonatomic, assign, setter=setAutoLayoutHeight:) BOOL autoLayoutHeight;
/**
 *  autoLayoutHeight为YES时的最大高度(default MAXFLOAT)
 */
@property (nonatomic, assign) CGFloat maxHeight;

有个注意点，当开启autoLayoutHeight后，实现中默认将输入的自动联想功能关闭了self.autocorrectionType = UITextAutocorrectionTypeNo;因为用户如果是选择输入了联想关键词时，UITextView在动态调整高度的同时会出现输入光标跳动的问题，这里暂时只能如此处理。
在textViewDidChangeSelection:回调中执行[self changeSize];动态调整高度：
- (void)changeSize {
CGRect oriFrame = self.frame;
CGSize sizeToFit = [self sizeThatFits:CGSizeMake(oriFrame.size.width, MAXFLOAT)];
if (sizeToFit.height < self.defaultFrame.size.height) {
sizeToFit.height = self.defaultFrame.size.height;
}
if (oriFrame.size.height != sizeToFit.height && sizeToFit.height <= self.maxHeight) {
oriFrame.size.height = sizeToFit.height;
self.frame = oriFrame;

        if (self.myDelegate && [self.myDelegate respondsToSelector:@selector(CJUITextView:heightChanged:)]) {
            [self.myDelegate CJUITextView:self heightChanged:oriFrame];
        }
    }
    [self scrollRangeToVisible:NSMakeRange(self.text.length, 0)];
}

最后一行代码[self scrollRangeToVisible:NSMakeRange(self.text.length, 0)];是为了保证调整高度后，光标始终在输入文本的后面。

3. 插入自定义文本

/**
 *  插入文本的颜色(default self.textColor)
 */
@property (nonatomic, strong, getter=getSpecialTextColor) UIColor *specialTextColor;


/**
 *  在指定位置插入字符，并返回插入字符后的SelectedRange值
 *
 *  @param specialText    要插入的字符
 *  @param selectedRange  插入位置
 *  @param attributedText 插入前的文本
 *
 *  @return 插入字符后的光标位置
 */
- (NSRange)insterSpecialTextAndGetSelectedRange:(NSAttributedString *)specialText
                              selectedRange:(NSRange)selectedRange
                                       text:(NSAttributedString *)attributedText;

调用示例：

//插入文本的颜色
self.textView.specialTextColor = [UIColor redColor];

NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:@"#插入文本#"];
[str addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:16] range:NSMakeRange(0, str.length)];
[self.textView insterSpecialTextAndGetSelectedRange:str selectedRange:self.textView.selectedRange text:self.textView.attributedText];

self. specialTextColor设置所有插入文本的颜色，当然也可以在-insterSpecialTextAndGetSelectedRange: selectedRange: text:方法中单独对插入文本进行设置。
-insterSpecialTextAndGetSelectedRange: selectedRange: text:方法的实现逻辑如下：

首先读取插入文本的Attribute属性，并设置字体大小与文本颜色，同时增加一个自定义属性SPECIAL_TEXT_NUM（用来区分插入文本的不同颜色显示，以及删除插入文本）
```
//为插入文本增加SPECIAL_TEXT_NUM索引
self.specialTextNum ++;
[specialTextAttStr addAttribute:SPECIAL_TEXT_NUM value:@(self.specialTextNum) range:specialRange];
```

self.specialTextNum初始值为1，并根据插入特殊文本的次数自增长。

判断插入文本的位置selectedRange，根据插入位置将插入前的文本做截取，最后和插入文本拼接在一起。

4. 删除自定义文本，则需要同时删除

在-textView: shouldChangeTextInRange: replacementText:回调中判断，通过枚举NSAttributedString的自定义属性SPECIAL_TEXT_NUM，如果判断到需要删除的文本中包含SPECIAL_TEXT_NUM属性，则将所有SPECIAL_TEXT_NUM的值相等的文本都删除，因为在insterSpecialText的时候已经保证了插入文本的每个字符都会有相同的SPECIAL_TEXT_NUM属性。

if ([text isEqualToString:@""]) {//输入了删除
    __block BOOL deleteSpecial = NO;
    NSRange oldRange = textView.selectedRange;
    
    [textView.attributedText enumerateAttribute:SPECIAL_TEXT_NUM inRange:NSMakeRange(0, textView.selectedRange.location) options:NSAttributedStringEnumerationReverse usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) {
        NSRange deleteRange = NSMakeRange(textView.selectedRange.location-1, 0) ;
        if (attrs != nil && attrs != 0) {
            if (deleteRange.location > range.location && deleteRange.location < (range.location+range.length)) {
                NSMutableAttributedString *textAttStr = [[NSMutableAttributedString alloc] initWithAttributedString:textView.attributedText];
                [textAttStr deleteCharactersInRange:range];
                textView.attributedText = textAttStr;
                deleteSpecial = YES;
                textView.selectedRange = NSMakeRange(oldRange.location-range.length, 0);
                *stop = YES;
            }
        }
    }];
    return !deleteSpecial;
}

5. 保证插入文本不可编辑

这里不可编辑的意思是：文本插入后不能删减自定义文本的文字或者在中间增加文字。
那么只需要保证光标不能移动到插入文本之中就可以了。
借助runtime，发现光标移动的时候会触发selectedTextRange属性的改变，这就好办了，KVO注册对selectedTextRange属性的监测，在KVO的监测方法中对光标位置进行处理
- (void)observeValueForKeyPath:(NSString) path
ofObject:(id)object
change:(NSDictionary)change
context:(void*)context
{
if (context == TextViewObserverSelectedTextRange && [path isEqual:@"selectedTextRange"]){

        UITextRange *newContentStr = [change objectForKey:@"new"];
        UITextRange *oldContentStr = [change objectForKey:@"old"];
        NSRange newRange = [self selectedRange:self selectTextRange:newContentStr];
        NSRange oldRange = [self selectedRange:self selectTextRange:oldContentStr];
        if (newRange.location != oldRange.location) {
            //判断光标移动，光标不能处在特殊文本内
            [self.attributedText enumerateAttribute:SPECIAL_TEXT_NUM inRange:NSMakeRange(0, self.attributedText.length) options:NSAttributedStringEnumerationReverse usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) {
            if (attrs != nil && attrs != 0) {
                if (newRange.location > range.location && newRange.location < (range.location+range.length)) {
                    //光标距离左边界的值
                    NSUInteger leftValue = newRange.location - range.location;
                    //光标距离右边界的值
                    NSUInteger rightValue = range.location+range.length - newRange.location;
                    if (leftValue >= rightValue) {
                        self.selectedRange = NSMakeRange(self.selectedRange.location-leftValue, 0);
                    }else{
                        self.selectedRange = NSMakeRange(self.selectedRange.location+rightValue, 0);
                    }
                }
            }
            
        }];
    }
  }
  self.typingAttributes = self.defaultAttributes;
}

可能你注意到了最后一行代码self.typingAttributes = self.defaultAttributes;这是用来重设UITextView的默认输入属性的。因为当你插入了一段不同颜色的特殊文本，或者将光标移动到了特殊文本的后面，继续输入时文字的颜色会跟特殊文本的颜色一样，很明显这不是我们想要的。所以有好几个地方需要重设typingAttributes的值，分别在：-textViewDidChangeSelection: -textView: shouldChangeTextInRange:replacementText: -observeValueForKeyPath:ofObject:change:context:这三个方法中。而输入的默认属性self.defaultAttributes是由懒加载实现的：
- (NSMutableDictionary *)defaultAttributes {
if (!_defaultAttributes) {
_defaultAttributes = [NSMutableDictionary dictionary];
[_defaultAttributes setObject:self.font forKey:NSFontAttributeName];
if (!self.textColor || self.textColor == nil) {
self.textColor = [UIColor blackColor];
}
[_defaultAttributes setObject:self.textColor forKey:NSForegroundColorAttributeName];
}
return _defaultAttributes;
}

最后奉上GitHub源码地址TextViewDemo，另外该项目已集成cocopads依赖，引用方法：

platform :ios, '8.0'
pod 'CJTextView', '~> 1.0.1'

欢迎支持本人博客，欢迎star GitHub源码。。。不要脸的打广告😁😂
有问题请留言～

UITextView实现placeHold提示、根据输入内容动态
项目中遇到的需求，需要自定义UITextView，实现以下功能：添加placeHold提示，类似UITextFi...
TextView自适应高度
处理输入框 UITextView 高度跟随输入内容动态变化问题。注意：根据UITextView字体大小设置te...
textViewDidChange与中文输入
使用场景,使用UITextview输入中文,切输入框能够根据输入内容进行动态的高度改变,(或者输入框的内容需要设置...
iOS UITextView根据内容自适应高度
UITextView作为内容文本输入区域，有的时候我们需要根据内容动态改变文本区域的高度，效果如下:
Android控件之——EditText
显示提示文字属性：hint用法：hint="输入你想要输入的内容"实例修改提示文字的大小代码中动态修改实现
UITextView随着输入动态调整高度
UITextView随着输入动态调整高度
43、[ iOS ] UITextView实现placeHold
listpopwindow实现EditText下拉框显示列表
1月23日更新：博主已实现提示词动态刷新（根据用户输入的关键词，litpopwindow显示关联提示词），可参考利...
iOS UITextView 添加提示水印
实现UITextView和UITextField相同效果的水印提示，可根据自己要求更改 1、定义textview的...
UITextView 光标定位定位
UITextView根据需求实现UITextField的placeholder效果，我通过添加默认提示文字并修改文...

网友评论

zero_zql:您好，当文本框输入的高度为固定是，textview 的内容超过了高度，这时滑动到顶部位置编辑文字，光标的位置会错位，文字也会滚动
zero_zql:@lele8446 是的，当文本超过了textview的高度，这时滑动到第一行文本内容时，点击文本在第一行插入文字，这时键盘输入文本，文本内容会自动的向下滚动，我已经用了你最新的发现问题还是存在，求指导原因，我开始以为是由于self.layoutManager.allowsNonContiguousLayout = NO 设置导致的，结果看你里面已经写了
lele8446:@zero_zql 是contentsize高度大于textview高度时，滑动到顶部编辑会发生光标错乱的情况么？
你pod 'CJTextView', '~> 1.0.0'最新版本看看，已经解决了
zero_zql:我看到你的自定义textview中 self.layoutManager.allowsNonContiguousLayout = NO; 改方法已经设置为NO了，不知道为何还是会滑动文字

UITextView实现placeHold提示、根据输入内容动态

实现细节

1. placeHold提示

2. UITextView高度动态调整

3. 插入自定义文本

4. 删除自定义文本，则需要同时删除

5. 保证插入文本不可编辑

相关文章

UITextView实现placeHold提示、根据输入内容动态

TextView自适应高度

textViewDidChange与中文输入

iOS UITextView根据内容自适应高度

Android控件之——EditText

UITextView随着输入动态调整高度

43、[ iOS ] UITextView实现placeHold

listpopwindow实现EditText下拉框显示列表

iOS UITextView 添加提示水印

UITextView 光标定位定位

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS开发经验