上周遇到一个小的技术点，产品设计如下，要求：点击输入的时候前面的标题不消失，但是占位符部分的文字需要消失。而且显示的文字内容以及显示的顺序都是取决于网络请求返回数据。
大体思路是放了几张白底阴影边框的图片拉伸一下，作为背景，上面几行单行的输入行好处理，前面标题用label，后面放个textField，就可以了，代码如下：
- (void)addtextField:(UITextField **)tField frame:(CGRect)frame andPlaceHolder:(NSString *)placeholder andFontSize:(CGFloat)fontSize andTextColor:(UIColor *)textColor inView:(UIView *)superView appendPlaceHolder:(NSString *)appendPlaceHolder
{
UIImage *image = [[UIImage imageNamed:@"NTalkerUIKitResource.bundle/ntalker_leaveMsgA.png"] stretchableImageWithLeftCapWidth:30 topCapHeight:30];
UIImageView *backgroundImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, frame.origin.y, frame.size.width, frame.size.height + 5)];
backgroundImageView.image = image;
[self.view addSubview:backgroundImageView];
//titleLabel
UILabel *titleLabel = [[UILabel alloc] init];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.textColor = [UIColor blackColor];
titleLabel.text = placeholder;
titleLabel.font = [UIFont systemFontOfSize:14*autoSizeScaleY];
CGSize titleTextSize = [titleLabel.text sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:titleLabel.font, NSFontAttributeName,nil]];
CGFloat titleLabelContentWidth = titleTextSize.width;
if (titleLabelContentWidth >= 150.0) {
titleLabelContentWidth = 150;
}
titleLabel.frame = CGRectMake(0,0, titleLabelContentWidth, frame.size.height);
[backgroundImageView addSubview:titleLabel];
//输入框
UITextField *textField = [[UITextField alloc] initWithFrame:frame];
UIView *zeroViewName = [[UIView alloc] initWithFrame:CGRectMake(0,0,8+titleLabel.frame.size.width,CGRectGetHeight(frame))];
textField.leftView = zeroViewName;
textField.leftViewMode = UITextFieldViewModeAlways;
textField.delegate = self;
if (appendPlaceHolder && appendPlaceHolder.length > 0) {
NSMutableAttributedString *behindPlaceHolder = [[NSMutableAttributedString alloc] initWithString:appendPlaceHolder];
[behindPlaceHolder addAttributes:@{NSForegroundColorAttributeName : [UIColor lightGrayColor],
NSFontAttributeName : [UIFont systemFontOfSize:fontSize - 1.0]}
range:NSMakeRange(0, behindPlaceHolder.length)];
textField.attributedPlaceholder = behindPlaceHolder;
}
textField.font = [UIFont systemFontOfSize:fontSize];
textField.textColor = textColor;
textField.returnKeyType = UIReturnKeyDone;
[superView addSubview:textField];
textField.layer.borderColor = [UIColor clearColor].CGColor;
if (tField) {
*tField = textField;
}
最下面的留言输入是多行，因此选择用textView,但是有个问题，如何让第一行起始输入从标题的后面开始，且标题不消失，而且placeHold文字自动消失。输入的时候是这样的：
我做的处理是：图片上放两个label,一个显示title,一个显示placeHold文字，当开始输入的时候textView做首行缩进处理，刚好缩进的距离是title宽度的距离，同事将placeHold那个label隐藏掉。代码如下：
- (void)configureTextView:(CGRect)frame placeHolder:(NSString *)placeHolder isRequired:(NSString *)isRequired
{
UIImage *image = [[UIImage imageNamed:@"NTalkerUIKitResource.bundle/ntalker_leaveMsgB.png"] stretchableImageWithLeftCapWidth:30 topCapHeight:30];
UIImageView *backgroundImageView = [[UIImageView alloc] initWithFrame:frame];
backgroundImageView.image = image;
[self.view addSubview:backgroundImageView];
CGRect textFrame = CGRectMake(frame.origin.x + 3.5, frame.origin.y, CGRectGetWidth(frame) - 7, CGRectGetHeight(frame) - 5);
//设置TitleLabel
UILabel *titleLabel = [[UILabel alloc] init];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.textColor = [UIColor blackColor];
titleLabel.text = placeHolder;
titleLabel.tag = 2106;
titleLabel.font = [UIFont systemFontOfSize:14*autoSizeScaleY];
CGSize titleTextSize = [titleLabel.text sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:titleLabel.font, NSFontAttributeName,nil]];
CGFloat titleLabelContentWidth = titleTextSize.width;
if (titleLabelContentWidth >= 150.0) {
titleLabelContentWidth = 150;
}
titleLabel.frame = CGRectMake(frame.origin.x,frame.origin.y+3.5,titleLabelContentWidth,14*autoSizeScaleY+7.0);
[self.view addSubview:titleLabel];
self.startLocation = titleLabelContentWidth+2.5;
self.titleLabel = titleLabel;
//占位提示
UILabel *placeHoldLabel = [[UILabel alloc] init];
placeHoldLabel.backgroundColor = [UIColor clearColor];
placeHoldLabel.textColor = [UIColor lightGrayColor];
NSString * behindPlaceHolder = [NSString stringWithFormat:@" %@",NSLocalizedStringFromTable(@"PlaceholderForLeaveMessage", @"XNLocalizable", nil)];
if (isRequired && [isRequired isEqualToString:@"1"]) {
placeHoldLabel.text = behindPlaceHolder?:@"";
}
placeHoldLabel.tag = 2107;
placeHoldLabel.font = [UIFont systemFontOfSize:13*autoSizeScaleY];
CGSize placeHoldTextSize = [placeHoldLabel.text sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:placeHoldLabel.font, NSFontAttributeName,nil]];
CGFloat placeHoldLabelContentWidth = placeHoldTextSize.width;
CGFloat placeHoldMaxContentWidth = frame.size.width -CGRectGetMaxX(titleLabel.frame)-3.5;
if (placeHoldLabelContentWidth >= placeHoldMaxContentWidth) {
placeHoldLabelContentWidth = placeHoldMaxContentWidth;
}
placeHoldLabel.frame = CGRectMake(CGRectGetMaxX(titleLabel.frame)+3.5,frame.origin.y+3.5,placeHoldLabelContentWidth,titleLabel.frame.size.height);
self.placeHoldLabel = placeHoldLabel;
[self.view addSubview:placeHoldLabel];
// 添加留言输入框
UITextView *textView = [[UITextView alloc] initWithFrame:textFrame];
textView.backgroundColor = [UIColor clearColor];
textView.delegate = self;
textView.tag = 2101;
textView.returnKeyType = UIReturnKeyDone;
textView.textColor = [UIColor blackColor];
textView.font = [UIFont systemFontOfSize:14 * autoSizeScaleY];
textView.layer.borderColor = [UIColor clearColor].CGColor;
[self.view addSubview:textView];
}
#pragma mark ==================UITextViewDelegate==============
- (BOOL)textViewShouldBeginEditing:(UITextView *)textView
{
if (textView.tag != 2101) {
return NO;
}
//不加下面这行，首次弹起键盘时候，光标会跑到最前面，开始输入才首行缩进，加上就可以解决这个问题了
if (textView.tag==2101&&!textView.text.length) {
textView.text = @" ";
}
//首行缩进
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.lineSpacing = 3; //行间距
CGFloat titleWidth = self.titleLabel.frame.size.width-2.5;
paragraphStyle.firstLineHeadIndent = titleWidth; /**首行缩进宽度*/
paragraphStyle.alignment = NSTextAlignmentJustified;
NSDictionary *attributes = @{
NSFontAttributeName:[UIFont systemFontOfSize:13*autoSizeScaleY],
NSParagraphStyleAttributeName:paragraphStyle
};
textView.attributedText = [[NSAttributedString alloc] initWithString:textView.text attributes:attributes];
return YES;
}
- (void)textViewDidChange:(UITextView *)textView
{
#pragma 文本框默认文字
if (textView.tag == 2101&&textView.text.length == 0) {
self.placeHoldLabel.hidden = NO;
}else{
self.placeHoldLabel.hidden = YES;
}
}
