[SwiftUI-기초] 수직 확장 되는 텍스트 필드, TextField, TextEditor

상황 설명

TextField에 많은 문자열이 추가되면 수평 방향으로 화면이 늘어나는데 그러지말고 최대 3개의 줄이 보이는 정도까지 수직으로 확장

3줄 이상 늘어나면 높이는 고정되고 줄바꿈을 하기

 

해결 방법

iOS 16 이상

제공되는 TextField API 중에 axis와 .lineLimit()을 이용

TextField("", text: $textFieldContent, axis: .vertical)
    .lineLimit(...3)

• .lineLimit(range): 최소 줄부터 최대 보여줄 줄 수를 표시
  • ex) .lineLimit(2…3): 최소 2줄 크기 영역부터 최대 3줄 크기 영역 보여줌
  • .lineLimit(…3): 최소 1줄 크기 영역부터 최대 3줄 크기 영역 보여줌

iOS 16 미만

높이를 직접 계산해줘서 보여줄 화면의 근사 높이를 지정

/// ~ body
TextEditor(text: $textFieldContent)
    .frame(maxHeight: min(58, calculateLineHeight(textFieldContent)))

func calculateLineHeight(_ text: String) -> CGFloat {
        // 한 줄에 들어가는 문자 수
        /// 화면 보면서 임의 지정
    let onelineCharactorCount = 28
    // 줄의 수
    let numberOfLine = CGFloat((text.count / onelineCharactorCount) + 1)
    // 화면 보면서 임의 지정
    let heightByLine = 35.0
    // 줄 수 * 줄 당 높이
    return numberOfLine * heightByLine
}

• 화면상 한 줄에 28글자 들어감 (각자 상황에 맞춰 조정)
• 한 줄 높이를 대략 35.0으로 설정 (각자 상황에 맞춰 조정)
• 화면의 높이를 최대 58만큼 지정하고 그보다 낮을 땐 줄 수만큼 보여줌(각자 상황에 맞춰 조정)
• 좀 매끄럽지 못한 느낌이 듦

 

전체 코드

https://gist.github.com/Damagucci-Juice/899fb44a5ddcceb66a14563efc6ad42f

참조

• 텍스트필드 높이를 수직확장하는 방법 ios 15

https://stackoverflow.com/questions/69002861/controlling-size-of-texteditor-in-swiftui