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

Apink-朴初珑

产品需求：

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

思路：

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

自定义控件：

主要步骤如下

新建一个继承自UIView的控件CQTextView

在CQTextView上放一个UITextView作为输入控件

再在CQTextView上放一个UILabel作为显示placeholder的控件

输入控件随文本内容多少而改变高度

输入控件文本内容为空时展示placeholder的控件

代码说明

.h文件

#import

@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

后记：

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

注：评论里的buttonTouch大神提供了一种完美解决换行时未及时更新高度的方法，大家一定要看！