iOS开发——真·高度自适应的TextField

产品需求：

由于单行的输入栏无法展示完整的用户地址，现要求在原有功能的基础上进行改进：地址栏文本超过一行时，多行显示。

思路：

原来的地址输入栏就是个TextField,由于TextField只能展示一行，故必须换控件。原本的功能必须保证，故这个控件可以总结为：高度随文本内容增减而改变并且带placeholder的特殊TextField。具有输入功能的特殊TextField，当然TextView。

自定义控件：

主要步骤如下

• 新建一个继承自UIView的控件CQTextView
• 在CQTextView上放一个UITextView作为输入控件
• 再在CQTextView上放一个UILabel作为显示placeholder的控件
• 输入控件随文本内容多少而改变高度
• 输入控件文本内容为空时展示placeholder的控件

代码说明

• .h文件

#import <UIKit/UIKit.h>

@interface CQTextView : UIView

@property (nonatomic,copy) NSString *placeholder;
@property (nonatomic,strong) UIFont *font;

@end

• .m文件

#import "CQTextView.h"

@interface CQTextView (){
    /** 记录初始化时的height,textview */
    CGFloat _initHeight;
}

@property (nonatomic,strong) UITextView *textView;
/** placeholder的label */
@property (nonatomic,strong) UILabel *placeholderLabel;

@end

@implementation CQTextView

/** 重写初始化方法 */
- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        // 记录初始高度
        _initHeight = frame.size.height;
        self.clipsToBounds = NO;

        // 添加textView
        self.textView = [[UITextView alloc]initWithFrame:self.bounds];
        [self addSubview:self.textView];
        self.textView.delegate = (id)self;
        self.textView.backgroundColor = [UIColor clearColor];

        // 添加placeholderLabel
        self.placeholderLabel = [[UILabel alloc]initWithFrame:CGRectMake(3, 0, frame.size.width - 3, frame.size.height)];
        [self addSubview:self.placeholderLabel];
        self.placeholderLabel.backgroundColor = [UIColor clearColor];
        self.placeholderLabel.textColor = [UIColor lightGrayColor];
    }
    return self;
}

// 赋值placeholder
- (void)setPlaceholder:(NSString *)placeholder{
    _placeholder = placeholder;
    self.placeholderLabel.text = placeholder;
    [self.placeholderLabel sizeToFit];
    self.placeholderLabel.center = self.textView.center;
}

// 赋值font
- (void)setFont:(UIFont *)font{
    self.textView.font = self.placeholderLabel.font = font;
    // 重新调整placeholderLabel的大小
    [self.placeholderLabel sizeToFit];
    self.placeholderLabel.center = self.textView.center;
}

/** textView文本内容改变时回调 */
- (void)textViewDidChange:(UITextView *)textView{
    // 计算高度
    CGSize size = CGSizeMake(self.textView.frame.size.width, CGFLOAT_MAX);
    NSDictionary *dic = [NSDictionary dictionaryWithObjectsAndKeys:self.textView.font,NSFontAttributeName, nil];
    CGFloat curheight = [textView.text boundingRectWithSize:size
                                                    options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
                                                 attributes:dic
                                                    context:nil].size.height;
    // 如果高度小于初始化时的高度，则不赋值(仍采用最初的高度)
    if (curheight < _initHeight) {
        self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, _initHeight);
        self.textView.frame = CGRectMake(self.textView.frame.origin.x, self.textView.frame.origin.y, self.textView.frame.size.width, _initHeight);
    }else{
        // 重新给frame赋值(改变高度)
        self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, curheight+20);
        self.textView.frame = CGRectMake(self.textView.frame.origin.x, self.textView.frame.origin.y, self.textView.frame.size.width, curheight+20);
    }

    // 如果文本为空，显示placeholder
    if (textView.text.length == 0) {
        self.placeholderLabel.hidden = NO;
        self.placeholderLabel.center = self.textView.center;
    }else{
        self.placeholderLabel.hidden = YES;
    }
}

@end

• 使用

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    CQTextView *textView = [[CQTextView alloc]initWithFrame:CGRectMake(90, 90, 100, 30)];
    [self.view addSubview:textView];
    textView.backgroundColor = [UIColor redColor];
    textView.font = [UIFont systemFontOfSize:20];
    textView.placeholder = @"ss";
}

效果图

效果图.gif

后记：

建议大家都掌握这种控件的封装方法，因为在实际项目中的使用还是挺频繁的，比如我们常用的微信，它的输入框就类似于这种。

文／无夜之星辰（简书作者）
原文链接：http://www.jianshu.com/p/58267727ba5f
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。