Just My Life & My Work

我們一定使用過通訊App,輸入框會隨著字數多換行而高度變大。四年前我寫過文章:動態框架 (Dynamic Frame),這次我要來講進階用法,就是邊打字邊算輸入框的高度:TextView 動態高度 (TextView Dynamic Height)

如上圖,我要打三元合一的緣由,從第一行開始,到「兩千年」的下一個字,就會計算兩行高度,此時需要實作TextView的Delegate,每打一字就會觸發:

-(BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text

就在裡頭就能即時運算高度。

想要讓使用者體驗變好,就這麼做吧~

/**
 Theme: TextView Dynamic Height
 IDE: Xcode 10
 Language: Objective C
 Date: 108/05/23
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

#pragma mark - UITextViewDelegate

-(BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text
{
    CGRect frame = textView.frame;
    float height;
    if ([text isEqual:@""]) {
        
        if (![textView.text isEqualToString:@""]) {
            
            height = [self heightForTextView:textView WithText:[textView.text substringToIndex:[textView.text length] - 1]];
            
        }
        else {
            
            height = [self heightForTextView:textView WithText:textView.text];
        }
    }
    else {
        
        height = [self heightForTextView:textView WithText:[NSString stringWithFormat:@"%@%@", textView.text, text]];
    }
    
    return YES;
}

- (float)heightForTextView:(UITextView *)textView WithText:(NSString *)strText
{
    CGSize constraint = CGSizeMake(textView.contentSize.width - kTitleTextViewFixedPadding, CGFLOAT_MAX);
    CGRect size = [strText boundingRectWithSize:constraint
                                        options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading)
                                     attributes:@{NSFontAttributeName:textView.font}
                                        context:nil];
    float textHeight = size.size.height + kTitleTextViewFixedPadding;
    return textHeight;
}

以上有處理三種輸入狀況:

  • 打字
  • 空字串
  • 消字

我後來發現算得不夠精準,於是我提供了kTitleTextViewFixedPadding來調整,盡可能做到盡善盡美:)~

參考:iOS版:如何優雅的讓的UITextView根據輸入文字實時改變高度

廣告

Comments on: "[iOS] TextView 動態高度 (TextView Dynamic Height)" (3)

  1. 這個臉變形也太好笑XD, 你貼code是用wordpress插件嗎? 插件wordpress都說要升級商業版才能裝囧

    Liked by 1 person

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: